Web Development
Web Developer Guidelines
Visual Design Recommendations

Checkpoint 1.18 - JavaScript

Ensure event handlers are input-device independent

WCAG 1.0 Priority 2

WCAG Guideline 6. Ensure that pages featuring new technologies transform gracefully.

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.). In HTML 4.01, event handlers are attached to elements via event handler attributes (the attributes beginning with on, as in onkeyup).

Some event handlers, when invoked, produce purely decorative effects such as highlighting an image or changing the colour of an element's text. Other event handlers produce much more substantial effects, such as carrying out a calculation, providing important information to the user, or submitting a form.

Requirement

Ensure that any events triggered by an event handler are not specific to any particular input device and onfocus, onblur and onselect are used as redundant JavaScript functions for device-dependent functions.

Recommendation

  • 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 since this prevents device-independent input.
  • Use a go button that the user must click on instead of relying on onchange.

Checking Tool

View the source page of the web page in a text editor and search for instances of onmousedown, onmouseup, and onclick.

Information Source

The original source of this information is located on the W3C web site  (www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable-scripts)

 

Back to top