gotchajavascriptMajor
aria-hidden vs display:none — controlling visibility for AT vs visual users
Viewed 0 times
ARIA 1.1+
aria-hiddendisplay nonesr-onlyvisually hiddenaccessibility treedecorative content
Problem
Developers confuse aria-hidden='true' with CSS display:none, or misuse aria-hidden on content that should be accessible. aria-hidden hides from the accessibility tree but keeps the element visible on screen.
Solution
Choose the right hiding method based on intent:
// VISUAL + AT hidden (the nuclear option)
display: none; // removed from layout AND accessibility tree
visibility: hidden; // invisible but takes space; hidden from AT
// Visually hidden, AT visible (for screen-reader-only text)
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
// Visually visible, AT hidden (decorative content)
<svg aria-hidden="true" focusable="false">...</svg>
<span aria-hidden="true">★★★★☆</span> // decorative stars
<span class="sr-only">4 out of 5 stars</span> // textual equivalent
// NEVER: aria-hidden on a focused element
<button aria-hidden="true">Submit</button> // creates ghost tab stop
// VISUAL + AT hidden (the nuclear option)
display: none; // removed from layout AND accessibility tree
visibility: hidden; // invisible but takes space; hidden from AT
// Visually hidden, AT visible (for screen-reader-only text)
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
// Visually visible, AT hidden (decorative content)
<svg aria-hidden="true" focusable="false">...</svg>
<span aria-hidden="true">★★★★☆</span> // decorative stars
<span class="sr-only">4 out of 5 stars</span> // textual equivalent
// NEVER: aria-hidden on a focused element
<button aria-hidden="true">Submit</button> // creates ghost tab stop
Why
aria-hidden='true' removes an element from the accessibility tree while keeping it in the DOM. If a focused element has aria-hidden, keyboard users can reach something screen reader users cannot perceive — a critical disconnect.
Gotchas
- aria-hidden on a parent hides all descendants from AT regardless of their individual aria attributes
- Never set aria-hidden='true' on an element that is or contains the currently focused element
- focusable='false' on SVGs is needed for IE11 — modern browsers treat SVGs as non-focusable by default
- CSS display:none removes the element from the accessibility tree — aria-hidden is redundant on hidden elements
Context
Controlling what screen readers announce versus what is displayed visually
Revisions (0)
No revisions yet.