Skip to main content

Accessible Icon Design: ARIA Labels, Contrast & Screen-Reader Support

· 4 min read

If your icon button passes a visual review but fails a screen-reader test, it isn't done. Accessibility isn't a post-launch audit—it's a design constraint that produces better icons for everyone, including sighted users in challenging conditions.

What You'll Learn​

  • The exact ARIA attributes every icon pattern needs
  • How to test icon contrast and sizing against WCAG 2.2
  • A screen-reader testing workflow you can run in five minutes

The Three Icon Accessibility Patterns​

Pattern 1: Icon-Only Button​

The icon is the only indicator of function—no visible text label.

<button aria-label="Close dialog" type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

Key points:

  • aria-label goes on the button, not the SVG
  • SVG gets aria-hidden="true" because the button's label is sufficient
  • The label must describe the action, not the icon shape ("Close dialog", not "X")

Pattern 2: Icon + Visible Text​

The icon reinforces a visible label—screen readers should ignore it.

<a href="/packs/">
  <svg aria-hidden="true" viewBox="0 0 24 24"><!-- icon --></svg>
  Icon Packs
</a>

Pattern 3: Informational Icon (No Interaction)​

The icon conveys meaning but isn't interactive—like a status indicator.

<svg role="img" aria-label="Upload complete" viewBox="0 0 24 24">
  <path d="M5 13l4 4L19 7" stroke="green" stroke-width="2"/>
</svg>

Colour Contrast for Icons​

WCAG 2.2 SC 1.4.11 (Non-text Contrast) mandates a 3:1 ratio between the icon and its background.

Testing Shortcut​

  1. Take a screenshot of your icon on its background
  2. Use the eyedropper in Chrome DevTools to sample both colours
  3. Plug into any contrast checker
  4. If below 3:1, darken the icon fill or lighten the background

Common Failures​

ScenarioRatioVerdict
Light grey icon on white2.1:1❌ Fail
Medium grey icon on white4.5:1✅ Pass (AA)
Blue icon on dark navy3.8:1✅ Pass (AA)
Bright blue icon on light blue1.8:1❌ Fail

Touch Target Sizing​

WCAG 2.2 SC 2.5.8 requires interactive elements to have a minimum 24×24 px target (Level AA) and recommends 44×44 px (AAA and iOS HIG).

.icon-button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px; /* Expands hit area around 24px icon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Screen-Reader Testing in Five Minutes​

  1. macOS: Enable VoiceOver (Cmd+F5), Tab through your UI, listen to icon announcements.
  2. Windows: Install NVDA (free), navigate with Tab and arrow keys.
  3. Browser: Install the axe DevTools extension, run a scan, filter for "image" violations.

What to listen for:

  • Icon-only buttons should announce their aria-label ("Close dialog")
  • Decorative icons should be completely silent
  • Informational icons should announce their aria-label ("Upload complete")

Accessible Icon Checklist​

  • Every icon-only button has aria-label describing the action
  • Decorative icons have aria-hidden="true"
  • Informational icons have role="img" and aria-label
  • Icon-to-background contrast ≥ 3:1
  • Touch targets ≥ 44×44 px on mobile
  • prefers-reduced-motion disables icon animations
  • Focus indicator is visible on icon buttons

Find accessibility-tested icon sets on Icojoy, download ready-to-use packs from the packs page, and review usage terms on the licensing page.

FAQ​

Should I put aria-label on the SVG or the button? On the button. The SVG should have aria-hidden="true" when wrapped in an interactive element.

Do inline SVG icons need alt text? No—alt is for <img> elements. Inline SVGs use role="img" + aria-label or <title> for accessible names.

How do I handle icon tooltips for accessibility? Use aria-describedby linking to a visually hidden <span>, or use the native title attribute on the button (though screen-reader support for title is inconsistent).

Is 3:1 contrast enough for small icons? It's the WCAG minimum. For icons below 20 px, aim for 4.5:1—small elements are harder to perceive at lower contrast.

Where can I find icons with built-in accessibility metadata? The Icojoy collections page flags sets that include ARIA documentation and accessibility testing notes.