Images

Accessibility Techniques for Images
Topic Technique WCAG AA Requirement
Informative Images and Active Images (e.g. links, buttons, or controls)
Alternative text: The image MUST have alternative text. Refer to the techniques for various image types:
Required
WCAG 1.1.1
Meaningful description: Alternative text MUST be meaningful (accurately conveying the purpose of the image, and the author's intent in a way that is useful to those who cannot see the image).
Note 1: Image links SHOULD describe the link destination.
Note 2: Button/control links SHOULD describe the purpose and/or resulting action of the button or control.
Required
WCAG 1.1.1
Concise: The length of the alternative text for informative images SHOULD be concise (no more than about 250 characters). best practice
Avoid restating that the element is an image: Alternative text SHOULD NOT include words that identify the element as a graphic or image (e.g. avoid phrases like "graphic of," or "image of," etc.), because screen readers already state the role (e.g. by saying "graphic" then reading the alternative text). best practice
Unessential images (Purely Decorative or Redundant, and not Active) Unessential Images: Images that do not convey content, are decorative, or are redundant to content that is already conveyed in text SHOULD be given null (empty) alternative text (alt=""), ARIA role="presentation", or implemented as CSS backgrounds. best practice
Complex Images Complex Images: Complex images MUST be briefly described using alt text AND MUST have a more complete extended description.
Note: It is not "wrong" to provide descriptive alternative text in these instances, but it is highly discouraged if the image is truly unessential.
Required
WCAG 1.1.1
Background images Informative background images: If a background image conveys information, alternative text MUST be provided (e.g. via regular visible text, by adding role="image" and aria-label, or by other means). Required
WCAG 1.1.1
Active background images: If a background image is the only "content" in an active element (e.g. a link, button, or control), the active element MUST have an accessible name (e.g. via aria-label or similar). Required
WCAG 1.1.1
Color contrast of small text: Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background. Required
WCAG 1.4.3
Color contrast of large text: Large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background. Required
WCAG 1.4.3
Unessential background images: Alternative text SHOULD NOT be provided for unessential background images. best practice
Images of Text No Images of Text: An image MUST NOT include informative text if an equivalent visual presentation of the text can be rendered using real text (unless the text is essential — such as a logo — or the font, size, color, and background are customizable.). Required
WCAG 1.4.5
Color contrast of small text: Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background. Required
WCAG 1.4.3
Color contrast of large text: Large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background. Required
WCAG 1.4.3
Animated Images See the requirements for Animation, Motion, and Timed Content Required
Multiple
Image CAPTCHA Alternative text: Image CAPTCHA elements MUST have alternative text describing the purpose of the image. Required
WCAG 1.1.1
Sensory alternatives: Image CAPTCHA elements MUST be supplemented with at least one auditory alternative method. Required
WCAG 1.1.1
Deafblind access: At least one text-based alternative SHOULD be provided that allows users who are both deaf and blind to pass the CAPTCHA.
Note: Deafblind users typically use screen readers to convert text to braille, using a refreshable braille device.
best practice