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).
|
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
|
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.
|
Best Practice |