Skip to content

Hiding Content

Sometimes we need to hide content on the web page. We just saw an example of hiding the skip navigation link on the screen for sighted users. There are various reasons a developer may need to hide content. Different reasons correlate with an appropriate method to hide such content. Typically, there are three reasons why you need to hide content.

Completely Hidden

Many components in user interfaces (tab panels, off-screen navigations, modal windows, etc.) are initially hidden until a state change occurs to bring these components and their content into view.

Technique

  1. display:none

    It completely removes elements from the DOM. The content set to display: none will not be accessible to ANY user of assistive technology.

  2. The hidden attribute

    The HTML5 attribute, hidden, can be used to hide content from all users. It is essentially the same as using CSS display: none.

  3. visibility: hidden

    This is similar to the CSS property display: none; however, this method does not remove the content from the normal DOM flow, so its "physical space" on the web page is retained. It also retains any CSS transitions, making it a preferred choice when developers need to transition from hidden to visible.

Only Visually Hidden

When we need to hide content from the visible interface, but it needs to be discoverable through AT (assistive technologies). Ideally, you should have a design where you don't need to hide content from sighted users. However, this can't always be avoided.

Technique

1. The CSS clip

The below CSS, removes the content from the screen (visually), but it is accessible to the screen reader.

.visually-hidden { 
    position: absolute;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap; 
}

Using absolute positioning, we take the element out of flow to not affect the positioning of anything around it. With a height of 1px, the element is still visible for screen readers. The clipping removes any visible trace of the element from the page. The last line of white-space: nowrap is added to fix an issue with text being "smushed together." This is CSS code you probably wouldn't memorize, but have it available to use when needed.

For example, remember the below link that opens in a new tab and uses aria-describedby to inform screen readers of that behavior?

The <span> is hidden from visual users.

If we look at the HTML, you'll see the class="visually-hidden" applied to the <span> element. This corresponds to CSS that uses the "clip method" shown above.

HTML Language Code Reference 
<a href="https://www.w3schools.com/tags/ref_language_codes.asp" 
  aria-describedby="a11y-message--new-tab" 
  target="_blank">HTML Language Code Reference 
  <i class="fas fa-external-link-alt"></i>
</a>

<span aria-hidden="true" class="visually-hidden" id="a11y-message--new-tab">
  (opens new tab)
</span>

Stop & think

Before using this method, which, to be honest, is ugly(!), think about WHY you are hiding content from the visual user. Is there a better solution? Could you include the text "opens new tab" for everyone? 🤔 What are you gaining from the above solution?

2. Off screen

We used this method when we created a skip navigation link. We push the content outside of the browser's visible viewport.

.skip-link {
  position: abosolute;
  left: -1000px;
}

For left to right languages to position content off to the left, as positioning it to the right may create horizontal scroll bars.

This method is preferred over the clip method when content transitions from off-screen to on-screen upon focus (like the skip nav link).

.skip-link:focus {
  left: 0;
}

Only Screen Reader Hidden

Some instances call for hiding content from AT (assistive technologies), like a screen reader. While this may seem counterintuitive to creating fully accessible user experiences, hiding this sort of content reduces potential redundancies in information. For example, an image could have alt text as “warning,” followed by visible text which states “warning.” Communicating both to assistive technologies is not necessary.

Technique

1. aria-hidden="true"

The aria-hidden attribute takes a value of either true or false. When it is set to true, a screen reader will completely ignore this content. This is often used for Icon Fonts. There are fonts that can produce icons. I don't want the screen reader to announce all my decorative icons, so an attribute of aria-hidden="true" can be applied.

This can improve the experience for assistive technology users by hiding:

  • Purely decorative content, such as icons or images
  • Duplicated content, such as repeated text
  • Off-screen or collapsed content, such as menus

aria-hidden="true" should never be used on a focusable element (links, buttons, form controls). Use caution; think about why you are hiding something from the screen reader; perhaps a redesign is needed instead of hiding content.