Skip Navigationtrace.wisc.edu HelpSearchBottom of Page

Please Note: This section of our website contains information from past work in this area and is largely out of date. The following links include more up-to-date resources on this topic.

JavaScript accessibility issues

  1. Introduction.
  2. Using JavaScript to increase accessibility.
  3. Guidelines for creating accessible scripts.

 

1. Introduction

JavaScript is a scripting language used to make HTML documents more dynamic. Oftentimes, user actions trigger scripts which modify the page.  Users may not realize a page has changed or may not be ready for the page to change when it does.   On the other hand,  if done well, JavaScript can enhance the accessibility of pages by allowing users to customize them to their needs. 

 

2. Using JavaScript to increase accessibility

JavaScript can transform existing information  to alternative formats, communicate with Java applets, or provide meta-information about a page, the page layout, or objects on the page.

 

How does this work?

By including JavaScripts within a page, HTML authors have the ability to interact with the user, control the browser and dynamically create HTML content.  Therefore, the following options are possible:

 

Control the browser

JavaScript has the ability to pop up dialog boxes, open new browser windows and display messages to the user.  These abilities can be used to provide descriptions about a page when it is loaded or when the user selects an object.  For example, when the user moves the cursor over a detailed graphic, such as a chart of this year's earnings, a detailed description could appear in a pop up dialog box.

 

Interact with the contents of a document

JavaScript is able retrieve information about web pages.  For example, one could obtain a list of all hypertext links within a page.  This list could be used to create a "speedlist" of all the links on a page.  Note that the JavaScript and the page it is reading have to be located on the same web server.

 

Interact with the user and control the appearance of a document

Also, since JavaScript can modify the contents of a page and can interact with the user, pages can be modified or alternative pages be loaded to suit a user's preferences or browser capabilities.  The user's preferences for layout and color can be stored in a "cookie" and loaded the next time the user visits the web page.  The Dream Designs page uses "cookies" to allow the user to set the background and font colors.

 

Experimental scripts

The following experimental web pages were created to show how JavaScript can be used to create more accessible web pages.

 

Tables

Information presented in tables cause many problems for users with screen readers (see the Unified Web Accessibility guidelines for more information).  HTML 4.0 allows authors to associate meta-information with table cells to help alleviate this problem.   However, it will be a while before page authors make extensive use of these element attributes and web browsers can pass this information onto users.  In the meantime, we create a script to transform tables into more accessible formats.

  1. This example breaks up a table so that each cell in the table appears on its own line preceded by the row and column headings. First by row[Example 1]or then by column [Example 2].
  2. This example presents a multi-column table of text as a single column.  [Example 3].

 

Frames

Frames can also be a problem. Users with small screens may not see much data other than frame dividers, and some screen readers do not identify each screen as a separate window.  Several browsers support the <NOFRAMES> element, which will load an alternative page that does not use frames (if provided by the author).  However, browsers that support frames do not yet allow users to request the <NOFRAMES> option.  This script allows the user to select the <NOFRAMES> version of a page.  This can also be accomplished by placing a link to the <NOFRAMES> version of the page at the beginning of the main frame.   [Example 4] of a page with multiple frames.

 

Lists

Lists of lists can also be difficult to interpret since indentation is often the only clue as to where in the hierarchy an item falls.  This example [Example 5].

 

Page Navigation

Since long documents can be hard to navigate or perceive an overview of, JavaScripts could be used to create page navigation aids or summaries of a page.  Examples are still under development.

 

3. Guidelines for creating accessible scripts

JavaScript is used to make pages "dynamic" by responding to user actions (e.g. mouse movement), or by updating a page automatically (e.g. baseball scores, stock ticker).  These updates often rewrite the current HTML page and then redisplay it.   Therefore, following the guidelines for Designing More Usable Web Pages are one step towards avoiding creating an inaccessible page with JavaScript.  Here are JavaScript specific guidelines:

  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 mechanism for the user to freeze or slow-down any moving or blinking objects, particularly those that contain text.
    Some users will have difficulty responding to or reading non-static information within the allotted time.  Hopefully, in the future, user agents will have more control over this situation or this mechanism will become inherent in the JavaScript language.

  3. Provide a <NOSCRIPT> option for all scripts.
    For example:

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

  4.   Make scripts and applets keyboard operable (using standard conventions).