Content hiding techniques and their accessibility implications
| Hiding technique | exposed to a11y APIs | keyboard accessible | visually accessible (rendered) | children exposed to a11y APIs |
|---|---|---|---|---|
display: none;
|
No | No | No | No |
visibility: hidden;
|
No | No | No | No |
opacity: 0;
and filter: opacity(0); |
Yes | Yes | No | Yes |
clip-path: inset(100%);
|
Yes | Yes | No | Yes |
position
(off-canvas) |
Yes | Yes | No | Yes |
.visually-hidden
class |
Yes | Yes | No | Yes |
display: contents;
|
Yes | No | No | Yes |
hidden attribute |
No | No | No | No |
inert attribute |
No | No | Yes | No |
tabindex="-1" |
Yes | Not reachable via tab key | Yes | Yes |
disabled attribute |
Yes | Not reachable via tab key | Yes | Yes |
aria-hidden attribute |
No | Yes | Yes | No |
role="none" (or role="presentation") attribute |
No | Yes | Yes | Yes, unless they are semantically tied to the element |
This table is provided as a resource for the “Hiding content using HTML, CSS, and ARIA — which one should you use when?” chapter of the Practical Accessibility course, which explains the different ways for hiding content in HTML, CSS and ARIA and how each of them affects the accessibility of content.