Firefox 1.5 supports dynamic web content accessibility to help the advancement of Rich Internet Web Applications. To help illustrate how this, I've developed a simple keyboard accessible colour selection widget. The widget only works with Firefox 1.5 with scripting enabled, as the purpose is to demonstrate the accessibility features of Firefox 1.5.
Author: Gez Lemon
- Firefox 1.5 Accessibility
- WAI Specifications
- Firefox's Implementation of Dynamic Web Content Accessibility
- Example of a Rich Internet Web Application
Firefox 1.5 Accessibility
Firefox 1.5 was released this week and has received plenty of well-deserved adulation. By far the most interesting feature for me is their support for WAI's dynamic web content accessibility whose work focuses on the accessibility of Rich Internet Web Applications (RIA). To build an accessible widget within the constraints of current markup specifications is impossible, due to the lack of support for relaying changes to accessibility architectures. Consequently, most web applications are difficult and clumsy to use as they either work within impossible constraints, or are simply inaccessible.
To help bridge this gap, WAI's protocols and formats working group have released two specifications (both editor's drafts):
The States and Adaptable Properties Module defines attributes to provide behavioural information that can be mapped to accessibility frameworks, such as assistive technologies. The specification also includes a proposal to allow elements that are not normally able to receive keyboard focus, such as images that may be used in a widget, to be added to the tab order so that they are keyboard accessible.
The Role and Taxonomy for Accessible Adaptable Applications defines an RDF taxonomy of roles that describe custom GUI widgets. The roles include information to help assistive technologies operate with them in standard and predictable ways. The following is a section of RDF that describes the role of a slider control.
<accs:Widget rdf:ID="slider"> <dc:creator>W3C WAI PF Working Group</dc:creator> <dc:description xml:lang="en"> control for selecting an incremental value between some specified minimum and maximum </dc:description> </accs:Widget>
Firefox's Implementation of Dynamic Web Content Accessibility
To implement this enhanced functionality, Firefox 1.5 support relies on namespaced attributes to help describe the widgets using the roles from WAI's RDF taxonomy, and the states from WAI's States and Adaptable Properties module. Firefox uses these role and state properties to map to MSAA on Windows and ATK on Linux, so that they can be used by assistive technologies, such as Window-Eyes 5.5 Beta. For example, an image used for a slider control might be marked up as follows:
<img src="thumb.gif" alt="Red" id="slider1" tabindex="0" x2:role="role:slider" state:valuenow="0" state:valuemin="0" state:valuemax="255" title="Intensity of Red"/>
As well as the namespaces, it would have been nice to have also had a custom DTD that included the additional attributes and allowed
tabindex to be applied to any element, rather than elements that can traditionally receive focus, so that developers could ensure their work remained valid.
Example of a Rich Internet Web Application
To illustrate how this might be used in an RIA, I've created a simple keyboard accessible colour selection widget. The widget is just an experiment designed to only work in Firefox 1.5 with scripting enabled. The page is served as
application/xhtml+xml (as it relies on XML namespaces), which rules out Internet Explorer, and relies on namedspace attributes, which means that the calculated values will not be correct for other XML aware browsers, such as Opera, and of course, will not be accessible via the keyboard. The example could easily be designed to degrade gracefully for other browsers, but as the point of this exercise was to demonstrate Firefox's accessibility enhancements, there was little point.
The widget comprises of three slider controls, to specify the intensity of red, green, and blue to define a hexadecimal colour. The interface looks and behaves like a traditional widget designed to be controlled by a pointer device. The difference between this widget and traditional widgets is that it can also be controlled by the keyboard alone, which means it should be accessible to assistive technology (when changes to the DOM are reflected through the accessibility architecture using the role and state properties), and also by people with motor difficulties that prevent them from using traditional pointer devices such as a mouse. Each of the slider controls can be navigated to with the keyboard, and once the control has received focus, controlled by the keyboard. The following is a list of keyboard commands that can be used to manipulate the widget.
- Right Arrow
- Increases the slider value by 1
- Left Arrow
- Decreases the slider value by 1
- Page Down
- Increases the slider value by 51
- Page Up
- Decreases the slider value by 51
- Sets the slider value to 0
- Sets the slider value to 255
Also, entering a colour into the text edit box will automatically update the controls for the widget, along with the role and state properties.