GAWDS - The Guild of Accessible Web Designers

Article: Accessibility issues with Javascript

1. Page must still be accessible if javascript is disabled or if the browser does not support javascript.

Below is an example showing how Javascript can be used to make content inaccessible.

When a user clicks the link, the script is run, and a new content window is opened. The critical point here is that the content is made available only as a result of running the script; if Javascript is disabled navigation the content is inaccessible.

Windows can be opened without breaking the link for users. The following example comes is from Evolt.org

<a href="somedoc.html" target="newWindow" onclick="window.open(this.href, this.target); return false" >click here</a>

2. Event handlers should be device independent.

Application level event triggers are designed to be device independent, e.g.

"onfocus", "onblur" and "onselect"

If using device-dependent attributes, also provide redundant input mechanisms, e.g. specify two event handlers.

use "onkeydown" when using "onmousedown"
use "onkeyup" when using "onmouseup"
use "onkeypress" when using "onclick"

3. Use the <noscript>element if javascript is used to provide a message on the users screen.

An example of the use of the <noscript> can be found at WAI Web Content Curriculum at http://www.w3.org/WAI/wcag-currie/sam57-0.htm

<SCRIPT type="text/Javascript">
...some script to show sports scores...
</SCRIPT>
<NOSCRIPT>
Today's scores <A href="todaysscores.html">text-only version of scores.</A>
</NOSCRIPT>

4. Hidden information

It is ok to use javascript or style sheets to hide content on a page as long as the conent is shown when scripting is turned off. Creating content 'on-the-fly' using client-side scripting, will not work when scripting is turned off. Some alternative way of providing the same information should be provided.

5. Javascript for decorative purposes, such as rollovers generally has no impact on accessibility.

As long as users can still navigate around the site when scripting is turned off, there should be no problem with using Javascript for rollovers or DHTM menus.

6. Using Javascript to open new windows without warning users.

For blind users opening new windows without warning can create confusion. Blind users may not be aware that a new window has been opened - however they will be aware that their browser back button no longer works - which is likely to be disoriatating.

7. Moving or blinking text.

If moving or blinking text is critical to the understanding of a webpage, provide some way for users to turn off, or slow down the movement. Moving text is generally not possible to read with a screen reader.

8. Javascript and DHTML

Many DHTML menus require that the mouse be used, but the JavaScript is inaccessible to those who use screen readers, and to those who use some other physical input devices. In the case of DHTML menus there will only be an accessibility problem if users cannot access the navigation when javascript is turned off.

9. Forms that use onChange and onSelect

The following information is from WebAIM:

Some Web designers create forms that either change or redirect the user to another page or form element when an item is selected. These JavaScript features do not require the user to hit a submit button. The problem with such menus is that they do not allow for keyboard accessibility. When a user tries to scroll the list of options, the JavaScript interprets this scrolling as an "onSelect" event, which then sends the user to another page. It is nearly impossible to navigate through such menu systems without a mouse. Do not use this type of form submit command in JavaScript.

10 Removing toolbars