Accessible Icons, Images & Decorative Elements

Introduction

Images and icons help users understand and engage with content—but when these visuals are not coded accessibly, they exclude many users. Screen readers rely on alternative text (alt attributes) to describe images, while decorative graphics should be hidden so assistive technologies skip them. Effective use of alt text bridges visual and non‑visual experiences, creating inclusive content that complies with WCAG 2.2 Guidelines 1.1.1 (Non‑Text Content).

This guide covers best practices for writing descriptive alt text, handling decorative visuals, and designing icons and imagery that are meaningful, inclusive, and accessible across devices.

Why Accessible Images Matter

• 
  
• Users with vision impairments depend on screen reader descriptions to interpret visual information.
• 
  
• Accessible images improve search engine visibility and content comprehension.
• 
  
• Clear alt text benefits users in low‑bandwidth environments where images fail to load.
• 
  
• Compliance with WCAG, ADA, and Section 508 reduces digital‑accessibility risks.
• 
  

Types of Images & How to Mark Them Up

1. Informative Images

These convey information essential to understanding content. Provide concise, meaningful alt text:

<img src="team-meeting.jpg" alt="Employees collaborating around a whiteboard">

2. Functional Images

Images used as buttons or links should describe their function, not appearance:

<img src="download-icon.svg" alt="Download report">

3. Complex Images (Charts, Graphs, Maps)

Provide brief alt text describing the overall purpose, plus a long description nearby or linked via longdesc, aria-describedby, or accompanying content:

<img src="bar-chart.png" alt="Quarterly sales growth by region" aria-describedby="chart-description">
<div id="chart-description">
  This chart compares Q1–Q4 sales showing a 20% increase in the North region.
</div>

4. Decorative Images

When images don’t provide information—such as borders or purely aesthetic backgrounds—set an empty alt attribute or use CSS backgrounds:

<img src="decorative-pattern.svg" alt="" role="presentation">

Leaving alt empty signals to screen readers that no description is needed.

Accessible Icons

Icons represent actions, statuses, or navigation. Because icons often lack visible labels, they need accessible text equivalents to convey meaning clearly.

1. SVG Icons

Use <title> or ARIA labels inside inline SVGs:

<svg role="img" aria-labelledby="iconTitle">
  <title id="iconTitle">Search</title>
  <path d="..." />
</svg>

2. Icon Fonts

If icon fonts are used, ensure aria-hidden="true" for purely visual glyphs and provide screen reader text alternatives:

<i class="icon icon-search" aria-hidden="true"></i>
<span class="sr-only">Search</span>

The hidden span with sr-only class supplies screen‑reader‑only text.

3. Action Icons with No Visible Label

When only an icon represents an interactive element (e.g., trash bin), include an ARIA label:

<button aria-label="Delete message">
  <svg aria-hidden="true">…</svg>
</button>

Alt Text Best Practices

• 
  
• Keep alt text concise (125 characters or fewer recommended for most screen readers).
• 
  
• Describe meaning, not visual detail—write what the image communicates in context.
• 
  
• Omit terms like “image of” or “picture of”; screen readers already announce images.
• 
  
• For charts or infographics, summarize insights rather than listing every data point.
• 
  
• Use surrounding text for extended explanations if needed.
• 
  

Icons & Color Contrast

Icons must meet minimum contrast thresholds when they convey meaningful information (such as error or success states). WCAG 2.2 contrast ratios:

• 
  
• Minimum 3:1 for graphical objects and UI components.

Avoid relying on color alone to indicate meaning—pair colors with shapes, patterns, or text labels (e.g., a red ❌ plus “Error” text).

Accessible Background Images

Content embedded via CSS backgrounds isn’t announced by screen readers. Use them only for decorative purposes. If background imagery carries meaning, provide corresponding text content in HTML nearby.

Testing & Validation

• 
  
• Run automated tools like WAVE to detect missing alt attributes.
• 
  
• Inspect with screen readers (NVDA, VoiceOver) to confirm correct narration order.
• 
  
• Visually check icon contrast and legibility under dark/light modes.
• 
  
• Validate that hidden decorative images are skipped as intended.
• 
  

Common Mistakes to Avoid

• 
  
• Using file names or meaningless alt text like “image123.jpg.”
• 
  
• Leaving alt attributes out entirely.
• 
  
• Relying on icons without accessible names or visible text.
• 
  
• Using color alone to differentiate states or categories.
• 
  
• Embedding text inside images instead of using live text.
• 
  

Benefits of Accessible Imagery

• 
  
• Improves comprehension for screen‑reader and low‑vision users.
• 
  
• Enhances SEO and content discoverability.
• 
  
• Reduces cognitive load by clarifying icons and visuals.
• 
  
• Ensures compliance with WCAG and ADA requirements.
• 
  

Conclusion

Accessible icons and images transform visual content into universally understandable information. By writing thoughtful alt text, distinguishing decorative graphics, and ensuring color‑contrast compliance, you deliver equitable and inclusive communication across every visual element.

Next steps: Audit all icons, images, and illustrations on your site for proper alternative text and contrast. Establish design‑system guidelines for imagery use and test regularly with assistive technology to ensure every visual communicates its meaning effectively.