image-alt

Images must have alternate text

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

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" />

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

• Accessible Nmes - Evinced KB
• Using aria-labelledby to provide a text alternative for non-text content
• Understanding Non-text Content