SVG and Accessibility

Ensuring that Scalable Vector Graphics (SVG) are accessible is essential for creating inclusive web experiences. This article covers best practices and provides plenty of code examples to demonstrate how to make your SVGs perceivable and operable by all users, including those using assistive technologies.

Why Accessibility Matters for SVGs

Screen reader support: Properly annotated SVGs are announced by screen readers, conveying meaning.

Keyboard operability: Interactive SVG elements must be focusable and responsive to keyboard inputs.

Semantic structure: Using ARIA roles and labels ensures clarity of purpose and content.

Performance & SEO: Accessible SVGs can also improve performance (fewer HTTP requests) and search visibility.

1. Adding `<title>` and `<desc>`

The <title> and <desc> elements within an inline SVG provide a text alternative.


<svg role="img" width="120" height="120" xmlns="http://www.w3.org/2000/svg" aria-labelledby="svg1-title svg1-desc">
  <title id="svg1-title">Company Logo</title>
  <desc id="svg1-desc">A green circle with a white checkmark.</desc>
  <circle cx="60" cy="60" r="50" fill="#4CAF50"/>
  <path d="M45 60 L55 70 L75 50" stroke="#FFF" stroke-width="8" fill="none"/>
</svg>

The role="img" tells assistive tech this is an image.

aria-labelledby references the IDs of <title> and <desc>.

2. Using ARIA Roles and Attributes

When embedding via <img>, you can still leverage ARIA.


<imgsrc="logo.svg"
  role="img"
  aria-labelledby="img1-title img1-desc"
  tabindex="0"
  alt=""
/>
<span id="img1-title" hidden>Company Logo</span>
<span id="img1-desc" hidden">A green circle with a white checkmark.</span>

alt="" prevents redundancy; the ARIA labels supply the description.

tabindex="0" makes the image focusable.

3. Inline SVG vs. `<img>` Embedding

Inline SVG

Advantages:

Full control over accessibility attributes.

Can include interactive elements.


<svg role="img" aria-labelledby="icon-title" tabindex="0">
  <title id="icon-title">Search Icon</title>
  <circle cx="10" cy="10" r="9" stroke="black" fill="none"/>
  <line x1="15" y1="15" x2="20" y2="20" stroke="black"/>
</svg>

`<img>` Embedding

Simpler, but less flexible for dynamic interactivity:


<img src="search-icon.svg" alt="Search Icon" />4. Decorative SVGs

For purely decorative graphics that convey no additional information, hide them from assistive technologies.


<svg aria-hidden="true" focusable="false" width="200" height="100">
  <!-- Decorative waves -->
  <path d="M0 50 Q 50 0 100 50 T 200 50" fill="none" stroke="#BBB"/>
</svg>

aria-hidden="true" removes it from the accessibility tree.

focusable="false" prevents keyboard focus (required for Internet Explorer/Edge).

5. Complex Diagrams and `longdesc`

For detailed diagrams, use longdesc or provide a separate text summary.


<svg role="img" width="600" height="400" longdesc="#diagram-description">
  <title>Sales Funnel Diagram</title>
  <!-- SVG paths and shapes omitted -->
</svg>

<!-- Long description below or on a separate hidden element -->
<div id="diagram-description" hidden>
  The funnel diagram shows customer stages: Awareness at top, Interest, Decision, and Action at bottom.
</div>

longdesc="#diagram-description" points to a more extensive description.

6. Keyboard Focus and Interactivity

If your SVG includes interactive parts (e.g., buttons), ensure they are keyboard-accessible.


<svg width="100" height="50" tabindex="0" role="button" aria-label="Play video"
     onkeydown="if(event.key==='Enter'){ playVideo(); }" onclick="playVideo()">
  <rect width="100" height="50" fill="#f00"/>
  <polygon points="35,15 35,35 55,25" fill="#fff"/>
</svg>

<script>
  function playVideo() {
    // Video play logic here
  }
</script>

tabindex="0" allows tab navigation.

role="button" and aria-label convey purpose.

onkeydown handles the Enter key.

7. Best Practices Checklist

Informative vs. Decorative

Decorative: aria-hidden="true", focusable="false".
Informative: <title>, <desc>, role="img".

Unique IDs

Ensure IDs referenced by ARIA attributes are unique on the page.

Keyboard Support

Add tabindex="0" and appropriate event handlers.

Text Alternatives

Use alt for <img> and <title>/<desc> for inline SVG.

Testing

Test with screen readers (NVDA, Voiceovers).
Test keyboard navigation only (no mouse).

Conclusion

Accessible SVGs enrich the web for all users. By combining semantic markup, ARIA attributes, and proper keyboard handling, you can ensure your graphics are both impressive and inclusive. Implement these techniques to make your SVG-based interfaces accessible and robust.