Accessible Javascript
JavaScript Event Handlers

Overview

Event handlers accompany existing HTML code or dynamically generated content and are triggered by a browser or user event - such as when the page loads, when the user clicks the mouse, or when the time is 8 p.m. Some event handlers are dependent upon use of a mouse or keyboard. These are called device dependent event handlers. Other event handlers are device independent and are triggered by both the mouse and keyboard or by other means.

Important

To ensure accessibility, use either a device independent event handler (one that works with both the mouse and the keyboard) or use both mouse dependent and keyboard dependent event handlers.

onMouseOver and onMouseOut

The onMouseOver event handler is triggered when the mouse cursor is placed over an item. As its name implies, onMouseOver requires the use of a mouse, thus it is a device dependent event handler and may cause accessibility issues. onMouseOver, and its companion, onMouseOut, may be used, as long as any important content or functionality is also available without using the mouse. If the mouse interaction is purely cosmetic (such as the addition of a glow or drop shadow), there are likely no accessibility issues, so long as the style change does not indicate some function (such as to indicate that an element is clickable).

If the mouse interaction presents additional information or content, such as a tooltip, a navigation menu, etc., then this content will not be accessible to anyone not using a mouse. Additional considerations are necessary for accessibility.

For screen reader users, the additional content might be provided directly in an accessible way, such as through alternative text, through an ARIA label or description, or perhaps through off-screen text. However, for sighted keyboard-only users, there must be a mechanism for them to access and view the newly revealed content or functionality.

In addition to onMouseOver and onMouseOut, use onFocus and onBlur. These actions are triggered when the keyboard is used to navigate to and from an element. Of course these can only be triggered on keyboard-navigable elements - links and form controls (or perhaps elements with tabindex). Simply triggering the change with a standard link and using both mouse and keyboard dependent event handlers will help ensure accessibility.

Sometimes scripting is used to present complex interactions, such as a drop-down or fly-out menu. While these can be made technically accessible, sometimes an accessible alternative approach may be more friendly. For example, instead of forcing users to navigate through a complex and lengthy navigation menu, you could instead ensure that the menu system is NOT directly keyboard accessible (nor read by a screen reader), but provide standard link functionality on the top-level menu item (e.g., "Products"). This link would take the user to a secondary page that provides standard links to the pages provided through the complex menu (e.g., a Products landing page that has links to the various product categories). While not exactly the same interaction that mouse users may choose, such alternatives are often more intuitive and friendly for all users.

onFocus and onBlur

These event handlers are typically used with form elements, such as text fields, radio buttons, and submit buttons, but can also be used with links. onFocus is triggered when the cursor is placed on or within a specific form element, or when a user 'tabs' to the element using the keyboard. onBlur is triggered when the cursor leaves a form element or the user 'tabs' away from it.

Both of these event handlers are device independent, meaning that they can be performed with the mouse, keyboard, or other assistive technology. The actions that are performed as a result of these event handlers must be analyzed to determine if they cause accessibility problems. Typically, these events do not cause accessibility issues unless they are modifying the default behavior of the web browser or are interfering with keyboard navigation within the web page. Examples of such issues might be automatically setting focus to other page areas with onFocus and onBlur, trapping the user inside a form control, dynamically revealing form controls immediately upon a user leaving (blurring) a form control, etc. Keyboard and screen reader testing will be necessary to ensure these interactions are built in an accessible manner.

onClick and onDblClick

The onClick event handler is triggered when the mouse is pressed when over an HTML element. onClick is intended to be a mouse dependent event handler. However, if the onClick event handler is used with keyboard-navigable links or form controls, then most major browsers and assistive technologies trigger onClick if the Enter key is pressed when the link or control has focus. In these cases, onClick is a device independent event handler.

Nevertheless, the Enter key will not always trigger the onClick event if it is used with non-link and non-control elements, such as plain text, table cells, or <div> elements, even if they made keyboard navigable using tabindex or are focused using scripting. In these cases, it will be necessary to detect the Enter and Space key presses while focus is placed on them.

The onDblClick event handler is associated with the double click of a mouse on a selected HTML element. There is no device independent or keyboard equivalent to onDblClick, so it must be avoided.

onChange and onSelect

The onChange event handler is triggered when a form element is selected and changed, for example, when a radio button is initially selected, when the text changes within a text box or text area, or when the active item in a select menu changes. Although these event handlers are device independent and can be activated using the mouse, keyboard, or other device, the actions that are performed as a result of these event handlers must be analyzed to determine if they cause accessibility problems.

A common use of onChange is on select menus to trigger navigation when the active option within the menu is changed. These menus can cause keyboard accessibility issues because you cannot scroll through the list using a keyboard without selecting one of the options, and thus triggering the onChange event. Some browsers (including Firefox) override these jump menus so they are not activated on keyboard change, but only after you either select an item using a mouse or press Enter if using the keyboard. However, these types of JavaScript 'jump' menus can be made keyboard accessible by removing onChange and providing a submit button separate from the list of choices that activates the currently selected item.

Using Device Independent Event Handlers

Several event handlers are device independent, including onFocus, onBlur, onSelect, onChange, and onClick (when onClick is used with link or form elements). When possible, use device independent event handlers. Other event handlers are device dependent, meaning that they rely wholly upon a certain type of input. For instance, onMouseOver, onMouseOut, and onDblClick rely upon the use of a mouse. There are also some event handlers that are dependent upon use of the keyboard (onKeyDown, onKeyUp, etc.). Multiple device dependent event handlers can be used together to allow both mouse and keyboard activation of JavaScript, but this requires testing across different browsers and assistive technologies to ensure that accessibility is not limited in any way.