You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.



Access Mozilla

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

  1. Standard desktop-style keyboard navigation (implemented in IE and Firefox 1.5)
  2. Assistive technology compatibility via basic semantics such as widget roles, properties, values and events (implemented in Firefox 1.5)
  3. Choosing XHTML or HTML
  4. Sample widgets in XHTML and HTML, that are key navigable and work with the Window-Eyes 5.5 screen reader.
    1. Setting up the development/test environment
    2. Simple examples
    3. Complex examples
    4. Table of supported roles and states in Firefox
  5. 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:

  1. Firefox: download and install the Firefox 1.5..
  2. 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:

  1. XHTML Checkbox   HTML Checkbox
  2. XHTML slider
  3. XHTML progress bar
  4. XHTML alert   HTML alert

Complex container widget examples, showing how arrow key navigation can be implemented:

  1. XHTML spreadsheet with menubar
  2. XHTML tab panel   HTML tab panel
  3. XHTML tree view   HTML tree view

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*
* all allow disabled= "true"
describedby="[elementID]" and
labelledby= "[elementID]"

Automatically supported properties*
* all support focusable via tabindex, and focused

Samples
Role

Author-defined properties*
* all allow disabled= "true"
describedby="[elementID]" and
labelledby= "[elementID]"

Automatically supported properties*
* all support focusable via tabindex, and focused

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.