Accessibility Decorators

Introduction

Through the process of creating accessible DHTML components that include both keyboard navigation and ARIA semantics, we've started to recognize patterns and qualities that make up an accessible user interface. Even with simple-to-use tools such as jARIA and our keyboard-a11y plugin, making an accessible component can be challenging for many developers. We also recognize that UIs will inevitably be built in sub-optimal ways, often at the exclusion of people with disabilities. To address this, we are planning to provide Accessibility Decorators, a collection of pre-baked, declarative strategies that can wrap existing widgets and controls to make them more accessible.

How will accessibility decorators work?

Accessibility Decorators capture the various qualities or characteristics of an accessible user interface. A declarative strategy is used to identify the qualities and "interesting things" that compose the user interface. For example, a file list widget such as the ones found in the Mac OS X Finder, Windows Explorer, or the Sakai Resources tool. File list views represent a container of selectable elements. Each item in the list can be accessed via the keyboard using the up and down arrow keys. Each item can be activated with the Enter key to rename it. Each item can be deleted with the Delete key to remove it from the list. Users of the list view decorator will simply need to provide simple CSS classes to identify each of these characteristics. By default, the decorator will attempt to use existing click() handlers to active elements with the keyboard. Further information about the elements that make up the user interface, and the important events that are triggered during its use, can be specified in a simple JSON-style options structure.

Potential Decorator Features

• Removing all children of selectable items from the tab order to ensure reliable keyboard navigation behaviour
• Class-based, declarative selection, activation, and deletion of lists
• Wrapping common UI widgets with accessibility features: Tabs, Menus, etc.

Examples of Markup and JSON Configuration

List Views

<thead>
  <tr>
    <th>Name</th>
    <th>Date Modified</th>
    <th>Size</th>
</thead>

<!-- Keyboard navigable list -->
<tbody id="fileView" class="keyboard-container vertical">
  <tr class="selectable activatable deletable">
    <td>Mountain.jpg</td>
    <td>Yesterday</td>
    <td>10 Mb</td>
  </tr>

  <tr class="selectable activatable deletable">
    <td>Ocean.jpg</td>
    <td>December 31, 2007</td>
    <td>2 Mb</td>
  </tr>

  <tr class="selectable activatable deletable">
    <td>Desert.jpg</td>
    <td>Last Thursday</td>
    <td>8 Mb</td>
  </tr>
  <tr class="selectable activatable deletable">
    <td>Trees.jpg</td>
    <td>April 1, 2008</td>
    <td>19 Mb</td>
  </tr>
</tbody>

<script type="text/javascript">
  fluid.listDecorator("#fileView", {
      activateAction: "myThing.click",
      deleteAction: "myThing.delete"
  });
</script>

Tabs Widget

    <ol class="tabs">
       <li id="catsTab"><a href="#catsPanel" tabindex="-1"><span>Cats</span></a></li>
       <li id="dogsTab"><a href="#dogsPanel" tabindex="-1"><span>Dogs</span></a></li>
       <li id="hamstersTab"><a href="#hamstersPanel" tabindex="-1"><span>Hamsters</span></a></li>
       <li id="alligatorsTab"><a href="#alligatorsPanel" tabindex="-1"><span>Alligators</span></a></li>
    </ol>
    
    <div class="panels">
        <div id="catsPanel">
            Cats <a href="http://icanhascheezburger.com/2007/01/11/i-can-has-cheezburger/">meow</a>.
        </div>
        <div id="dogsPanel">
            Dogs <a href="http://thebark.com/">bark</a>.
        </div>
        <div id="hamstersPanel">
            Hamsters <a href="http://en.wikipedia.org/wiki/Hamster_wheel">wheel</a>.
        </div>
        <div id="alligatorsPanel">
            Alligators <a href="http://www.drinknation.com/drink/Alligator-Bite">bite</a>.
        </div>
    </div>