• Home
• About this Site
• Contact Us
• RSS Feeds
• eGovRC Toolbar

Help & Print

Help Print

Resize Text

Categories, RSS and More

JavaScript

JavaScript is a client-side scripting language used by many different web sites. JavaScript can be used to create fly-out menus, mouseovers and form validation. However JavaScript has many accessibility problems; and a text equivalent is always required.

Relationship to checkpoints:

• Checkpoint 1.1 requires that you provide text alternatives for all JavaScript.
• Checkpoint 6.2 requires that equivalents to JavaScript are updated when the JavaScript changes.
• Checkpoint 6.3 requires that if JavaScript is disabled, that the page is usable, or, alternatively, an equivalent is provided.
• Checkpoint 6.4 and 9.3 require that you use device-independent and logical event handlers, such as ONFOCUS instead of device-dependent event handlers, such as ONCLICK or ONMOUSEOVER.
• Checkpoint 6.5 and 8.1 requires that JavaScript is created in an accessible manner.
• Checkpoint 10.1 requires that JavaScript not be used to create popup windows unless after informing the user.

Alternatives to JavaScript are used wherever possible

When first developing a site, consider whether JavaScript need be used in the site at all. Many common JavaScript functions are adequately replicated in HTML and provide an enhanced level of accessibility. Some of the things that should be replaced with HTML functionality are detailed in the following table.

Alternatives to Javascript

Functionality	JavaScript	Equivalent HTML
Text link	<a href=“javascript: location.href ='page.html'”> Page</a>	<a href=“page.html”> Page</a>
Opening a new window	<a href=“javascript:window.open ('page.html', '_blank')”>Page</a>	<a href=“page.html” target=“_blank”>
Form submission	<a href=“javascript: this.form.submit();”> Submit</a>	< input name=“ submit” type=“ submit” value=“ Submit”>

Provide a NOSCRIPT alternative for all Javascript

When it is necessary to include JavaScript functionality within a site, it is mandatory to require a text alternative. This can be done through the NOSCRIPT element. Content within the NOSCRIPT element must be the equivalent of the content or functionality provided by the JavaScript. The site must be functional and all content available when JavaScript is disabled.

Example – JavaScript form validation with a server-side fallback

When signing up for Gmail (with JavaScript enabled) there is a handy button to check the availability of your chosen login name:

 

If you type in a login name that is already taken or does not comply with requirements then a message appears once you have clicked the button:

 

This functionality is replicated when JavaScript is disabled. The login name availability is validated with the rest of the fields when the form is submitted:

JavaScript is not used in an inaccessible manner

It is important that JavaScript is developed in an accessible manner. Unfortunately, many known HTML accessibility problems can also result from the inaccessible use of JavaScript. For instance, the following is a list of accessibility issues applicable to both HTML and JavaScript.

• Content flickers
• Movement cannot be stopped
• Timeouts occur without informing the user
• A new window opens without informing the user
• The page refreshes without informing the user
• The current focus is changed without informing the user.
• The browser is redirected to another location without informing the user
• The user requires a mouse to access content or functionality

Specifically, there are a number of common JavaScript accessibility errors.

• When JavaScript has been used to update information in a page, the updated information appears before the current focus.
• The event handler ONDBLCLICK is used
• The event handler ONCLICK has been used instead of the generic ONSELECT
• The event handler ONMOUSEOVER has been used instead of using both ONMOUSEOVER and ONFOCUS
• The event handler ONMOUSEDOWN has been used without also using the keyboard event handler ONKEYDOWN
• The event handler ONMOUSEUP has been used without also using the keyboard event handler ONKEYUP

One of the most common misuses of JavaScript is to create inaccessible flyout menus. When JavaScript is used to create flyout menus, the relevant head navigation item must be a link which should link to a page that contains the links to the sub-navigation present in the initial flyout menu.

In the following example a flyout menu appears when a user hovers their mouse over a particular menu. With JavaScript disabled the flyout menu does not appear, however the initial navigation item (eg. “Business”) does not operate as a link and is therefore inaccessible.

 Site with JavaScript enabled (mouse hovering over ‘Business’ navigation item)

Site with JavaScript disabled (mouse hovering over ‘Business’ navigation item)

 

In the following example a flyout menu appears when a user hovers their mouse over a particular menu.

Flyout menu

With JavaScript disabled the flyout menu does not appear, however the initial navigation item (eg. “About us”) operates as a link. This link goes to a page which includes a list of the links that were available via the flyout menu.

 “About us” page that contains flyout menu items as text links

JavaScript can also be used to create expandable and collapsible menus, such as in the following example:

With JavaScript disabled the default presentation for expandable/collapsible menus should be to display all menu items and sub-items such as in the following example:

   

Further Information

Creating accessible JavaScript

• WebAIM – Creating Accessible JavaScript
• Jim Thatcher – Scripts and Applets
• IBM JavaScript Accessibility
• IBM - Scripts used for background processing and pop-ups
• IBM - Hidden content, document.write, and scripts that modify content
• IBM - DHTML
• IBM – Scripts using event handlers
• IBM – Non-essential scripts
• IBM - Additional techniques to enhance accessibility of essential scripts
• Accessible JavaScripting from the ground up

Common JavaScript mistakes

• The Behaviour Layer: Using JavaScript for good, not evil

JavaScript and screen readers

• JavaScript and accessibility

Last updated: 9 July 2007

Translate, Search, Login and Options