As I said, there a many reasons why I don’t use DHTML on this site. However since the world at large continues to use the suspect stuff, the least I can do is provide examples of how to design client scripts that are accessible. So much DHTML can only work with the mouse and so much of it doesn’t clearly communicate its state to the users with screen readers. I hope to answer that here and give examples of good script design that others should follow.
Currently the document models of Netscape and IE are very different. As such, I try to give an example for both.
Some browsers, like Lynx, Opera and Internet Explorer allow the use to access page elements like form controls and anchors with the keyboard. This is good because some Web users, perhaps someone with a visual or motor impairment or someone using cell phone, can’t use a mouse.
Here I wrote a script for IE that allows the links and form controls bounded by a DIV element to be accessed by arrow keys, which are a little easier to reach and find for someone using a headstick or cell phone.
Example: Assigning New Keystrokes to Links and Form Controls
Some text in the DIV
Some text outside the DIV
Example: Keyboard Accessible Table of Contents
The next one is a keyboard accessible, expandable table of contents element. You may have seen variations of this on many sites. Unfortunately many of these are not keyboard accessible. Not only that but many of them have images that change as the element changes and this change in state is not mirrored in a non-visual way.
So I decided to write one that was keyboard accessible and would inform users with blindness when the element’s images changed state by swapping TITLE attributes along with swapping images.
If you can read this text, your browser doesn’t support scripting or your scripting is turned off. To navigate this site without using the script-based table of contents, please visit our site index.