When someone can't use your website with just a keyboard, you've locked them out. It's that simple.
People who rely on keyboards aren't a tiny minority either. Anyone with mobility issues affecting their hands might struggle with a mouse. Screen reader users navigate entirely through keyboard commands as well.
But it's not just about disabilities.
Power users love keyboard shortcuts because they're faster (that's me!). Developers spend half their day jumping between code and browser tabs using keys. Even regular users sometimes prefer tabbing through a form rather than constantly switching between mouse and keyboard (also me!).
When your site breaks keyboard navigation, all these people hit walls. They can't complete purchases, fill out forms or access content that mouse users take for granted.
The Web Content Accessibility Guidelines (WCAG) set the standard for accessible websites. In most countries, websites must meet WCAG 2.1 AA standards by law. Many businesses follow these guidelines to avoid legal issues and reach wider audiences.
And keyboard navigation is specified in the WCAG. The guidelines lists at least four main success criteria that specifically deal with keyboard accessibility:
- 2.1.1 Keyboard - All functionality must be operable through a keyboard interface.
- 2.1.2 No Keyboard Trap - Users shouldn't get stuck with keyboard focus trapped in any part of the page.
- 2.1.4 Character Key Shortcuts - Single-key shortcuts must be able to be remapped or disabled.
- 2.1.3 Keyboard (No Exception) - All functionality must be keyboard accessible without any exception.
There are also related criteria that affect keyboard users indirectly, like focus management and timing requirements.
Here are five methods I've seen product teams use to get keyboard navigation right.
- Test with Tab and Enter. Navigate the entire site using only these keys. If you get stuck or can't reach something, fix it.
- Make focus visible. When someone tabs to a button or link, they need to see where they are. Don't remove focus outlines without replacing them with something equally clear.
- Keep a logical tab order. Users should move through your page with the keyboard in a way that makes sense.
- You're responsible for custom widgets. Fancy dropdowns, modals and custom controls need keyboard alternatives. Space bar should activate buttons, arrow keys should move through options. Figure out what makes sense for each use case.
- Skip navigation links matter. They help users jump over repetitive content, like a long menu, and straight to your main content. Nobody wants to tab through 20 menu items just to read an article.
Getting keyboard support right isn't revolutionary. It's the baseline requirement that everything on your site needs to work with just a keyboard.
And it also just makes sense!