Web Accessibility: Dynamic Content

Event handlers define how scripts react to events caused by something the user does (e.g., the mouse moves, a key is pressed, the document is loaded). Ensure that dynamic content is accessible or provide an alternative page. For scripts, use <NOSCRIPT> to provide an accessible presentation.

Event handlers must be device independent--users must be able to interact with a browser (and the document it renders) using the devices suiting their needs (e.g., mouse, keyboard, voice input, and sip-and-puff device).

Use event handlers that work for both mouse users and keyboard users (e.g., onClick). Alternatively, for a single event, use a handler that works for mouse users (e.g., onMouseDown) and a handler for keyboard users (e.g., onKeyDown).

Do not write event handlers that rely on mouse coordinates because this will prevent device-independent input. To test that event handlers are input device independent, unplug the mouse and navigate the page simply with the keyboard.

Moving content, such as scrolling text, can be distracting and interfere with an individual's ability to focus on relevant content, or the individual may read more slowly than the scrolling speed. It is important that users be able to freeze the movement of text. When content must move, provide a mechanism within a script or applet to allow users to freeze motion or updates. Use style sheets with scripting to enable users to turn off or override the motion.

Event handlers invoke scripts when specific events occur, usually because of something the user does (e.g., the mouse moves, a key is pressed, the document is loaded, etc.). For a script to react to an event, event handlers must be defined, such as onChange and onClick.

Device-dependent handlers specify the actual device in the event handler name, such as onMouseOver or onKeyPress.

Logical (or generic) event handlers are interested in what happened to the element (e.g., has gained or lost focus or has been selected), not what caused it to happen (e.g., keyboard or mouse). Logical event handlers include onSelect, onFocus, and onBlur.

HTML Techniques for Web Content Accessibility Guidelines 1.0 provide these suggestions for event handlers that do more than simply change the presentation of an element:

• Use application-level event triggers. In HTML 4.01, application-level event attributes are ONFOCUS, ONBLUR (the opposite of ONFOCUS), and ONSELECT. These attributes are designed to be device-independent, but are implemented as keyboard specific events in current browsers.



• If device-dependent attributes must be used, provide redundant input mechanisms (e.g., specify two handlers for the same element):
  
  
  * Use ONMOUSEDOWN with ONKEYDOWN
  * Use ONMOUSEUP with ONKEYUP
  * Use ONCLICK with ONKEYPRESS


• Do not write event handlers that rely on mouse coordinates since this prevents device-independent input.



• Add the event triggers ONFOCUS and ONBLUR to make pop-up windows accessible to keyboard users.
  
  
  For example, rather than using:
  
  
  <a href="foo.html" onMouseOver="blah()">Link</A>
  
  
  change to:
  
  
  <a href="foo.html" onMouseOver="blah()" onFocus="blah()">Link</A>

Announce New Windows

Try this <A HREF="skills.htm" TARGET="_blank" TITLE="This will open a new window">Skills Inventory</A>.