A Site That Works With a Keyboard Only

Do the journey, not the checks

Testing a focus outline and a skip link separately confirms two things work and tells you nothing about whether the site does.

The failures that matter are transitions: opening a menu, dismissing a popup, moving from a gallery back into the page.

Those only appear when somebody attempts the whole path in order.

So put the mouse physically out of reach, start at the home page, and get to a submitted enquiry.

The keys you need

• Tab to move forward.
• Shift and tab to go back.
• Enter to activate a link or button.
• Space for buttons and checkboxes.
• Arrow keys inside menus and radio groups.
• Escape to close things.

The last is the one that reveals most problems. A great many popups and menus can be opened by keyboard and not closed by one, which strands somebody completely.

Popups are where sites fail

Which is worth understanding before you start.

A cookie banner, a newsletter popup, or a booking dialog should hold focus inside itself while it is open, so tabbing cycles within it rather than wandering into the page behind.

It should close on escape, and focus should return to whatever opened it.

The two common failures are opposites: focus that never enters the popup, so it cannot be dismissed at all, and focus that enters and cannot leave, which is a trap.

Both make the site unusable rather than awkward, and both are invisible with a mouse.

Test the cookie banner first, since it appears before anything else and blocks everything behind it.

A worked example

A business did the full walkthrough and reached the third step.

Their cookie banner appeared on load, could not be reached by tabbing, and could not be dismissed, and everything behind it was inert.

A keyboard visitor could not use any page of the site at all.

Their developer fixed the banner in about an hour, moving focus into it on appearance and returning it afterwards.

Everything else on the site turned out to be reasonable, which they would never have known.

The single most damaging failure was on an element added for a legal requirement and never tested.

Dropdown menus

The second common failure point.

A menu that opens on hover and only on hover cannot be opened without a mouse, which hides everything inside it.

The submenu items need to be reachable by tab or by arrow keys, and the menu needs to close on escape.

Where a submenu opens, focus should move into it rather than skipping past.

Check every top-level item that has children, since they are frequently built differently from each other.

This is the failure that quietly removes half a site's pages from anybody navigating by keyboard.

Anything custom deserves a look

Since built-in elements usually behave and custom ones frequently do not.

An image carousel with arrows, a filter on a gallery, an accordion of questions, a date picker, a star rating.

Each of those is somebody's construction rather than a standard control, and each has its own keyboard behaviour or lacks one.

The usual failing is a control that responds to a click and to nothing else, so it is skipped entirely or focused and inert.

Note which ones fail rather than trying to fix them, since these are developer work.

What you can act on yourself

Since some of the findings are yours to fix.

A menu with fourteen items can be shortened.

A newsletter popup can be removed entirely, which solves its keyboard problems and improves the site.

A carousel can be replaced with three images in a row, which is better anyway.

A good share of what fails this test is something added for marketing reasons that is not earning its place.

Removing it is faster than fixing it and usually the better decision.

Write down where you got stuck

Which is the output of the fifteen minutes.

The page, the element, and what happened, in a line each.

That list is a brief for a developer that costs them no investigation time, which makes the work cheaper.

It is also the record you will want later, when somebody asks what you have done about any of this.

Five lines is a normal result, and two of them will usually be the cookie banner.

Date the list, since it also becomes the record of when the site was last checked properly.

Watch where focus goes after something changes

Which is the subtle failure the walkthrough exposes and nothing else does.

When a menu closes, a popup is dismissed, or a form section expands, focus has to go somewhere sensible, and by default it frequently goes back to the very top of the page.

Somebody who has tabbed thirty times to reach a button then finds themselves at the start again, and repeating that twice is enough to make anybody give up.

The correct behaviour is focus returning to whatever triggered the change, so the person continues from where they were.

Note it whenever you find yourself unexpectedly back at the top, since that is the symptom and it is easy to mistake for your own mistake.

The counter-case

You are not a keyboard user.

Somebody who navigates this way daily is faster, knows the shortcuts, and will work around things you found impossible.

Certain findings are also genuinely hard to fix on a platform you do not control, particularly components supplied by a booking or payment provider.

And a simple site of ordinary links and a plain form frequently passes this test entirely, which is worth knowing before assuming the worst.

Put the mouse out of reach, complete the whole journey, test escape on every popup, and write down where you got stuck.

The fifteen minutes

1. Put the mouse out of reach.
2. Start at the home page.
3. Dismiss the cookie banner.
4. Open a dropdown menu.
5. Reach a service page.
6. Complete and submit the form.
7. Write down every sticking point.

Step three is where a surprising number of sites end the test entirely, since a banner that cannot be reached or dismissed makes every page behind it unusable.

The indicator that makes any of this possible is covered in focus you cannot see.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.