Use device-independent event handlers |
WAI / WCAG 1.0 Priority 2 checkpoint 6.4
Issue Description The page contains handlers for some mouse event for which there is no corresponding keyboard event handler. In particular:

- the event handler ondblclick has no corresponding, in HTML 4.01, keyboard event; therefore it should not be used.
- the event handler onmousedown has to be paired with onkeydown;
- the event handler onmouseup has to be paired with onkeyup;
- the event handler onclick has to be paired with onkeypress;
- the event handler onmouseover has to be paired with onfocus on links and most form controls (where it is usually used to implement rollovers); on text fields within forms, onclick should be replaced by onfocus, since onfocus will give the focus to the text fields both in cases where the user clicks the mouse or control-tabs to that field.
- the event handler onmouseout should be paired with onblur.

How to fix Inspect all of the event handlers defined in the page. Consider only those handlers that either change the page content (by adding or removing text, images, layers, or other objects) or the navigation options (menus, new windows, navbars, links).

If any of these are specified using device dependent events (i.e. ONDBLCLICK, ONCLICK, ONKEYPRESS, ONKEYDOWN, ONMOUSEDOWN, ONKEYUP, ONMOUSEUP, ONMOUSEOVER, ONMOUSEOUT, ONFOCUS, ONBLUR) then they should be paired with event handlers for the other device as well.

In particular:

- in links and most form controls, pair ONCLICK with ONKEYPRESS, and viceversa. This can be achieved by defining the one that is missing with the same script used for the existing one;
- on text fields within forms, replace ONCLICK with ONFOCUS
- never use ONDBLCLICK, as there is no keyboard equivalent handler.
- always pair ONKEYDOWN with ONMOUSEDOWN;
- always pair ONKEYUP with ONMOUSEUP;
- always pair ONMOUSEOVER with ONFOCUS;
- always pair ONMOUSEOUT with ONBLUR.

Issue Explanation 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.). Event handlers are attached to HTML elements via event handler attributes (like "ONMOUSEDOWN", "ONCLICK", "ONKEYUP", etc.).

Often the effect of an event handler is purely decorative: highlighting some text, or an image, or changing the color of some portion of the page. In other cases, however, the event handler performs more important activities: it validates the inputs to a form; shows a rollover menu; opens up a new window; etc.
In all of these cases, where the content being provided changes or the navigation options offered to the visitor change, the event handler must be made fully accessible to offer the same changes to users of assistive or limited technology.

If an event handler refers only to a specific device (like the mouse, as is the case with "ONMOUSEOVER" for example) then for a browser user with no mouse (for example a user with motor disabilities or a driver having to view the website on a PC installed in a car) would not be able to experience the effect of the handler.

According to the W3C, device independence means (Web Content Accessibility Guidelines 1.0 [http://www.w3.org/TR/WCAG10/#device-independent] ):

> Users must be able to interact with a user agent (and the document it renders) using the supported input and output devices of their choice and according to their needs. Input devices may include pointing devices, keyboards, Braille devices, head wands, microphones, and others. Output devices may include monitors, speech synthesizers, and Braille devices.