CSS

Basics

  1. CSS background images
  2. Accessible hide/show content with CSS.

CSS background images

CSS background images often are used to separate style (decorative images) from content (text or information). Although not recommended, it's occasionally necessary to use a CSS background technique to add meaningful images that convey information, such as logos, functional icons, or buttons with text. In these cases, use an accessible CSS replacement technique.

The method below was adapted from Bootstrap:

CSS:

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  text-decoration: none;
  background-image: url('/sites/default/files/logo.png');
  width: 110px;
  height: 100px;
  display: block; /* display:inline-block also works */
}

Example of replacing text with CSS background image:

<h1 class="text-hide">Our logo</a></h1>

Our logo

Example of replacing linked text with CSS background image:

<h1><a class="text-hide" href="index.html">Our logo</a></h1>

Our logo

Accessible hide/show content with CSS

It is sometimes helpful to add textual information or cues intended for assistive technology (AT) users. To hide this text from the visual display but make it available to AT, this is the recommended CSS method:

Hide content from visual display but not from AT:

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Hide content from AT but not from visual display:

Conversely, if you want to hide content from AT but not from visual display, use: aria-hidden="true"

Hide content from both AT and visual display:

Finally, only use display: none; when you want to hide content from both AT and visual display