The Keyboard Test: Twenty Minutes, No Tools, No Licence

You need almost nothing.

• Tab moves forward through interactive elements. Shift + Tab moves back.
• Enter activates a link, and activates a button.
• Space activates a button, and scrolls the page when nothing has focus. On a checkbox it toggles.
• Arrow keys move within a composite control — inside a radio group, a select, a proper tab set.
• Escape should close whatever has opened on top of the page.

The test is to complete real tasks using only those. Not to tab idly down the page — to actually do something. Find a product. Submit the contact form. Open the menu on a phone-width window. Dismiss the newsletter popup. Get through checkout, if you have one.

One thing above all others: where is focus right now? You should be able to point at the screen at every moment and say which element is focused. That is SC 2.4.7 Focus Visible at Level AA, and it is the criterion most often destroyed on purpose, by a designer who thought the browser's default ring was ugly and removed it without replacing it.

If you tab and nothing visibly changes, stop. You have found the most important defect on your site and you have found it in the first ninety seconds.

Then watch the order. SC 2.4.3 Focus Order asks that the sequence preserve meaning. Focus should move roughly the way the page reads. If tabbing jumps from the header to the footer and then back up into the middle of an article, something in the layout has been positioned visually without the underlying document following.

And watch for focus disappearing into a part of the page you cannot see. SC 2.4.11 Focus Not Obscured (Minimum), new at Level AA in WCAG 2.2, is about exactly this: a sticky header or a cookie bar sitting on top of the element that currently has focus. If you have ever tabbed down a page and watched the ring vanish under a floating banner for three presses before reappearing, you have met it.

In practice, on small sites, these come up again and again.

Focus indicators removed

A stylesheet somewhere contains outline: none with nothing put back. Sometimes it is in the theme, sometimes in a snippet someone pasted in to solve an unrelated problem. It is the single most common thing this test uncovers and usually the easiest to fix.

Menus that only open on hover

A navigation dropdown that appears on mouse hover and has no keyboard equivalent is unreachable. Tab past the top-level item and the children never surface. This is common in older themes and in heavily customised ones.

Clickable things that are not buttons

A div with a click handler is not focusable and does not announce itself as anything. It works perfectly with a mouse and does not exist to a keyboard. The tell is that you can see something is clickable but tab will not stop on it.

Modals that trap you, or fail to hold you

Two opposite failures. Either focus stays behind the dialog so you are tabbing through a page you cannot see, or focus enters the dialog and Escape does nothing, so there is no way out except reloading. Cookie banners are the worst offenders, which is unfortunate given that they arrive first.

Carousels and sliders

Almost always mouse-and-swipe only. If the content in the carousel matters, the content is unreachable. If it does not matter, ask why it is there.

Skip links that are missing or broken

SC 2.4.1 Bypass Blocks exists because tabbing through thirty navigation links on every single page is punitive. The first Tab press on a page should reveal a skip link. Press it on this site and you will see a yellow slab arrive across the top — deliberately loud, because a skip link nobody can see is a skip link nobody uses.

Resize your browser to around 375 pixels wide and run the same tasks. Mobile layouts change behaviour, and the hamburger menu is where this goes wrong most often: a button that is really a styled div, a panel that opens without moving focus into it, and a close control that only responds to a tap.

While you are narrow, try 200% zoom at desktop width as well. SC 1.4.4 Resize Text is Level AA, and the failure mode is content that disappears off the side or overlaps itself once it is enlarged.

Be clear about the limits, because overselling a free check is how people end up believing they are finished.

It tells you nothing about whether your alternative text is meaningful. It tells you nothing about heading structure, which a keyboard does not reveal. It will not catch contrast. It cannot tell you how your page is announced — for that you need to actually turn on a screen reader, and doing so is a genuinely different skill worth learning slowly.

And it does not tell you whether you meet any legal obligation, because nobody can tell you that from the outside. Nothing here is legal advice. What the keyboard test gives you is a list of specific, real defects in your own site, which is more than most people ever get.

1. Put focus indicators back, everywhere, visibly. If the default is not to your taste, design a better one — do not delete it.
2. Make the hover menu work on focus as well as hover.
3. Turn fake buttons into real ones. A button element is focusable, activates on both Enter and Space, and announces its role without you doing anything.
4. Fix the cookie banner, because it arrives before everything else.
5. Add a skip link if there is not one.
6. Deal with the carousel by making it operable or removing it.

Every one of those is a change to your own site rather than a subscription, which means it stays fixed.

When you have done that, the platform question becomes worth asking, and the assessment of ADA-compliant website builders is where the five main platforms are read side by side — including which of them hands you a visible focus outline and a skip link without being asked.