Ensure the information a user needs to receive from an image is provided in text form.
Provide alternative text in the
altattribute if the image is not described in the surrounding text. [WCAG 1.1.1]
- Using alt attributes on img elements
- Using alt attributes on images used as submit buttons
- Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- Providing a short text alternative which is the accepted name or a descriptive name of the non-text content
Provide an extended description for complex images. [WCAG 1.1.1]
- Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
- Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
- Providing long description for non-text content that serves the same purpose and presents the same information
Ensure that decorative images have an empty alt attribute (
alt=""). [WCAG 1.1.1]
Frequently Asked Questions
- Should I put
It is best practice to use one of these roles if an image is purely decorative, but it is not required for conformance with WCAG.
noneis preferred over
presentationas of ARIA 1.1, it is also not well supported. The ARIA 1.1 specification recommends using either
presentationalone or as a fallback for
Do not use these roles in place of an empty
altattribute. Not only is this not technically conforming HTML (an
altattribute can only be omitted in very select cases), but it may not work with older assistive technologies.
Images that are central to the understanding of a publication must always include a text alternative in
alt attribute. In the case of complex images, a detailed description should also be
If the image is purely decorative, the
alt attribute should be left empty. For additional
insurance that decorative images will not be announced, the ARIA
role attribute with the
presentation can be attached.
If an image is important to the publication, but not required to be read at the point of insertion (i.e., it is not part of the logical reading order), use a figure tag to enclose it.