Section 508 Compliance

HTML Coding Tutorial

Using Scripts

(l): 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
Explanation: Web page authors have a responsibility to provide script information in a fashion that can be read by assistive technology. When authors do not put functional text with a script, a screen reader will often read the content of the script itself in a meaningless jumble of numbers and letters. Although this jumble is text, it cannot be interpreted or used.
Importance: Developers should use caution when deciding to include Javascript or other scripting elements on their pages. Here are a few of the most popular uses for Javascript:

OnClick, onMouseOver, onMouseOut, onChange

Bad Example

1.  Using Javascript pull-down menus
There is almost no possible way for the user to interact with the menu without a mouse. In this case, it would be best to create a text-only version of the page to satisfy accessbility issues.

Good Examples

1.  Trigger events with active input from users rather than nonactive triggers
An active trigger is a mouse click, selection of an option in a list, or a key press. Nonactive triggers are activated when a page is loaded, after a certain amount of time has expired, or when the mouse passes over an object. Nonactive triggers are useful for highlighting information but should be used carefully and should not greatly alter the contents of the page, unless notification is given to the user.
2.  Provide a <NOSCRIPT> option for all scripts
For example:

<SCRIPT type="text/tcl">
...some Tcl script to show a billboard of sports scores...
<P> To access today's scores <A href="scores.html">visit our text-only version.</A>

3.  Make scripts and applets keyboard operable
Incorporate the accesskey="" attribute as much as possible. This way, users can use only the keyboard to manuever and access the sites. For example:

<a href="home.htm" accesskey="H">Home</a>

This way, the user has to hit ALT-h to activate the link.

Do-It-Yourself Fixes

Some tips when using the four popular Javascript functions:

onClick � The onClick event handler is triggered when the user clicks once on a particular item. It is commonly used on links and button elements and, used in connection with these elements, it works well with screen readers. If clicking on the element associated with the onClick event handler triggers a function or performs some other action, developers should ensure that the context makes that fact clear to all users.
onMouseOver and onMouseOut � These two event handlers are very popular on many web sites. For instance, so-called rollover gif's, which swap images on a web page when the mouse passes over an image, typically use both of these event handlers. These event handlers neither can be accessed by the mouse nor interfere with accessibility � a screen reader simply bypasses them entirely. Accordingly, web designers who use these event handlers should be careful to duplicate the information (if any) provided by these event handlers through other means.
onChange � This event handler is very commonly used for triggering JavaScript functions based on a selection from within a <select> tag. Surprisingly, it presents tremendous accessibility problems for many commonly used screen readers and should be avoided. Instead, web developers should use the onClick event handler (associated with a link or button that is adjacent to a <select> tag) to accomplish the same functions.

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