Tabbing Through Your Own Checkout

The test

Open your own site, put the mouse aside, and press tab repeatedly.

The focus should move through links and form fields in the order they appear, visibly, so you can always see where you are.

Press enter to activate a link, space to press a button, and try to complete a purchase or an enquiry without touching the mouse at all.

On most small sites this takes ten minutes and finds two or three genuine problems.

Who navigates this way

More people than the phrase keyboard user suggests.

Anybody with a motor impairment that makes a mouse difficult, which includes tremor, arthritis and a range of temporary injuries.

Anybody using a screen reader, which navigates by keyboard by definition.

People using switch devices, voice control, or other assistive input, all of which work through the same mechanism.

And a substantial number of people who simply prefer it, particularly for forms, which is why a broken tab order irritates far more visitors than it excludes.

The four things that go wrong

• No visible focus, so you cannot tell where you are.
• Elements that cannot be reached, usually custom controls.
• An illogical order, jumping around the page.
• A trap, where focus enters something and cannot leave.

The first is the most common by a wide margin, and it is usually deliberate: somebody removed the outline because it looked untidy.

The fourth is the most severe, because it makes the rest of the page unreachable entirely.

The focus outline

The ring that appears around whatever is currently selected.

Browsers draw it by default, and a line of styling removes it, which is one of the most commonly copied snippets in web design.

Removing it makes a site unusable by keyboard, because there is no way to tell what pressing enter will do.

If the default outline is genuinely ugly against your design, replace it with something visible rather than removing it: a thicker border, a background change, a coloured ring that suits the palette.

What is not acceptable is nothing at all, and it is worth checking whether your theme did this without anybody deciding to.

A worked example

A small shop whose checkout could not be completed by keyboard.

The quantity selector was a custom control built from styled elements rather than a form field, and tab skipped it entirely.

Which meant anybody navigating by keyboard could reach the product, could not change the quantity from one, and could reach the buy button.

They discovered it because a customer emailed to ask how to order two of something.

The fix was replacing the custom control with an ordinary number input styled to look the same, which took an afternoon.

The owner's observation was that the custom version had been built to look better and had never been tested any way except with a mouse.

Modal windows and overlays

The most common source of a focus trap, and the hardest to get right.

When a dialogue opens, focus should move into it, stay within it while it is open, and return to where it started when it closes.

What frequently happens instead: focus stays on the page behind, so tabbing moves through content the visitor cannot see.

Or focus enters and cannot escape, because the close button is not reachable and the escape key does nothing.

Cookie notices, newsletter popups and image lightboxes are the usual offenders, and they are frequently third-party components nobody tested.

Skip links

A small addition that improves things considerably for anybody tabbing.

Without one, every page begins with tabbing through the entire navigation before reaching the content, which on a site with twelve menu items is twelve presses on every single page.

A skip link is the first focusable element, hidden until focused, that jumps straight to the main content.

It costs a few lines, it is invisible to mouse users, and it removes a genuine daily irritation for anybody who navigates by keyboard.

Most modern themes include one, and it is worth checking whether yours does by pressing tab once on a freshly loaded page.

The counter-case

Where this is less urgent, though rarely irrelevant.

A site with no forms, no checkout and no interactive elements beyond links, where the browser's default behaviour handles almost everything correctly.

Even there, the focus outline should not have been removed, and a skip link is still worth having.

What is never a counter-case is small audience size. The people affected are a minority of visitors and they are entirely excluded rather than mildly inconvenienced, which is a different kind of cost.

And for anything transactional, it is a legal expectation in a growing number of contexts as well as the right thing to do.

Tab order and how it is decided

Worth knowing because the fix is usually not what people reach for.

Focus follows the order elements appear in the page code, not the order they appear on screen.

Which means a layout where a sidebar is positioned visually beside the content, but sits after it in the code, will be tabbed through in an order that looks wrong.

The instinct is to force the order with a numeric attribute, and that almost always makes things worse, because it has to be maintained on every element forever.

The correct fix is putting the elements in the code in the order they should be read, and using styling to position them, which is how modern layout works anyway.

If your tab order is illogical, the page structure is illogical, and the tab order is telling you something useful about it.

The ten-minute test

1. Load your homepage and press tab once.
2. Keep tabbing and watch where focus goes.
3. Check you can always see what is focused.
4. Open any popup and try to close it by keyboard.
5. Complete your contact form without the mouse.
6. Complete a purchase, if you sell anything.

The fifth and sixth are where problems actually cost money, and they are the two most people never try.

Anything you find is usually a small fix rather than a rebuild, because the browser does most of this correctly by default and the problems come from things that overrode it.

The related question of what those form fields are labelled is covered in asking for a phone number you will not use.

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.