Skip to content

Plenty of people can't use a mouse or trackpad. Some have tremors, limited hand movement, or pain. Others are blind and use a keyboard with their screen reader. They get around with Tab, Enter, Space, and the arrow keys, so anything that only works with a click is a dead end.

Tab moves to the next link, button, or field, and Shift + Tab goes back. Enter follows a link. Enter or Space presses a button, and Space checks a box. The arrow keys move through dropdown lists, tabs, and radio buttons, and Escape usually closes whatever just opened.

That's the core toolkit, so every part of a site has to work with it. Some people use alternative keyboards, mouth sticks, or head wands that send the same keystrokes, and switch and voice control users lean on the same structure. Get the keyboard right, and a lot of other tools start working too.

Common tools

Standard keyboard
Tab, Enter, Space, the arrow keys, and Escape.
Alternative keyboards
Large-key, one-handed, and on-screen keyboards.
Mouth sticks and head wands
For pressing keys without using hands.
Sticky Keys
Built into Windows and Mac. Press shortcuts one key at a time.

Most of these are small changes in the code. Where WCAG covers one, we link the success criteria it falls under.

  1. Focus you can't see

    Plenty of sites remove the browser's focus outline because someone thought it looked untidy. Now Tab moves focus somewhere invisible, and the person has no idea which link they're on. Sticky headers and cookie banners can hide the focused item too.

    The fix

    Keep a clear focus style on everything interactive. :focus-visible shows it to keyboard users and leaves most mouse clicks alone. Make sure sticky headers and banners don't cover whatever has focus; scroll-padding-top in CSS helps with sticky headers.

    Before
    a:focus {
  outline: none;
}
    After
    :focus-visible {
  outline: 2px solid #3194c4;
  outline-offset: 2px;
}

  2. Things you can click but can't reach

    A div or span with a click handler looks like a button, but the keyboard skips right past it. Tab never lands on it, and Enter does nothing. Checkout buttons, filters, and "Add to cart" are common offenders.

    The fix

    Use a button for actions and a link for going somewhere. Both take focus and work with the keyboard for free, as long as the link has an href. Adding tabindex="0" to a div only gets it focus. You'd still need role="button" and your own Enter and Space handling.

    Before
    <div class="btn" onclick="checkout()">
  Checkout
</div>
    After
    <button type="button" class="btn" onclick="checkout()">
  Checkout
</button>

  3. Traps you can't Tab out of

    Focus gets into an embedded map, video player, chat widget, or date picker and can't get back out. Tab cycles inside it forever. For someone without a mouse, the rest of the page is gone until they reload.

    The fix

    Make sure Tab and Shift + Tab can always move past embedded widgets. A modal dialog can hold focus while it's open, as long as Escape or a close button gets you out. Test third-party embeds yourself. They're a common source.

  4. Focus that jumps around

    Tab goes from the header to the footer, then back up to the middle of the form. This usually comes from positive tabindex values, or from CSS that moves things on screen without changing their order in the code.

    The fix

    Keep the order in the HTML the same as the order on screen, and don't use tabindex values above 0. When a layout reorders content with flexbox or grid, check that Tab still follows it.

  5. Menus and pop-ups that only work with a mouse

    Dropdown navigation that only opens on hover leaves every page under it out of reach. Dialogs open while focus stays on the page behind them, and closing one drops focus back at the top of the page, so the person starts over.

    The fix

    Open submenus with a button that toggles them, and let Escape close them. When a dialog opens, move focus into it and keep it there. When it closes, send focus back to the button that opened it.

    Example
    <button type="button" aria-expanded="false"
  aria-controls="services-menu">
  Services
</button>
<ul id="services-menu" hidden>…</ul>

It's one of the quickest accessibility tests there is, and it catches a lot.

  • Start

    Click a blank spot near the top of the page, then press Tab. Keep pressing it through the whole page, and use Shift + Tab to go back.

  • Watch

    Can you always see where you are? Does focus move in an order that makes sense? Can you reach every link, button, and field?

  • Use

    Open the menus, fill out a form, play a video, and close pop-ups with Escape. Can you get into everything, and back out of it?

  • On a Mac

    Safari skips links when you Tab unless you turn on "Press Tab to highlight each item on a webpage" in Settings > Advanced, or hold Option while you Tab. Firefox on a Mac may need Keyboard navigation turned on in System Settings > Keyboard. Chrome works without any changes.

We're collecting stories from people who use assistive tech every day. Yours can help the people who build websites and apps see what gets in the way.

Share your story

To know the road ahead, ask those coming back. We test with the same tools your users do.

No prep, no formal brief. A few sentences is plenty. Let us know what you're building and we'll take it from there. We typically respond within one business day.