DIY Accessible UI Controls with ARIA and HTML

Developer Track, WWW2010, Raleigh NC

Dave Raggett <dsr@w3.org>

Stata building photo by See-ming Lee

MIT stata building W3C logo

Introduction

Building your own UI controls* gives you freedom to experiment and to design the controls to meet your client's needs. With a little knowledge of HTML, CSS and JavaScript, it is really quite easy.

Table of Contents

* Or you could use existing libraries such as Dojo and jQuery

Why assistive technology matters!

disabled boy at compuyer

Assistive technology and Web 2.0

ARIA roles, properties and states

"WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies."

Design choice

Basic principles and how to get started

To create an ARIA widget you should follow:

  1. Pick the widget type (role) from the WAI-ARIA taxonomy
    • WAI-ARIA provides a role taxonomy ([ARIA], Section 3.4) constituting the most common UI component types. Choose the role type from the provided table.
  2. From the role, get the list of supported states and properties
    • Once you have chosen the role of your widget, consult the WAI-ARIA specification [ARIA] for an in-depth definition for the role to find the supported states, properties, and other attributes.
  3. Set the role, states and properties as appropriate
    • Note that the states should change to reflect the current state of the control, e.g. valuenow for a slider

These three steps need to be repeated for the children of the parent element.

General UI guidelines

Example: Rating control

Value for money:






Overall quality:






<div id="value" class="rating">
<span title="pick rating">Value for money:</span><br/>
<label><input type="radio" name="rating1" value="1" />terrible</label><br />
<label><input type="radio" name="rating1" value="2" />very poor</label><br />
<label><input type="radio" name="rating1" value="3" />poor</label><br />
<label><input type="radio" name="rating1" value="4" />fair</label><br />
<label><input type="radio" name="rating1" value="5" />good</label><br />
<label><input type="radio" name="rating1" value="1" />very good</label><br />
<label><input type="radio" name="rating1" value="7" />excellent</label>
</div>

Coding Conventions

Minimise use of globals by defining libraries as objects, e.g. rating.js

var aria_controls_rating = {
  black_star: "&#9733;",
  white_star: "&#9734;",
  rating_id: 1, // used for label id

  enter: function () {
       // initialization code
    },
  leave: function () {
       // clean up code
    },
  key: function (event) {
       // key stroke handling
    }
};

aria_controls_misc.setup(aria_controls_rating.enter, aria_controls_rating.leave);

You also need to include the following in the head:

<link href="controls/controls.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="controls/common.js"></script>
<script type="text/javascript" src="controls/rating.js"></script>

Example: Menu bar

Example: Tree browser

Example: Tree browser

The markup for the tree is:

<ul class="tree">
  <li><span>One</span>
    <ul>
    <li><span>One.one</span>
      <ul>
        <li><span>One.one.one</span></li>
        <li><span>One.one.two</span></li>
        <li><span>One.one.three</span></li>
      </ul>
    </li>
    <li><span>One.two</span>
      <ul>
        <li><span>One.two.one</span></li>
        <li><span>One.two.two</span></li>
        <li><span>One.two.three</span></li>
      </ul>
    </li>
    </ul>
  </li>
  <li class="expanded"><span>Two</span>
    <ul>
    <li><span>Two.one</span>
      <ul>
        <li><span>Two.one.one</span></li>
        <li><span>Two.one.two</span></li>
        <li><span>Two.one.three</span></li>
      </ul>
    </li>
    </ul>
  </li>
  <li><span>Three</span>
    <ul>
    <li><span>Three.one</span>
      <span class="supplemental">supplemental info</span>
      <ul>
        <li><span>Three.one.one</span></li>
        <li><span>Three.one.two</span></li>
        <li><span>Three.one.three</span></li>
      </ul>
    </li>
    </ul>
  </li>
</ul>

Example: Date picker

Hint: click on button to show picker, or tab to it and press Enter.

Concluding Remarks

Dive in, the water is warm!

Quirks

Browsers vary in their interoperability

Support both text/html and application/xhtml+xml

What do most developers do?

state of web development 2010
with thanks to webdirections.org

Source Code

Released under W3C's MIT style document and software license to encourage re-use. Also available under LGPL, contact Dave Raggett <dsr@w3.org> for any questions, comments or updates.

Rating Control
HTML, JavaScript, CSS
Menubar Control
HTML, JavaScript, CSS
Tree Control
HTML, JavaScript, CSS
Date Picker Control
HTML, JavaScript, CSS
Shared
JavaScript