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.