Tab Orderings Correct and Logical
It helps to prioritise information on a web site so the most important items are presented early on especially if the user is dependent on tabbing round a web page using the keyboard. When the page is viewed in a text only layout the tab order needs to flow naturally.
However, the sequence of tabbing can be set up with a tab index so that each element is provided in an order defined by the author of the web site. There is also the need to ensure the keyboard user can enter and leave a form or widget such as a calendar and even an audio / video player.
Method
Testing for tab or focus order of links is a relatively easy exercise using the Tab Key or the Firefox Alnspector which will highlight the issue as a manual check. The Web Developer Firefox add-on offers a tab index check and WebAIM online checker flags up where there is a tab index.
YouTube video Tab Key Accessibility Testing
Looking out for highlighted areas and outlines offered by some developers/browsers, as you move around the web page, can help when checking that tabbing into and out of forms, widgets and other controls such as those found on media players is possible.
Advice
- Webaim Altering the Default Tab Order Using tabindex and Keyboard Accessibility and Reading Order.
- Amanda Koh writing about Keyboard Navigation for Responsive Web Design
- Léonie Watson from the The Paciello Group Using the tabindex attribute
- deque: Avoid Using Tabindex with Positive Numbers
References
This technique may be used to test the following sections of best practice.
| Document | Section | Heading | |
|---|---|---|---|
| WCAG 2.1 | 1.3.1 | Info and Relationships | More Info |
| WCAG 2.1 | 1.3.2 | Meaningful Sequence | More Info |
| WCAG 2.1 | 2.1.2 | No Keyboard Trap | More Info |
| WCAG 2.1 | 2.4.3 | Focus Order | More Info |
| WCAG 2.1 | 3.2.3 | Consistent Navigation | More Info |