4. Manual Testing Strategies
Tab Key Navigation Test
The Tab Key Navigation test is often used with the “Select All” test (discussed on the next page) to confirm whether items that were not selected are keyboard operable, but this test can also be used on its own. Place the cursor at the very start of the HTML content (sometimes tricky), or in the browser’s location field or address bar, then press the Tab key repeatedly and watch as the cursor moves through the content of the page. Make the following observations:
- Are you able to see the cursor’s area of focus as you move through elements of the page? If not, this will violate Guideline 2.4.7 Focus Visible (Level AA). When reporting on the issue, recommend adding a focus indicator so it is possible to visually follow the cursor as it moves through the page.
- As you navigate with the Tab key through elements on the page, do all functional elements such as links, buttons or forms receive focus? If not, those elements that do not receive focus are going to be inaccessible to some people, violating Guideline 2.1.1 Keyboard (Level A).
Technical: These elements are often custom features built with non-standard HTML and JavaScript. In such cases you can recommend the use of standard HTML where possible or suggest the developer add keyboard focus for the element by adding tabindex="0" to the HTML, and add keyboard events, in addition to the existing mouse events, to the programming that controls the functionality of the feature.
- When navigating with the Tab key through elements of the page, is the path followed through these elements the standard left to right, top to bottom sequence? If the cursor’s focus jumps around, moving to places on the page outside where you might logically expect the cursor to go by viewing the layout of elements on the page, it may violate Guideline 2.4.3 Focus Order (Level A). By default the focus order will be standard, so in cases where the order is irregular, it is because the developer has purposely changed the order. You may recommend removing the irregular tab sequence or adjusting it to follow a more meaningful path.
- While navigating with the Tab key through menus, and other features that one can operate with a mouse, do these features also operate with a keyboard? If they do not, they will be inaccessible to those who use only a keyboard to move through web content. In the figure below, the submenus that drop down when one of the main navigation elements is clicked cannot be opened with a keypress. These types of menus may use the arrow keys to open and navigate through submenus, or they may operate using the Tab key. Arrow keys are preferred, though Tab key navigation will satisfy the success criteria associated with keyboard operability.
For drop down menus like those described in #4 above, also watch for Tab key navigation moving through the items in the submenus, but the submenus not visibly opening. This will be confusing for low vision keyboard users who are following the focus indicator to keep track of where they are within the page.
Figure: Scenario in which the menus only function with a mouse click (see Lulu’s Lollipops)
