Maintained by Mozilla Accessibility Community.
Accessible DHTML
DHTML accessibility is implemented in Firefox 1.5. DHTML accessibility is being developed at W3C - World Wide Web Consortium. It allows desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative input devices. The code for DHTML accessibility in Firefox has been contributed by IBM.
Table Of Contents
- Standard desktop-style keyboard navigation (implemented in IE and Firefox 1.5)
- Assistive technology compatibility via basic semantics such as widget roles, properties, values and events (implemented in Firefox 1.5)
- Choosing XHTML or HTML
- Sample widgets in XHTML and HTML, that are key navigable and work with the Window-Eyes 5.5 screen reader.
- Future of DHTML accessibility, such as support for described actions, element relationships and web page keyboard accelerators that never conflict with the web browser.
DHTML samples are available which demonstrate the Firefox 1.5+ implementation. We are waiting for W3C's Protocols and Formats group to provide a relatively stable version of the standard before pushing the Firefox implementation forward in any significant way. Bug fixing and small tweaks are still occuring, so there will be some small improvements in Firefox 2's support for DHTML accessibility.
Keyboard Navigation
Keyboard navigation is supported via an extension to the HTML tabindex attribute, originally implemented in Internet Explorer. This extension allows any HTML element to be made tab navigable or merely focusable via script or the mouse. Differentiating between elements that are tab navigable and merely focusable allows the development of container widgets such as tree views and spreadsheets, where the arrow keys are used to navigate between child elements in the container. Because the support is built on technology already available in IE, DHTML widgets can be made keyboard accessible for both Firefox 1.5 and IE. The tabindex extension has also been included in specs for future versions of Opera and Safari.
Practical documentation on building key navigable custom widgets is available describing how to code the key navigable DHTML in a cross-browser compatible manner.
Basic Support for Assistive Technologies
Assistive technology support requires the Firefox 1.5 and specially marked-up content which uses namespaced attributes to describe each widget. For example, each widget must uses these new DHTML accessibility attributes to specify the role, a commonly known widget type such as menu, slider or progress bar. Each role may support a small number of additional property attributes such as checked, selected, required, invalid and expanded. For example, a checkbox may be specified as:
<span tabindex="0" role="wairole:checkbox"
property:checked="true"
onkeydown="return checkBoxEvent(event);"
onclick="return checkBoxEvent(event);">
Any checkbox label
</span>
The above checkbox is custom built, but acts just like a normal checkbox as far as assistive technologies and the user are concerned. It can have any visual appearance the author wishes to code via CSS. Here is a breakdown of the attributes:
| Attribute | Meaning |
|---|---|
| tabindex="0" | Put the <span>-based checkbox in the tab navigation cycle, and allow click-to-focus with the mouse. In contrast, tabindex="-1" would make the element focusable via script and mouse clicks, but not part of the default tab cycle. |
| role="wairole:checkbox" | Specify that this is a checkbox, so that assistive technologies like screen readers know what it is |
| property:checked="true" | Checkboxes support the checked property. Properties are also exposed to assistive technologies. |
| onkeydown="return checkBoxEvent(event);" | Allows trapping of the space bar for toggling the checked property. The checkBoxEvent() method is responsible for implementing this, as well as returning false if the event should not continue to be propagated (has been consumed). |
| onclick="return checkBoxEvent(event);" | This is also necessary, in addition to the keyboard handler |
Please see the provided DHTML samples for futher examples how this markup is used. Firefox implements the mapping from these markup roles and properties to MSAA - Microsoft Active Accessibility and ATK - Accessibility Toolkit (from Gnome Accessibility Project), which are the standard accessibility APIs on Windows and Linux. Because the widget information is exposed via standard accessibility APIs, assistive technologies get a large portion of compatibility with these widgets without any new code. The most complete support in screen readers currently requires Window-Eyes 5.5. Screen magnifiers such as ZoomText are also compatible with the new DHTML widgets.
IE support is not currently available for the role and properties pieces. IE currently supports only keyboard navigation for these widgets. Assistive technology vendors should be able to support DHTML widget semantics without changes in Internet Explorer, by looking directly at the DOM and DOM change events.
Choosing XHTML or HTML
Current versions of IE (7 and earlier) do not support the loading of the XHTML mime type (application/xml+xhtml) documents. Therefore documents must be served as text/html to Internet Explorer. For more information on how to implement this type of mime type switching, please see XHTML's Dirty Little Secret.
For those not wishing to migrate to XHTML, Accessible DHTML widgets can also be created using HTML. The Embedding Accessibility Role and State Metadata in HTML Documents paper on the W3C (World Wide Web Consortium) WAI (Web Accessibility Initiative) Protocolos and Formats site explains how to embed the role and state information into the class attribute. A script library parses the role and state information from the class attribute and sets it as namespaced attributes on the element.
Some of the samples below are also provided in HTML. These versions work load in IE and the keyboard navigation works properly.
Here is the script library which parses the role and state attributes out of the class attribute: enable.js.
Sample Widgets
Testing with the Keyboard and Mouse Navigation
Keyboard or Mouse Navigation works in both IE and Firefox. Please note that only the HTML (not XHTML) versions of the samples have been tested and made to work in IE.
Testing with Screen Readers
Screen reader support is only available in Firefox 1.5 or later. Here are the required components to install:
- Firefox: download and install the Firefox 1.5..
- Screen reader: for testing with a screen reader, the Window-Eyes 5.5 is required. In addition, JAWS 7.x has partial support.for DHTML accessibility.
Simple and Complex Examples
Very simple examples, showing the basics of what can be done:
Complex container widget examples, showing how arrow key navigation can be implemented:
Here is a table delineating what roles and properties exist, and what currently has examples.
Unless otherwise stated, properties are boolean and support the values "true" or "false". In the boolean case, an unset attribute is the equivalent of setting it to "false".
Be aware that the attributes checked, selected and expanded are special -- "false" is different from no attribute present in that "false" indicates that the widget is checkable/selectable/expandable and no attribute indicates that it isn't.
| Role |
Author-defined properties* |
Automatically supported properties* |
Samples |
|---|---|---|---|
| Role |
Author-defined properties* |
Automatically supported properties* |
Samples |
| alert | name from child content or title attribute | XHTML HTML | |
| application | XHTML | ||
| button | pressed, haspopup | name from child content or title attribute | |
| buttonsubmit | name from title attribute, default (always true) | ||
| checkbox | checked, readonly, required, invalid | name from child content or title attribute | XHTML HTML |
| checkboxtristate | checked="true"|"false"|"mixed", readonly, invalid, required | name from child content or title attribute | |
| columnheader | selected="true"|"false" (no selected attribute indicates not selectable)
readonly |
name from child content or title attribute | XHTML |
| combobox | readonly, muiltiselect | name from title attribute | |
| description | name from child content or title attribute | ||
| dialog | |||
| document | |||
| icon | name from child content or title attribute | ||
| label | name from child content or title attribute | ||
| list | readonly, multiselect | name from title attribute | |
| listitem |
selected="true"|"false" (no selected attribute indicates not selectable)
checked="true"|"false" (no checked attribute indicates not checkable) |
name from child content or title attribute | |
| menu | name from title attribute | XHTML | |
| menubar | name from title attribute | XHTML | |
| menuitem | haspopup | name from child content or title attribute | XHTML |
| menuitemcheckable | checked | checkable, name from child content or title attribute | |
| menuitemradio | checked | checkable, name from child content or title attribute | |
| grid | readonly | name from title attribute | |
| gridcell |
selected="true"|"false" (no selected attribute indicates not selectable)
readonly, invalid, required
|
name from child content or title attribute | XHTML |
| group | name from title attribute | ||
| link | name from title attribute, linked (always true) | ||
| progressbar | valuenow="#"|"unknown", valuemin= "#", valuemax= "#" | name from title attribute | XHTML |
| radio | checked | name from child content or title attribute | |
| radiogroup | invalid, required | name from title attribute | |
| presentation | These items are automatically removed from the accessibility hierarchy. When put on a table, all table related descendants are also removed from the accessibility hierarchy. |
||
| rowheader |
selected="true"|"false" (no selected attribute indicates not selectable)
readonly |
name from child content or title attribute | XHTML |
| secret | invalid, required | name from title attribute, protected (always true) | |
| separator | |||
| slider | invalid, readonly, required, valuenow="#", valuemin="#", valuemax= "#" | name from title attribute | XHTML |
| spinbutton | invalid, readonly, required, valuenow="#", valuemin="#", valuemax= "#" | name from title attribute | |
| spreadsheet | name from title attribute, multiselectable (always true) | XHTML | |
| tab | name from child content or title attribute | XHTML HTML | |
| tablist | XHTML HTML | ||
| tabpanel | XHTML HTML | ||
| textarea | invalid, readonly, required, valuenow="#", valuemin="#", valuemax= "#" | name from title attribute | |
| textfield | haspopup, invalid, readonly, required, valuenow="#", valuemin="#", valuemax= "#" | name from title attribute | |
| toolbar | |||
| tree | multiselectable, readonly | name from title attribute | XHTML HTML |
| treeitem |
selected="true"|"false" (no selected attribute indicates not selectable)
checked="true"|"false" (no checked attribute indicates not checkable)
expanded="true"|"false" (no expanded attribute indicates not expandable) |
name from child content or title attribute | XHTML HTML |
Future of DHTML Accessibility
Additional DHTML accessibility support is being planned for future releases. This work is dependent on getting a relatively stable standard from the W3C PF group. These changes include support for allowing authors to define new roles via inheritance from known roles, support for describable actions, specifying relationships between elements, and semantic accesskeys that work around today's keyboard conflicts between the browser and a web page's keyboard accelerators.