Showing/hiding content

On this page
  • Hide from all users
  • Visually hidden
  • Hide from assistive technology
  • Useful links:

Hide from all users

a {
display: none;
/* or */
visibility: hidden;

or by using the hidden attribute

<div hidden />

Visually hidden

..but still accessible to assistive technologies.

The :not portions 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+ */
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;

If you need to visually hide everything, including focusable elements, remove :not(:focus) from the selector.

Hide from assistive technology

The 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.

  • scottohara.me/blog/2...en.html
  • a11yproject.com/posts...ontent
  • webaim.org/techniqu...econtent
Edit this page
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.