Hiding Content Accessibly

This post was originally published on jessbudd.com.

There are often situations where we need to hide content on a page, either temporarily or permanently. The method you use for hiding content can have a big impact on accessibility, so this post will discuss when to use particular techniques.

There are generally 3 scenarios where we want to hide content:

1. We want to hide content for everyone (including people using screen readers).
2. We want to hide content visually (but not from screen readers).
3. We want to hide content from screen readers (but not visually).

Hiding content for everyone

Common situations where you want to hide content from everyone, including sighted keyboard users and people using screen readers, are closed navigation menus, tooltip text and collapsed accordions.

The CSS styles below will prevent the element displaying visually on the page, will be ignored by screen readers, and will prevent keyboard users tabbing to the content.

.hide-for-all { display: none; }

.hide-for-all { visibility: hidden; }

The difference between display: none; and visibility: hidden; is that hidden elements are not removed from the document flow, so will retain its physical space on the page.

A common mistake when hiding content is to use opacity: 0; when the intention is to hide the content from everyone. Although this styling removes the content visually, it is still announced by screen readers and potentially focusable by the keyboard.

Hiding content visually

There are two main situations when you want to hide content visually:

• When you never want the content to be visible on the page.
• When you want the content to become visible when focused by the keyboard.

Never visible

There are times when the visual information in a design is not sufficient for screen readers users. A common example of this is form inputs that aren't given visual labels.

Labels are crucial for screen reader users to understand and successfully complete forms. So in a situation like this you could visually hide the label with CSS.

The most commonly accepted practice for modern browser support is using clip-rect.

.sr-only {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

Elements with this class will not be visible on the page or take up space in the visual flow, but will announce the contents to assistive technologies.

Visible when focused

Sometimes we want to hide an element only until it receives keyboard focus.

A perfect example of this are skip-links. A skip-link is styled with CSS to remain out of view until a user tabs to the element and is then sent back off-screen when it leaves keyboard focus. This behaviour benefits sighted keyboard users, without changing the visual design for mouse users.

We use a combination of CSS properties to position the content offscreen and the focus pseudo element to bring the position onto the page as the element by the keyboard.

/* positioned offsceen so not visible */
.skip-link a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* appears back on screen when focused with keyboard */
.skip-link a:focus { 
    position: static; 
    width: auto; 
    height: auto;
}

Combined approach

An alternative approach is to combine these two methods and use the
:not(:focus) and :not(:active) pseudo elements within the sr-only
class. This will remove the offscreen styling when an element is focused or active.

.sr-only:not(:focus):not(:active) {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

Hiding content from screen readers

It's uncommon to need content to be hidden from screen readers only, however this can be appropriate when visual content is decorative or duplicative. An example would be SVG or font icons that are accompanied by text labels.

We can hide the icons from assistive technology using aria-hidden="true". This effectively has the opposite behaviour of our sr-only class, in that it remains visually on the page while being ignored by assistive technologies.

<button>
    <span class="icon-close-menu" aria-hidden="true"></span> 
    <span class="sr-only">Close navigation menu</span>
</button>

Further Reading

If you're interested in learning more about hiding content accessibly here are some great resources:

• Invisible Content Just For Screen Readers by WebAIM
• How to Hide Content by The A11y Project
• Inclusively Hidden by Scott O'Hara

Comments

[Ben Sinclair]

Can you give an example of when you would hide labels or when a skip link would be used by a sighted user but not a screen reader user?

[Jess Budd]

Hi Ben. Ideally, all forms should have visible labels to be accessible to the widest range of people. Unfortunately, many designs exclude them. In those cases, we can add a visually hidden label so that at least people using screen readers can access them.

Skip links, on the other hand, are helpful for sighted keyboard users AND screen reader users. It doesn't usually matter to a screen reader user if these remain invisible, but for sighted keyboard users, they need the element to become visible when focused to know where they are on the page and read the text.

Does that explanation help?

[Ben Sinclair]

I know what you're saying, but I think in the first example, if we as developers can push back and add hidden content, we should be in a position to push back against bad designs (I know this isn't always the case).

I'm still not sure I get the point of the second one, though. Do you have an example of any site that does this so I can see what you mean?

[Jess Budd]

I agree we should all be having conversations about making designs more accessible and that should be the goal!

dta.gov.au/ is an example of a skip-link. If you tab from your browser address bar, a "skip to main content" link appears top left. If you keep tabbing, it will dissapear and your keyboard focus will tab through all the header navigation items.

If you activate the skip-link (by pressing enter) your keyboard focus will be moved to the main content (skipping the navigation). The skip-link is positioned offscreen (making it invisible) until you tab to it, when it becomes visible. If we didn't have css to bring it on screen when focused, a sighted keyboard user would still be tabbing to that link, but they wouldn't be aware of it because they couldn't see it.

[Ben Sinclair]

That's actually really neat! Thank you.