Menu
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?
553
Background images must. Background images that convey information or meaning must have an accessible alternative. Background images are not available to assistive technology such as screen readers and are not supported on devices with minimal support for CSS. Additionally, a background image may not load.
And since it will be background image, it cannot have an “ALT” text because a background image is a style property of an element and ALT tag is an attribute of an element.
CSS background images should not have alternative text if the image is truly a background image. Decorative (i.e removing it from the page causes no impact to the page's meaning or function) CSS background images do not need additional markup.
To set the background image of a webpage, use the CSS style. Under the CSS <style> tag, add the property background-image. The property sets a graphic such as jpg, png, svg, gif, etc. HTML5 do not support the <body> background attribute, so CSS is used to change set background image.
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.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
