Ensure we’re not confusing assistive technology users by providing spurious information.
Why it matters
Background images are in the background precisely because they are not adding valuable information to the page. They are adding decorative or redundant information to the page.
Sighted users can easily skim past redundant or decorative information. If we don’t ensure that redundant and decorative information is left unread, screen reader users are forced to listen to it, there’s no “scan to next relevant thing” button.
See Identifying Image Types for more information on determining if an image is decorative or redundant.
How to implement
This is one of those “don’t get overzealous” tests. Decorative and redundant CSS background images won’t be read to the screen reader unless you add code to do so. Don’t add that code.
How to test
- Right-click containers with background images and confirm that they don’t contain
aria-labeledbyattributes that describe the background image.
- Check other text sources (paragraphs, divs) that will likely be visible text to confirm they don’t describe the background image either.
Screen reader testing
Listen to the page on a screen reader and confirm that nothing is announced that describes the background images.