JavaScript
JavaScript is accessible when used well: from tabs to sliders, it 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 following:
- Name of a control or feature.
- State of that control (what's happening? Is it open or closed, checked or not?).
- Role of the control on the page (for example, what does this control do?) and if applicable, the updated value to users who can't discern that information visually.
Trigger events, device-dependent event handlers
JavaScript can trigger events based on a user’s actions. Include triggers and 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, and not all users use a mouse.
Additional considerations
- Ensure that keyboard-only users can always orient themselves on the page by making sure that keyboard focus is always visible.
- 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.
Tip: Only use JavaScript 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 available (as in the case of feature phones), so always have a fallback for all users.
- Accessible JavaScript (WebAIM)
- Keyboard Navigable JavaScript Widgets (MDM open-source project from Mozilla)
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>.
Tip: Only use ARIA only after all other means have been used to correct an issue; otherwise, ARIA may give conflicting directions.