Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Hidden Content

Hiding content is very useful for accessibility. We can hide things visually and only display it to screen reader users, we can hide content from screen reader users and only show it visually, or we can hide content from both.

Techniques

Technique Visually Hidden Screen reader hidden Additional Info
CSS:
    .sr-only {
      border: 0; 
      clip: rect(0 0 0 0); 
      height: 1px; 
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
Yes No There are multiple ways to accomplish this with CSS. This is the current way we are recommending it.
CSS:
    {
      display:none;
    }
Yes Yes
HTML5 attribute:
hidden
Yes Yes In supported browsers, this is the same as
    {
      display:none;
    }
aria attribute:
aria-hidden='false'
No No This is overwritten by other techniques. i.e. Using
    {
      display:none;
    }
will cause the element not to be read or seen.
aria attribute:
aria-hidden='true'
No Yes

Aria Hidden

aria-hidden should be used in combination with these techniques. If we want to hide something from just the screen reader, you can mark it as aria-hidden='true'.

Items with aria-hidden='true' are always ignored by the screen reader. This is useful for:

If an element has multiple states, it’s visibility should be tracked with aria-hidden true/false. An element with aria-hidden='false' is treated by the screen reader as if it didn’t have the aria-hidden attribute and is read or not read based on other factors, such as CSS.

CSS

CSS can be used to hide content and allow it to still be used with the screen reader. For an example of that, see this code here,

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Using this we can:

We can also use CSS to visually hide and Screen reader hide content.

{
  display: none;
}

This will hide completely and is the same as <div aria-hidden='true' hidden>content</div> Note that aria-hidden='true' should be used for additional compatibility.

display: none; and hidden can be used for:

Additional Resources

For more information on this topic, see these articles.