Accessible Web Applications

Shadi Abou-Zahra, W3C/WAI
Sophia-Antipolis, France

(alternate presentation format available)

Documents or User Interfaces?

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

Accessibility Challenges

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

What am I?

What does the following code snippet represent semantically?

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

Who should adds this?

Developers but with tools support:

...similar to AJAX scripting etc.

Accessibility Taxonomy

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

Why not in (X)HTML?!

Ideally HTML/XHTML should provide these semantics but:

Widget States

Custom widgets can also have different states described programatically:

<html lang="en" xml:lang="en" xmlns=""


  <span class="checkbox" id="checkbox1"
    aaa:invalid="true">check me!</span>
  <span class="slider" id="slider1" 
      <span class="bar"></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"
    <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 id="userListRegion" aaa:live="off"
      aaa:relevant="additions removals text"
      style="visibility: visible;">

<div id="userControlsArea">
  <input type="text" id="sendText" size="72"
  <input type="button" id="sendButton" value="Send"

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

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

Side Note: Authoring

Thank You!

Shadi Abou-Zahra
World Wide Web Consortium (W3C)
Web Accessibility Initiative (WAI)
Sophia-Antipolis, France