Accessible CSS

Basics

Accessibly hide/show content with CSS

Hiding content is very useful for accessibility. We can hide things visually from the browser display and only reveal it to assistive technology (AT) like screen readers. We can hide content from AT users and only show it visually in the browser. And we can hide content from both.

Hide content from visual display but not from AT

It is sometimes helpful to add textual information or cues intended only 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:

.visually-hidden: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;
}

"Skip to main content" link

At ASU, we use this method to hide the "Skip to main content" link at the top of all ASU web pages.

<a href="#skip-to-content" class="sr-only sr-only-focusable">
  Skip to main content
</a>

Provide a destination on non-unique links

When design mockups require you to use repetitive links such as "Read more," you can still make them accessible by providing important destination information for AT users:

<a href="#trees">
  Read more
  <span class="visually-hidden">
    about maple trees
  </span>
</a>

Supply labels for field inputs

You can also use this method to supply labels for field inputs where the design does not provide for visual labels. This example from Scott O'Hara's Inclusively Hidden is an excellent illustration:

<fieldset class="date-range-component">
  <legend>
    Select Start and End Dates
  </legend>

  <label for="start_date" class="visually-hidden">
    Start Date:
  </label>
  <input type="date" id="start_date" name="start_date">

  <span> to </span>

  <label for="end_date" class="visually-hidden">
    End Date:
  </label>
  <input type="date" id="end_date" name="end_date">
</fieldset>

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" For example, we often hide decorative Font Awesome icons this way:

A decorative font awesome icon displayed before a heading taht reads Start for free

<h2>
<span class="fa fa-caret-right" aria-hidden="true"></span>
Start for Free
</h2>

However, be very careful about hiding visible content from AT users. Only hide elements if it improves the experience for AT users by removing purely decorative, redundant or duplicated content. 

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.There are subtle differences to each of these--see Scott O'Hara's excellent Inclusively Hidden for an in-depth discussion.

The most common use for these properties is for toggling a hidden/shown state with Javascript on accordions, sliders, carousels, and other complex widgets.

Provide alt text for meaningful 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</h1>

Our logo

Example of a meaningful CSS background image as a link:

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

Our logo

 

 

Was this helpful?

 
 

Slack

Accessibility Connections