Go to the Site That You Want to Test.
- Refresh the page to ensure that you are on the address bar.
- Use the the tab key to move down through the entire page.
- Use the shift+tab key to move back up through the entire page.
What Should be Looked For
- The first tab should get you to a "skip link" or "skip to main content" link.
- Every interactive element should appear in the tabbing order when testing.
- When tabbing is there a clearly visible focus box around the content that you are tabbing to.
Below is an example of, a clearly visible focus box around "offices."
Below is an example of, Below is an example of, a not clearly visible focus box around the search bar.
The blue around it should be darker to make the color contrast pass.
Below is an example of, no focus box around “Partners.”
There is not focus on the "Partners" link at all.
- While testing using “enter” or “return” when on a tab focus item to confirm that it will do the action that you were expecting to happen.
In the following example, using the "enter" or "return" key while on "offices" brought me to the "offices" homepage.
- Use mouse to hover over each interactive element to see what the hover state is. Compare to tab focus state to confirm that there is an equivalent state.
For example, hovering mouse over a menu causes a drop-down of sub-options verify that this happens with the tabbing as well.
- You should be able to use your keyboard to dismiss any pop-up windows that cover the main content.
- You will also need to test other important key(s) that keyboard only users use while exploring the internet. The table below shows important keystrokes that should be tested on a webpage and the expected outcome:
| Interaction | Keystoke(s) | Expected Outcome |
|---|---|---|
| Navigate the Webpage |
|
|
| Link |
|
|
| Button |
|
|
| Checkbox |
|
|
| Radio buttons |
|
|
| Select (dropdown) menu |
|
|
| Autocomplete |
|
|
| Dialog |
|
|
| Slider |
|
|
| Menu bar |
|
|
| Tab panel |
|
|
| ’Tree’ menu |
|
|
| Scroll |
|
|
Additional Resources
Microsoft Insights chrome extension has a walkthrough on keyboard testing that walk you through and show you were you are tabbed to which can be helpful if the site does not have focus. Along with the focus, it shows the path it took allowing the test to verify the tabbing order is logical. Doing the assessment is a lengthy test that is useful for testing though, if you only want to do a keyboard testing you can you the keyboard section which will help you walk through the entire testing.