JavaScript accessibility principles

JavaScript accessibility is important to people with the following disabilities:

• Blindness
• Low vision
• Motor impairments
• Cognitive impairments

Any of these groups of people may rely on assistive technology, such as a screen reader, a Braille reader, or a speaking browser. These technologies represent all information as structured text therefore all JavaScript functionality must take a form that can be interpreted as text.

These technologies are usually controlled with the keyboard, rather than with a mouse or pointing-device, and there are also many people who are simply unable to use a mouse or trackpad, because of a motor impairment. Therefore all interactive JavaScript functionality must be accessible to the keyboard, and controlled with common, intuitive keystrokes such as ‘TAB’, ‘Enter’, ‘Escape’ and arrow keys.

Accessibility principles specific to the use of JavaScript include, but are not limited to:

• All non-text content has a text equivalent
  • Visual information should have a text equivalent.
  • Interactive content should have a descriptive label.
• All functionality is operable with the keyboard
  • Use the most device-independent event available.
  • Pair mouse actions with equivalent keyboard actions.
• Information and structure can be programmatically determined
  • Use standard DOM functions to create scripted content.
  • Do not use scripting to emulate native functionality (such as using onclick on a SPAN instead a proper link href).
• Timed activity can be controlled
  • Provide user control over time-limits.
  • Provide a pause functionality for animated content.
• A logical focus order is always maintained
  • Insert dynamic content into the DOM directly after its trigger.
  • Add multiple interactive components in a logical order.
• Functionality that relies on JavaScript is not present without it
  • Elements that only trigger scripting should themselves be added by scripting.
  • Use progressive enhancement to trigger popups from normal links.

 Types of JavaScript functionality

JavaScript functionality falls into three broad types:

• Binding functionality to existing interactive components, such as links, buttons and text fields
  Assistive technologies can derive information from their attributes and text; for example, a dynamic menu would be made using links organised into nested lists, in which the menu levels are denoted by the hierarchy, and by the use of structural labels around each top-level link.
• Non-interactive functionality that presents information
  This must be implemented in such a way that the information can be derived from associated text; for example, a visual progress-meter would also show a % figure, or JavaScript might be used to identify and highlight form validation errors.
• Creating custom components that are both interactive and informative
  These components must be implemented using elements that are already understood by assistive technologies, so that their content and interactions can be programmatically determined; for example, a calendar widget would have a LABEL to describe it and a button to trigger it, while the calendar itself would be made using TABLE markup, which assistive technologies can understand and interpret as structured text.