JavaScript event handler
  |  |
Print  |
Send  |
Share         |
Warning: The original version of this document is Creating Accessible JavaScript: JavaScript Event Handlers . This French translation was done by Ideose as part of an agreement between WebAIM and Ideose .
Note: See page documents on web accessibility for a list of all translated documents. Other resources on web accessibility are also listed in the portal accessible digital .
Summary
- Page 1: Introduction
- You are on Page 2: JavaScript Event Handler
- Page 3: Other issues of accessibility of Javascript
- Page 4: Alternatives to JavaScript
- Page 5: Summary for accessible Javascript
Overview
JavaScript can be executed using the tag <script> and an event handler.
The tag <script> can contain JavaScript code directly:
or open an external JavaScript file (. js):
The tag <script> is automatically executed when the page loads.
The content and functionality of the script executed in the tag <script> must be directly accessible or an accessible alternative content and functionality JavaScript must be given.
Event handlers are added to existing HTML and are triggered by an event or user browser - such as when the page loads, when the user clicks the mouse or at a specific time. Some event handlers are dependent on the use of a mouse or keyboard. These event handlers are called dependent on a device. Other event handlers are device-dependent and are triggered by both the mouse and keyboard or by other means. The use of event handlers depend on a device may result in inaccessibility of the contents to a person who is not able to use the device required for this event handler.
onMouseOver and onMouseOut
The event handler onMouseOver is triggered when the mouse cursor is placed on an item.
As its name suggests, onMouseOver requires the use of a mouse.
It is therefore dependent on a périphérque and can cause accessibility problems. onMouseOver and his companion onMouseOut can be used as all content and the important features are also available without using the mouse.
Example 1
Place your mouse over the image below to see an example of using onMouseOver .
« . When the mouse is placed over the image of "Accessibility", another image is displayed in its place, making the definition of "Accessibility".
Important
All examples on this page are coded in XHTML 1.0 Strict. XHTML request names of event handlers in lowercase (eg onmouseover instead of onMouseOver ).
Try to navigate to the image using the keyboard.
Note that when the additional information not displayed.
The text alternative for the image gives the content posted by the event handler onMouseOver .
This allows users who know how to access the text alternative to get the content, but this is not a true universal solution.
Problems
In this example, the additional content is displayed using onMouseOver .
This content can be displayed if the user uses a mouse to fly over the image.
It is not available to someone who uses the keyboard to navigate the page.
The event handler onMouseOver can not be directly made available to users of the keyboard.
Therefore, an alternative must be given.
Partial solution
Place the additional content in the text alternative of the image. This should work for users of screen readers - the screen reader will read the text alternative. But for sighted users whose browsers can not display the text alternative for images or who can not move the mouse over the image, it is not a viable alternative. However, the image must have an equivalent text alternative.
Solutions
In addition to onMouseOver and onMouseOut , use onFocus and onBlur .
These actions will be triggered if the keyboard is used to navigate to and from the link which includes tag <img> .
You should always provide a text alternative for the blind and onFocus and onBlur will allow users who navigate the keyboard to see the image change.
Example 2
A common use of onMouseOver and onMouseOut for the navigation menus down (fly-out or drop-down navigation systems).
Place your mouse over the menu items below to see an example of menus.
When the mouse is positioned on the main menu items ( onMouseOver ), sub-menus appear below.
When the mouse is removed ( onMouseOut ), the submenus disappear.
|
Products |
Services |
Support |
Problems
The content and additional functionality are displayed using onMouseOver .
In this example, the JavaScript CSS controls the display of elements on the page.
The submenus are visible only if the mouse is positioned on the main menu.
These sub-menus may not be available if Javascript is disabled and can not be read by assistive technologies.
Solutions
When possible, use other event handlers that allow keyboard navigation. When this is not possible, you must provide a method of redundant navigation. This can be done in two ways. First, give the links in the page content for the pages displayed in the sub-menu navigation. This is often done via a list of categorized links at the bottom of the page. The disadvantage of this method is that navigation is only available at the bottom of the page, which can be unintuitive for most users.
A second method to provide a redundant method of navigation is to add a link href to each of the main menu navigation (for example, Products, Services, etc.) to a Web page that contains the submenus.
If you select the links Products, Services or Support above, you will see an example of redundant navigation links.
Example
Although this method requires the creation of an additional page and introduces an additional step, it also gives full access to menu items in an intuitive navigation. This method also allows the submenus to be accessible when Javascript is disabled.
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 a specific form field. onBlur is triggered when the cursor leaves a form element.
These two event handlers are device independent, meaning they can be executed with the mouse, keyboard or other assistive technologies. Actions that are performed when these event handlers should be analyzed to determine if they cause accessibility problems. Generally, these event handlers are not the cause accessibility problems unless they change the default web browser or if they interfere with keyboard navigation in the Web page.
Example 1
Problems
No. While the alert window can be distracting and unnecessary, it does not introduce serious accessibility problems. The alert is triggered when the focus is put into the text field using the keyboard or mouse. JavaScript alerts are read by screen readers with the most modern and can be used to increase the usability of forms by providing timely feedback, instructions or information. However, if javascript is disabled then the alert will only be available to anyone.
Example 2
Problems
Although the event onblur is device independent, it is used to execute JavaScript code that makes the page difficult to navigate.
The text retains the focus until the correct answer is given.
This behavior change default browser can be confusing and limitations.
In addition, comments are displayed in another part of the page.
As the focus is retained in the text field, a screen reader will not be able to access text comments or any part of the page until the correct answer is entered.
Solution
Do not force the focus to remain in the text field. Allow the user to navigate throughout the page. View comments on another page after the form has been submitted (this is done without JavaScript) or display the comments with a JavaScript alert (requires JavaScript). Try entering a letter into the text box above to see a JavaScript alert.
onClick and onDblClick
The event handler onClick is triggered when the mouse is clicked over an HTML element. onClick event handler is a dependent of the mouse.
However, if the event handler onClick is used with hypertext links or form controls, then most browsers and assistive technologies trigger onClick if the Enter key is pressed when the link or control has focus.
In these cases, onClick event handler is a device-independent.
However, the Enter key will not trigger the event onClick if used with elements that are not links, or controls, such as text or table cells.
The event handler onDblClick is associated with the double click of the mouse over an HTML element.
There is no independent device or keyboard equivalent to onDblClick , which should be avoided.
Example 1
This link will trigger a JavaScript confirmation dialog box that lets you confirm whether you want to see the page or not.
Problems
No.
The confirmation box is read by all major screen readers.
Using the JavaScript setting return , the action of the link is canceled if the user selects in the confirmation box.
If JavaScript is disabled, the link will work normally.
Example 2
The following is designed to appear as a link (blue and underlined), but it is a text associated with an event onClick that opens another document in the browser window.
Use the mouse to click on the text below.
Look at another example of onClick
Problems
Because the text is not a hyperlink or a control field, it does not receive focus when navigating with the keyboard.
Because it does not receive focus, the keyboard can not be used to activate the event onClick .
Solution
Use the event handler onClick of a link or form control instead of an element that can not be achieved by the keyboard.
Example 3
A very common use of JavaScript is its use to validate the information in a form. The following form uses JavaScript to allow you to confirm the information typed.
Enter your name in the following box and then press the button.
<p> <label for= »yourname »> Name: </ label> <input type= »text "id= »yourname" />
<input type= »button "value= »Envoyer" onclick = »validate(); "/> </ p>
</ Form>
Problems
Confirmation and alert boxes that are triggered by the event onClick are accessible to browsers and assistive technologies that have JavaScript enabled.
Validating form information with a server side script and viewing comments about another web page allow you to overcome any problems that may occur in JavaScript code and allows the validation of the form if JavaScript is disabled.
If JavaScript is used to validate the form, make sure that all elements of the form and all features can be completed using the keyboard.
Because the manager onClick is used with a form element, it is activated using both mouse and keyboard.
Remark
mais sur le bouton Entrée quand le focus est dans le champ de formulaire. Because most browsers will send the form data when the Enter key is pressed, the event handler onsubmit was added to the tag <form> to ensure that the form data is sent if the user currently not press the submit but the Enter button when the focus is in the form field.
Note also that the label is applied to the text field.
Example 4
This example also validates the form data, but the return is shown in another place on the page.
How many elements are there in a dozen? Enter the amount in the box below and then press the button.
<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 the answer: </ label>
<input type= »text "id= »answerbox" />
<input type= »submit "onclick = »checkAnswer2()" value= »Vérifier "/>
</ P>
</ Form>
Problems
Comments are not presented in a manner accessible to assistive technologies. In this example, the JavaScript changes the settings of the display style for page elements to make them visible or invisible based on the answers. Users of screen reader will not be aware that additional content appeared suddenly on the page.
Solutions
- Validate the form data with a server side script and the comments on another page.
- Give feedback in a way that is accessible as a JavaScript alert box or other form element.
onChange and onSelect
The event handler onChange is triggered when a form element is selected and changed (for example, if a radio button is initially selected or when the text changes in a text field).
The event handler onSelect is treated when text is selected in a text field or in a text box.
Although these events are independent of devices and can be activated using the mouse, keyboard or other device, the actions that are executed as a result of these event handlers should be analyzed to determine if they create problems accessibility.
Example onChange
The following menu is used as a navigation menu. Selecting an item in the list, JavaScript automatically opens the page in the browser sépcifiée.
Remark
In some browsers you may need to press the Enter key or click on a menu item to activate the event handler onchange .
Click the button of browser to return to this page.
<! -
goto_URL function (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 access a new page using onChange or when the user selects an item from the list.
If the end user uses a keyboard, the event handler onChange is executed for each item in the list.
It is impossible for the user to directly select the last item in the list as each previous item in the list will trigger a page change.
, et ainsi de suite jusqu'à atteindre le dernier élément du menu. The only way for the user to select the last menu item is by accessing the page for the first item in the list, then press the button, then navigate to the second point, then press button, and so on until you reach the last menu item.
Solutions
Instead of using the event handler onChange , allow the user to select the item from a list, then select a button or submit the form to enable scripting.
When a server side script is used to process form data and to redirect the browser accordingly, there is no need for JavaScript.
The following code shows a method to solve the problem onChange .
Choose a page using the drop-down menu and then click Click the back button of browser to return to this page.
<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>
Use event handler device-dependent
As mentioned earlier, several event handlers are device-dependent including onFocus , onBlur , onSelect , onChange and onClick (when onClick is used with a link or form elements).
When possible, use event handlers independent devices.
Other event handlers are device dependent, meaning that they rely entirely on a certain type of input.
For example, onMouseOver , onMouseOut and onDblClick rely on the use of a mouse.
There is also event handlers that are dependent on the keyboard ( onKeyDown , onKeyUp , etc..).
Many event handlers dependent devices can be used together to enable JavaScript activated by both mouse and keyboard.
For example, both onMouseOver and onFocus (and onMouseOut and onBlur ) can be used to activate a script to both the keyboard and mouse.
Use multiple event handlers dependent devices as a method to ensure the independence to devices requires a large number of tests in different browsers and with different assistive technologies to ensure that accessibility is complete.
Commercial links
WebAIM is an initiative of:
Copyright 1999-2009 WebAIM
