img element must specify an
alt attribute or equivalent markup that either defines a text alternative or identifies the image as being used for decoration, spacing or some other stylistic purpose.
- A text alternative for an image, usually specified with an
alt attribute, provides a summary of the purpose of the image for people with visual impairments, enabling them to understand the content or purpose of the image on the page.
- An image with a text alternative that is an empty string or that has
role="presentation" is ignored by assistive technologies. Such markup indicates that the image is being used for decoration, spacing or other stylistic purposes rather than meaningful content.
HTML4 Legacy Techniques
HTML5 and ARIA Techniques
|WCAG Success Criteria
1.1.1 Non-text Content (Level A, Primary Success Criterion)
img and [role="img"]
- A text alternative should summarize the purpose of an image as succinctly as possible (preferably with no more than 100 characters).
alt attribute is the preferred and most commonly used way to provide a text alternative for
aria-labelledby attribute can be used to provide a text alternative when an image can be described using text already associated with the image, or for elements with
aria-label attribute should only be used to provide a text alternative in the special case when an element has a
role="img" attribute. Use the
alt attribute for
title attribute will be used by assistive technologies to provide a text alternative if no other specification technique is found.
- Use the attributes
role="presentation" or include the image as a CSS
background-image to identify it as being used purely for stylistic or decorative purposes and one that should be ignored by people using assistive technologies.