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.

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 

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

Read more

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.

Need Accessibility Help?

Contact Carly Gerard

Contact David Engebretson