Put your mouse in a drawer, open your own website and press the Tab key. Within a few minutes you will know whether people who cannot use a mouse can actually use your site: whether they can see where they are, reach the menu, close the cookie banner, fill in the contact form and get back out of a pop-up. You do not need any software or technical knowledge for this test. You need a keyboard, ten minutes and a notepad. This article walks you through it step by step, gives you a checklist to print, and explains how the most common problems are fixed.
Why keyboard access matters
Many people never touch a mouse. The keyboard, or something that behaves like one, is how they move through every website they visit.
- People with motor disabilities, such as tremors, paralysis or limited hand movement, often find a keyboard far easier to control than a small pointer on a screen.
- People who use switch devices (one or two large buttons, sometimes operated by the head or a breath) or on-screen keyboards rely on the same mechanism. The W3C, the organisation behind the web's standards, explains that these tools "act as keyboard emulators": if something works with the keyboard, it works with them.
- People who use voice control say commands such as "click Send" or "next field". The W3C notes that keyboard access also helps people who operate websites by speech.
- Screen reader users, people who are blind or have low vision and listen to a computer voice reading the page aloud, move through pages and forms with keyboard commands.
- Power users who simply prefer the keyboard because it is faster, especially when filling in long forms.
Keyboard access is part of the Web Content Accessibility Guidelines (WCAG), the international standard published by the W3C that most European accessibility rules build on. The basic requirements, "Keyboard" and "No Keyboard Trap", are at Level A, the most basic level of the standard.
Get your computer ready
On Windows, every major browser lets you move through links and buttons with the Tab key straight away. You can skip this step.
On a Mac, Tab only jumps between text fields by default. Change two settings first:
- Open the Apple menu, choose System Settings, click Keyboard in the sidebar and turn on Keyboard navigation.
- If you test in Safari, choose Safari > Settings, click Advanced and tick Press Tab to highlight each item on a webpage. Without this option, Safari only reaches links when you press Option+Tab.
In Chrome on a Mac, the matching option is under Settings > Appearance: "Pressing Tab on a webpage highlights links, as well as form fields". Restart the browser after changing these settings.
The six keys you need
- Tab moves forward to the next link, button or form field.
- Shift+Tab moves back to the previous one.
- Enter follows a link or presses a button.
- Space presses a button, ticks a checkbox, and on most pages scrolls down when nothing is selected.
- Arrow keys move between options inside a group: radio buttons, a drop-down list, a slider, tabs inside a panel.
- Escape closes a pop-up, a menu or a drop-down.
Each place the Tab key lands on is called a stop. The outline or highlight that shows which stop you are on is called the focus indicator. Most of this test is about following those stops and watching that indicator.
The test, step by step
Pick one important page, such as your home page, a product page or your contact page. Click once in the browser's address bar, then press Tab and work through the checks below.
Can you always see where you are?
Every single stop needs a visible focus indicator: an outline, an underline, a change of colour. If you press Tab and nothing seems to change, focus has gone somewhere you cannot see. That is a failure under WCAG's "Focus Visible" requirement. Also watch for stops that end up hidden behind a sticky header or a cookie banner. WCAG 2.2 added a requirement for this, "Focus Not Obscured".
Does the order make sense?
The stops should follow the page the way you read it: top to bottom, left to right in English, menu before content, a form's fields in the order they appear. If focus jumps from the header to the footer and back to the middle, people lose track.
Is there a "Skip to main content" link?
On most well-built sites, the very first Tab press reveals a link such as "Skip to main content". Press Enter on it and the next Tab should land in the main content, not back in the menu. Without it, a keyboard user has to tab through every menu item on every page.
Do menus and drop-downs work?
Open the main menu and any sub-menus with Enter or Space, move through them with Tab or the arrow keys, and close them with Escape. A sub-menu that only opens when you hover with a mouse is a common failure.
Can you always get out?
WCAG calls this a keyboard trap: focus goes into something, often an embedded map, a chat widget or a video, and Tab will not take you out again. If you are stuck, try Escape and Shift+Tab. If neither helps, it is a trap.
Do pop-ups take and return focus?
When a pop-up window opens (a newsletter sign-up, a login box, an image viewer), focus should move into it. Tab should stay inside it while it is open, Escape should close it, and focus should go back to the button that opened it. That is how the W3C's own guidance describes it.
Can you fill in and send a form?
Fill in every field, tick the checkboxes, choose from drop-downs, and send. Then try again with a deliberate mistake, such as an email address without "@". Can you reach the error message, and does it tell you what to fix?
Can you close the cookie banner?
It is often the first thing on the page. Reach the buttons with Tab, choose an option with Enter, and check that the banner really goes away.
Carousels and video players
A slideshow that moves on its own for more than five seconds needs a way to pause or stop it, according to WCAG's "Pause, Stop, Hide" requirement. Check you can reach that button and the next and previous arrows. In a video player, check you can reach play, volume, subtitles and full screen, and leave the player again with Tab.
Your printable checklist
- The first Tab press shows a "Skip to main content" link, and it works.
- Every stop has a clearly visible focus indicator.
- No stop disappears behind a sticky header, chat button or cookie banner.
- The order of stops follows the visual order of the page.
- Everything you can click with a mouse, you can reach and use with the keyboard.
- Menus and sub-menus open with Enter or Space and close with Escape.
- You never get stuck: Tab or Escape always takes you further.
- Pop-ups take focus when they open, keep it while open, close with Escape and return focus.
- Forms can be filled in and sent, and error messages can be reached and understood.
- The cookie banner can be read and closed with the keyboard.
- Moving slideshows can be paused, and their controls can be reached.
- Video players can be started, stopped and left with the keyboard.
What to write down when something fails
A note such as "the menu doesn't work" sends a developer looking. A precise note lets them fix it in minutes. For every problem, write down three things:
- Where: the page address and the spot on the page, for example "home page, main menu, item Services".
- What you pressed: the keys in order, for example "Tab six times, then Enter".
- What happened, and what you expected: "the sub-menu did not open; I expected to see the Services pages".
A screenshot or a short screen recording helps too. Add the browser and computer you used, because Safari on a Mac sometimes behaves differently from Chrome on Windows.
How the most common problems are fixed
You do not need to fix these yourself, but knowing the cause makes the conversation with your developer or your site builder's support much easier.
The outline was removed
Browsers draw a focus outline automatically. Designers sometimes remove it because they find it ugly, and then forget to add anything in its place. WebAIM, the well-known accessibility organisation at Utah State University, advises against removing the outline. The fix is a clear outline in your own style:
/* Avoid: this hides the outline for everyone */
a:focus {
outline: none;
}
/* Better: a clear outline that shows when people use the keyboard */
a:focus-visible {
outline: 3px solid #1a5e3a;
outline-offset: 2px;
}The first rule hides where you are. The second draws a thick green line around a link, slightly away from it, whenever someone reaches it with the keyboard. If you use a site builder, look for a custom styling field in your theme settings.
A "button" that is not really a button
Sometimes a button is built from a plain box that only reacts to a mouse click. It looks like a button but cannot be reached with Tab and ignores Enter. Using a real button fixes this, because browsers give real buttons keyboard support for free:
<!-- Only works with a mouse --> <div class="btn" onclick="openMenu()">Menu</div> <!-- Works with mouse, keyboard, voice control and screen readers --> <button type="button" onclick="openMenu()">Menu</button>
The same goes for links: a real link can be reached with Tab and followed with Enter; text that only looks like a link often cannot.
What automatic checks can and cannot see
Automatic accessibility checkers are useful, but they cannot press keys and judge what happens. They can spot some causes, like a missing label on a form field, but not whether a menu opens, whether focus gets stuck in a chat widget or whether the order of stops makes sense. That is why this ten-minute test matters, even if your site passes an automatic check.
ibin's optional "second look from AI" can give you a head start. It follows the keyboard order through the page, counts the stops and points out stops without a visible outline. Treat that as a list of places to check first with your own hands, not as a final verdict.
Try it on your own site
Start with one page today: run through the checklist and note what you find. Then check that page for free with ibin to find the problems automatic checks can catch, with pictures of where they are and plain advice on fixing them. The repair guides explain the fixes in more detail, and if you sign in with your email address you can check up to 200 pages of your site for free.
See how your own site does
Check a page for free, without an account. You get a plain list of what to fix first, with pictures of where each problem is.
