Hiding elements from all devices

To hide an element from all devices means just that: no single device will perceive it anymore (although the element still is present in the DOM). This can be achieved using either an HTML attribute or CSS attributes.

Elements can be hidden completely from all devices (including screen readers).

Using hidden attribute

In HTML 5, the hidden attribute was introduced. It can be set on an element directly and makes it completely invisible to any device.

Hiding elements from all devices using hidden attribute

Show HTML code

Show CSS code

+ ✔ (pass) , + ✔ (pass) , + ✔ (pass)

<p>
  This paragraph is visible. But is there something below?
</p>
<p hidden="">
  This text is perceivable by no device.
</p>

.display-none {
  display: none;
}

.visibility-hidden {
  visibility: hidden;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-3-26
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-3-27
JAWS 2018.3 + IE 11	✔ (pass) pass	-	2018-3-26
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-3-27

Using CSS properties

Setting display: none to an element has the same effect like the hidden attribute:

Hiding elements from all devices using display none

Show HTML code

Show CSS code

+ ✔ (pass) , + ✔ (pass) , + ✔ (pass)

<p>
  This paragraph is visible. But is there something below?
</p>
<p class="display-none">
  This text is perceivable by no device.
</p>

.display-none {
  display: none;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-3-26
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-3-27
JAWS 2018.3 + IE 11	✔ (pass) pass	-	2018-3-26
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-3-27

The same applies for visibility: hidden:

Hiding elements from all devices using visibility hidden

Show HTML code

Show CSS code

+ ✔ (pass) , + ✔ (pass) , + ✔ (pass)

<p>
  This paragraph is visible. But is there something below?
</p>
<p class="visibility-hidden">
  This text is perceivable by no device.
</p>

.visibility-hidden {
  visibility: hidden;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-3-26
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-3-27
JAWS 2018.3 + IE 11	✔ (pass) pass	-	2018-3-26
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-3-27

Which one to use?

We strongly suggest using the HTML attribute hidden, as it separates content clearly from presentation. Notice: hiding an element from all channels is a question of content, not of visual presentation.

In addition, it makes obvious in the DOM already what elements are hidden, so it leads to better readable and maintainable code.

Note about ARIA references

Elements hidden with the techniques shown on this page can still provide content when being referenced using aria-labelledby or aria-describedby. More information here: Labelling elements using aria-label and aria-labelledby.