Scripts using event handlers

Technique summary for using event handlers

Event handlers accompany HTML code 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, and include onmouseover, onmouseout, and ondblclick. Using device-dependent event handlers may cause the content to be inaccessible to someone who cannot use the device that is required for that specific event handler.

Other event handlers are device-independent and are triggered by both the mouse and keyboard or by other means. Examples of these device-independent event handlers include: onfocus, onblur, and onselect.

The onclick event handler can be either device-dependent, or device-independent, depending on its usage. Refer to the onclick technique below for more information.

For event handlers that do more than just change the presentation of an element, content developers are required at a minimum to use one or more of the following techniques:

• Use device-independent event handlers rather than, or in addition to, device-dependent event handlers. In HTML 4.01, device-independent event handlers are onfocus, onblur (the opposite of onfocus), and onselect.
  
  In the following example, the developer wants additional text to be displayed when a user with a mouse puts the cursor over the image (onmouseover). To make this type of functionality accessible, onfocus and onblur must also be used. In addition, because this is essentially an ?image-swap?, alt text must be added to the image, so that visually impaired users have access to the content as well. The image-swap below can be executed with a mouse or with a keyboard.
  
  
  The code for the above example is below:
  

  <a href="webscripts_eventhandlers.html#imageswap" onmouseover="document.images['ex1pic2'].src = ex1on.gif';"
onfocus="document.images['ex1pic2'].src = 'ex1on.gif';"
onmouseout="document.images['ex1pic2'].src = 'ex1off.gif';"
onblur="document.images['ex1pic2'].src = 'ex1off.gif';"><img src="ex1off.gif" width="289" height="79" id="ex1pic2"
alt="Accessibility - The quality of being accessible, or of admitting approach; receptibility." /></a>

• Test device-dependent event triggers to determine if an additional keyboard event is needed. Browsers will sometimes map the pressing of the keyboard Enter key to mouse events. Therefore, device-dependent event triggers must be tested to determine if the browser simulates the event with the keyboard as a redundant input mechanism. If it does, then specifying the mouse event is sufficient. Two events might cause a problem in the server logic when only one is expected. For example, "onKeyDown" should not be specified with "onMouseDown" because it will cause two events to be submitted to the server when the Enter key is pressed: one for the onKeyDown event because the user pressed down the Enter key and a simulated mouse click provided by the browser for onMouseDown.

  If the browser does not simulate the mouse event when the keybord is used, then the keyboard event must also be specified.

  onclick is an example of an event handler that sometimes behaves as a device-independent handler and in other cases as a device dependent handler. Specifying the event handler onclick on a link or form element should cause the browser to evoke the event if either the mouse or the Enter key is used to select it. In this case, onclick acts in a device-independent manner, and is therefore directly accessible. This is because the link or form control will gain focus when navigating with the keyboard. In other words, for a link that uses ?onclick?, if tabbing to a link and pressing the Enter key will cause the onclick event to occur - then the script functionality can be operated via the keyboard without requiring the developer to code the second redundant "onKeyPress" event for the same element.

Example 1 below below uses onclick as a device-independent link, which is executed when the Enter Key is used to select the element:

Example 1

View this device-independent onclick example

The code for the Example 1 is below:

<a href="webscripts_eventhandlers.html#postexample" onclick="return confirm('Clicking OK will take you to the next paragraph');">View this device-independent onclick example</a>

When the onclick event is used with elements that are not links or form controls, onclick is device-dependent, therefore you must provide a redundant device-independent event handler (onKeyPress) or an equivalent alternative. In order to gain focus on the text, you will need to implement the tabindex attribute. Once that is done, you can use the onkeypress event handler to provide an alternative to onclick. In Example 2 below, the "View this onclick with onKeyPress example" text has the tabindex set, and has both the onclick and onKeyPress event handlers defined.

Example 2

The code for the Example 2 is below:

<div tabindex="0" onclick="alert('you clicked. onclick was activated');" onkeypress="if (event.keyCode == 13) { alert('you pressed enter'); }">View this onclick with onKeyPress example</div>

NOTE: Tabindex support is included in most versions of Internet Explorer, but is only supported by Mozilla browsers that are version 1.8 and higher.

• Do not write event handlers that use double-clicking ("ondblclick"). There is no keyboard equivalent specified in HTML 4.01.
• Do not write event handlers that rely on mouse coordinates. There is no keyboard equivalent way to perform this function.

One or more of the above techniques are required; the following technique is recommended to enhance accessibility:

• Ensure that there are direct links as an alternative for elements that can only be activated by an event handler. For example, the keyboard tab key must be able to be used to "stop" at the element and then activate it by pressing the Enter key. Typically only links and form controls are in the keyboard tab order.
• Avoid the use of onchange with a drop down listbox. Even though the user can display the list of choices with ALT + DOWN ARROW, most users don't know this keyboard command. They will simply use the DOWN ARROW key which will change the selection to the first item in the list and trigger the event. Some browsers will issue the onchange immediately, while others will issue the onchange when the enter key is pressed. If you must use onchange, it is recommended that you include the ALT+DOWN ARROW keyboard operation instructions on the page. Example 3 below demonstrates this problem.

Example 3

The code for Example 3 is:

A better technique is to remove the onchange element, and add a "go" button that the user must activate before being re-directed to a new page. Example 4 below uses an associated button with an onclick handler instead of using onchange on the select element.

Example 4

The code for Example 4 is:

Related script techniques

• Scripts used for background processing and pop-ups
• Hidden content, document.write, and scripts that modify content
• DHTML
• Additional techniques to enhance accessibility of essential scripts

©2001, 2008 IBM Corporation

Last updated February 28, 2008.

Return to the Scripts checkpoint