It’s unfortunate how common it is for a web application to have a poor experience when using the keyboard.
Fortunately for us, there’s a quick way to gauge how keyboard-ready our websites and applications are:
Start hitting the Tab key.
It sounds deceptively simple, but it’s an incredibly useful way to audit an application to see how usable it is.
Once the page I’m testing has loaded, I’ll hit Tab and see what happens.
Does a skip link appear? Am I taken to a place on the page that makes sense? Can I do the same operations as mouse users?
If an element is highlighted, how is the color contrast? Using a tool like Colour Contrast Analyzer helps make sure it's acceptable.
What can be most telling is if nothing seems to happen at all.
As I Tab, I’ll look at the status bar in the lower left corner of my browser to see if link addresses are displayed. It’s very common for navigation menus to be visually hidden, but still have their menu items reachable with the keyboard when closed. This is problematic as it creates a poor experience.
When a menu isn’t visible, its interactive contents need to be hidden from keyboard and screen reader users with CSS display: none or a similar technique so that it isn’t reachable either. This sets up more of a 1-to-1 experience for mouse users and keyboard users alike. There are some other nuances around choosing proper semantic elements to ensure the menu can be understood and operated with screen readers, but ensuring individual items aren’t reachable via Tab when inactive is a big step in the right direction.
