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

 

Technique Visually hidden Screen reader hidden More 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