Accessibility Tips

A collection of tips, guidance and practical suggestions in developing accessible websites

Positioning content offscreen

By Isofarro on March 4th, 2008 - 5 comments

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.

5 Responses to “Positioning content offscreen”

  1. 1 Jim Amos says: March 29th, 2008 at 7:22 pm

    I actually didn’t realize this about position:top. Now I need to go change all instances of my usual ‘replaced’ class to use left instead. Thanks!

  2. Great point, Isafarro! Accessibility is new to me even though I’ve been working on web apps since 1996. (I know, typical story.)

    I’d like to mention that using the left property to prevent this problem relies on not having a horizontal scrollbar. Horizontal scrolling is undesirable so we typically avoid it, anyways, so it almost doesn’t need mentioning.

    You may want to consider using the right property instead of the left property. Here’s why: some times the designer is not in control of the contents of the offscreen content (supplied by a third party, for instance). Therefore, we cannot guarantee its width. 999em certainly seems like a large enough offset, but I’ve seen third-party content that was improperly formatted (and therefore didn’t word-wrap for instance). Furthermore, IE6 (ugh) can have performance difficulties when placing content more than a few thousand pixels off the page.

    Using right:101% is much more likely to place the content offscreen. There’s still no guarantee that it is truly offscreen even if we also specify other properties like overflow:hidden, but every bit helps.

    .offscreen {
    position: absolute;
    right: 101%;
    overflow: hidden;

    That’s what I use …. er … what I WILL use now that I know not to use the top property!

    – John

  3. 3 Isofarro says: March 4th, 2009 at 3:19 pm

    Interesting point about the right: 101%.

    John mentions: “some times the designer is not in control of the contents of the offscreen content (supplied by a third party, for instance). Therefore, we cannot guarantee its width. 999em certainly seems like a large enough offset”

    It is worth fixing a width on the offscreened content in that instance, at least to something less than 999em. However, I wouldn’t advise 1px. Make it something sensible.

  4. Also worthy of note is that on a page using a right-to-left writing system (e.g., positioning to the left will cause a horizontal scrollbar to appear, allowing the positioned content to be scrolled into view; the content should be positioned to the right instead.

    Clearly this isn’t a problem when one has control of the site and can guarantee that only left-to-right writing systems will ever be used, but it needs to be borne in mind by those creating (for example) templates, or content management systems that may be used with other languages.

  5. 5 Michael Kniskern says: January 14th, 2010 at 6:51 pm

    I did discover an issue with trying to place an item off screen within an asp:UpdatePanel control. On the initial page load, the item is hidden using the suggested CSS class. When the panel is updated by one of the asynchronous triggers, the item looses the CSS class configuration and is displayed on the page.

    This only happens in Internet Explorer 7. It works in FireFox.

Add a comment or reply

Copyright © 2007 - 2009, isolani