Image alt text
Images have text alternatives that describe the image or the function of the image
Why it matters
Text alternatives (“alt text”) is the text equivalent for an image. You don’t see the alt text on a web page, it is in the page markup within the alt attribute of the img element. Providing alt text allows the information to be rendered in a variety of ways by a variety of user agents. For example:
- A person who cannot see an image can have the text alternative read aloud by a screen reader.
- A person who cannot hear an audio file can have the text alternative displayed so that he or she can read it.
- Text alternatives are displayed in place of the image in browsers if the image file is not loaded or when users disable images.
- Text alternatives provide better image context/descriptions to search engine crawlers, helping them to index an image properly. For example, proper alt text helps Google display the correct images in the SERP based on a particular query.
Images that should include alt in the markup:
- Informative images. They convey information useful for understanding the page content. Some examples are an image within an article, the hero image on the Make Model Year (MMY) page.
- Functional images. They initiate actions and convey information useful for interacting with the page content. They are used in interactive elements like a “Save” icon/button, the Cars.com logo, an image in a carousel or an Ad image that links off to another page.
- Decorative images. They don’t convey any meaning or important information (and aren’t links or buttons). In this case, there is no need to write an alt text but they should have a null alt alt="". This is a standardised indication to screen reader software that the image is decorative and can be safely ignored.
See exceptions.
WCAG 2.0 reference: 1.1.1Non-text Content
Example 1
Informative image. The alt text for this image needs to describe the image as concisely as possible.
Red Tesla Model 3 driving along sunset
<img src="bird.png" alt="Red car"><img src="bird.png" alt="Red Tesla Model 3 driving along sunset">Example 2
Functional image Search button. The alt text for this image should convey the action that will be initiated rather than a description of the image.
Search
<img src="bird.png" alt="magnifying glass"><img src="bird.png" alt="Search">Example 3
Decorative images with a null alt text alt="". Make sure that there is no space character between the quotes and no line breaks.
Example of a decorative image
<img alt="">And in the case of a background image
<img src="/images/background.png" alt="" />How to check for this
- Check if alt is missing. Automated
- Check that decorative images have an
alt="". Manual - To check if alt text is appropriate: for each image, judge in context if the alt text adequately conveys the information in the image it is next to by referring to the guidelines provided. Manual
Collaborators
- Cars.com News section: Production team (Saoirse O’Malley)
- Cars.com Shopping/SRP/VDP: imagery is coming from Dealers and third party-sites. It is unknown who is responsible for adding alt text to these images.
- Content authors