CSS background images

CSS background images are a technique to separate style (decorative images) from meaningful content on a page. Although not recommended, it's occasionally necessary to use the CSS background technique to add meaningful images that convey information, such as a logo or button with text. In these cases use a CSS replacement technique to ensure the information conveyed by the image is accessible within the content.

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;


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

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