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. Below are some examples of best practice

 

TechniqueVisually hiddenScreen reader hiddenMore info

CSS:

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

YesNoThere are multiple ways to accomplish this with CSS. This is the current way we are recommending it.

CSS:

{
display:none;
}

YesYes

HTML5 attribute:

hidden

YesYes

In supported browsers, this is the same as

{
display:none;
}

aria attribute:

aria-hidden=’false’

NoNo

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’

NoYes