Avoiding visibility hidden

Hiding content from view with visibility: hidden in many cases prevents the screenreader from reading the content, so content styled this way is inaccessible. This technique is not appropriate for hiding content on screen because no screenspace is saved by styling this way - the visitor is left looking at a blank region the size of the hidden content.

In a number of cases visibility: hidden is used in conjunction with positioning the content offscreen (position: absolute; left: -999em;). This is unnecessary since positioning content off the viewport is sufficient to hide the content, and the visibility: hidden makes the content unavailable to screen readers.

There's no reason to use visibility: hidden. Positioning the content offscreen is safer and has far less accessibility implications. If you fee that visibility: hidden is appropriate for your requirements, I strongly recommend revisiting the requirement and finding an altogether different solution.

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.