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.
<p>
This paragraph is visible. But is there something below?
</p><pclass="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 2023.1 + FF 115
✔ (pass) pass
-
2023-10-3
NVDA 2021.2 + Chrome
✔ (pass) pass
-
2021-2-10
NVDA 2023.1 + Edge
✔ (pass) pass
-
2023-10-3
JAWS 2018.3 + FF ESR 52.7.3
✔ (pass) pass
-
2018-3-27
JAWS 2021.23 + Chrome
✔ (pass) pass
-
2021-2-10
JAWS 2023.1 + Edge
✔ (pass) pass
-
2023-10-3
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.
