Images
Last updated
Was this helpful?
Last updated
Was this helpful?
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:
images using <img>
active images
form input images
SVG using <img>
SVG using <svg>
HTML5 canvas
icon fonts
Required
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
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
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
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
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
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
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
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
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
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
Sensory alternatives: Image CAPTCHA elements MUST be supplemented with at least one auditory alternative method.
Required
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