Authoring Accessible DHTML Resources
Using the W3C Role and State properties does not guarantee an accessible web resource. They can provide additional information that can improve navigation, comprehension, and usability if used correctly.
Ideas
- Model-View-Controller: The model is the DOM, the view is the DOM, CSS, and browser rendering, and the controller is Javascript. The more information that the developer can leave in an accessible place in the DOM, the more likely the resource can be made acceptable. (For an example of putting too much information, "control" information, in the DOM, see the checkboxgroup widget example.
Required Content
Example
Extending Existing Functionality
Legacy Support - HTML 4.01 Workaround
The accessibility people at IBM put together a technique for enabling accessible roles and state properties in HTML. This is needed because the capability to parsing different namespaces is only supported by the newer XHTML standards. Developers may use this to upgrade older pages, especially with informative structural roles, without the additional burden of conversion to XHTML.
The technique uses the styling class attribute to hold keywords that denote the various accessible role and state memberships. A javascript function (provided for the standard roles and states) will then parse the element's styling class properties for these identifiers. The script inserts the corresponding role or state attribute (with the appropriate namespace) into the DOM, where it will be accessible to assistive technologies. Yes, this is a hack, but it does work and it is one of the more respectable hacks floating around on the web, at least!
Helpful Links
Specifications
- W3C Role Taxonomy
- Defines standard widgets and RDF taxonomy description
- W3C States and Adaptable Properties
- Defines the standard states for the standard roles
- Stefano's Introduction to the Semantic Web
- The clearest short explanation of RDF and related technologies.
- W3C OWL Web Ontology Language Guide
- An understandable guide to OWL
Authoring Advice
- Accessible keyboard events
- Mozilla's guidelines for developers on how to use the keyboard in their custom widgets
Examples
- Mozilla Accessible DHTML
- Some overview of DHTML accessibility in Mozilla and several example widgets in HTML and XHTML
- Yahoo User Interface Library
- At CSUN 2006, Yahoo advertised DHTML accessible widgets in their library