Did I ensure that decorative or redundant images have no text alternative?

Goal

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

Manual testing

1. Right-click containers with background images and confirm that they don’t contain aria-label or aria-labeledby attributes that describe the background image.
2. 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.