Accessible SVGs

SVGs (Scalable Vector Graphics) are everywhere in modern web development. From icons and logos to charts and illustrations, they offer visuals at any screen size. But just because an SVG looks good doesn't mean it's accessible.

The good news? Making SVGs accessible often requires only a few small changes.

1. Know When an SVG Needs a Description

Not every SVG needs a text alternative. The right approach depends on its purpose.

• Decorative SVGs: If an icon is purely visual and adds no information, hide it from assistive technology.
• Meaningful SVGs: If an illustration or graphic communicates information, provide an accessible name or description.
• Interactive SVGs: If an SVG functions as a button or link, make sure the control has an accessible name and can be operated with a keyboard.

For a decorative icon, you can use:

<svg aria-hidden="true" focusable="false">
  <!-- SVG content -->
</svg>

For a meaningful SVG, use a title:

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Monthly sales increased</title>
  <!-- SVG content -->
</svg>

The title should communicate the graphic's purpose, not simply describe its appearance.

2. Don't Rely on Color Alone

SVGs are frequently used for charts, status indicators, and diagrams. If meaning is communicated only through color, people with color vision deficiencies may miss important information.

Use additional visual cues, such as labels, patterns, shapes, or text. For complex charts, provide an accessible data table or a concise summary of the key findings.

3. Make Interactive SVGs Keyboard Accessible

An SVG icon inside a button doesn't automatically make the button accessible. The surrounding control needs a meaningful accessible name.

<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">
    <!-- Close icon -->
  </svg>
</button>

Here, the button provides the accessible name, while the decorative SVG is hidden from screen readers. Users can understand the button's purpose without needing to interpret the icon.

4. Test Beyond the Code

Accessible markup is a good starting point, but it isn't the finish line. Test SVGs with a screen reader, navigate interactive elements using only a keyboard, and check whether the graphic's meaning remains clear without color.

Automated accessibility tools can help identify some issues, but they cannot determine whether every graphic has a useful description.

The Takeaway

Accessible SVGs aren't about adding ARIA attributes everywhere. They're about making intentional decisions: hiding decorative graphics, describing meaningful visuals, and ensuring interactive controls work for everyone.

A few lines of code can make a meaningful difference - but the most accessible solution is the one that gives users the information and functionality they actually need.