Scripts and Forms
Device Independence
WAI Definition (Checkpoints 6.4, 8.1, 9.2, 9.3)
Ensure that user interfaces are device-independent and use logical device-independent event handlers.
Ensure that scripts and applets are accessible.
Explanation
Ensure that it is possible to logically interact with the site using keyboard and/or mouse input/output methods. Scripts and applets are types of programmatic objects that should either be inherently accessible or should include features that are usable with assistive technologies.
Rationale
Interfaces which do not provide flexibility in the type of device which the user relies on to input information are inherently inaccessible. For example, a laptop user may choose to work without a mouse. If this were the case and interactive features on the site relied on "drag and drop" interactivity as the only means of interaction, the site would be unusable. Additionally, if the site were delivered through a kiosk or public access terminal with a touch screen interface, it would be unusable.
Screen-reader users, on the other hand, rely entirely on the keyboard for interacting with websites. Failing to support the keyboard as an input device will make the site unusable to them. Accessibility features which are provided in programming technologies and supported by assistive technologies should be included in programmatic elements.
Technique
A. If you must use device-dependent attributes, provide redundant input mechanisms
In JavaScripts and HTML 4.01, application-level event attributes are:
- "onfocus" (the event occurs when an object gets focus): this will highlight the form field when the event is tabbed into or clicked on.
- "onblur" (the opposite of "onfocus" where the event occurs when an object loses focus)
- "onselect" (the event occurs when text is selected in a “text” or “textarea” field)
Note that the above attributes are designed to be device-independent, but are implemented as keyboard specific events in some browsers. Otherwise, if you must use device-dependent attributes, provide redundant input mechanisms (i.e., specify two handlers for the same element):
- "onmousedown" (the event occurs when a mouse button is clicked) along with "onkeydown" (the event occurs when a keyboard key is pressed): the event will be triggered when the user tabs or clicks on a specific field
- "onmouseup" ( the event occurs when a mouse button is released) and "onkeyup" (the event occurs when a keyboard key is released)
- "onclick" (the event occurs when an object gets clicked) along with "onkeypress" (the event occurs when a keyboard key is pressed or held down)
Notes:
- On links and form controls only, the “onclick” event can be used without the redundant “onleypress” event.
- There is no keyboard equivalent to double-clicking ("ondblclick").
B. Do not write event handlers that rely on mouse coordinates
This is bad practice because it relies on the use of a mouse and a highly visual style of interaction to invoke an event handler. Event handlers that rely on mouse coordinates don't support keyboard input.
C. If you use programmatic elements such as Java applets and Flash
Consult the accessibility guidelines from the application vendor.
Example
The following example illustrates how to provide a redundant input mechanism in JavaScript.
HTML
<form>
<p>You will you go <label>back to the previous page <input name="Back to Previous Page" type="button" id="Back to Previous Page" onClick="JavaScript:history.go(-1)" onKeypress="JavaScript:history.go(-1)" value="Back to Previous Page"></label> if you PRESS (keyboard) or CLICK (mouse) on the button.</p>
<noscript>
<p><a href="index.html">Go back to previous page</a></p>
</noscript>
</form>
Validation
Test
Use programmatic elements with keyboard-only and mouse-only navigation. Try to operate it using only the keyboard and using only the mouse.
Success Criteria
All functionalities should be reached and properly controlled.