Ensure the meaningful image in the background has alt text available for users of assistive technology.
Why this matters
- Sometimes the most responsible solution for serving up images requires using CSS background images instead of foreground images.
- Assuming we provide labels for the containers, assistive technology provides the alternative text for meaningful images to people using screen readers or Braille displays. If you don’t provide alternative text on a CSS background image, nothing is read to the user at all and the user doesn’t know that they are missing information.
How to implement
aria-label attribute on whatever container element holds the background image. For example, the HTML may be:
<a href="https://twitter.com/perpendicularme"> <div class="TwitterBackgroundImage" aria-label="Perpendicular Angel Design Twitter"></div> </a>
Other alternatives for placing the text on the page but hiding it from sighted users are available. See Inclusively Hidden by Scott O’Hara for other options.
visibility: hidden or
display:none CSS rules will also hide it from screen readers and other assistive technology.
How to test
Right-click and inspect the element containing the background image and confirm that it has an
aria-label attribute or other CSS that provides an invisible label for the background image.
Screen reader testing
Listen to the page on a screen reader and confirm that the meaningful background images are represented with audible labels when viewing the page.