Tools
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 number | Rule | How to test |
---|---|---|
1.3.2 | Meaningful sequence | Tabbing + Code review |
1.4.13 | Content on hover or focus | Tabbing + Mouse hover |
2.1.1 | Keyboard | Tabbing + General keyboard |
2.1.2 | No keyboard trap | Tabbing |
2.1.4 | Character key shortcuts | General keyboard |
2.4.1 | Bypass Blocks | General keyboard |
2.4.3 | Focus order | Tabbing |
2.4.7 | Focus Visible | Tabbing |
3.2.1 | On Focus | Tabbing |
4.1.3 | Status Message | Mouse + Tabbing + Screen reader |
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.
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.
Tab and interact with your page using the keyboard. Ensure all the interactive elements on the page can be properly used without problems.
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.
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.
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.
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.
Tab through your content and check if all interactive elements have a visible focus.
Tab through your page and check if any unwanted effects happen when an element is focused.
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?