Accessible Images & Icons — Text Alternatives, Roles & Context Clarity

Introduction

Images and icons communicate powerful messages — emotions, data, and visual cues — but without accessible alternatives, they can become invisible barriers to people using assistive technologies. Accessibility ensures all users can understand and interpret visuals, whether decorative, informative, or functional. WCAG 2.2 Success Criterion 1.1.1 (Non‑Text Content) requires that all meaningful images include text alternatives describing their purpose.

Why Image Accessibility Matters

Visual information must be shared equitably across all users and devices. Screen readers, voice assistants, and Braille displays rely on textual equivalents to interpret image-based content.

• Ensures that essential content is available for users who cannot see images.
• Supports SEO and structured data parsing.
• Improves cross‑device performance and content discoverability.
• 
  

Types of Images and How to Handle Them

1. Informative Images

Communicate information that users need to understand. Provide descriptive alternative text that conveys meaning, not just appearance.

<img src="sales-growth.png" alt="Bar chart showing sales increased by 45% between 2020 and 2024">

2. Decorative Images

Purely visual elements that don’t add information should be ignored by assistive technologies:

<img src="background-pattern.png" alt="" role="presentation">

3. Functional Images

Used as links or buttons — describe their action rather than appearance:

<a href="/cart">
  <img src="cart-icon.svg" alt="View shopping cart">
</a>

4. Complex Images (Charts, Maps, Infographics)

Provide both concise alt text and long-form descriptions using adjacent text, aria-describedby, or linked descriptions.

<img src="climate-map.png" alt="World map showing temperature increases by region" aria-describedby="mapDetails">
<div id="mapDetails">
  Data source: NASA 2024 Climate Study. Northern regions warmed faster than equatorial zones.
</div>

Accessible Icons

Icons often represent actions, states, or categories. Without accessible naming, their purpose is lost to non-visual users. The best approach depends on the icon’s intent.

• 
  
• Decorative icons: Hide from screen readers using aria-hidden="true".
• Functional icons: Label using aria-label or visible text.

<button aria-label="Search">
  <svg aria-hidden="true">...</svg>
</button>

Never rely on icon font characters (e.g., “”) without proper fallback markup and labeling, as these can produce unpredictable results in screen readers.

Providing Meaningful Alternative Text

When writing alt text:

• 
  
• Describe purpose and context — not technical details like “image of.”
• Keep it concise (roughly under 125 characters).
• Do not duplicate adjacent text already explaining the same content.
• Avoid repeating captions or contextual headings in alt text.

Bad: “Photo of a meeting room.”
Good: “Three designers collaborating during a project meeting.”

Text Alternatives for SVGs and Inline Graphics

SVGs must include appropriate roles and textual context:

<svg role="img" aria-labelledby="chartTitle chartDesc">
  <title id="chartTitle">Traffic performance chart</title>
  <desc id="chartDesc">Line graph showing 30% monthly traffic growth from January to June</desc>
</svg>

Decorative SVGs can be hidden using aria-hidden="true" or role="presentation".

Handling Background Images

CSS background images are not accessible because they’re not part of the DOM’s accessible tree. If the image carries important meaning, use inline <img> with alt text or a figure element instead:

<figure>
  <img src="hero-banner.jpg" alt="Family using a voice-assisted home device">
  <figcaption>Smart home technology enabling accessibility for daily tasks.</figcaption>
</figure>

Testing Image Accessibility

Verify that images and icons behave correctly across assistive technologies:

1. Inspect all alt attributes for presence and context relevance.
2. Check that decorative images are marked aria-hidden="true".
3. Use a screen reader to ensure alt text is concise and meaningful.
4. Validate with WAVE or axe DevTools for missing or duplicate alt text.
5. 
   

Common Accessibility Errors

• 
  
• Empty alt attributes on informative images.
• Using file names as alt text (e.g., “IMG_1234.png”).
• Redundant labeling (“Icon, icon, add icon”).
• Overloaded ARIA — both role="presentation" and alt text simultaneously.
• 
  

Conclusion

Accessible images and icons make your visual content meaningful for everyone. Clear, concise alternative text and semantic roles convey intent, context, and value — even beyond visuals. Incorporate image accessibility into your design system and code reviews to ensure long-term consistency.

Next Steps: Audit all visual assets (decorative, informative, functional), add appropriate alt text or ARIA roles, and verify how assistive technologies interpret them across browsers and devices.