Everything on your site should work from the keyboard

The one minute test

Open your homepage. Put the mouse away. Press tab repeatedly and watch where the highlight goes.

You are looking for three things. Can you reach every link and button. Can you always see which one you are on. Does the order make sense, roughly matching the way the page reads. If the answer to any of those is no, you have found real work.

Do it on a page you did not build recently. Templates drift, and the page that was checked at launch is rarely the page a visitor lands on two redesigns later.

Trap one: the hover menu

A drop down that only appears when a pointer sits over it does not exist for a keyboard. The parent link gets focus, nothing opens, and the whole section under it is unreachable.

A menu has to open on focus as well as on hover, and it needs to close again with the escape key. This is the single most common way a site quietly locks people out of half its pages.

Trap two: the invisible highlight

Browsers draw a ring around whatever has focus. Designers often remove it, because it interrupts a clean look.

Removing it without replacing it is the accessibility equivalent of turning off the headlights. The reader is still moving through the page and can no longer tell where they are. If the default ring clashes with your design, draw a better one. Do not delete it.

This is common enough to be worth its own page. Visible focus indicators covers why the ring exists, how it gets deleted, and how to draw one that suits a design without removing it.

Trap three: the box you cannot leave

A popup, a cookie notice, a video player, a chat widget. Focus goes in and never comes out, because the close control was built as a styled image rather than a real button.

The reader is now stranded. They cannot reach the page behind, and they cannot dismiss the thing in front. Every overlay needs a reachable close control and an escape key that works.

Trap four: the fake button

If a control is built from a plain element with a click handler bolted on, it looks like a button and behaves like decoration. Tab skips it. The space bar does nothing.

Real buttons and real links are free, they are focusable by default, and they already announce themselves correctly. Most keyboard problems on a small business site come from replacing them with something that only looks the part.

Custom widgets are where it gets hard

Accordions, tabs, date pickers and image carousels are all built from scratch on most sites, and each one has an expected keyboard behavior that visitors have learned elsewhere.

Tabs should move with the arrow keys. An accordion should open with enter or space. A date picker that cannot be typed into is a wall for anyone who finds a calendar grid hard to operate.

The safest rule for a small business site is to prefer the plain version. A list of questions with answers underneath needs no keyboard handling at all, because there is nothing to operate.

The pattern to watch for is a control that looks like something familiar and behaves like nothing at all. If a visitor has to learn how your accordion works, the accordion is the problem.

What the builder does about it

Pages here are assembled from real links, real buttons and real form fields, so keyboard behavior is inherited rather than rebuilt each time. Every page passes a check that runs before anything publishes, validated against Google Search Essentials and modern web standards.

A machine can confirm that controls are reachable. It cannot judge whether the tab order is sensible on a page you designed in an unusual shape, so walk your own site once with the tab key before you launch.

Everything on this list is also a search question. A menu that only works with scripting hides the pages beneath it from a crawler as surely as it hides them from a keyboard, which is covered in how crawling works.

A short list to walk before launch

Tab from the top of the page to the bottom and confirm you can always see where you are. Open every menu without touching the mouse. Open any popup and close it again with escape alone.

Reach the contact form, complete it and submit it from the keyboard. Then do the same on your phone with an external keyboard if you have one.

That walk takes a few minutes and finds nearly everything. Pages here are written from a conversation about your business and assembled from real controls, so most of this is inherited rather than repaired.

• Tab from the top of the page to the bottom without touching the mouse
• Confirm you can always see which control is selected
• Open every menu, including the mobile one, and close it with escape
• Open any popup or cookie notice and get back out of it
• Complete and submit the contact form from the keyboard alone
• Reach the phone number and the main call to action
• Repeat the walk on a phone with a keyboard attached