Best practice
Informative images
- Use the
alt
attribute on the<img>
element - Provide meaningful text alternatives that serve the equivalent purpose to convey the intent, purpose and meaning of the image.
- Do not include words like “image of” or “graphic of” in the alt text.
- Keep alternative text concise and less than 150 characters.
Decorative and redundant images
- Use "null" alt attributes (
alt=""
) to hide decorative or redundant images from assistive technology. - The
role=presentation
attribute also hide the image role, though it’s not as widely supported asalt
. - Implement decorative images as CSS backgrounds if possible.
- Do not leave out the
alt
attribute of<img>
elements.
Functional images
- When linking an image and accompanying text, use a null (empty)
alt
attribute (alt=""
) on the image if it adds no information to the link text. - If using an icon to indicate that links open in a new window, provide the text alternative "new window".
- Provide alternative text for stand-alone icon images that have a function.
- Use text alternative for images that are used in a button
Images of text
- Avoid using images of text unless it is essential or customizable.
- Text that is part of a logo or brand name is considered essential.
- Use actual text styled with CSS to avoid distortion and pixelation when resized.
- Images of text used as logos are exempt from accessibility requirements like minimum colour contrast and no images of text .
- Use images of math expressions only when math is the exception to the website content. Provide a text alternative in the
alt
attribute or in a long description. - Use MathML with MathJax to render math expressions semantically.
Linked images
- Always provide alt text for any image serving as a link. Even if the image is considered decorative, write the alt text if the image is a link.
Animated images
- Ensure the animation stops after five seconds or provide users with a pause button.
- Ensure the animation doesn’t flash more than three times per second.
Complex images
A complex image requires both a short and a long description:
- A short description or title identifies the image and indicates the location of the long description. This is stored in the
<img>
element’salt
attribute and shouldn’t exceed 150 characters. - A long description of the image contains the essential information conveyed by the image. It can consist of nothing but text or it can require structural markup – headings, paragraphs, lists, and/or tables.
Groups of images
- When a group of images represent a single piece of information: one image holds the message in its alt attribute, the other images use a null
alt
attributes (alt=""), ensuring they’re ignored by assistive technology . - When a group of images represent a collection: nest each image in a
<figure>
element with a<figcaption>
child element, and nest all the figures in a single parent<figure>
element. Use its<figcaption>
to describe the context.
Image maps
- Describe the context in the source
<img>
element’salt
attribute. - Describe each clickable region in the
<area>
element’salt
attribute.
Figure and figcaption
- Use
<figcaption>
element to describe contextual information that isn’t apparent from looking at the image. This includes the who, what, when, where, and/or why of an image. - Do not use the exact same words for both alt text and
<figcaption>
. Screen readers will read the information twice. - Always provide an alt text for images even if they have a
<figcaption>
. Providing an empty or null alt attribute will prevent a screen reader from announcing that an image is present.
SVG
- Use the
<img>
element and reference the SVG via thesrc
attribute. - Use the
<svg>
element to embed the SVG directly into the HTML code. - Do not embed SVG using
<object>
or<iframe>
- For simple, uncomplicated images with basic alt text description
- Use
<img>
andsrc
attribute - Add
role="img"
to improve accessibility support - Provide text alternative that conveys the same intent and meaning as the image.
- Use the
alt
attribute to provide alt text (preferred) - Can also use
aria-label
oraria-labelledby
to provide alt text
- Use
- For complex images with extended alt text description
- Use
<svg>
element - Add role=image" to improve accessibility support
- Provide text alternative that conveys the same intent and meaning as the image.
- Use
<title>
element to provide short alt text<title>
must be the first child of its parent element<title>
text will appear as tooltip when user moves mouse pointer over it
- Use
<desc>
element to provide longer text description if needed, for complex images. - Text in a
<desc>
element is not visible. - To improve accessibility support:
- Add appropriate, unique ID values to the
<title>
and<desc>
- Use
aria-labelledby
to reference the ID values
- Add appropriate, unique ID values to the
- Use
- Hide decorative SVG images by using
aria-hidden="true"
- For text in SVG:
- Avoid text within
<svg>
elements or keep text to a minimum - Add
role="img"
to improve accessibility support - Provide text alternative that conveys the same intent and meaning as the image.
- Use
<title>
element to provide short alt text<title>
must be the first child of its parent element<title>
text will appear as tooltip when user moves mouse pointer over it
- Use
<text>
element to provide text in SVG - To ensure accessjibility support:
- Add appropriate, unique ID values to the
<title>
and<text>
- Use
aria-labelledby
to reference the ID values
- Add appropriate, unique ID values to the
- Put text outside the SVG instead of inside (preferred)
- Avoid text within
- Include a background colour behind text and other important parts of the image
- For SVG animation:
- Use JavaScript or CSS, not
<animate>
- Avoid SVG that flash or blink more than 3 times per second
- Avoid SVG that auto-play to avoid distracting users
- Allow users to play and pause SVG animations
- Use animated SVG to serve a specific purpose, not distract
- Use JavaScript or CSS, not
- For interactive SVG:
- Ensure interactive
<svg>
objects are keyboard accessible - Ensure interactive
<svg>
objects are touchscreen accessible - Ensure interactive
<svg>
objects convey applicable name, role and value - Ensure interactive
<svg>
objects meet all applicable WCAG 2.1 guidelines
- Ensure interactive
CAPTCHA
- Provide two different modalities of CAPTCHA (e.g., a visual task and an audio task).
- Provide alt text saying the CAPTCHA requires completing a task and what type of task it is. When an alternate version of a CAPTCHA is available, include instructions in the alt text on how to find it.
- Optional steps to reach edge cases:
- Provide more than two modalities of CAPTCHAs.
- Provide access to a human customer service representative who can bypass CAPTCHA.
- Don't require CAPTCHAs for authorized users.
- Use Google's reCAPTCHA v3, if possible.
Additional tips and tricks for images
- Prioritize information in text alternative. Put the most important information at the beginning.
- Use punctuation in the text alternative to make information easier to understand.
- Ensure there is no space character in between the quotes of null (empty) text alternative (
alt=""
).