Focus You Cannot See

The two-minute test

Open your home page and press the tab key repeatedly.

Something should visibly change on the page with every press, showing which link or field is currently selected.

If nothing visible moves, or it disappears once you reach the main content, the focus indicator has been removed.

That means anybody navigating without a mouse has no way to know what pressing enter will do, which makes the site unusable rather than merely awkward.

Where it goes

• A theme removing it globally.
• Custom buttons styled from scratch.
• Links styled to look like buttons.
• A page builder's own components.
• Form fields with custom styling.

The first is the most common. A single line in a theme's styling removes the outline everywhere, and it is among the most widely copied snippets in web design because the default ring is considered ugly.

Why it gets removed

Worth understanding rather than treating as carelessness.

Browsers draw a default outline that frequently clashes with a considered design, appearing as a blue or dotted ring that matches nothing.

A designer removes it because it looks wrong, and because it appears when clicking with a mouse as well, which seems like a bug.

That reasoning is understandable and the conclusion is wrong, because the ring is the only thing telling a keyboard user where they are.

The correct response is replacing it with something that suits the design, not removing it.

Modern browsers also now distinguish mouse clicks from keyboard focus, which removes the original objection entirely.

A worked example

A business had a site built on a well-regarded theme and had never had a complaint.

Pressing tab, the first few presses showed a faint ring in the header, and everything from the navigation onward showed nothing at all.

Their enquiry form could be tabbed into and there was no way to tell which field was selected.

Their developer restored a visible indicator in about twenty minutes, using a thick border in their own brand colour.

It looks deliberate rather than like a browser default, which was the original objection.

Nobody had complained because people who cannot use a site do not complain.

What a good replacement looks like

Since removing the objection is the point.

Something clearly visible against every background it appears on, which means checking it over dark sections as well as light ones.

Thick enough to notice at a glance rather than a thin line somebody has to hunt for.

Consistent across links, buttons, and form fields, so it means the same thing everywhere.

And in a colour with enough contrast against what is behind it, which is the same contrast question as everywhere else.

A solid border two or three pixels thick in a brand colour satisfies all of that and looks intentional.

Check the whole path, not the header

Which is where partial removal hides.

Focus frequently survives in the navigation, which is the theme's own styling, and disappears in the content area or in a form.

So tab all the way from the top of the page to a submitted enquiry rather than pressing it four times and concluding it works.

Check any custom component particularly: a booking widget, a gallery, a slider, or anything added by a plugin.

Those are frequently styled independently and have their own version of this problem.

Do it on one interior page as well as the home page, since templates differ and the home page is usually the most carefully styled.

A landing page built outside the template is worth a third check, for the same reason it always is.

Also check the order makes sense

Since you are pressing tab anyway.

Focus should move through the page roughly in the order things are read: header, navigation, content, form, footer.

Where it jumps to the footer and back, or into a hidden menu, something in the underlying structure is out of sequence.

That is a harder fix and worth noting for whoever maintains the site rather than solving yourself.

It is also considerably less common than the missing indicator, so do not go looking for trouble.

This one is worth paying for

Which is not true of everything in this subject.

It is a small, contained change that a developer can make in under an hour, and it converts a site from unusable by keyboard to usable.

Compared with rebuilding pages or restructuring content, it is the best return available in accessibility work.

Ask for a visible focus style on all interactive elements, in a brand colour, checked over light and dark backgrounds.

That sentence is a complete brief and does not require you to know anything further.

Hover styles are not focus styles

A distinction worth making, since it is the source of a common false pass.

Many themes change a link's appearance when the mouse hovers over it and do nothing when the keyboard reaches it, which are two separate states.

Somebody checking casually sees the site responding to the mouse and concludes the indicators are fine, when the keyboard state was never styled at all.

The fix is usually to apply the same styling to both states, which is a small change wherever the hover style already exists.

That also means a site with good hover styling is most of the way there, and the remaining work is smaller than it looks.

The counter-case

Some themes make this awkward.

Where the styling is generated by a page builder, restoring the indicator can require overriding it in several places rather than one.

An over-styled focus ring can also be visually noisy on a busy page, which is a genuine design cost rather than an excuse.

And a site with no forms and few links has less at stake here than a shop.

Press tab through your own site to a submitted enquiry, and if nothing visible moves, ask for a focus style in your brand colour.

The two minutes

1. Open your home page.
2. Press tab repeatedly.
3. Watch for a visible change.
4. Continue into the content.
5. Tab through the form.
6. Check a custom component.
7. Ask for a visible style if missing.

Step four is where most sites fail, since focus commonly survives in the header the theme styled and vanishes everywhere the content actually is.

The full keyboard test is covered in tabbing through your own checkout.

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.