Creating Accessible JavaScript
Other Issues

Article Contents

  1. Page 1: Overview of Creating Accessible Javascript
  2. Page 2: JavaScript Event Handlers
  3. Page 3: Other Issues
    1. Dynamic HTML and Accessibility
    2. Using document.write
      1. document.write example
    3. Pop-up Windows
      1. Pop-up example
    4. Redirecting and Refreshing Browser Windows
    5. Using Pure CSS as a JavaScript Alternative
  4. Page 4: JavaScript Alternatives
  5. Page 5: Accessible JavaScript Summary

Dynamic HTML and Accessibility

Dynamic HTML (DHTML) is typically a combination of Cascading Style Sheets (CSS) and JavaScript. DHTML allows developers to display, hide, or move information based upon input from the user or pre-programmed commands. Many of the examples in this section have used DHTML. Most drop-down or fly-out menu systems found on Web pages also use DHTML. Because most of these DHTML elements are modified based upon mouse input, they are typically inaccessible to users who do not use a mouse. When DHTML is used, two items must be evaluated to determine its impact on accessibility:

  1. Is the event used to trigger a change device independent? If the mouse is required, then it is not fully accessible.
  2. Is the DHTML content or functionality itself accessible? If assistive technologies cannot adequately access DHTML triggered content or functionality, then it is not fully accessible.

Using document.write

Dynamic, constantly changing information is being written to the page in this example using the document.write command in JavaScript. In most cases, content that is written to the page using JavaScript is accessible to assistive technologies. However, if the dynamic content is constantly changing or otherwise interferes with navigation or browser functionality, then it may cause accessibility problems.

document.write example

The current time is displayed in the text box below. It updates and changes every second.

Problems

In this case, because the content is constantly changing and refreshing, a screen reader would not be able to read it and it may cause some confusion.

Solutions

When using dynamic information, you must first ask yourself if it is necessary and vital to the function or content of the page. If so, there is often a way to provide the content without using inaccessible JavaScript. For instance, you could write the current time to the page when it loads using a server-side script. Though it will not be constantly updating, it may suffice. You may also have the user select a link or button to go to another page that displays the current time from server side processing. Another approach that uses a more accessible implementation of JavaScript would be to provide a link or button that allows the user to display the current time at their request.

<input type="button"
value="Display the current time"
onclick="alert('The current time is ' + timeValue);" />

Pop-up Windows

Pop-up windows provide a unique accessibility problem. First of all, most usability experts would argue against the use of pop-up windows except in the most extreme of cases. If you must use pop-up windows, know that they introduce several very unique accessibility issues. For a visual user, it may be difficult to notice and navigate to the new window. For someone who is using assistive technologies, the new window may be annoying and confusing because the default behavior for the link has been modified. JavaScript implementation may make the new window difficult or impossible to resize or scale for someone using a screen enlarger. For someone who is blind, there is typically no indication that they are presently navigating in a new window. When the screen reader user attempts to return to the previous page by selecting the back button, it may be confusing to find that this does not work.

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>

Note

If you are using software to block pop-up windows, you may need disable the software or select the link in a way that bypasses the pop-up blocker (typically Ctrl + click or Ctrl + Enter with the link selected).

In the example code above, the link will continue to work normally (i.e., in the same browser window) if JavaScript is disabled.

When using JavaScript to open new windows, you can modify the size and position of the new window. You can also add or remove functionality of the window, such as the ability to resize, display scroll bars, show tool bars, etc. Be very careful when changing the default behavior of the browser window. If a user has low vision and must enlarge the content, a small window that cannot be enlarged and does not display scroll bars would be very inaccessible. Someone with a motor disability may rely upon large tool bars to accurately control the web browser, so removing or modifying them may introduce difficulties for this user.

As you can see, there are many difficulties in both usability and accessibility that arise through the use of pop-up windows. Care must be taken in making the decision to use them. If they are used, thorough user testing of your implementation is vital to ensure accessibility. Always alert the user to the fact that a pop-up window will be opened.

Redirecting and Refreshing Browser Windows

When the page the browser is viewing suddenly changes or refreshes, the person viewing that page may become disoriented or confused, especially if that person is using an assistive technology. This is commonly done with page redirects when page content has been moved or updated. Section 508 requires that users be given control over time sensitive content changes. Do not automatically change or refresh the browser window without first alerting the user that the change will occur and giving him/her the ability to disable or postpone the change.

Using Pure CSS as a JavaScript Alternative

As mentioned previously, Cascading Style Sheet (CSS) parameters are often modified using JavaScript to create dynamically changing DHTML pages. However, with the advent of CSS version 2, much of the dynamic functionality available with JavaScript is now contained within the specifications for CSS itself. This allows the construction of interactive and dynamic navigation and layout elements without the need for JavaScript events. You can create drop-down menus, interactive images, and other exciting features in Web sites without worrying about device dependent event handlers. However, the new CSS standards are not fully supported in modern browsers, namely Internet Explorer.

Also, screen readers do not have great CSS support, especially when presented with content that can be made visible or invisible using either the display:none or visibility:hidden styles. Many screen readers do not read content that is assigned these styles even though the content is still part of the underlying structure of the page. Until there is better CSS support in both web browsers and assistive technologies, using CSS alone to produce dynamic content should only employed with much testing in a variety of browsers and screen readers.

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University