♿ Showing/hiding content
On this page
Hide from all users Jump to heading
/* or */
or by using the
<div hidden />
Visually hidden Jump to heading
…but still accessible to assistive technologies.
:notportions of the selector are allowing a means for any focusable element to become visible when focused/active by a user. So elements that normally can’t receive focus, like paragraphs, will not become visible if a user navigates through content via screen reader controls or the Tab key, but natively focusable elements, or elements with a non-negative tabindex will have these elements appear in the DOM on focus.
/* ie9+ */
clip: rect(0 0 0 0);
If you need to visually hide everything, including focusable elements, remove
:not(:focus) from the selector.
Hide from assistive technology Jump to heading
aria-hidden="true" attribute produces the opposite effect of the
.visually-hidden class. It hides content from assistive technology, but not visually. This can be helpful in cases where there are visual cues that screen readers do not need to announce, such as decorative icons that accompany text labels.
Useful links: Jump to heading
← Back home