Keyboard only
To a website, switches, mouth sticks and voice control are all keyboards.
Try it here
Press “Put the mouse away”. Your pointer disappears, so press Tab to move through this page and follow the large outline. Press Escape to bring the mouse back.
Why should I care?
If your menu or form needs a mouse, people who use a keyboard, a switch or their voice can’t finish.
- 1 in 8American adults have a mobility disability.
- 6 weeksin a sling makes anyone a keyboard user.
- Manypeople simply work faster without a mouse.
What to do on your website
- Use real buttons, not boxes that look like them.
- Never hide the outline that shows where you are.
- Add a “Skip to main content” link.
More, if you want it
Check your own website with this tool
This is the button you’ll drag.
- Make sure you can see your bookmarks bar, the row just under the address bar. If it isn’t there, press Ctrl + Shift + B, or ⌘ + Shift + B on a Mac.
- Drag the Keyboard only button up into that bar and let go.
- Open your own website and click Keyboard only in the 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.
This works on a computer, in Chrome, Safari, Firefox or Edge. Phones and tablets have no bookmarks bar, so there are three other ways below.
On a phone or tablet
iPhone or iPad, from the Share button
- Copy the tool:
- Open the Shortcuts app, make a new shortcut, and add the action Run JavaScript on Web Page. Paste the tool in place of its sample script.
- In the shortcut’s details, turn on Show in Share Sheet, and name it Keyboard only.
- Once: in Settings, open Apps › Shortcuts › Advanced and turn on Allow Running Scripts.
- On your website in Safari, tap Share, then Keyboard only.
Android, from Chrome’s address bar
- Copy the tool:
- Bookmark any page with the star, then edit that bookmark: name it gc keyboard only and paste the tool in as its address.
- On your website, type gc keyboard only in the address bar and tap the starred bookmark it suggests. Choosing it from the bookmarks list won’t work.
Use it later, on a computer
Send yourself the link, or a reminder for tomorrow morning. Both are made on your phone and sent nowhere else.
Get all 10 tools in one go
One Good Citizens folder with every tool in it. Download the file, then bring it into your browser:
Download the bookmarks file- 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
More free tools: Fovea, Color vision, Aging eyes, or all 10.
Why this matters
Picture a customer who wants to book you, using a switch they press with their head, a straw they sip and puff, or a stick held in the mouth. To your website, every one of them is a keyboard.
This tool puts your mouse away, so you can try your own site the way they do. The pointer disappears, mouse clicks are turned aside, and the focus, the marker that shows which button the keyboard is on, is drawn large so you can follow it as you press Tab.
More of your customers than you’d 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 front door. If that door sticks, all of them are left on the step at once. A broken arm in a sling makes anyone a keyboard user for six weeks, and many people simply work faster without a mouse.
Things that look like buttons and aren’t
The most common failure is a door painted on the wall: a plain box that answers a mouse click. It looks like a button, and the Tab key walks straight past it.
Close behind: focus outlines removed because a designer found them ugly, so nobody can see where they are; focus that lands under a header that stays pinned to the top of the screen; menus and date pickers that only open when a mouse hovers over them; and pop-up windows 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. A customer who can’t reach your Book button can’t book.
It can cost a business in court, too. 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.
All the advice, in full
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).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).
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).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.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).
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).
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.
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.
Where these numbers come from
Every figure on this page comes from one of these 8 sources. The small numbers in the text point here.
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·