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.
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.
onMouseOut event handlers should be accompanied by
onblur are hardware-independent event handlers, and unlike
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>
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
The combination of the
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.
onHover should no longer be used. It 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
mouseout or the CSS pseudo-class
:hover may not always behave as expected on touch-screen devices.
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, Open Ajax Alliance, and Fluid Project all have posted examples that you can use as templates for some of the most common AJAX implementations. Web authors should also use AJAX toolkits that have built-in ARIA functionality. The Paciallo Group has a blog posting that reviews the most popular ARIA-enabled libraries.