Accessibility Practices for Rich Internet Applications

Michael Cooper
Web Accessibility Initiative
cooper@w3.org

How AT accesses content

Assistive Technology (AT) provides alternate presentation or interaction modalities
- Transforms content to a form user can perceive
- Accepts input from alternative input devices or modalities
- Requires particular semantic information to do effectively
2 ways at getting semantics
- Accessibility API
- DOM
Either way, highly dependent on standard approaches

Notes:

Transforms content: e.g., bigger,text to speech, screen reader, braille, structural enhancements
Alternate input: e.g., keyboard instead of mouse or vice versa; scanning/switch input, huge variety of custom devices like sip-puff or eye tracking

Interactive content issues

Languages missing semantics for accessibility
Semantics get repurposed
Objects besides links and form controls need to be in tab order
Live regions need special handling by AT to inform user of changes
Drag and drop functionality
AJAX and technologies like Flash

Notes:

Languages don’t contain all the semantics needed for accessibility
- Not all languages W3C languages with WAI attention!
- We're discovering semantics that weren't previously understood as needed
Script and style makes it possible for semantic elements to be repurposed, or semanticless elements like <div> to be used
Live regions: Interactive rich internet applications need to know
- when, and when not to, tell AT of changes to content / states
- what part of content changed, and how to get to it

Keyboard Support

Navigate in meaningful order
Focus objects with keyboard
Quickly find desired content

Notes:

Relationships

Among elements of complex widgets, e.g.,
- Expanding tree controls
- Grids
- Menus
Labeling and description information
Controller

Notes:

Organization

Sections and headers
Identification of strictly presentational objects
Grouping
Containers
- Live regions
- Dialogs
- Tooltips

Notes:

Content Updates

Know content has updated
Find updated content when needed
Not necessarily intrusive alerts of updates

Notes:

Identifying Widgets

Understanding what type of widget something is
- Usual suspects like form controls, when not semantically coded
- Sliders
- Progress bars
- Spinners
Methods to control with assisitve technology
Get typed data

Notes:

Authoring

Expertise required
Design and technical challenges
Component libraries help
Need evaluation methodologies and tools

Notes:

Accessible Rich Internet Applications

WAI-ARIA: Accessible Rich Internet Applications
- ARIA Overview
- Roadmap for Accessible Rich Internet Applications
- Roles for Accessible Rich Internet Applications: Provides semantics for AT to find and use custom widgets
- States and Properties Module for Accessible Rich Internet Applications: Changeable states and their values
Compatibility with Accessibility APIs
Designed with extensibility and future compatibility in mind

Notes:

Simple Example

Mozilla Checkbox sample
Audio: Screen reader reading checkbox (5 sec) [checkbox example transcript]

Pseudo-code:

<span class="checkbox" id="chbox1" role="role:checkbox"
    aaa:checked="true" tabindex="0"
    onclick="return checkBoxEvent(event);" >
  Include decorative fruit basket
</span>

Implementation Example - XHTML

XHTML Role attribute module with roles from the WAI Role namespace

WAI-ARIA States and Properties provides an XHTML module defining the attributes

<html lang="en" xml:lang="en" 
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xhtml10="http://www.w3.org/1999/xhtml"
  xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
  xmlns:waistate="http://www.w3.org/2005/07/aaa">
...
<span id="slider" class="myslider"
  xhtml10:role="wairole:slider"
  waistate:valuemin="0"
  waistate:valuemax="50"
  waistate:valuenow="33">
</span>

Notes:

Implementation details not specified
User agents providing support for this
- Firefox: partial in 2.0, full scheduled for 3.0
- IE: MS working on it now
- ???
- JAWS and Windows-Eyes automatically getting this through the accessibility API
- Working to harmonize with the various accessibility APIs, get them to add support as needed

Implementation Example - HTML

HTML lacks necessary attributes
Provide HTML implementation technique
Roles, states, and properties provided as values of class attribute

Script uses DOM to attach the roles, states, and properties

<script type="text/javascript" src="enable.js"></script>
<span id="slider" 
  class="myslider axs slider valuemin-0 valuemax-50 valuenow-33" 
  tabindex="0" >
</span>

Notes

Script techniques exist to make this all work in HTML

axs class acts as delimiter between other class values and ones intended to be processed into roles and states
first class is role
remaining classes are states/properties, using hyphen to delimit property name from property value
This only looks shorter than the XHTML example because it doesn't show the script that does the work.

Thank you

Michael Cooper
cooper@w3.org