CODEWITHSUNDEEP
csshtmlbackground-imageaccessibility
Jake Wilson
Jake Wilson

Reputation: 91193

How to make background-image accessible?

If you are using an inline <img> tag there is the alt= attribute and other aria-* attributes you can use to make the image accessible.

But if you are using a background-image: url(...), is there any sort of guidelines on how you can make this container accessible and friendly for screen readers? Are there particular attributes you would add to the container?

Upvotes: 23

Views: 23014

Answers (4)

Null
Null

Reputation: 1086

While background-images most of the time are purely decorative (and as such there's no need to expose the image to screen readers) there may be cases where the developer want to use background-image as opposed to <img> for some reason and preserve the semantics of a regular image, and expose it to screen readers (because the image is important in the context).

In that case, you can expose the container of the background-image using ARIA role="img" with a descriptive aria-label (alternatively, using the title attribute):

.important-image {
  background-image: url(...);
  ...
}

<div class="important-image" role="img" aria-label="{image description}"></div>

In the future, CSS will hopefully be capable of providing alternative text, see: https://www.w3.org/TR/css-content-3/#alt.

Upvotes: 23

Sean
Sean

Reputation: 8036

If you're making the image a background in order to leverage background-size to proportionally scale the image to fit or fill it's container, you can use both an img and background-image as I've described here: How to add alt text to background images? Making background images accessible.

As others have pointed out, if the content of the image is important to the document, you should definitely use an img tag with an alt description. But there's no reason you can't also use background-image decoratively at the same time.

Upvotes: 5

Adam
Adam

Reputation: 18807

Background images are intended to be used for decorative purpose, they do not need text alternative

From WCAG2.0

When an image is used for decoration, spacing or other purpose that is not part of the meaningful content in the page then the image has no meaning and should be ignored by assistive technologies.

Upvotes: 6

aardrian
aardrian

Reputation: 9009

Avoid using background images that are anything but decoration. So avoid text in background images or other meaning in the images.

Image Sprites

Notes on accessible CSS image sprites:

  • Include alternative text inside the element that the CSS background image is attached to.
  • If images are enabled and Windows high contrast mode is not enabled use Javascript to add a style sheet that visually hides the text alternative, but is still available to assistive technology.
  • Use JavaScript to detect when images are disabled and remove the CSS visually hidden display state of the text alternative.
  • Use JavaScript to detect when Windows high contrast mode is enabled and remove the CSS visually hidden display state of the text alternative.

Windows High Contrast Mode

Fun fact, there is a Windows High Contrast Mode media query

@media screen and (-ms-high-contrast: active) {/* All high contrast styling rules */}
@media screen and (-ms-high-contrast: black-on-white) {
    div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
    div { background-image: url('image-wb.png'); }
}

Off-Screen Technique

Use this when you need to include information that you want to be announced to screen reader users. Put the content you want into the container with the background image and then apply this class:

.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}

This does not help users on IE (or older versions of Edge) who are using Windows High Contrast Mode and no screen reader, so I refer you back to the previous section.

Emoji

Yep. Emoji. Consider this technique for non-text content that is inline with text content (like emoji or icon fonts).

Upvotes: 0

Related Questions