Skip to main content

Accessible CSS

Basics

  1. CSS hide/show content for assistive technologies, browser display, or both.
  2. Provide a text alternative for meaningful CSS background images.

In-depth

Hiding content is very useful for accessibility. We can hide things visually and only display it to screen reader users, we can hide content from screen reader users and only show it visually, or we can hide content from both.

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;
}

If it's an interactive element:

opacity: 0;

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:

The CSS properties display: none; or visibility: hidden will hide an element from both AT and visual display. The HTML hidden property does the same.

CSS background images

CSS background images often are used to separate style (decorative images) from content (text or information). Sometimes it's necessary to use a CSS background technique to add meaningful images that convey information, such as logos, functional icons, or buttons.

Please note: If the image is decorative (that is, doesn't convey any meaningful information), you should not supply a text alternative for the image.

When an image conveys meaning, you must supply alternative text describing the function of the image for screen reader users, while hiding it visually.

To accomplish this, use an accessible CSS replacement technique. The method below was adapted from Bootstrap:

CSS:

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

Example of a meaningful CSS background image:

<h1 class="meaningful-bg-img">XYZ Yacht Company</a></h1>

Our logo

Example of replacing linked text with CSS background image:

<h1><a class="meaningful-bg-img" href="index.html">XYZ Yacht Company</a></h1>

Our logo