img-alt

Images must have alternate text

Who might be affected
SR

Description

Screen readers and other assistive technologies can only parse textual data, so non-textual content, such as images, requires an alternative text that describes it for screen readers to read it to the user. If the image is purely decorative and has no importance for understanding the content correctly, it can be hidden from assistive technologies.

Quick Fixes

Provide <img> elements with accessible names.
1 <!-- Use the "alt" attribute -->
2 <img
3 src="./path/to/image.png"
4 alt="A short description of the image content" />
5
6 <!-- Use the "aria-label" attribute -->
7 <img
8 src="./path/to/image.png"
9 aria-label="A short description of the image content" />
10
11 <!-- Use the "aria-labelledby" attribute -->
12 <h4 id="img-label">A short description of the image content</h4>
13 <img
14 src="./path/to/image.png"
15 aria-labelledby="img-label" />
16
17 <!-- Use the "title" attribute -->
18 <img
19 src="./path/to/image.png"
20 title="A short description of the image content" />
When image's purpose is purely presentational t is the author’s responsibility to add the `aria-hidden=”true”` or an empty `alt` attribute (e.g. `alt=""`) that will make screen readers ignore the image.
1<!-- Use the "aria-hidden" attribute -->
2<img
3 src="./path/to/image.png"
4 aria-hidden="true" />
5
6<!-- Use the [role="presentation"] attribute -->
7<img
8 src="./path/to/image.png"
9 role="presentation" />
10
11<!-- Use the [role="none"] attribute -->
12<img
13 src="./path/to/image.png"
14 role="none" />

How Users Are Affected

Users that are dependent on screen readers, or other assistive technology that uses text parsing to convey the content to the user, will not be able to perceive the image's content and purpose.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.1.1 Non-text Content (A)

Recommended Reading