Firefox 1.5 Accessible Widgets

Sunday, 4th December 2005

Author: Gez Lemon

Contents

• 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):

• States and Adaptable Properties Module
• Role Taxonomy for Accessible Adaptable Applications

[Back to the contents]

WAI Specifications

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>

[Back to the contents]

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.

[Back to the contents]

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

Home

Sets the slider value to 0

End

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.

[Back to the contents]

Category: Accessibility.