Begin site navigation:
End site navigation.
Input switch for people with limited movement. JavaScript is the most popular client-side scripting language. It is a fundamental tool used by Web developers to interact with the user, control the browser and dynamically create HTML content. JavaScript is entirely acceptable to use on your Web pages, and it can even be applied to enhance the accessibility of a Web site. For example, additional information, warnings, and instructions can be given to users through JavaScript prompts. However, the accessibility of JavaScript is entirely dependent on what techniques a Web developer chooses.
JavaScript uses event handlers along with HTML code to create an action which is triggered by a browser or user event, for example, the mouse moves, a key is pressed, the document is loaded, or a form is submitted. Some event handlers are dependent upon the use of a mouse or keyboard. These are called device-dependent event handlers. Other event handlers are device-independent and are triggered by both the mouse and keyboard, or by other means. Using device-dependent event handlers may cause the content to be inaccessible to someone that is not able to use the device that is required for that specific event handler.
Generally, only those event handlers that are device-independent should be used, unless the event handler is used only for cosmetic purposes in which no content or functionality of the page is altered. One rule of thumb: if the essential tasks of the web site can be accomplished with scripting turned off or in a browser that doesn't support scripting, then the scripting is considered non-essential and does not need to be directly accessible.
When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. [Section 508, Part 1194.22, Paragraph (l)]
When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. [Section 508, Part 1194.22, Paragraph (n)]
Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. [W3C WCAG 1.0, Checkpoint 6.3, Priority 1]
For scripts and applets, ensure that event handlers are input device-independent. [W3C WCAG 1.0, Checkpoint 6.4, Priority 2]
Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies. [W3C WCAG 1.0, Checkpoint 8.1, Priority 2]
Many techniques for creating accessible JavaScript are explained below. However, this information does not cover the entire range of techniques and/or methodologies that should be used. For detailed tutorials and examples of different techniques, see the list of related links at the bottom of this page.
Follow W3C best practices by including the LANGUAGE and TYPE attributes within the <SCRIPT> element:
Technique:
<SCRIPT language="JavaScript" type="text/JavaScript">
Always include functional information within the <NOSCRIPT> element. The <NOSCRIPT> element does not make the script accessible, however, it provides alternative text for the JavaScript if the end user does not have JavaScript enabled (e.g., older browser, cell phone, PDA, etc.). Making JavaScript natively accessible is very important. The <NOSCRIPT> content only displays if JavaScript is disabled. Most screen reader users have JavaScript enabled, and therefore they will encounter your inaccessible script and not the <NOSCRIPT> content.
Technique:
<SCRIPT language="JavaScript" type="text/JavaScript">
A script here displays current sports scores.
</SCRIPT>
<NOSCRIPT>
<a href="scores.html">See today's sports scores</a>.
</NOSCRIPT>
Several event handlers are device-independent, including onFocus, onBlur, onSelect, onChange, and
onClick (when onClick is used with link or form elements). Typically, actions from these event
handlers can be triggered with the mouse, keyboard, or other input device. These generally do not
cause accessibility issues unless they are modifying the default behavior of the Web browser or are
interfering with keyboard navigation within the Web page.
The event handlers onMouseOver and onMouseOut are device-dependent, requiring a mouse-click to
activate the script. For some scripts, using onFocus and onBlur in addition to onMouseOver and
onMouseOut can improve accessibility. For other scripts, such as fly-out navigation menus, an
accessible form of redundant navigation is usually required.
An active trigger is a mouse click, selection of an option in a list, or a key press. Non-active triggers are activated when a page is loaded, after a certain amount of time has expired, or when the mouse passes over an object. Non-active triggers are useful for highlighting information but they should be used carefully and should not greatly alter the contents of the page, unless notification is given to the user.
JavaScript alerts are read by most modern screen readers and can be used to increase the usability
of forms by providing timely feedback, instructions, or cues. However, validating form information
with a server-side script and then displaying feedback on another Web page is preferred. This method
allows you to bypass any problems that may occur in the JavaScript code and allows the form to
validate if JavaScript is disabled.
If JavaScript is used to display error messages, the error should appear as an alert message rather
than as text that displays back on the page. Commonly, an error appears above the form itself or
elsewhere on the page when a user presses the Submit button if a form field is not properly filled
out. When presented this way, it is only noticeable by visual users. The focus for the screen reader
user remains on the Submit button, and that user will be completely unaware that an error has
occurred.
Ensure that the code you are using is not browser-specific so that it will present an alert
message across a variety of Web browsers. Additionally, make sure that all form elements and
functionality can be completed using the keyboard.
If you must use device-dependent event handlers, include redundant keyboard event handlers. In other
words, specify two handlers for the same element. Use onMouseDown with onKeyDown. Use onMouseUp
with onKeyUp. Use onClick with onKeyPress.
Using multiple device-dependent event handlers together as a method of implementing device
independence requires a great deal of testing across different browsers and assistive technologies
to ensure that accessibility is not limited in any way.
Because of the general complexity of this topic, Web developers are advised to read more about this subject from the resources listed below.
