Overview

JavaScript allows developers to add more interaction, information processing and control web content. JavaScript can also create accessibility problems, limiting the navigation via keyboard or assistive technology, presenting content or functionality that is not accessible to assistive technologies, limiting control by user content changes automatically and modifaint native functions of the browser. When you are confronted with issues of accessibility of JavaScript, you must do one of the following:

• Make sure that the JavaScript is directly accessible.
• Provide an alternative non-JavaScript accessible.

JavaScript is often used to make decorative changes or other changes to the content that do not affect accessibility. Generated content in a page by JavaScript is available if:

• event handlers independent devices are used.
• content and features created by JavaScript are accessible to assistive technologies.
• elements and pages with scripts are navigable with the keyboard.
• the native browsers are not changed in a way that may cause confusion or inaccessibility.
• an accessible alternative is given when the JavaScript can not be made natively accessible.

JavaScript event handlers

There are two types of JavaScript event handlers - those who are dependent on devices and those who are independent. When you implement event handlers, you must use an event handler or device-independent event handlers use multiple dependent devices to accommodate all users. Here is a list of event handlers and their accessibility problems.

onMouseOver and onMouseOut

Dependent on a device (requires the use of the mouse).

Make sure no important content or functionality is introduced by this event handler.

Use event handlers with the onFocus and onBlur to allow access to the keyboard.

Provide an accessible alternative if the content or functionality can not be made natively accessible.

onFocus and onBlur

A device independent (works with both the keyboard and mouse).

Experiment to verify that accessibility is not affected.

onClick and onDblClick

Dependent on a device (requires the use of the mouse).

onClick is activated by a keyboard input when used with links and form fields.

There is no equivalent independent devices or keyboard accessible to these event handlers.

Functionality and content provided by the event handler onClick should also be made ​​available.

onChange and onSelect

A device independent (works with both the keyboard and mouse).

Functionality and content provided by the event handlers onChange and onSelect should also be made ​​available.

The elements of a drop-down menu navigation that are triggered by onChange are not fully accessible to the keyboard.

Dynamic HTML and accessibility

Dynamic HTML (DHTML) is usually a combination of CSS and JavaScript. By nature, DHTML can have a dynamically changing content. DHTML is often triggered by user interactions such as mouse movement. When you implement DHTML, you must ensure that the DHTML is triggered independently from one device and the content or functionality provided by the DHTML is also available.

JavaScript can also be used to write dynamic content to a Web page. In most cases, the content is accessible unless the content is constantly changed or that interferes in one way or another with the accessibility of the page.

Pop-up

The default behavior of the browser and HTML elements may also be affected by the JavaScript. The pop-ups can be triggered by JavaScript or JavaScript event handlers. If the user is not notified that the pop-up window opens, it may be disoriented by the abnormal behavior of the Web browser. Changing the browser windows to remove the scroll bars, status bars, menus or toolbars can also create accessibility problems. Use the pop-up with care and when used, always alert the user. The user should also be alerted when JavaScript is used to automatically perform the functions of the native web browser, such as redirecting the page refresh or auto-scroll. In any case, you have to user testing and testing with assistive technologies. This can provide valuable information regarding the accessibility implementations of JavaScript.

Alternatives to JavaScript

There are many ways to provide alternatives to JavaScript. New versions of CSS can recreate much of the JavaScript behaviors using only CSS. The navigation menus, navigation bars, and all image maps can be developed without relying on JavaScript. However, the implementation of CSS in browsers and assistive technologies differ and may cause problems. When the JavaScript itself can not be natively accessible, you must provide an accessible alternative. This can be done by replicating or replacing the JavaScript behavior with a server-side script. You can also give content in a tag <noscript> that is available when JavaScript is disabled or when it is not available for the end user.

Standards and recommendations

Standards and recommendations apply to JavaScript: