L. Scripting Languages

Checkpoint (L) focuses on utilizing 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.

Scripting Languages

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.

Example - Using Functions Correctly

Web developers working with JavaScript frequently use so-called JavaScript URLs as an easy way to invoke JavaScript functions.

The following link invokes a JavaScript function called myFunction:

<a href="javascript:myFunction();">Start myFunction</a>

This technique does not cause accessibility problems for assistive technology. A more difficult problem occurs when developers use images inside of JavaScript URL's without providing meaningful information about the image or the effect of the anchor link.

For instance, the following link also invokes the JavaScript function myFunction, but requires the user to click on an image instead of the text "Start myFunction":

<a href="javascript:myFunction();"><img src="myFunction.gif"></a>

This type of link, as written, presents tremendous accessibility problems, but those problems can easily be remedied. The <a> tag, of course, supports the "alt" attribute that can also be used to describe the image and the effect of clicking on the link. Thus, the following revision remedies the accessibility problems created in the previous example:

<a href="javascript:myFunction();"><img src="myFunction.gif" alt="picture link for starting myFunction"></a>

Another technique advocated by some developers is to use the "title" attribute of the <a> tag. For instance, the following example includes a meaningful description in a "title" attribute:

<a title="this link starts myFunction" href="javascript:myFunction();"><img src="myFunction.gif"></a>

Note: This tag is supported by some but not all assistive technologies. Therefore, while it is part of the HTML 4.0 specifications, authors should use the "alt" tag in the enclosed image.

Finally, the browser's status line (at the bottom of the screen) typically displays the URL of any links that the mouse is currently pointing towards. For instance, if clicking on an anchor link will send the user to http://www.usdoj.gov, that URL will be displayed in the status line if the user's mouse lingers on top of the anchor link. In the case of JavaScript URL's, the status line can become filled with meaningless snips of script. To prevent this effect, some web developers use special "event handlers" such as onmouseover and onmouseout to overwrite the contents of the status line with a custom message.

For instance, the following link will replace the content in the status line with a custom message "Nice Choice".

<a href="javascript:myFcn();" onmouseover="status='Nice Choice'; return true;" onmouseout="status='';"><img src="pix.gif"></a>

This text rewritten into the status line is difficult or impossible to detect with a screen reader. Although rewriting the status line did not interfere with the accessibility or inaccessibility of the JavaScript URL, web developers should ensure that all important information conveyed in the status line also be provided through the "alt" attribute, as described above.

JavaScript uses so-called "event handlers" as a trigger for certain actions or functions to occur. For instance, a web developer may embed a JavaScript function in a web page that automatically checks the content of a form for completeness or accuracy. An event handler associated with a "submit" button can be used to trigger the function before the form is actually submitted to the server for processing. The advantage for the government agency is that it saves government resources by not requiring the government's server to do the initial checking. The advantage for the computer user is that feedback about errors is almost instantaneous because the user is told about the error before the information is even submitted over the Internet.

For more information about designing web pages by using JavaScript's "event handler" functions, please refer Checkpoint (L) - event handler.

NOSCRIPT

Use the NOSCRIPT element to describe the action or replace the functionality of any scripts you embed in your page.

Example

If you write a SCRIPT that animates a comic strip by presenting a new panel whenever the user mouse-clicks or presses a key, then use the NOSCRIPT element to provide a text alternative that describe the entire comic strip.

HTML Technique

<SCRIPT type="text/javascript">
  ... script to display and replace each frame of the comic strip as requested by a user event ...
</SCRIPT>
<NOSCRIPT>
  In the first panel, Lucy is holding the football. In the second panel, Charlie Brown is seen charging towards the football. And so on..."
</NOSCRIPT>

This page adopted from the Access Board 508.