The Outline Your Designer Removed

A glow that looked like a mistake

During a design review, somebody clicked a button and a blue glow appeared around it. It looked like a bug.

The designer added one line to the stylesheet that removed the outline from every link, button and form field on the site. The glow disappeared, the design looked cleaner, and nobody noticed anything else.

Nobody in the office uses the Tab key to move around a website. For the people who do, the site now has no visible cursor. They press Tab, something somewhere has focus, and they cannot see what.

Who moves around a site by keyboard

• People who cannot use a mouse because of tremor, injury or pain.
• People with low vision who use screen magnification.
• Screen reader users, many of whom can see part of the screen.
• Anyone filling in a form who presses Tab between boxes.
• People whose mouse or trackpad has just stopped working.

The fourth group is larger than most owners expect. Pressing Tab between boxes is a habit for many people, and on a checkbox or a button there is no blinking cursor to show where they are.

What the outline is for

The outline is the browser's way of showing keyboard focus: the link, button or field that will respond if the visitor presses Enter or the space bar.

Each browser draws its own, usually a glow or a dotted line.

It appears when somebody tabs to an element, and in some browsers also when a button is clicked with a mouse, which is how it ends up in design reviews.

Take it away and a keyboard user is working blind, pressing Tab and guessing.

What the standard says

WCAG 2.0, the accessibility guidelines most rules refer to, includes a criterion called Focus Visible at Level AA. Anything that can be operated with a keyboard must show where the keyboard focus is.

Removing the outline without putting anything in its place fails it.

In Ontario, organisations with at least fifty employees in the province must have their websites at Level AA by January 1, 2021, apart from a few criteria.

Elsewhere, it is simply the accepted measure of a site that works for everyone.

Why designers remove it

Rarely out of carelessness. The browser's default outline clashes with most designs, and it appears at moments that look accidental, such as just after a mouse click.

Many themes and starter stylesheets remove it everywhere as a matter of course, and some page builders do the same.

The problem is not removing the default. It is removing it without designing a replacement.

Testing it in two minutes

Click into the address bar, put the mouse aside, and press Tab repeatedly. At each press, you should be able to see exactly which element is selected.

Go through the menu, the main content, the contact form and the footer. Press Shift and Tab to go backwards, Enter to follow a link, and the space bar to tick a checkbox.

Use Chrome or Firefox for this. Safari on a Mac skips links when tabbing unless you turn on the option to highlight each item, in its advanced preferences.

Every point where you lose track of where you are is a point where a keyboard user is lost too.

A worked example

A small travel agency that books escorted tours, many of them for retired couples, took enquiries through a form on its website.

One caller mentioned that she had given up on the form. She used the keyboard because of a tremor, and could not tell which box she was in once she reached the checkboxes.

Whoever maintained the site found the reason in a minute: the theme's stylesheet removed the outline from everything. Tabbing through the pages also showed that the main menu's drop-downs opened only on mouse hover.

The fix was a focus style in the agency's own dark green: a thick outline with a small gap around buttons and fields, and a coloured background on menu links.

The drop-downs were changed to open from the keyboard as well.

It looked deliberate, because it was. Every page was checked with the Tab key before the change went live.

A focus style that looks intentional

A good focus style is part of the design, specified alongside the hover style rather than left to the browser.

Use the brand's own colour, thick enough to see at a glance, with a small gap so it does not crowd the text. For links, a change of background or a heavy underline works well.

It has to show up on every background the site uses: the dark header, the photograph behind the main heading, the pale footer. A colour that stands out on white may vanish on navy.

Apply it consistently to links, buttons and form fields, so the site has one clear way of saying: you are here.

If the click outline must go

Some designers object that the outline appears after mouse clicks, where nobody needs it.

There is a fair compromise: a small script that shows the focus style only when somebody is using the keyboard.

A way of doing this in the browser itself is being worked on as a standard, but sites cannot rely on it yet.

What is not acceptable is removing focus for everybody because it bothers people using a mouse.

The counter-case

Not every site has this problem.

A site that never removed the browser's outline already meets the basic requirement, though the default can be faint against some colours and is worth checking.

A short brochure site with few links has less at stake than one built around forms and bookings.

The change itself is small, a few lines in the stylesheet, but it belongs with whoever maintains the theme, so the next update does not undo it.

Wherever the outline has gone, though, put a visible focus style back.

The check

1. Put the mouse aside for five minutes.
2. Press Tab from the top of the home page.
3. Note every point where focus disappears.
4. Ask for a focus style in the brand colour.
5. Test it on every background the site uses.
6. Check menus open from the keyboard.
7. Repeat the test on the contact form.

Step five is the one most often skipped. A focus style chosen against a white page can disappear completely on a dark header, which is exactly where most sites put their menu.

Checking the site the way other people actually use it is the same habit as in the phone version nobody at the office has seen.

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.