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 as alt.
  • 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’s alt 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’s alt attribute.
  • Describe each clickable region in the <area> element’s alt 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 the src 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> and src 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 or aria-labelledby to provide alt text
  • 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
  • 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
    • Put text outside the SVG instead of inside (preferred)
  • 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
  • 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

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:
    1. Provide more than two modalities of CAPTCHAs.
    2. Provide access to a human customer service representative who can bypass CAPTCHA.
    3. 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="").
Back to top