Creating Accessible Javascript
Creating Accessible Javascript
ACCESSIBLE JAVASCRIPT
1. Creating Accessible JavaScript http://www.webaim.org/techniques/javascript/ 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:
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. Developers must be familiar with the issues surrounding JavaScript accessibility and apply techniques to do one or both of the following: 1. Ensure the JavaScript is directly accessible 2. Provide an accessible, non-JavaScript alternative
Accessible Java sufficient time to indicate more time is required. Such functionality would be difficult with HTML alone.
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 mouses over 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="home"...>). You can also accomplish image rollovers without using JavaScript - external link. Such uses of JavaScript do not need additional accessibility features incorporated because important content is not displayed or functionality introduced by such scripting.
Disabling JavaScript
Follow the directions to disable or enable JavaScript in your browser. You can also determine if JavaScript is disabled. Test a JavaScript enabled web page and see if the content and functionality are accessible. Be sure to re-enable JavaScript when you're done. Internet Explorer 6.X 1. Open Internet Explorer. 2. Select Tools > Internet Options. 3. In Internet Options dialog box select the Security tab. 4. Click Custom Level button at bottom. The Security Settings dialog box will pop up.
Accessible Java 5. Under the Scripting category, enable/disable Active Scripting, Allow paste options via script and Scripting of Java applets. 6. Click OK twice to close out. 7. Click Refresh. Netscape 7.X 1. Open Netscape. 2. Select Edit > Preferences. 3. Click the arrow next to Advanced. 4. Click Scripts & Plugins. 5. Check/uncheck Navigator beneath "Enable Javascript for". 6. Click OK. 7. Click Reload. Opera 7.X 1. Open Opera. 2. Select File > Quick Preferences. 3. Check/uncheck Enable Javascript. 4. Click Reload.
2. Java Accessibility and Usability Work http://trace.wisc.edu/world/java/java.htm Java Application Accessibility Examples
Please download the instructions (readme.txt) on how to setup your environment for running these examples. Also for a short description of what each example is about, read the text file with the same name as the Java source file.
1. Test.java (download) o Test.htm 2. SimpleExample.java (download) o SimpleEx.htm 3. SimpleExample2.java (download) o SimplEx2.htm 4. SimpleExample3.java (download)
Accessible Java
o
SimplEx3.htm
<noscript>
<!-- link to page that displays time from server-side script -->
Accessible Java
<a href="time.htm">View the current time</a>
</noscript>
Pop-up example
Select this link to open a new window
<a href="popup.htm" onclick="window.open(this.href); return false;">Select this...</a>
5. Creating Accessible JavaScript (JavaScript Event Handlers) http://www.webaim.org/techniques/javascript/eventhandlers.php onMouseOver and onMouseOut
The onMouseOver event handler is triggered when the mouse cursor is placed over an item. As its name implies, onMouseOver requires the use of a mouse, thus it is a device dependent event handler and may cause accessibility issues. onMouseOver, and its companion, onMouseOut, can be used, as long as any important content or functionality is also available without using the mouse.
Accessible Java Example 1 Place your mouse over the following image to see an example of onMouseOver. When the mouse is placed over the image of the word "Accessibility", another image appears in its place which presents the definition of the word "Accessibility".
to mouse over
<a href="page.htm" onmouseover="document.images['myimage'].src='imageoff.gif';" onmouseout="document.images['myimage'].src='imageon.gif';"> <img src="media/imageoff.gif" width="289" height="79" id="myimage" alt="Accessibility - The quality of being accessible, or of admitting approach; receptibility." /> </a>
Solutions
In addition to onMouseOver and onMouseOut, use onFocus and onBlur. These actions will be triggered when the keyboard is used to navigate to and from a link that surrounds the <img> element.
to mouse over
<a href=page.htm onmouseover=document.images[myimage].src=imageon.gif; onfocus=document.images[myimage].src=imageoff.gif; onmouseout=document.images[myimage].src=imageoff.gif; onblur=document.images[myimage].src = imageoff.gif;> <img src=imageoff.gif width=289 height=79 id=myimage alt=Accessibility The quality of being accessible, or of admitting approach; receptibility. /></a>
You must still provide the descriptive alternative text for non-visual users, but onFocus and onBlur will provide the visual image swap for users that are using a keyboard only.