21

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?

Jake Wilson
  • 88,616
  • 93
  • 252
  • 370
  • 1
    What is the image? In general you should avoid putting content in background images. – Jordan Running Jan 30 '17 at 18:36
  • 3
    Semantically speaking, if the background image is meant to convey information to the page, you shouldn't use a background image. A background image (CSS) should be for display only. If the screen needs to read it, use an image or have the content it's meant to display in the element. – Michael Coker Jan 30 '17 at 18:38
  • Why? For example, if you have a banner at the top of a page that has a background image of a guy hiking in the mountains as well as some copy that overlays the banner, what does it matter? How do you define if an image is "content" vs "background" ? – Jake Wilson Jan 30 '17 at 18:39
  • 2
    If you remove the image, and if that part where it was is missing some meaning, then it should be in HTML if the alt="" attribute was filled with it's meaning else an image with no alt attribute is meaningless. -_-. If you can remove the imagewithout lose of information , then it is design purpose and do not need to be accessible. – G-Cyrillus Jan 30 '17 at 19:47
  • Thanks for the feedback. So if I have a basic hero on a page that says "Introducing the new Ford F150 Truck" on top of an image of the new Ford truck, is the picture of the truck content or not? – Jake Wilson Jan 30 '17 at 20:24
  • @JakeWilson the simple separation is HTML & CSS - document markup/content and design. In your F150 example, the picture would be part of the content at that point, implying the image is meaningful and needs to be conveyed in the document, and the meaning that will be conveyed is what you put in the `alt` attribute. The background image is just a nice-to-have, but isn't necessary in conveying meaning about the page. – Michael Coker Jan 30 '17 at 20:47

4 Answers4

19

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.

Null
  • 975
  • 13
  • 13
6

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.

Adam
  • 17,838
  • 32
  • 54
4

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.

Sean
  • 6,873
  • 4
  • 21
  • 46
  • As pointed out on a comment on your other post *"Background images are inaccessible by design"*. A trick using "sr-only" won't fit the need of 99% of people not using a screenreader who need that alternative text. – Adam Feb 22 '18 at 06:31
  • @Adam can you describe "the need of 99% of people not using a screenreader who need that alternative text"? – Sean Jan 12 '23 at 13:02
  • The alternative text can be useful for a lot of people. For instance people, with a screen magnifier who can't see the whole image at once or people with color blindness problem, or low eyesight. As we know the "SR-only" stands for "Screen Reader only", and that solution is not adapted for people who don't use a screen reader, but have any other trouble. Eg. if you can adapt the contrast of your text, this is more difficult for an image. – Adam Jan 13 '23 at 17:47
  • @Adam I'm still not following. With this solution the alt text is available to everyone, regardless of what technology they're using. – Sean Jan 13 '23 at 19:34
  • If you go to the post you referenced https://stackoverflow.com/a/48913760/4540141, you see that without the image showing, no alternative is shown. And even with an image showing, the alternative would not be available without a screenreader. – Adam Jan 14 '23 at 16:02
  • @Adam how do users see image alts when images are showing? – Sean Jan 14 '23 at 22:04
  • Default way is the tooltip above image. Most decent ways are custom assistive technologies (browsers plugins or custom css) designed for low vision users. – Adam Jan 15 '23 at 09:57
  • 1
    @Adam the tooltip above the image isn't the `alt` attribute, it's the `title` attribute which shouldn't be used for providing text alternative. Thanks for letting me know about the other use-cases. – Sean Jan 16 '23 at 14:56
  • Remember that the comment section is not intended to start new discussions. The default browser tooltip (tiltle) is not available for touchscreen users. Some assistive technologies can display a tooltip (= contextual overlay) in the appropriate way per request of the user. – Adam Jan 16 '23 at 20:14
0

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).

aardrian
  • 8,581
  • 30
  • 40