2.20 Use input device-independent event handlers in scripts and applets

Full WAI text: "For scripts and applets, ensure that event handlers are input device-independent." Scripts and applets are types of programmatic objects. These are pieces of functionality written in languages other than HTML, to provide dynamic or interactive behaviour ranging from simple visual effects to mini applications.

Some examples are enhanced functionality like pop-up menus coded in DHTML, form input validation routines written in JavaScript and interactive applications such as tax calculators or games written in Java or Macromedia Flash.

An event handler is a script that is invoked when a certain event occurs (e.g, the mouse moves, a key is pressed, the document is loaded, etc.). You must ensure that event handlers which activate interactive features delivered through scripts and applets, can be activated and controlled using the widest range of input devices, including the mouse, keyboard, microphone, Braille devices, head wands or other pointing devices.

Some event handlers produce effects which are purely visual but others are used to complete critical tasks such as submitting the contents of a form, completing a calculation or sending a message. Event handlers critical to completing a user task should always be input device independent.

Rationale

Interfaces which do not provide flexibility in the type of device which the user relies on to input information are inherently inaccessible. A laptop user may choose to work without a mouse. If this were the case and interactive features on the site relied on "drag and drop" interactivity as the only means of interaction, the site would be unusable. If this site were delivered through a kiosk or public access terminal with a touch screen interface, it would be unusable.

Screen reader users rely entirely on the keyboard for interacting with websites. Failing to support the keyboard as an input device will make the site unusable to them. Other users may use voice input for hands-free operation in a busy office, or if they have dexterity limitations.

Input device independence facilitates porting the site to the widest range of computing devices, including mobile handsets, PCs, and Interactive Voice Response systems (IVRs).

Directions and Techniques

Separate structure and presentation

Design the structure of documents or web pages before thinking about how they will be presented to the user. Consider how the page will be read by a screen reader or with tables linearised.Refer to WAI recommended techniques for separating structure and presentation

Use application-level event triggers rather than user interaction-level triggers

In HTML 4.01, application-level event attributes are "onfocus", "onblur" (the opposite of "onfocus"), and "onselect". Note that these attributes are designed to be device-independent, but are implemented as keyboard specific events in current browsers. Otherwise, if you must use device-dependent attributes, provide redundant input mechanisms (i.e., specify two handlers for the same element):

Use "onmousedown" with "onkeydown"
Use "onmouseup" with "onkeyup"
Use "onclick" with "onkeypress"

Note that there is no keyboard equivalent to double-clicking ("ondblclick") in HTML 4.01.

Do not write event handlers that rely on mouse coordinates

This is bad practice because it relies on the use of a mouse and a highly visual style of interaction to invoke an event handler. Event handlers that rely on mouse coordinates don't support keyboard input.

If you use Java to create applets, consult the Java Look and Feel Guidelines from Sun

Java has inherent accessibility features. Ensure that you have provided for input device independence using them. Refer to Sun's guidelines on accessibility features provided in Java for details on using them.

How you could check for this:

Disconnect the mouse and try to navigate with the keyboard

Assuming that you know how interact with a website using keyboard only navigation, this simple test will very quickly show you if it is possible to navigate or interact with the site using an input device other than the mouse. Be especially sure to test interactive features like forms, drop-down menus, pop-out menus, etc.

- View WAI checkpoint 6.4