One of my favourite accessibility testing tools: The Tab Key.
posted on February 20., 2020
I’ve been employed for about a year now and many things are different compared to being a freelancer. One interesting thing in my specific situation is that I have to evaluate the accessibility of third-party tools regularly. Usually there’s no time for a full audit, I have to gain a good overview of the quality of a product as quickly as possible.
I’ve already shared 6 things I check on every website I build, but this time I want to focus on one of the most powerful testing tools: The Tab key.
Let’s say, you’ve managed to score 100 on the Lighthouse accessibility audit. This doesn’t necessarily mean that your site is accessible, you’ve just laid the groundwork for the actual testing. A next step could be putting your mouse away and using the keyboard only to navigate your site.
Here’s what pressing the Tab key will tell you about your website:
1. Focus styles
If you press the Tab key, do you see which item on the page is highlighted?
No? Use :focus{ }, :focus-within{ }, or :focus-visible{ } to style elements in their focus [...]