Documents or User Interfaces?

The "Web 2.0" presents a subtle shift from static document paradigms to interactive user interfaces that include:

custom widgets
run-time events
dynamic content

Accessibility Challenges

For people with disabilities using assistive technologies, this introduces new accessibility challenges:

user agents do not recognize widgets programatically
assistive technologies are not notified about events
it is unclear how to communicate changes of the DOM

What am I?

What does the following code snippet represent semantically?

<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>

I'm a Happy Tree!

The previous code snippet represents a Tree-View visually

tree-view with the items listed in the code above

Adding Semantics

Describing the roles of the elements gives them programatically determined semantic meaning:

<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> ---close leafy
          <div role="wairole:treeitem">Green beans</div>
        </div>
      </div> ---close green
      <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> ---close yellow
    </div>
  </div> ---close veggies
</div> ---close tree

Who should adds this?

Developers but with tools support:

Design patterns
Authoring tools
Libraries

...similar to AJAX scripting etc.

Accessibility Taxonomy

Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)

defines roles and properties taxonomy to describe structures
user agents expose this information to the accessibility API
(information is also available directly through the DOM)
assistive technologies process the structural relationships

Why not in (X)HTML?!

Ideally HTML/XHTML should provide these semantics but:

HTML5 and XHTML2 are under development, it will take a while until they are stable
People with disabilities need these solutions implemented today -actually yesterday
WAI-ARIA is an immediate solution for describing interactions and custom widgets

Widget States

Custom widgets can also have different states described programatically:

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
  xmlns:aaa="http://www.w3.org/2005/07/aaa">

  [...]

  <span class="checkbox" id="checkbox1"
    role="wairole:checkbox"
    aaa:checked="true"
    aaa:required="true"
    aaa:invalid="true">check me!</span>
        
  <span class="slider" id="slider1" 
    role="wairole:slider"
    aaa:valuenow="10"
    aaa:valuemin="0"
    aaa:valuemax="100">
      <span class="bar"></span>
  </span>

Source: WAI-ARIA Best Practices

Events and Notifications

WAI-ARIA also provides properties to describe events and notifications:

<h1>AJAX Chat</h1>

<div id="chatArea" role="wairole:log">
  <ul id="chatRegion" aaa:live="polite"
      aaa:atomic="false">
    <li>There are currently 4 users online.</li>
    <li>Users: Cool_Like_CLC. DShinja. E-Lisa. Nightdog.</li>
    <li>E-Lisa: This is fun.</li>
    <li>E-Lisa: LOL</li>
    <li>Nightdog: Hi there!</li>
  </ul>

  <ul id="userListRegion" aaa:live="off"
      aaa:relevant="additions removals text"
      style="visibility: visible;">
    <li>Cool_Like_CLC</li>
    <li>DShinja</li>
    <li>E-Lisa</li>
    <li>Nightdog</li>
  </ul>
</div>

<div id="userControlsArea">
  <input type="text" id="sendText" size="72"
      onkeyup="keyHandler(event)"/>
  <input type="button" id="sendButton" value="Send"
      aaa:controls="chatRegion"
      onclick="takeMessage()"/>
</div>

<span id="statusRegion" aaa:live="assertive"/>

Source: CLC Accessible AJAX test cases

What About HTML?

WAI-ARIA is designed as an extension module for any XML-based markup, and also for HTML but:

HTML4 does not support namespaces and needs work-arounds
currently no normative technique, convention uses class="..."
heavy dependence on JavaScript and user agent support

Example HTML4 Embedding

For HTML the class-attribute is used (similar to some microformats approaches):

<span class="axs checkbox checked">
  Include decorative fruit basket
</span>

<span id="slider"
  class="myslider myselector2 axs slider valuemin-0 valuemax-50 valuenow-33">

Is WAI-ARIA Supported?

Yes! Several implementations at various levels already exist even though this is still at Working Draft stage:

Browsers: Firefox, Internet Explorer, Opera
Assistive Technologies: JAWS, Orca, WindowEyes, ZoomText
Libraries: Dojo Toolkit
Examples: AOL, Google, IBM, Yahoo!, others

Side Note: Authoring

WAI-ARIA is verbose and requires additional markup effort
however, Web applications in general face similar challenges
...it is not a problem of accessibility as often mistaken
need to think more about effective authoring tools support

Accessible Web Applications