Icon A11Y

title: "Icon Accessibility — Making Icon Fonts and SVG Icons Accessible" description: "Learn how to make icon fonts and SVG icons accessible using aria-hidden for decorative icons and proper labels for meaningful icons." weight: 8 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Icons must be hidden from screen readers when decorative (using aria-hidden) and labeled when they convey meaning without supporting text.

## What You'll Learn

How to handle icon fonts, SVG icon sprites, and icon-only controls in an accessible way.

## Why It Matters

Screen readers attempt to pronounce icon font characters, resulting in gibberish. Unlabeled icon-only buttons are unusable.

## Real-World Use

A toolbar has icon-only buttons for Bold, Italic, and Underline. Each uses aria-label="Bold", etc. A decorative star icon uses aria-hidden="true" so screen readers ignore it.

## Icon Font Accessibility

```html
<!-- Decorative icon font -->
<span class="icon-star" aria-hidden="true"></span>

<!-- Icon font with meaning (before text) -->
<span class="icon-warning" aria-hidden="true"></span>
<span class="sr-only">Warning: </span>
Your session will expire

<!-- Icon font as button -->
<button>
  <span class="icon-edit" aria-hidden="true"></span>
  <span class="sr-only">Edit</span>
</button>

SVG Icon Sprite

<svg aria-hidden="true" focusable="false">
  <use href="/icons.svg#icon-search"></use>
</svg>

Icon-Only Button

<button aria-label="Search">
  <svg role="img" aria-hidden="true" focusable="false">
    <use href="/icons.svg#search"></use>
  </svg>
</button>

Common Mistakes

1. No aria-hidden on decorative icon fonts

Screen readers try to pronounce the font character, producing gibberish.

2. No text alternative for icon-only buttons

Buttons with only an icon and no text or aria-label are announced as unlabeled.

3. aria-hidden on meaningful standalone icons

If an icon conveys meaning without text, it needs a label, not aria-hidden.

4. focusable="true" on decorative SVGs

Decorative SVGs should not be focusable. Set focusable="false".

5. Using Unicode characters as icons

Unicode characters (★, ✔) are announced by screen readers. Use aria-hidden if decorative.

Practice Questions

1. How do you hide a decorative icon font from screen readers? Add aria-hidden="true" to the icon element.

2. How do you label an icon-only button? Use aria-label on the button element or include sr-only text alongside the icon.

3. Should an icon next to visible text have aria-hidden? Yes. The visible text provides the meaning, so the icon is decorative.

Challenge: Create a toolbar with 5 icon-only buttons (Bold, Italic, Underline, Link, Image). Use proper aria-label and aria-hidden.

FAQ

Mini Project

Create a social media sharing bar with 5 icon-only buttons (Facebook, Twitter, LinkedIn, Email, Share). Each button has proper aria-label. Icons have aria-hidden.

What's Next

Learn about Responsive Images and Alt Text for responsive images using the picture element.