2.02.01 JavaScript usage: Overview
JavaScript Accessibility Issues
JavaScript allows developers to add increased interaction, information processing, and control in Web-based content. However, JavaScript can also introduce accessibility issues. These issues include:
- Navigation. Inability or difficulty navigating using a keyboard or assistive technology.
- Hidden content. Presentation of content or functionality that is not accessible to assistive technologies.
- User control. Lack of user control over automated content changes.
- Confusion/Disorientation. Altering or disabling the normal functionality of the user agent (browser) or triggering events that the user may not be aware of.
A Web page containing JavaScript will typically be fully accessible if the functionality of the script is device independent (does not require only a mouse or only a keyboard) and the information (content) is available to assistive technologies.
Unfortunately, there is no easy fix that can be applied to solve all accessibility problems associated with JavaScript. The only way to ensure JavaScript accessibility is by evaluating each individual script and devising a unique solution to the accessibility problem it poses.
JavaScript that does not impact accessibility
JavaScript is sometimes used to create visual interface elements that do not affect accessibility. JavaScript is commonly used for image rollovers, where one image is replaced with another when the mouse is placed above it; for example, when a navigation item changes to display a shadow, glow, or highlight when the user mouse-overs it.
Place your mouse over the following image to see a JavaScript example that does not impact accessibility.
Problems
None. In this example, there is no important content or functionality introduced by the JavaScript. The swapping of images is purely cosmetic.
Solution
No additional accessibility techniques are required. Remember, the image itself must have alternative text (i.e., <img alt="up arrow"...>).
These days image rollovers can be better accomplished using CSS. See image rollovers without using JavaScript for further details.
Question 1
True of False? It is improper to modify an image cosmetically (i.e., adding a drop shadow or border) using JavaScript?
(Content copyright Webaim) Terms of use: All documents on this Web site may be reproduced and distributed in print or electronic format only if offered at no cost to recipients and as long as full credit is given to WebAIM, including a link to the WebAIM Web site, and as long as this Terms of Use notice remains intact.