Keyboard Navigation: Fundamental for Accessibility
Have you tried navigating your own site without a mouse? Do it now. Five minutes. It's the quickest and most revealing test you can run. Keyboard navigation is vital for people with motor disabilities, screen reader users, and anyone who can't use a mouse. RGAA dedicates several criteria to it (7.1, 7.3, 12.7, 12.8) for good reason.
Tab Order
When you press Tab, focus moves to the next interactive element. The order must be logical and predictable -- no surprises. It follows DOM order by default (and that's a good thing). Never use tabindex > 0 -- it's the worst thing you can do for keyboard navigation. Use tabindex="0" to make custom components focusable in DOM order, and tabindex="-1" for programmatic focus only (useful for modals). Watch out for CSS flexbox order that can create a mismatch between visual and DOM order.
Visible Focus
The focus indicator shows which element is active. Without it, keyboard users are flying blind. And yet, how many designers write outline: none "because it's ugly"? Too many. Never remove outline without a visible alternative. Use :focus-visible for keyboard-only styling (best of both worlds). Minimum 2px width, 3:1 contrast ratio.
Skip Links
Imagine pressing Tab 47 times before reaching the main content. That happens on sites without skip links. It's the first focusable element on the page, visually hidden until focused. Try pressing Tab on any government website -- you'll see it appear.
Interactive Components
Each component type has its own keyboard conventions. Menus: Enter to open, arrows to navigate, Escape to close and return to trigger. Modals: focus trap inside (the only case where "trapping" focus is intentional), Escape to close, focus returns to the trigger element -- a detail often forgotten but crucial. Tabs: arrows between tabs, Tab into the active panel.
Keyboard Traps
A keyboard trap is when a user gets stuck in a component with no way out via Tab or Escape. Like being locked in a room with no door. Common causes: modals without accessible close buttons, video players with non-navigable controls, third-party widgets (chatbots, maps) that capture focus, and iframes with no exit mechanism.
If you can only test one thing, test keyboard navigation. Unplug the mouse, navigate for 5 minutes. You'll learn more about your site's accessibility than any automated tool can tell you.