Creating Accessible JavaScript
Overview of Creating Accessible JavaScript

What is JavaScript?

This may best be answered by defining what JavaScript is NOT. First, it is not HTML. JavaScript does not use HTML tags or abide by any of the general rules of the HTML language. You can, however, use JavaScript with HTML on a webpage. Second, JavaScript is not Java. Although JavaScript is often called Java, the two are not the same. Java was developed by Sun Microsystems and is a stand-alone programming language. JavaScript, on the other hand, was developed by Netscape Corporation. Although similar to Java in syntax, JavaScript is not a stand-alone language; in order for JavaScript to work, it must be part of a web page that is being displayed in a browser that understands the JavaScript language. Sun's Java programming language can be implemented in webpages as a built in program, whereas JavaScript scripts are reliant upon the client (visitor's) computer in order for them to work.

Once again, JavaScript is not HTML or a version of HTML. It is a distinct, separate scripting language. HTML is read and processed by the web browser. When the browser reads JavaScript code within your HTML document, it processes the code, then displays any output within the web page. The computer reading the JavaScript must have a JavaScript interpreter, a program that interprets the script and runs it, and that interpreter must be enabled.

HTML, alone, creates very static pages. There is little user interaction and little by the way of dynamic content within a particular page. HTML cannot think; it does not have the capabilities to perform mathematics, store variables, or dynamically display content. JavaScript allows your web page to 'think'. Although many server-side scripting programs (such as PHP, JPS, ASP, or ColdFusion) have the ability to perform such functions, JavaScript can perform these functions within the client web browser. Because JavaScript is a scripting language, it allows developers to implement little applications into their pages. These programs may do things as simple as changing a graphic when the mouse rolls over it to something as complex as performing advanced mathematical formulas on user input.

JavaScript Accessibility Issues

JavaScript allows developers to add increased interaction, information processing, and control in web-based content. However, JavaScript can also introduce accessibility issues. These issues include:

• Navigation. Inability or difficulty navigating using a keyboard or assistive technology.
• Hidden content. Presentation of content or functionality that is not accessible to assistive technologies.
• User control. Lack of user control over automated content changes.
• Confusion/Disorientation. Altering or disabling the normal functionality of the user agent (browser) or triggering events that the user may not be aware of.

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

JavaScript that does not impact accessibility

Just because JavaScript is utilized on a page does not mean that the page is inaccessible. In many cases, JavaScript can be used to increase accessibility. Additional information, warnings, or instructions can be given to users through JavaScript prompts. For instance, under the Section 508 guidelines of United States law, a user must be notified when a timed response is required and given sufficient time to indicate more time is required. Such functionality would be difficult with HTML alone.

JavaScript is sometimes used to create visual interface elements that do not affect accessibility. JavaScript is commonly used for image rollovers, where one image is replaced with another when the mouse is placed above it; for example, when a navigation item changes to display a shadow, glow, or highlight when the user mouses over it.

Such uses of JavaScript do not need additional accessibility features incorporated because important content is not displayed or functionality introduced by such scripting.

Making JavaScript accessible involves looking at the following issues. Each of these will be discussed in the next lessons.

• When using event handlers, use only those that are device independent (e.g., do not require the use of the mouse only).
• Content and functionality that is provided through scripting must be made accessible to assistive technologies.
• Web pages that utilize scripting must be fully navigable using a keyboard.
• JavaScript should not modify or override normal browser functionality in a way that may cause confusion.
• When JavaScript cannot be made natively accessible, an accessible alternative must be provided.

Comparison of JavaScript Guidelines

Section 508 of the Rehabilitation Act (in the United States) and the W3C Web Content Accessibility Guidelines (WCAG) 1.0 both address the accessibility of scripting elements. They require that the functionality and content of scripts be accessible to assistive technologies such as screen readers. Additionally, users must be given control over time-based content changes. There are, however, differences between the two accessibility guidelines. WCAG requires that content and functionality be accessible with scripting disabled and that users should be alerted if JavaScript changes the appearance or functionality of the browser window, whereas Section 508 only requires that the scripting be made accessible or that an accessible alternative is provided.

Testing for JavaScript Reliance

As mentioned above, your web pages should be fully functional with JavaScript disabled. This is required under Priority 1 of the Web Content Accessibility Guidelines. Section 508 does not require the page to function if JavaScript is disabled, but does require that the scripts themselves be natively accessible. This tutorial will teach strategies for making your scipts natively accessible and assumes that if you, as a developer, want to achieve a higher level of accessibility or comply with the Web Content Accessibility Guidelines, that you will also test your pages to ensure that they work with JavaScript disabled.