select option

Keyboard interactions

How to test each rule in the Keyboard interactions group

These are all the rules that are tested using the keyboard navigation. Some of them require the use of voice over, others just a visual assessment.

Rule numberRuleHow to test
1.3.2Meaningful sequenceTabbing + Code review
1.4.13Content on hover or focusTabbing + Mouse hover
2.1.1KeyboardTabbing + General keyboard
2.1.2No keyboard trapTabbing
2.1.4Character key shortcutsGeneral keyboard
2.4.1Bypass BlocksGeneral keyboard
2.4.3Focus orderTabbing
2.4.7Focus VisibleTabbing
3.2.1On FocusTabbing
4.1.3Status MessageMouse + Tabbing + Screen reader

1.3.2 Meaningful sequence

Success criterion

Since screen readers read the page using the code structure, if the code doesn't match the visual order of the page it won't make sense for the user.

This needs to be a visual and auditory test. To test this rule you should tab through your page's content with voiceover turned on, comparing the content order with the code structure. Users with different types of disabilities should be receiving the same information in the same order as those without assistive technology.

1.4.13 Content on hover or focus

Success criterion

Tab with keyboard and hover using the mouse over all the interactive content on your page. Both hovering and focusing should not trigger any adding of content to the page.

2.1.1 Keyboard

Success criterion

Tab and interact with your page using the keyboard. Ensure all the interactive elements on the page can be properly used without problems.

2.1.2 No Keyboard Trap

Success criterion

Tab through your page to check if the keyboard focus gets trapped, preventing you from reaching the end of the page. Common problems you may have include input or modal focuses which trap your cursor.

2.1.4 Character key shortcuts

Success criterion

Go to the page you're testing and try pressing all the keys on the keyboard. Check if there are existing shortcuts (like pressing "D" to open downloads or pressing "T" or "J" to open Staff Tools).

After pressing all the keys, if anything unexpected happens, check if there's a way to deal with these shortcuts according to the documentation.

2.4.1 Bypass blocks

Success criterion

Although the success criterion does not specifically use the term “within a set of web pages”, the concept of the pages belonging to a set is implied.

Check what parts of your content are repeated throughout your pages and check if it's possible to jump over the information using only the keyboard.

2.4.3 Focus order

Success criterion

Tab through your content and check if the order of your focus makes sense. For example: Is the first focus of your page on the main menu or is it on the footer? Make sure the order of focus makes sense for those who are not looking into your page.

2.4.7 Focus Visible

Success criterion

Tab through your content and check if all interactive elements have a visible focus.

3.2.1 On Focus

Success criterion

Tab through your page and check if any unwanted effects happen when an element is focused.

4.1.3 Status message

Success criterion

If your page has status messages, trigger them with a voice over program opened and check, by tabbing through content if the messages interrupt the flow of the page. Does focus jump to the message? Does the voice over stop and immediatelly reads the message?

Continue to Forms.

Is this page helpful?