This content is viewable by Everyone

Accessible JavaScript Best Practices

JavaScript is accessible when used well

From tabs to sliders, JavaScript provides a number of ways to enhance content and present information in innovative ways. For example, JavaScript can update information on the fly without requiring a page refresh. That's a great thing for folks using Assistive Technology so long as the updates made to the page also include ways to update the user about how the page has changed.

Name, state, and role of controls and features

Accessible JavaScript has the name of a control or feature, the state of that control (what's happening? Is it open or closed, checked or not?), the role of the control on the page (what does this control do?) and if applicable, the updated value to users who can't discern that information visually.

ARIA

The Accessible Rich Internet Application standard, WAI-ARIA 1.0 or ARIA, provides a mechanism to make content more accessible to users with disabilities.  ARIA is just to fill in the gaps where accessible information is not provided natively by HTML elements like a<div> or<span>. Use ARIA only after all other means have been used to correct an issue otherwise ARIA might give conflicting direction. 

The Periodic Table of ARIA 1.0 Roles and Periodic Table of ARIA 1.0 attributes are handy references for getting familiar with how to add ARIA to your pages.

Trigger events, device-dependent event handlers

Javascript can trigger events based on a user’s actions. Include triggers, event handlers, like onBlur and onFocus that work with the keyboard. Device-dependent event handlers like onMouseOver and onMouseOut only work when they are triggered by a mouse event.

Additional considerations

  • Ensure that keyboard-only users can always orient themselves on the page by making sure that keyboard focus is always visible, and manage focus so that, for example, when JavaScript opens a dialogue or modal window, the page beneath it isn't available to the keyboard.
  • Use JavaScript to set focus on any updated content.
  • Use the tab index attribute to add and remove elements from the tab order as needed. 

Finally, remember that JavaScript should only be used to enhance well-structured, semantic HTML so that the content is still available even if JavaScript isn't available. There are a number of situations when JavaScript may not be compatible, allowed or even be available (as in the case of feature phones), so always have a fallback for all users.

Resources

Related Information