3.11 Create a logical tab order through links, form controls, and objects
Contents
WAI Checkpoint 9.4
Full WAI text: "Create a logical tab order through links, form controls, and objects." When the "TAB" key is used to move the cursor, the cursor's movement should follow the structural order of the page elements so the user can select and activate them. It should be possible to use the "TAB" key to make the cursor jump between page elements like form fields, buttons and other controls, links, pop-out menus or more complex interactive features.
Rationale
Many users rely on the keyboard as their primary device for navigating and interacting with websites. Many laptop and notebook users, screen reader users and users with limited dexterity favour keyboard navigation. Internet kiosks don't always provide the user with a mouse.
If a user fills in an online form where the logical tabbing order is incorrectly defined, they could easily submit the form without filling in all the required fields because the cursor jumps to the "submit" button before they are finished.
Failing to provide a logical tab order is highly confusing and makes the task of navigating and using websites very difficult, especially for users of screen readers who may fail to notice that the cursor is not following the correct order.
Directions and Techniques
Specify a tabbing order among elements with the "tabindex" HTML attribute
This is the HTML tag required to specify the tabbing order. See WAI recommended techniques for specifying a logical tab order
How you could check for this:
Test the tabbing order with the keyboard
Open a web page and press the tab key. Each time you press the key you will see that the cursor moves and highlights a link, or a control element. Follow the progress of the cursor and ensure that it corresponds to the logical structure of the page. It is important to test forms as well as content pages.
Guidelines for Web Accessibility - Priority 3- 3.1 Ensure that text and background have sufficient contrast for people with colour deficient vision
- 3.2 Provide text links to emulate client-side image maps
- 3.3 Expand the first occurrence of any abbreviation or acronym
- 3.4 Identify the primary language of the document text
- 3.5 Place distinguishing information at the beginning of headings, paragraphs, lists, etc.
- 3.6 Supplement text with graphic or auditory presentations where they will facilitate comprehension
- 3.7 Provide summaries for tables
- 3.8 Provide abbreviations for table header labels
- 3.9 Identify groups of related links and provide a way to bypass them
- 3.10 Provide a linear alternative for parallel, word-wrapped columns of text
- 3.11 Create a logical tab order through links, form controls, and objects
- 3.12 Provide keyboard shortcuts to important links, form controls, and groups of form controls
- 3.13 Separate adjacent links with non-link, printable characters surrounded by spaces
- 3.14 Provide navigation bars
- 3.15 If search functions are provided, enable different types of searches for different skill levels and preferences
- 3.16 Provide information about documents comprising multiple pages
- 3.17 Provide a means to skip over multi-line ASCII art
- 3.18 Create a style of presentation that is consistent across pages
- 3.19 Include default text in form text boxes
- 3.20 Provide information to enable users to receive documents according to their preferences
