WCAG 2 Requirements

• Guideline 1.1 - Text Alternatives
• Guideline 1.3 - Adaptable
• Guideline 2.1 - Keyboard Accessible
• Guideline 3.2 - Predictable
• Guideline 3.3 - Input Assistance
• Guideline 4.1 - Compatible

Basic Considerations

• Progressive enhancement - build scripts on top of a working structure
• Don't break the code - do not let scripts break the working structure
• Design for your users - consider the expectations of the actual users
• Device independence - design events that are independant of devices
• Multimodal interaction - design events that can be used differently
• Avoid proprietary features - ensure compatibility with the standards

Rich Applications

Accessible Rich Internet Applications (WAI-ARIA):

• Add missing semantics to markup code
• Identify components, areas, and more
• Define the behaviour and interaction
• Provide bridge to system accessibility

Example: Missing Semantics

What is the semantic meaning of the following code?

<div>
  <div>Veggies
    <div>
      <div>Green
        <div>
          <div>Asparagus</div>
          <div>Kale</div>
          <div>Leafy
            <div>
              <div>Lettuce</div>
              <div>Kale</div>
              <div>Spinach</div>
              <div>Chard</div>
            </div>
          </div>
          <div>Green beans</div>
        </div>
      </div>
      <div>Legumes</div>
      <div>Yellow
        <div>
          <div>Bell peppers</div>
          <div>Squash</div>
        </div>
      </div>
    </div>
  </div>
</div>

A Tree-View

The previous code visually represents a Tree-View:

Solution: WAI-ARIA

Accessible Rich Internet Applications (WAI-ARIA) provides these semantics:

<div role="wairole:tree">
  <div role="wairole:treeitem">Veggies
    <div role="wairole:group">
      <div role="wairole:treeitem">Green
        <div role="wairole:group">
          <div role="wairole:treeitem">Asparagus</div>
          <div role="wairole:treeitem">Kale</div>
          <div role="wairole:treeitem">Leafy
            <div role="wairole:group">
              <div role="wairole:treeitem">Lettuce</div>
              <div role="wairole:treeitem">Kale</div>
              <div role="wairole:treeitem">Spinach</div>
              <div role="wairole:treeitem">Chard</div>
            </div>
          </div>
          <div role="wairole:treeitem">Green beans</div>
        </div>
      </div>
      <div role="wairole:treeitem">Legumes</div>
      <div role="wairole:treeitem">Yellow
        <div role="wairole:group">
          <div role="wairole:treeitem">Bell peppers</div>
          <div role="wairole:treeitem">Squash</div>
        </div>
      </div>
    </div>
  </div>
</div>

Questions?

Quick clarification questions welcome now.
Next: Other Considerations.