Note:
DEMO VERSION, many links are non-functional
Back
to sample page index
JavaScript Event Handlers
JavaScript Event Handlers Contents
Overview
JavaScript can be processed using <script> elements and event handlers. The <script> element can contain JavaScript code directly:
<script type="text/javascript"> <!-- function doit(); --> </script>
or can open an external JavaScript (.js) file:
<script type="text/javascript" src="scripts.js">
The <script> element is processed when the page is loaded and requires no user intervention. The
contents and functionality of the script processed within the <script> element must be directly
accessible or an accessible alternative of the content and functionality must be provided.
Event handlers accompany existing 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. Other event handlers are device independent and are triggered by both the mouse and keyboard or by other means. Using device dependent event handlers may cause the content to be inaccessible to someone that is not able to use the device that is required for that specific event handler.
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, can
be used, as long as any important content or functionality is also available without using the mouse.
Example 1
Place your mouse over the following image to see an example of onMouseOver. When the mouse is placed
over the image of the word "Accessibility", another image appears in its place which presents the definition of the word
"Accessibility".
<a href="page.htm" onmouseover="document.images['ex1pic'].src='ex1on.gif';" onmouseout="document.images['ex1pic'].src='ex1off.gif';"> <img src="ex1off.gif" width="289" height="79" id="ex1pic" alt="Accessibility - The quality of being accessible, or of admitting approach; receptibility." /> </a>
Important
All of the examples in this lesson are coded to be XHTML 1.0
Strict compliant. XHTML requires lower-case event handler names
(e.g., onmouseover instead of onMouseOver).
Try navigating to the image using the keyboard. Notice that the additional information does not display. The alternative text for
the image provides the content displayed using the onmouseover event handler. This allows users who
know how to access this alternative text to get the content, but is not a truly universal solution.
Problems
In this example, additional content is being displayed using onMouseOver. This content can only be
viewed if the user uses a mouse to hover over the image. It is not available to someone who is using the keyboard to navigate
through the page. The onMouseOver event handler cannot be made directly accessible to keyboard users.
Thus, an alternative must be provided.
Partial Solution
Place the additional content in the alternative text of the image itself. This would work for screen reader users - the screen reader would read the alternative text. But for sighted users whose browser does not display alternative text for images or who do not know to mouse over the image to see the alternative text, this is not a viable alternative. Still, the image must have equivalent alternative text.
Solutions
In addition to onMouseOver and onMouseOut,
use onFocus and onBlur. These actions
will be triggered when the keyboard is used to navigate
to and from a link that surrounds the <img> element.
<a href="page.htm" onmouseover="document.images['ex1pic'].src='ex1on.gif';" onfocus="document.images['ex1pic'].src='ex1on.gif';" onmouseout="document.images['ex1pic'].src='ex1off.gif';" onblur="document.images['ex1pic'].src = 'ex1off.gif';"> <img src="ex1off.gif" width="289" height="79" id="ex1pic" alt="Accessibility - The quality of being accessible, or of admitting approach; receptibility." /></a>
You must still provide the descriptive alternative text for non-visual users, but onFocus and onBlur will provide the visual image swap for users that are using a keyboard only.
Example 2
A common use of onMouseOver and onMouseOut is for fly-out or drop-down
navigation systems. Place your mouse over the menu items below to view an example of drop-down menus. When the mouse is placed over
the main menu items (onMouseOver), additional sub-menu items appear below. When the mouse is removed
from the menu system (onMouseOut), then the sub-menus disappear.
|
Products
|
Services
|
Support
|
Problems
Additional content and functionality is being displayed using onMouseOver. In this example, JavaScript
is controlling the display of Cascading Style Sheet elements within the page. The sub-menu items will only be visible if the mouse
is placed over the main menu item. These items may not be available if JavaScript is disabled and may not be read by assistive
technologies.
Solutions
When possible, use additional event handlers that allow keyboard navigation. When this is not possible, you must provide redundant navigation. This can be done one of two ways. First, provide links within the main content of the page to the pages displayed in the sub-menu navigation. Second, have the main navigation item (e.g., Product, Services) link to a page that contains the sub-menu navigation items. Select on the Products, Services, or Support links above to see an example of providing redundant navigation.
onFocus and onBlur
These event handlers are typically used with form elements, such as text fields, radio buttons, and submit buttons. onFocus is triggered when the cursor is placed on or within a specific form element. onBlur is triggered when the cursor leaves a form element.
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.
Example 1
<input id="fname" type="text" onfocus="alert('Enter your first name only');" />
Problems
None. Although the alert window may be distracting and unnecessary, it does not introduce any serious accessibility issues. The alert is triggered when the text box gains focus, either by using the keyboard or mouse. JavaScript alerts are read by most modern screen readers and can be used to increase the usability of forms by providing timely feedback, instructions, or cues. However, if JavaScript is disabled, then the alert will not be available at all.
Example 2
Problems
Although the onblur event is device independent, it is being used to execute JavaScript code that makes
the page difficult to navigate. The textbox maintains focus until the correct answer is given. This change in browser default
behavior may be confusing and restricting. Also, the feedback is displayed in a different part of the page. Because focus is
maintained within the text box, a screen reader will not be able to access the feedback text or any other part of the page until
the correct answer is entered.
Solution
Do not force the focus to remain within the text box. Allow the user to navigate throughout the page. Display the feedback on another page after the form has been submitted (works without JavaScript) or display the feedback with a JavaScript alert (requires JavaScript). Try entering a letter into the textbox above to see a JavaScript alert feedback message.
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 hypertext 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 trigger the onClick event if it is used with non-link and non-control elements, such as plain text or table cells.
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, which should be avoided.
Example 1
The following link triggers a JavaScript confirmation box which allows you to confirm whether you want to view the page or not.
<a href="page.htm" onclick="return confirm('Are you sure you want to view this page?');">
View this onClick example
</a>
Example 2
The following text is styled to appear like a link (blue and underlined), but is plain text that has an onClick event which opens another document in the browser window. Use the mouse to click the following text.
View another onClick example
<p style="color:blue; text-decoration:underline" onclick="location.href='page.htm'"> View another onClick example </p>
Example 3
A very common use of JavaScript is to validate form information. The following form will use JavaScript to allow you to confirm the information you have entered.
Enter your name in the following box, then press the Submit button.
<form action="page.htm" onsubmit="validate(); return false;">
<p><label for="yourname">Name:</label>
<input type="text" id="yourname" />
<input type="button" value="Submit" onclick="validate();" />
</p>
</form>
Problems
The confirmation and alert dialog boxes that are triggered by the onClick event are accessible to
browsers and assistive technologies that have JavaScript enabled. Validating the form information with a server side script and
then displaying feedback on another Web page allows you to bypass any problems that may occur in the JavaScript code and allows the
form to validate if JavaScript is disabled. If JavaScript is used to validate the form, make sure that all form elements and
functionality can be completed using the keyboard. Because the onClick handler is used with a form
element, it is activated using both the mouse and the keyboard.
Note:
Because most browsers will submit the form when the "Enter" key is pressed, the onsubmit event
handler has been added to the <form> tag to ensure that the form will validate if the user does
not activate the "Submit" button, but presses the "Enter" key while focus is in the text box. Also notice the required form label
for the text box.
Example 4
This example also validates the form information, but feedback is displayed in another place within the page.
How many items are in a dozen? Enter the amount into the box below, then press the Check button.
<form action="page.htm" onsubmit="checkAnswer2(); return false;">
<p class="invis" id="answercorrect">
Correct, there are 12 items in a dozen.
</p>
<p class="invis" id="answerwrong">
Incorrect. There are 12 items in a dozen.
</p>
<p>
<label for="answerbox">Enter Answer:</label>
<input type="text" id="answerbox" />
<input type="submit" onclick="checkAnswer2()" value="Check" />
</p>
</form>
Problems
The feedback is not presented in a manner that would be accessible to some assistive technologies. In this example, JavaScript is modifying the display style parameters for elements within the page to make them visible or invisible based upon the response. The screen reader user would not be aware that additional content has suddenly appeared within the page.
Solutions
- Validate the form information with a server side script, then display the feedback on another page.
- Provide the feedback in a way that is accessible, such as a JavaScript alert or another form element.
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 or when the text changes within a text box). The onSelect event
handler is processed when text is selected within a text field or text area. 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.
onChange Example
The following drop-down menu form element is used for navigation.
By selecting an item from the list, JavaScript will automatically
open the specified page within the browser. Note: In
some browser you may have to hit the Enter key or click on
the page after selecting a menu item to activate the onchange event
handler. Click on the "Back"
button in the browser to return to this page.
<script type="text/javascript">
<!--
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}
//-->
</script>
<form action="page.htm" onsubmit="return false;">
<p>
<label for="selectPage">Go to:</label>
<select name="selectName" onchange="goto_URL(this.form.selectName)">
<option value="">Select a page:</option>
<option value="page.htm">Page 1</option>
<option value="page.htm">Page 2</option>
<option value="page.htm">Page 3</option>
</select>
</p>
</form>
Problems
The JavaScript causes the browser to go to a new page using onChange or when the user selects an item
from the select list. If the end user is using a keyboard, the onChange event handler is executed for
every item within the list. It is impossible for the user to directly select the last item in the list, as each previous item
within the list will trigger the page change. The only way the user can select the last menu item is by navigating to the page for
the first item in the list, then pressing the "Back" button, navigating to the second item, then pressing the "Back" button, and so
forth until the last menu item is accessed.
Solutions
Rather than using the onChange event handler, allow the user to select the item from a list then select
a button or submit the form to activate the script. When server-side scripting is used to process the form information and redirect
the browser accordingly, there is no need for JavaScript at all. The following code demonstrates one method of fixing the
onChange problem.
Select a page using the drop-down menu then select the "Go!" button. Note: Click on the "Back" button in the browser to return to this page.
<form action="page.htm" onsubmit="return false;">
<p><label for="selectPage2">Go to:</label>
<select name="selectPage2" id="selectPage2">
<option value="">Select a page:</option>
<option value="page.htm">Page 1</option>
<option value="page.htm">Page 2</option>
<option value="page.htm">Page 3</option>
</select>
<input type="button" value="Go!" onclick="goto_URL(this.form.selectPage2);" /></p>
</form>
Using Device Independent Event Handlers
As mentioned previously, 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. For instance, both onMouseOver and onFocus (as well as onMouseOut
and onBlur) can be used to provide both keyboard and mouse activation of a script.
Using multiple device dependent event handlers together as a method of implementing
device independence requires a great deal of testing across different browsers
and assistive technologies to ensure that accessibility is not limited in any
way.
