Goal
This test handles the exception case described in Identifying Image Types where meaningful icons are implemented in the background. Read that article for context to this test.
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
Provide an 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.
Be aware that hiding the alt text using the
visibility: hidden or display:none CSS rules will also hide it from screen readers and other assistive technology.How to test
Manual testing
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.