WAVE extension, screen reader, or browser inspector
Note
This guideline is targeted at "informative images and grouped images." Please refer to the image categorization guidance in the Definitions section if you are unsure which category the image you are assessing belongs to.
Test Procedure
Determine basic alternative text support.
Inspect any images, and make sure that there is basic alternative text support.
If the <img> tag or role="img" is used
There must be an alt attribute on the image. (Siteimprove and WAVE detect this.)
Every <img> tag in a group of images must have the alt attribute.
If the <svg> tag is used
The attribute and value role="img" must be applied.
If the <figure> tag is used
The image(s) contained within use the conventions of the aforementioned <img> and <svg> tags.
If there is a title attribute present on an image, that does not factor into alternative text. This attribute only provides hover-over text and is not available to assistive technology.
CSS background images must not be used to present informative or grouped images.
Determine if the alternative text value is appropriate.
Use WAVE, a Screen Reader, or the browser's inspector tools (F12) to view the alternative text for each image.
**Note ** If the "informative image" is described adequately by plain text information directly adjacent to the image, it should follow Guideline 2 instead as it should be considered a decorative image.
Alternative text must adequately describe the visual contents of the image.
Alternative text may NOT be a filename, or placeholder text like "picture-1."
**Best Practice ** Alternative text for images should not include text like "image of." Assistive technology users will already know this. It is okay to state that an image is perhaps a screenshot, a photograph, or a painting, etc., if it is necessary to know this.
**Best Practice ** Alternative text should not be text that would be considered the title, caption, or legend of the image. We are only concerned with the literal visual appearance.
Examples of alternative text for an informative image
Consider an image of Vincent Van Gogh's The Starry Night
![Oil painting with thick individual brush strokes of a dark blue sky with yellow stars, white swirling clouds, and a yellow crescent moon above a town. A large black wavy cyprus tree stands in front of the left third of the painting.] Good:An oil painting with thick individual brush strokes of a dark blue sky with yellow stars, white swirling clouds, and a yellow crescent moon above a town. A large black wavy cyprus tree stands in front of the left third of the painting.
(You would then have the title and author as a caption)
