The dotted outline on links is the main visual cue to where the current keyboard focus is on a page at any one time. By tabbing or shift-tabbing through the document the focus is set on the next or previous focusable elements.

This focus rectangle is removed because it makes things look unsightly, but they serve a very useful purpose. And that purpose is critical for a keyboard user to find their way through a page.

So it is essential that there is a clear focus indicator, both on links and form fields. Clear enough that a visitor looking at the page for the first time can spot where the keyboard focus is as quickly as possible.

We do this though CSS’ :focus pseudo-class on the target element. For example, to change the background colour of a link when it receives focus we use the following:

a:focus {
    background-color: #aaf;
}

We can do the same with input fields:

input:focus {
    background-color: #aaf;
}

In each case, the background colour of the focusable element changes colour when it received focus, and that background colour changes back when the element loses focus. By making this background color change enough it is possible for a visitor to find the focused region of the page.

The same argument can also apply to when links are active, using the :active pseudo-class. An active link is one that is in the process of being clicked, so for example when the mouse-button is being held down when over a link and just about to be lifted, this link is seen to be active. Using this active pseudo-class to style an element that is active provides a visible cue about what is going to happen.

a:active { color: red; }

And, we often overlook the usefulness of setting a visited link colour (with the :visited pseudo-class). This proves very helpful in distinguishing destinations a visitor has already been to, thus simplifying the choice of which link to try next.

a:visited { color: purple; }

A common pitfall is that certain browsers need these pseudo-classes in a specific order so as not to have one pseudo-class override the styles of another. The safest pseudo-class order is :link, :visited, :hover, :focus and then :active:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: magenta; }
a:focus { color: magenta; }
a:active { color: red; }

The simplest way to do that with CSS is to use the following style:

.offscreen {
    position: absolute;
    left: -999em;
}

Avoid offscreen using top

A typical mistake is also to set the top property to a negative value in the same style rule. This just about works when the content originally appears at the very top of the page – like a set of skiplinks.

But, if the content you are hiding is originally below the fold on the screen, when a focusable element in the off-screen styled content receives focus, the page scrolls right to the top of the document trying to bring this content into view. This jump in content creates confusion for keyboard users, and screen magnifier users.

What is just as bad is when the user tabs again, the page again jumps, this time downward to the next focusable element.

When a container of content is positioned offscreen, the focusable elements within still remain in their original tab orders, so they will receive focus as if the content were still in its original place in the document flow.

Offscreen positioning using top interfers with the expectation that focusable content is in a top down order. Offscreen left doesn’t suffer the same fate because the vertical positioning of the content hasn’t changed, so no upwards scrolling is required.

Move focused offscreen content back onscreen

Note: When positioning content offscreen which contains focusable elements, you should also ensure that when those focusable elements receive focus that they are brought back into the current viewport. This is necessary so that keyboard users can see the content.