Creating Accessible JavaScript
Accessible JavaScript Summary

Overview

JavaScript allows developers to add increased interaction, information processing, and control in web-based content. JavaScript can also cause accessibility problems by limiting navigation using a keyboard or assistive technology, presenting content or functionality that is not accessible to assistive technologies, limiting user control over automated content changes, and modifying the normal functionality of the browser. When faced with JavaScript accessibility issues, you must do one of the following:

• Ensure the JavaScript is directly accessible
• Provide an accessible, non-JavaScript alternative

JavaScript is often used to make cosmetic or other content changes that do not affect accessibility. Content written to the page using JavaScript is accessible if:

• Device independent event handlers are used.
• JavaScript enabled content and functionality is accessible to assistive technologies.
• Scripted pages and elements are navigable using a keyboard.
• The normal browser functionality is not modified in a way that may cause confusion or inaccessibility.
• An accessible alternative is provided when JavaScript cannot be made natively accessible.

JavaScript Event Handlers

There are two types of JavaScript event handlers - device dependent and device independent. When implementing event handlers, you must either use a device independent event handler or use multiple device dependent event handlers to accommodate all users. Below is a list of common event handlers and their associated accessibility issues.

onMouseOver and onMouseOut

Device dependent (require the use of a mouse)

Ensure important content or functionality is not introduced with these event handlers

Use in conjunction with the onFocus and onBlur event handlers to allow keyboard accessibility

Provide an accessible alternative if the content or functionality cannot be made natively accessible

onFocus and onBlur

Device independent (work with both keyboard and mouse)

Test to ensure that accessibility is not affected

onClick and onDblClick

Device dependent (require the use of a mouse)

onClick is activated by keyboard input when used with links and form elements

There are no device independent or keyboard accessible equivalents to these event handlers

Functionality and content provide by the onClick event handler must also be made accessible

onChange and onSelect

Device independent (work with both keyboard and mouse)

Functionality and content provide by the onChange and onSelect event handlers must also be made accessible

Drop-down menu navigation items that are triggered with onChange are not fully keyboard accessible

Dynamic HTML and Accessibility

Dynamic HTML (DHTML) is a combination of JavaScript and Cascading Style Sheets (CSS). By its very nature, DHTML can present dynamically changing content. DHTML is often triggered by user interactions, such as moving the mouse. When implementing DHTML, you must ensure that the DHTML is triggered in a device independent way and that the content and functionality provided by the DHTML is also accessible.

JavaScript can also be used to write dynamic content to the web page. In most cases, this content is accessible, unless the content is constantly changing or is in any other way interfering with accessibility of the page.

Pop-up Windows

The default behavior of the web browser and certain HTML elements can also be affected by JavaScript. Pop-up windows can be triggered by JavaScript or by JavaScript event handlers. If the user is not alerted to the fact that a pop-up window is opening, they may become confused or disoriented by the unnatural behavior of the Web browser. Further modification of browser windows to remove scroll bars, status bars, menu bars, or tool bars may also cause accessibility problems. Use pop-up windows with care and if they are used, always alert the user to this fact. The user must also be alerted when JavaScript is used to automatically perform browser functions, such as redirecting, refreshing, or automatic scrolling. In all cases, user testing and testing with assistive technologies can provide valuable feedback regarding accessibility of specific JavaScript implementations.

JavaScript Alternatives

There are many ways to provide alternatives to JavaScript. Newer versions of CSS allow much of the behavior of JavaScript to be replicated using CSS alone. Drop-down menus, navigation bars, and interactive images can all be developed without relying on JavaScript. However, the implementation of CSS across browsers and assistive technologies is varied and problematic. When JavaScript itself cannot be made natively accessible, you must provide an accessible alternative. This can be done by replicating or replacing the JavaScript behavior with server-side processing. You can also provide <noscript> content which will be accessible when JavaScript is disabled or not available to the end user.

Standards and Guidelines

The following standards and guidelines apply to JavaScript: