Understanding Accessibility
by Vivienne Trulock
Guideline 9. Design for device-independence.
There are 5 specific checkpoints in Guideline 9.
| No. | Checkpoint | Priority | How to check | Disability Accommodated |
|---|---|---|---|---|
| 9.1 | 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 | Blind | |
| 9.2 | Ensure that any element that has its own interface can be operated in a device-independent manner | .Priority 2 | .Manual check for 9.2 | |
| 9.3 | For scripts, specify logical event handlers rather than device-dependent event handlers | .Priority 2 | WebXact Automatic check |
|
| 9.4 | Create a logical tab order through links, form controls, and objects | .Priority 3 | . Manual check for 9.4 | Blind, Mobility Impaired |
| 9.5 | Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls | .Priority 3 | . WebXact Automatic check, Manual check for 9.5 |
Blind, Mobility Impaired |
Checkpoint 9.1 - Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape
Server-side image maps use cgi-bins to control the image links. Client-side image maps use the <area> tag in the HTML code.
How do I do it?
Use client side image maps where possible. More support for these is available from assistive devices. Further Information on client-side image maps is available from Dreamweaver Notes - Image Maps & Hotspots.
The code generated by client-side image maps looks like this.
html
<map name="Map">
<area shape="rect" coords="37,7,94,46" href="index.htm">
<area shape="rect" coords="141,10,236,51" href="contact.htm">
<area shape="rect" coords="322,16,401,56" href="about.htm">
</map>
Xhtml
<map name="Map">
<area shape="rect" coords="37,7,94,46" href="index.htm" />
<area shape="rect" coords="141,10,236,51" href="contact.htm" />
<area shape="rect" coords="322,16,401,56" href="about.htm" />
</map>
How do I check that it meets the WCAG criteria?
I may be possible to validate this checkpoint automatically with webXact, but none of the sites I checked triggered this checkpoint so I am unable to verify this.
Checkpoint 9.2 - Ensure that any element that has its own interface can be operated in a device-independent manner
How do I do it?
For scripts, applets and objects don't specify device-dependent event handlers and ensure that they themselves are directly accessible. For example, choose onFocus rather than onMouseOver or onKeyPress.
How do I check that it meets the WCAG criteria?
Where <object>s and <applet>s exist (as verified by Guideline 8.1) they should not use device dependant scripts. These elements can be tested by attempting to control them independently with mouse only and keyboard only actions. Elements which cannot be controlled by both independently will cause the page the fail the check.
Checkpoint 9.3 - For scripts, specify logical event handlers rather than device-dependent event handlers
How do I do it?
For scripts, applets and objects don't specify device-dependent event handlers. For example, choose onFocus rather than onMouseOver or onKeyPress.
How do I check that it meets the WCAG criteria?
Where <object>s and <applet>s exist (as verified by Guideline 8.1) they should not use device dependant scripts. These elements can be tested by attempting to control them independently with mouse only and keyboard only actions. Elements which cannot be controlled by both independently will cause the page the fail the check.
Checkpoint 9.4 - Create a logical tab order through links, form controls, and objects
Tabbing to get around the page is used by screen reader users and keyboard-only users. Specifying a tab index can help users to navigate in the more useful and meaningful order.
How do I do it?
The tabindex attribute can be used to specify the most logical order in which page elements should be visited. For example, setting the tabindex of 1 to the search box means this is the first place the user will go to when they press the tab key.
html
<input name="search" type="text" id="search" accesskey="1" tabindex="1"
value="search here" size="20" maxlength="50">
Xhtml
<input name="search" type="text" id="search" accesskey="1" tabindex="1"
value="search here" size="20" maxlength="50" />
How do I check that it meets the WCAG criteria?
Where the tabindex attribute is used the page will pass. This will be checked with Dreamweaver’s or Notepad's Edit > Find command. Where the tabindex attribute is not used the page will be tabbed through using the keyboard. If the tab order appears haphazard the page will be deemed to have failed the check.
Checkpoint 9.5 - Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls
It is also possible to implement accesskeys which are keyboard shortcuts to important links. This means that a minimal amount of tabbing is required to scan the page, thereby speeding up the process.
How do I do it?
Provide keyboard shortcuts to important links by using the access key attribute.
It is usual to have an accessibility statement page which specifies the accesskeys used for particular pages or elements.
How do I check that it meets the WCAG criteria?
Where the accesskey attribute is used the page will be deemed to have passed. This will be checked with Dreamweaver’s Edit > Find command. Where the accesskey attribute is not used the page will be deemed to have failed the check.
