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

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

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

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"
     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.

Category: Accessibility.


  1. [firefox-accessible-widgets.php#comment1]

    Note that you to declare the namespaces first in order to use them. What's also interesting is that they used some bits of XHTML2 which is not yet in CR...

    Also note that DTDs are dead anyway. I currently use <input type="email"> on my weblog for example. It doesn't validate, but it is perfectly fine in my opinion. It is defined in a specification, works in one browser and falls back to <input type="text"> when unsupported.

    (Of course, for browsers not supporting "tabindex" as a generic attribute you do have fallback problems. Opera is one of them. Not sure about Safari.)

    Posted by Anne van Kesteren on

  2. [firefox-accessible-widgets.php#comment2]

    Just for fun I tried to write this widget using Web Forms 2 extensions. I'm willing to argue that mine is more accessible *wink* .

    (It only requires a couple of lines of script and works in two (if not three) desktop browsers. Making it work in Internet Explorer should not be that hard either. It does have fallback content for older browsers. I would only need to have some submission mechanism so the server could calculate the color value if javascript was disabled, et cetera.)

    Posted by Anne van Kesteren on

  3. [firefox-accessible-widgets.php#comment3]

    Slightly OT. Out of curiosity I opened your file in Safari, and it reports an error:

    error on line 38 at column 560: Entity 'nbsp' not defined.

    That is a known 'issue' with that browser, not strictly a bug I think.

    Posted by Philippe on

  4. [firefox-accessible-widgets.php#comment4]

    The site relies on the DOCTYPE to be parsed. Safari is more or less correct.

    (Although the XML specification does not really say browsers have to throw a non well formed error for unrecognized entities. Recent versions of Opera just show the entity I believe. Mozilla throws in a non well formed error as well, but has some DOCTYPE specific knowledge for XHTML and MathML and therefore does not do that in this particular example. Same is true for Opera.)

    Posted by Anne van Kesteren on

  5. [firefox-accessible-widgets.php#comment5]

    Just for fun I tried to write this widget using Web Forms 2 extensions. I'm willing to argue that mine is more accessible *wink* .

    As mine only works in Firefox 1.5, I'm also willing to bet that your version is more accessible *smile*

    The point of the script here is to create widgets that can be used in rich internet web applications. The interface is an intuitive GUI, with keyboard access, but also exposes changes in the wideget's values to accessibility architectures. Exposing changes made through scripting to assistive technoloy is a big problem at the moment, which is something the DOM Scripting Task Force are investigating.

    Posted by Gez on

  6. [firefox-accessible-widgets.php#comment6]

    error on line 38 at column 560: Entity 'nbsp' not defined.

    Thank you, that's a mistake on my part. XML only has five predefined character entities, and &nbsp; isn't one of them. I've changed the character entity to a numeric entity.

    Posted by Gez on

Comments are closed for this entry.