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.
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.
- 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
- 456 Berea St: Overdoing Accessibility – this includes use of tab index and Access keys when implemented incorrectly. The article has links to a talk given by Patrick Lauke on the same subject
This technique may be used to test the following sections of best practice.
|WCAG 2.0||1.3||Create content that can be presented in different ways…||More Info|
|WCAG 2.0||2.1.2||No Keyboard Trap||More Info|
|WCAG 2.0||2.4.3||Focus Order||More Info|
|WCAG 2.0||3.2.3||Consistent Navigation||More Info|
WCAG 2.0: Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. Understanding Guideline 1.3
2.1.2 No Keyboard Trap: If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. (Level A) How to Meet 2.1.2 | Understanding 2.1.2
2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A) How to Meet 2.4.3 | Understanding 2.4.3
3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA) How to Meet 3.2.3 | Understanding 3.2.3