Design for device-independence

These checkpoints deal with how you can make sure that a user may interact with page with any preferred input (or output) device, for example, a mouse, keyboard, voice, or head wand.

The checkpoints are:

• Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape [Priority 1]
• Ensure that any element that has its own interface can be operated in a device-independent manner [Priority 2]
• Specify logical event handlers rather than device-dependent event handlers for scripts [Priority 2]
• Create a logical tab order through links, form controls, and objects [Priority 3]
• Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls [Priority 3]

Why the checkpoints are important

Device-independent access means that you can interact with the browser or page with any preferred input or output device. This makes it easier to port the site to the widest range of computing devices, including mobile handsets, PCs, and Interactive Voice Response systems (IVRs).

Not all users, for example, use a mouse or other pointing device. Some users rely on a keyboard, an alternative keyboard, a head wand or voice input to navigate links and activate form controls. For example:

• A laptop or notebook user may choose to work without a mouse
• Screen reader users and users with limited dexterity use the keyboard to navigate
• Internet kiosks don't always provide a mouse
• Users may use voice input for hands-free operation in a busy office, or if they have dexterity limitations

It is also important to provide device independent output. For example:

• Screen reader users rely on audio output for interacting with websites. Failing to provide support for audio output will make the site unusable for them
• A screen reader user may be able to open a DHTML menu but if they receive no feedback on the names of the links they are selecting, the menu is unusable. Similarly, they may be able to open a JavaScript tax calculator and input data but if the output is not compatible with a speech synthesiser, then it is not device-independent

Elements that require alternatives include image maps (server-side and client-side), plug-ins (Flash, Shockwave, etc.), and form elements (text boxes, buttons, etc.). For example:

• If you can only activate a form control with a mouse or other pointing device, someone who uses the page with voice input, with a keyboard, or with some other non-pointing input device can't access the form
• If interactive features on you site use drag-and-drop interactivity as the only means of interaction, you can't use the site without a mouse. So if the site is delivered through a kiosk or public access terminal with only a touch screen interface would be unusable

Also bear in mind that for true device independence, your screen layout should be flexible enough to accommodate a 1280x1024 pixel screen size just as easily as it can a handheld device (such as a Pocket PC’s 240x320 pixel size).