Svg Testing

title: "SVG Testing — Verifying SVG Accessibility" description: "Learn how to test SVG accessibility using screen readers, accessibility tree inspection, and automated checks for roles and labels." weight: 11 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

Testing SVG accessibility requires verifying roles, labels, focusability, and screen reader announcements using multiple testing methods.

## What You'll Learn

How to test SVG accessibility using browser tools, screen readers, and automated checks.

## Why It Matters

SVG accessibility issues are often invisible to automated tools. Manual testing with accessibility tree inspection and screen readers is essential.

## Real-World Use

A QA tester inspects an SVG in Chrome DevTools Accessibility pane. They verify the computed role is "img" and the accessible name is correct. Then they test with NVDA to confirm the announcement.

## Accessibility Tree Inspection

```javascript
// Using Chrome DevTools Protocol
const svg = document.querySelector('svg[role="img"]');
const computedRole = window.getComputedStyle(svg).getPropertyValue('role');
// Or use DevTools Elements > Accessibility tab

// Programmatic check
function checkSVGAccessibility(svg) {
  const role = svg.getAttribute('role');
  const label = svg.getAttribute('aria-label')
    || svg.querySelector('title')?.textContent;
  return {
    hasRole: role === 'img' || role === 'presentation',
    hasLabel: !!label,
    isAccessible: (role === 'img' && !!label) || role === 'presentation'
  };
}

Screen Reader Testing

// NVDA SVG Testing
// Navigate to SVG with Tab or browse mode
// Verify announcement: "Chart title, image"
// If interactive: "Region 1, button"

// VoiceOver (Mac)
// Navigate with Ctrl+Option+Arrow
// Verify role and label in rotor

Common Mistakes

1. Not inspecting the accessibility tree

The visual DOM may have correct attributes but the accessibility tree may differ.

2. Only testing with one screen reader

NVDA, JAWS, and VoiceOver handle SVG attributes differently.

3. Not testing interactive SVG focus

Interactive SVG elements must receive focus and have visible indicators.

4. Forgetting to test SVG in context

An SVG may pass isolation tests but fail when placed near other content.

5. Not checking fallback for img[src$=.svg]

When SVG is loaded via img, only the alt attribute matters.

Practice Questions

1. What Chrome DevTools panel shows the computed accessible name of an SVG? The Accessibility pane in Elements tab shows the computed role and name.

2. How do you test if an interactive SVG element receives keyboard focus? Tab to the element. A visible focus indicator should appear.

3. What should a screen reader announce for a properly labeled informative SVG? "The accessible name, then 'image' or 'graphic' depending on the screen reader."

Challenge: Write a test script that checks all SVGs on a page for correct role, accessible name, and focusability (if interactive).

FAQ

Mini Project

Create an SVG test suite with 10 test cases. Include tests for role, label, focusability, decorative hiding, and keyboard interaction.

What's Next

Apply everything in the SVG Project by building a complete accessible SVG page.