DEV Community

Dawid Ryczko
Dawid Ryczko

Posted on

WCAG - image and alternative text

#learningnotes #wcag #a11y #learning

Definitions

  • Decorative Image: doesn't add information to the content of a page (visual separators, background images)
  • Informative Image: conveys a simple concept or information
  • Functional Image: conveys a function or action (buttons, links, icons)
  • Complex Image: conveys complex information (charts, infographics, maps, illustrations)

Rules

Decorative Images

Should have informative alternative text and give the context about the image (product photo, informative banners,
screenshots)

  • should have alt attribute (preferred) 
<img src="image.jpg" alt="" />
Enter fullscreen mode Exit fullscreen mode
  • disable by aria-hidden="true" 
<img src="image.jpg" aria-hidden="true" />
Enter fullscreen mode Exit fullscreen mode
  • disable by role="presentation" 
<img src="image.jpg" role="presentation" />
Enter fullscreen mode Exit fullscreen mode
  • disable by role="none" 
<img src="image.jpg" role="none" />
Enter fullscreen mode Exit fullscreen mode

Informative Images:

Should have informative alternative text and give the context abut the image (product photo, informative banners,
screenshots)

  • should have alt attribute 
<img src="graph-q1-results.png" alt="Bar chart showing Q1 sales increased by 20%" />
<img src="banner-promo-text.png" alt="Winter Sale: 50% off all jackets" />
<img src="menu-hamburger.png" alt="Open menu" />
Enter fullscreen mode Exit fullscreen mode

SVG Images

  • loaded via an <img>, it behaves like a standard image. You need to add alt attribute (empty or with text) 
<img src="settings.svg" alt="Open settings" /> 
<img src="icon.svg" alt="" />
Enter fullscreen mode Exit fullscreen mode
  • for inline accessible SVG you need to add role="img" and aria-label 

<svg role="img" aria-label="Menu" viewBox="...">
  <path d="..." />
</svg>
Enter fullscreen mode Exit fullscreen mode
  • another solution for accessible SVG is to use <title> 

<svg aria-labelledby="menu1" viewBox="...">
  <title id="menu1">Menu</title>
  <path d="..." />
</svg>
Enter fullscreen mode Exit fullscreen mode
  • you can hide decorative SVG: 

<svg aria-hidden="true" focusable="false">
  <path d="..." />
</svg>
Enter fullscreen mode Exit fullscreen mode

Functional Images

Like informative images, should have informative alternative text. The text should describe the action of the image.

  • search button (icon only) 

<button type="button">
  <!-- The alt text tells the user what clicking will DO -->
  <img src="icons/search.svg" alt="Search website" />
</button>
Enter fullscreen mode Exit fullscreen mode
  • file download 
<a href="/files/report-2025.pdf">
  <!-- The user knows exactly what happens when they click -->
  <img src="icons/pdf-icon.svg" alt="Download Annual Report (PDF)" />
</a>
Enter fullscreen mode Exit fullscreen mode
  • social media link 
<a href="https://instagram.com/yourprofile">
  <img src="icons/ig.svg" alt="Follow us on Instagram" />
</a>
Enter fullscreen mode Exit fullscreen mode

Complex Images

Complex Images require more explanation and context. There are some techniques we can use to make them accessible.

  • provide a link to a page with more information or description 
<img src="infographic.png" alt="Infographic about Design Thinking" />
<br />
<a href="design-thinking.html">Text description about the infographic.</a>
Enter fullscreen mode Exit fullscreen mode
  • add aria-describedby attribute to the image with the id of the description (the description can be hidden if needed) 
<img src="infographic.png" alt="Infographic about Design Thinking" aria-describedby="infographic-description" />
<p id="infographic-description">The infographic shows.....</p>
Enter fullscreen mode Exit fullscreen mode
  • add <figure> element with <figcaption> to describe the image 

<figure>
  <img src="infographic.png" alt="Infographic about Design Thinking" />
  <figcaption>The infographic shows.....</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

Good practices

  • The Phone Test: Describe the image as if you are explaining the page to a friend over the phone.
  • Be Concise: Keep text short. Put the most important information first.
  • Decorative Images: If an image has no meaning (like a background pattern), use alt="". Do not put a space inside the quotes.
  • No Redundancy: Never start with words like "Image of," "Picture of," or "Icon." The screen reader already says this.
  • Punctuation Matters: End your text with a period so the screen reader pauses correctly.

References

Decorative Images

Informative Images

Functional Images

Complex Images

Alt text, tips and tricks

Top comments (0)