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
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
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
- 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). - 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).
- 03
Keep focus out from under sticky headers
Add
scroll-padding-topequal to the header’s height, so a focused item is never hidden behind it (WCAG 2.4.11). - 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. - 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).
- 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
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.
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.
Or all 10 at once
Download the bookmarks fileOne 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.
Standard
Understanding WCAG 2.1.1: KeyboardWeb Content Accessibility Guidelines 2.2
Guidance
Physical: how people with disabilities use the webWeb Accessibility Initiative
Standard
Understanding WCAG 2.4.11: Focus Not Obscured (Minimum)Web Content Accessibility Guidelines 2.2
Standard
Understanding WCAG 2.4.13: Focus AppearanceWeb Content Accessibility Guidelines 2.2
Guidance
Dialog (modal) patternARIA Authoring Practices Guide
Guidance
Keyboard accessibilityData
Disability impacts all of usReport
2025 year-end digital accessibility lawsuit report·