Making Accessible Websites for the United Nations

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:

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):

Notes:
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.