Good Citizens · Usability Harness · Simulator ·

Keyboard only: put the mouse away

Some people use the web with a switch they press with their head, a straw they sip and puff, or a stick held in the mouth. To a website, every one of them is a keyboard.

This tool puts your mouse away. The pointer disappears, mouse clicks are turned aside, and the focus is drawn large so you can follow it with Tab.

I · Who relies on it

More people than you would guess

a switchsip and puffa mouth sticka keyboardkeyboardinputone focus, one door
To a website, a switch, a sip-and-puff tube, a mouth stick and a keyboard all arrive through the same door.

One American adult in eight has a mobility disability7.

The guidelines list who depends on the keyboard: people who cannot use a mouse, people with hand tremors, people who are blind and use a screen reader, and anyone using speech input, sip-and-puff, an on-screen keyboard or scanning software1, all of which reach a page through the same door. A broken arm in a sling makes anyone a keyboard user for six weeks, and many people simply work faster without a mouse.

II · What goes wrong

Things that look like buttons and aren’t

Tablinkbutton“Buy now”fieldbuttonTab skips itfour presses, four stops: one control is out of reach
Tab, Tab, Tab: the focus never lands on a box that only looks like a button.

The most common failure is a control built from a plain box with a click handler. It looks like a button, and the Tab key never stops on it.

Close behind: focus outlines removed because a designer found them ugly, so nobody can see where they are; focus that lands under a sticky header; menus and date pickers that only open on hover; and pop-up dialogs that let the focus wander behind them, or never hand it back when they close. The rule is simple to state: everything you can do with a mouse must be possible with a keyboard1, and you must always be able to see where the keyboard is.

The cost of getting it wrong is real. In 2025 more than 5,000 digital accessibility lawsuits8 were filed in the United States, nearly half of the federal ones against companies that had been sued before, and about 1,400 against sites that had installed an accessibility widget to avoid exactly that.

III · What to do

What it means for your design

  1. 01

    Use real buttons and links

    A <button> or <a href> is focusable, works with Enter and Space, and has a name and role. A clickable div has none of that (WCAG 2.1.1, 4.1.2).

  2. 02

    Never remove the focus outline

    If you restyle it, keep it at least 2 pixels thick with strong contrast against what is around it (WCAG 2.4.7, 2.4.13).

  3. 03

    Keep focus out from under sticky headers

    Add scroll-padding-top equal to the header’s height, so a focused item is never hidden behind it (WCAG 2.4.11).

  4. 04

    Make dialogs behave

    Move focus into a dialog when it opens, keep Tab inside it, close it with Escape, and return focus to the button that opened it. The native <dialog> element does most of this.

  5. 05

    Add a skip link

    Make the first stop on every page “Skip to main content”, so people don’t Tab through the whole menu each time (WCAG 2.4.1).

  6. 06

    Keep the order natural

    Let focus follow the reading order. Never use a positive tabindex, and prefer the native select to a custom one (WCAG 2.4.3).

IV · Prototypes

On prototypes: once it is built

drawn as a picturenothing to readbuilt as a pagea frame: open it on its own

This tool reads the page’s structure, so it needs real text, headings and buttons. A Figma prototype is drawn as a picture, with nothing underneath to read, and the tool will say so rather than report nonsense.

It does work on prototypes built as real pages: Axure, UXPin and Justinmind exports, Framer and Webflow previews, Storybook stories, and apps generated by tools like Figma Make or v0. If the content sits in a frame from another site, the tool offers to open the frame on its own.

V · Myths

What people get wrong

Keyboard users are a tiny niche
The keyboard is how switches, sip-and-puff, voice control and screen readers all reach a page.
An accessibility widget takes care of it
About 1,400 sites using one were sued in 2025 anyway. Widgets cannot make a div into a button.
Focus may never overlap anything
The level AA rule (2.4.11) only requires that focused items are not entirely hidden. Fully visible is the stricter AAA rule.
Outlines are ugly, so remove them
Restyle them instead. Without a visible focus, a keyboard user is lost.

Take it to any website

⌨️ Keyboard only

↑ Drag it to your bookmarks bar

Click it on any page to put the mouse away: the pointer disappears, clicks are turned aside, and focus is drawn large. The panel counts your tab stops, warns when focus is hidden, and lists anything that looks clickable but can’t be reached. Press Escape to bring the mouse back.

Works in Chrome, Safari, Firefox and Edge on a computer.

One Good Citizens folder with every tool in it. Download it, then import it:

  • Chrome: Bookmarks › Import bookmarks and settings › Bookmarks HTML file
  • Safari: File › Import From › Bookmarks HTML File
  • Firefox: Bookmarks › Manage bookmarks › Import and Backup › Import Bookmarks from HTML

Every time you check a design against the people who will use it, you are doing what Good Citizens is for. Thank you for that.

More tools: Fovea · Colour vision · Ageing eyes · all 10

VI · Sources

The research behind this page

Every figure above comes from one of these 8 sources. The small numbers in the text point here, and each source points back.

  1. Standard

    Understanding WCAG 2.1.1: Keyboard

    W3C

    Web Content Accessibility Guidelines 2.2

    w3.org · cited in I, II

  2. Guidance

    Physical: how people with disabilities use the web

    W3C

    Web Accessibility Initiative

    w3.org

  3. Standard

    Understanding WCAG 2.4.11: Focus Not Obscured (Minimum)

    W3C

    Web Content Accessibility Guidelines 2.2

    w3.org

  4. Standard

    Understanding WCAG 2.4.13: Focus Appearance

    W3C

    Web Content Accessibility Guidelines 2.2

    w3.org

  5. Guidance

    Dialog (modal) pattern

    W3C

    ARIA Authoring Practices Guide

    w3.org

  6. Guidance

    Keyboard accessibility

    WebAIM

    webaim.org

  7. Data

    Disability impacts all of us

    Centers for Disease Control and Prevention

    cdc.gov · cited in I

  8. Report

    2025 year-end digital accessibility lawsuit report

    UsableNet ·

    info.usablenet.com · cited in II