SVG Sprite Accessibility Best Practices

SVG Sprite Accessibility

Accessible icon usage is one of the key advantages of SVG sprites over icon fonts. However, you still need to follow specific patterns to ensure icons work correctly for all users.

Decorative vs Informative Icons

The first decision is whether an icon is decorative (supplementary to text) or informative (conveys meaning on its own).

Decorative icons appear alongside text and add visual interest but no new information:

<!-- Decorative: text provides the meaning -->
<button>
  <svg width="16" height="16" aria-hidden="true">
    <use href="#icon-save"/>
  </svg>
  Save Document
</button>

Use aria-hidden="true" to hide decorative icons from screen readers. The visible text label provides the accessible name.

Informative icons are the sole indicator of meaning (icon-only buttons, status indicators):

<!-- Informative: icon is the only content -->
<button aria-label="Close dialog">
  <svg width="16" height="16" role="img" aria-hidden="true">
    <use href="#icon-close"/>
  </svg>
</button>

For icon-only buttons, put aria-label on the button itself, not on the SVG.

Using <title> Inside SVG

For standalone informative icons that are not inside interactive elements:

<svg width="16" height="16" role="img" aria-labelledby="status-title">
  <title id="status-title">Connection active</title>
  <use href="#icon-check-circle"/>
</svg>

The role="img" tells assistive technology this is an image, and aria-labelledby links to the title for the accessible name.

Focus Management

SVGs inside focusable elements (buttons, links) should not receive focus independently. Ensure:

• Do not add tabindex to the <svg> element
• Use focusable="false" on the <svg> for IE/Edge legacy:

<a href="/home">
  <svg width="20" height="20" focusable="false" aria-hidden="true">
    <use href="#icon-home"/>
  </svg>
  Home
</a>

Color Contrast

Icon colors must meet WCAG 2.1 contrast requirements:

• 3:1 ratio for graphical objects and UI components
• 4.5:1 ratio if the icon serves as text equivalent

Ensure icons remain visible in both light and dark themes. Use currentColor so icons inherit the text color, which should already meet contrast requirements.

High Contrast Mode

Windows High Contrast Mode overrides colors. SVGs using currentColor automatically adapt. Hardcoded fill colors may become invisible. Test your sprite icons in High Contrast Mode to ensure they remain visible.