Creating Accessible JavaScript
JavaScript Alternatives

Article Contents

  1. Page 1: Overview of Creating Accessible Javascript
  2. Page 2: JavaScript Event Handlers
  3. Page 3: Other Issues
  4. Page 4: JavaScript Alternatives
    1. Introduction
    2. Server-side Processing
    3. Using the <noscript> Element
      1. <noscript> example
  5. Page 5: Accessible JavaScript Summary

Introduction

Whenever JavaScript cannot be made directly accessible, an accessible alternative must be provided. Also, many user agents, such as web-enabled cell phones and PDA's, do not yet utilize JavaScript. There are several ways you can provide accessible alternatives when the scripting cannot be made accessible or when the end user does not have JavaScript enabled.

Server-side Processing

In many cases, the functionality provided by JavaScript can be duplicated by server-side scripting. For example, JavaScript is often used to validate form elements before a form is posted. Instead of implementing such JavaScript programming and its accompanying accessibility techniques, you could use a server-side script to validate the form elements. JavaScript is often used to write dynamic information to a web page, such as the current date and/or time. Again, using a server script or server-side include negates the need for additional accessibility implementation.

Using the <noscript> Element

Making JavaScript natively accessible is very important. However, in some cases, the end user may not have JavaScript enabled or may be using technologies that do not support JavaScript (e.g., cell phone, PDA, etc.). In such cases, you can provide non-JavaScript alternatives to user's who cannot or choose not to view JavaScript content.

When JavaScript is used within a Web page, the most straightforward way to provide an alternative for the JavaScript-generated content is to provide content within the <noscript> element. The <noscript> element can be used within your page to display content in browsers that do not support or have disabled JavaScript. However, if JavaScript IS enabled the <noscript> element is ignored.

Important

Providing an accessible alternative within the <noscript> element for an inaccessible script will not make the page accessible. The <noscript> content will only display if JavaScript is disabled. Most screen reader users have JavaScript enabled, and will thus encounter your inaccessible script and not the <noscript> content.

The <noscript> element provides alternative text for the JavaScript. If the content or functionality of the script needs an accessible alternative when JavaScript is disabled, then you need <noscript>. The <noscript> content should ideally contain the equivalent content or functionality that is provided by the script. However, this is often not possible. It is not sufficient to simply indicate, "Your browser does not support JavaScript." This does nothing to make the content accessible. You may, for example, provide a link to an accessible HTML alternative or to a page that utilizes server-side scripting instead. Or, at very least, describe the type of content that would be displayed if JavaScript were enabled.

<noscript> should be used anytime alternative or non-javascript content or functionality is required.

<script type="text/javascript">
<!-- document.write("The current time is " + currenttime) -->
</script>
<noscript>
<!-- link to page that displays time from server-side script -->
<a href="time.htm">View the current time</a>
</noscript>

<noscript> example

In the following example, two form buttons are provided within the HTML code. If you have JavaScript enabled, the document.write command within the <script> element will display the first button. If this button is selected, it triggers a JavaScript function that may be used to validate and submit the form using additional JavaScript within the page. If JavaScript is not enabled, then the button contained within the <noscript> element is displayed, which could submit the form to a server-side processing script, which would provide the form validation and feedback.

<script type="text/javascript">
<!--
document.write('<input type="button" value="Submit" onclick="validateForm();" />');
-->
</script>
<noscript>
<p>
<input type="submit" value="Submit">
</p>
</noscript>

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