Scripting

Using javascript does not make your site inaccessible. However, a user should be able to interact with your website with javascript turned off. Also, special care must be taken to ensure that the scripting you do implement can work with the keyboard and screen reader technology. The best strategy with javascript is to use progressive enhancement: make the navigation work for the most basic browser configurations while allowing for more complicated interaction that is supported by external CSS and javascript files.

Mouse-dependent Event Handlers

Care must be taken when coding mouse-dependent event handlers. Do not use them as the sole method of triggering an action. People using screen readers or who cannot use a mouse may not be able to operate the controls using these handlers. The event handlers in the subsections below can cause problems.

onClick

As long as onClick is used with an anchor tag or form control, most browsers and assistive technologies will be able to to trigger the event with the Enter key. However, if onClick is used with nonlinked text or images, assistive tech users will not be able to access the control. Therefore, limit the use of the onClick event handler to links or form controls.

View more accessibility information about onClick»

onMouseOver and onMouseOut

onMouseOver and onMouseOut event handlers should be accompanied by onfocus and onblur, respectively. onfocus and onblur are hardware-independent event handlers, and unlike onMouseOver and onMouseOut, can be accessed by assistive technology with a simple addition to your code:

<p class="rollover">
  <a href="#" 
     onmouseover="swap_image( event, 'images/example1a.png')" 
     onmouseout="swap_image( event, 'images/example1.png')"
     onfocus="swap_image( event, 'images/example1a.png')" 
     onblur="swap_image( event, 'images/example1.png')">
     <img src="images/example1.png" alt="Image Button"/>
  </a>
</p>

View more accessibility information about onMouseOver and onMouseOut»

onMouseDown

If the onmousedown, onmouseup and onmousemove event handlers are used, equivalent functionality also needs to be implemented through the keyboard as well. This addition will benefit all users by providing an alternate means of interacting with the web page.

onChange used with onSelect

The combination of the onChange and onSelect event handlers can cause problems for keyboard-only users. Although they are device independent, they need to be tested with the keyboard to ensure that they are accessible.

View more accessibility information about onChange used with onSelect»

onHover

onHover should be accompanied by an onFocus element. onHover is inaccessible to everything but a mouse. Additionally, mobile device users interact with your web content directly with their fingers, rather than using a mouse, which does not work well with hover states. Elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on touch-screen devices.

back to top


Keyboard traps

One of the hazards of using javascript in your pages is the potential for creating a keyboard trap. A keyboard trap occurs when a web page visitor cannot move focus away from a web page element using the keyboard alone. This is a particular problem for assistive tech users, so much so that screen reader users often avoid using the tab key on an unfamiliar web page to avoid keyboard traps. (Accessibility evaluators should tab through a page to find traps.) Using blur or keypress events to alter an element’s behavior can be problematic. Dan stringer has posted a very nice article about keyboard traps and how to avoid coding them.

back to top


AJAX and ARIA

The use of AJAX introduces new challenges in accessibility. Updating information on a page without a page refresh can disorient assistive tech users or leave them unable to view the updated content. Enter ARIA roles and properties, which are a means of making AJAX widgets accessible. The scope of ARIA role and property code is limited to assistive technologies and otherwise has no effect on the functionality of a web page.

You may use ARIA techniques when making expanding text or menus, slider bars, error messages, etc. The Paciello Group and Open Ajax Alliance have posted examples that you can use as templates for some of the most common AJAX implementations. The W3C has published an ARIA primer.

View more information about ARIA resources, techniques, validation and testing on the WebAIM ARIA page.

back to top