OpenA11y Evaluation Library

Images must have alt text

Rule ID Image 1
Conformance Required
Definition Each 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.
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="none" 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.
Conformance Required
WCAG Success Criteria

Success Criterion 1.1.1 Non-text Content

Other Related Success Criterion:

Rule Category Images
Rule Scope Element
First Step Yes
Techniques
  • A text alternative should summarize the purpose of an image as succinctly as possible (preferably with no more than 100 characters).
  • The alt attribute is the preferred and most commonly used way to provide a text alternative for img and area elements.
  • The 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 role="img".
  • The 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 img and area elements.
  • The title attribute will be used by assistive technologies to provide a text alternative if no other specification technique is found.
  • Use the attributes alt="", role="none" 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.
Information Links