♿ Showing/hiding content

Note date 29 Dec, 2020
Tags html css
👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page

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.

← Back home