Images
Back to simple components
An image that provides meaning must have alternative text that describes the meaning of that image.
WHEN I am on page with an informative image
AND I have a screen reader on
THEN the meaning of the image is read aloud.
WHEN I am on a page with an informative image
AND the image source is a broken link
THEN the alternative text displays on the page in place of the image.
WHEN I am on a page with an informative complex image
AND I have a screen reader on
THEN the meaning of the image is read aloud
AND I am directed to a longer description or alternative data table.
WHEN I am on a page with a decorative image
AND I have a screen reader on
THEN the screen reader disregards the image.
AND I have a screen reader on
THEN the meaning of the image is read aloud.
WHEN I am on a page with an informative image
AND the image source is a broken link
THEN the alternative text displays on the page in place of the image.
WHEN I am on a page with an informative complex image
AND I have a screen reader on
THEN the meaning of the image is read aloud
AND I am directed to a longer description or alternative data table.
WHEN I am on a page with a decorative image
AND I have a screen reader on
THEN the screen reader disregards the image.
More Information
Images MUST meet the following:
- Have text alternative that serves the equivalent purpose (with the exception of controls, inputs, time-based media, test, sensory, CAPTCHA, decorative, formatting, invisible) [ WCAG 1.1.1 ].
- Images of text are to be avoided (with the exception of customizable, essential) [ WCAG 1.4.5 ].
- Complex images have two alternatives - Alt Text - A longer description of the image elsewhere or alternative data table