Positioning content offscreen

In cases where we need to hide content from a visitor but still make it available to the screenreader, we position it offscreen.

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.