Keyboard navigation is the quickest accessibility check available and it needs no tools. The common failures are an invisible focus outline, a menu that cannot be opened, and a tab order that does not match the page.

Who navigates this way

A wider group than assumed, and not only people using assistive technology.

Somebody with a motor condition that makes precise pointing difficult. Somebody with a temporary injury. Somebody using a screen reader, which is driven entirely by keyboard. And a substantial number of people who simply prefer it, particularly on forms.

What they share is that if the keyboard route is broken, there is no alternative. A visitor who cannot use a mouse and cannot use the keyboard cannot use the site at all.

The test, which takes five minutes

Open your homepage, click once in an empty area, then press tab repeatedly.

Watch for four things. Whether you can always see where you are. Whether the order makes sense. Whether you can reach everything. And whether you can get out of anything you get into.

Then press enter on a link to confirm it activates, and space on a button. Then try your contact form the same way, from the first field to submission.

That is the whole test, and most sites fail it in the first screen.

The failures, in order of frequency

The focus outline was removed

The most common by far, and usually deliberate, because designers find the default outline unattractive.

Without it, a keyboard user cannot tell where they are on the page. Pressing enter becomes a guess. This single change makes an otherwise fine site unusable.

Replacing it with something better looking is entirely legitimate. Removing it is not, and the code that does it is usually one line somebody copied.

The menu cannot be opened

A dropdown or a mobile menu that responds to hover or to a click handler on something that is not a button. Tab passes over it or reaches it and enter does nothing.

The consequence is that most of the site is unreachable, since the navigation is how you get anywhere.

Tab order does not match the page

Focus jumps from the header to the footer and back to the middle, because elements were positioned visually in a different order from the underlying markup.

Confusing with sight, and genuinely disorienting without it.

Focus is trapped

A popup, a chat widget, or a video that takes focus and does not give it back. Tab cycles inside it forever and the escape key does nothing.

The visitor's only option is to leave the site.

Focus is lost after an action

A dialog closes and focus returns to the top of the page rather than to where the visitor was, so they have to tab through everything again.

Hidden things still receive focus

A closed menu or an off-screen panel that is visually hidden but still in the tab order. Focus disappears to somewhere invisible and the visitor cannot tell what happened.

The skip link

A small addition worth making and almost never present on small business sites.

Without one, a keyboard visitor tabs through the entire navigation on every single page before reaching the content. On a site with a dozen menu items that is a dozen presses each time.

A skip link is the first focusable element, hidden until focused, and jumps straight to the main content. It costs a few lines and removes a repeated frustration.

Buttons that are not buttons

The underlying cause of several failures above.

Where something that behaves as a button is built from a generic element with a click handler attached, keyboards do not reach it, because only certain elements are focusable by default.

Using the actual button and link elements for the things that are buttons and links solves this without any additional work, since those elements are focusable, activate on the expected keys, and are announced correctly.

Most keyboard problems on small business sites come from a page builder or a theme substituting a styled generic element for a real one.

Forms specifically

Worth testing separately, because that is where the enquiry is.

Every field reachable in order, labels attached so the purpose is clear, and error messages that appear where the visitor is rather than only at the top of the page.

Also worth checking: whether a date picker, a dropdown, or an upload control can be operated without a mouse, since custom versions of those are frequently the point at which a form becomes uncompletable.

What to fix first

  1. Restore a visible focus indicator, styled how you like.
  2. Make the menu operable by keyboard.
  3. Test the contact form end to end.
  4. Add a skip link.
  5. Fix anything that traps focus.

The first two are usually a small amount of work and they convert a site that is unusable by keyboard into one that is merely imperfect, which is most of the available benefit, and the same principle of making the essential things work everywhere applies in how far back to support old browsers.

Frequently asked questions

Who actually navigates by keyboard?

People with motor conditions or temporary injuries, anybody using a screen reader, and a substantial number who simply prefer it. If the keyboard route is broken there is no alternative.

How do I test it?

Click an empty area of your homepage and press tab repeatedly. Check you can always see where you are, the order makes sense, you can reach everything, and you can get out of anything.

What is the most common failure?

The focus outline removed because designers find it unattractive. Without it a keyboard user cannot tell where they are, and pressing enter becomes a guess.

Why does the menu often fail?

It responds to hover, or the click handler sits on something that is not a real button. Since navigation is how you reach anything, most of the site becomes unreachable.

What is a skip link?

A hidden first element that jumps to the main content. Without one, a keyboard visitor tabs through the whole navigation on every page before reaching anything.

What causes most keyboard problems?

A theme or page builder using styled generic elements instead of real buttons and links, which are focusable and activate on the expected keys by default.

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.

Never pressed tab on your own homepage?

We run the five-minute check and restore the focus indicator, which is usually the single change that makes a site usable again.

Start a Conversation