Everything Should Work by Keyboard

Not everyone uses a mouse. Many people rely on keyboards, assistive switches, or voice input to navigate websites. If a key part of your site, like a menu, button, or form, can’t be accessed via keyboard, it’s a blocker.

Keyboard accessibility isn’t optional. It’s foundational.

Good Practice

Everything interactive should be:

• Reachable with Tab
• Operable with Enter (for links, buttons)
• Operable with Space (for buttons, checkboxes, toggles)

Make sure focus is visible at all times. If users can’t tell where they are on the page, they’re essentially flying blind.

Examples of keyboard-friendly elements:

<!-- A button element: works with Tab, Enter, and Space -->
<button>Submit</button>

<!-- A native link -->
<a href="/about">About Us</a>

If you’re building custom components (e.g., dropdowns, modals, carousels), make sure they include keyboard support and appropriate ARIA roles.

Watch Out For

• Elements that require a mouse to activate (e.g., click-only divs).
• Custom widgets with no keyboard support or broken Tab order.
• Hidden or suppressed focus indicators via CSS (outline: none with no fallback).
• Keyboard traps (can’t escape a modal or area with Tab).

<div onclick="doSomething()">Click me</div>
<!-- Not focusable or keyboard operable -->

<button onclick="doSomething()">Click me</button> <!-- Focusable and keyboard operable -->

Pro Tip

Use browser dev tools to check focus order and visibility. Some tools even simulate keyboard navigation. You can also enable a setting in many operating systems to show focus outlines if they’re not visible by default.

Do this today: Unplug your mouse or trackpad. Try navigating your homepage and contact form using Tab, Enter, and Space only. Can you reach every button and link? Can you tell where you are? Fix anything that breaks the flow.