Understanding Accessibility

Guideline 9. Design for device-independence.

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

<LABEL for="search">Search:</LABEL>
<input name="search" type="text" id="search" accesskey="1" tabindex="1"
value="search here" size="20" maxlength="50">

Xhtml

<LABEL for="search">Search:</LABEL>
<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.

Related Links:

guideline 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14