Visually hide redundant text as needed

Applicable Role(s): Developer

Overview

There may be info on your page that is visually redundant given the content and context, but can still be useful for those navigating with assistive technology or non-visual ways. It may be needed to hide redundant but meaningful content, so they're still detectable for users who need that content.

This technique can especially provide more descriptive link text, buttons, etc. when space or redundancy is a concern.

Best Practices

Ask: Do you need to hide content?

Content that is visually-hidden, like meaningful link text and heading structure, could help people who are sighted and use assistive tech like reading tools or speech recognition. Additionally, not all people using screen readers or other text-to-speech (TTS) technology are completely blind (WebAIM 2021 screen reader survey). It may be confusing to hear or detect content through TTS, but not see it reflected on the page.

That said, visually-hidden is best used when semantic info may be necessary to include, but is redundant to the content's design or visual cues.

Before hiding content, consider the following:

  • If the text is for a link/button/other interactive control, could the text be adjusted so it is clearer on its own? See Provide descriptive link text for more examples and resources.
    • Note: some speech input tools, like Apple's Voice Control, listen for the entire link text. This means if a link has visually-hidden text a user can't visually see, they won't be able to activate the link since they don't have the text needed to do so verbally.
  • If space/layout is a concern, could the page design be adjusted to allow for clearer links, buttons, or other controls?

If visually hiding content is still required for the content:

  • If you want the content hidden from everyone, use display: none or visibility: hidden.
  • If you have content that helps some users understand the context of link, section, feature, etc., use a .visually–hidden class on the redundant text.

Pattern Examples

Display: None

Use case: modals not shown by default, text essentially not part of the webpage

<p style="display: none;">
This paragraph is hidden
</p>

This paragraph is hidden

Visibility: Hidden

Use case: same as display: none, but if the text should still take up space

<p style="visibility: hidden;">
This paragraph is hidden, but takes up space
</p>

This paragraph is hidden, but takes up space

Visually Hidden Text

Use case: additional instructional cues, meaningful link text.

<p>This paragraph is visible 
  <span class="visually-hidden">
  , but still has detectable text
  </span>
</p>

This paragraph is visible , but still has detectable text

<p>Read more<span class="visually-hidden">
about our brand guide</span></p>

Read more , but still has detectable text

CSS for .visually-hidden

Note: we already include this class in our Drupal stylesheet, so this already is available on Drupal 8+ sites. In Drupal 7, this is the .element-invisible class. In WordPress or the Lite template, this is the .screen-reader-text class.

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
This method essentially creates a region of 1px squared and hides the text if it overflows that region.

Adding space before or after visually-hidden text

Testing shows there is a bug in screen readers that collapses space between visible text and visually-hidden text. This could be due to factors like the recommended styling properties, browser support, and assistive tech support.

Using the visually-hidden text example as is will typically announce as "Read moreabout our brand guide," instead of "Read more about our brand guide." To reinforce the spacing expected, there are space classes you can add depending on where you need visually-hidden text.

Note: you should only need spacing classes for links, buttons, etc., that have some visible text, but also contain visually-hidden text.

Space before:

The visible text precedes the visually-hidden text.

<a href="#">Read more<span class="visually-hidden space-before">about our brand guide</span></a>

Space after:

The visually-hidden text precedes the visible text.

<button><span class="visually-hidden space-after">Open</span>settings</button>