Testing SVG Accessibility

Contents

• Introduction
• Example 1 - Link inside SVG file
• Example 2 - Link around SVG file
• Example 3 - No link directly associated with the SVG file
• Test results
• Github page

---

Introduction

This page has been built to conduct a series of accessibility tests on embedded SVG files. The first two tests aim to determine the support for titles and descriptions within SVG files:

• Test 1: Are SVG titles and descriptions announced to Screen Readers when using line-by-line navigation?
• Test 2: Are SVG titles and descriptions announced to Screen Readers when using TAB key navigation?

The next test aim to determine the most well supported method for linking to alternate versions of SVG files.

• Test 3: Can users navigate to an alternate version via link associated with SVG

The last two tests aim to determine if linked SVG files can be made accessible to keyboard-only users

• Test 4: Is there a visual indicator when the users hovers over the linked SVG file (ie. change of color, cursor change)?
• Test 5: Is there a visual indicator when the users focuses over the linked SVG file?

---

Example 1 - Link inside SVG file

The option below uses the xlink:href method to link to the accessible version of the pie chart.

Pet Ownership Pie Chart - Alternate Version

Title and description:

<svg aria-labelledby="title1 desc1">
  <title id="title1">Pet Ownership Pie Chart</title>
  <desc id="desc1">Percentage breakdown of pets owned by Australians</desc>
</svg>

Linking method:

<svg>
  <a xlink:href="table1.html">...</a>
</svg>

---

Example 2 - Link around SVG file

The option below uses an <a> link wrapped around the svg file to link to the accessible version of the pie chart. This is only valid if there are no interactive elements inside the SVG file.

Fast Food Pie Chart - Alternate Version

Title and description:

<svg aria-labelledby="title2 desc2">
  <title id="title1">Fast Food Pie Chart</title>
  <desc id="desc1">Percentage breakdown of fast food options</desc>
</svg>

Linking method (only allowed when wrapping around non-interactive elements):

<a href="table2.html">
  <svg>...</svg>
</a>

---

Example 3 - No link directly associated with the SVG file

The option below has no link from the svg file to link to the accessible version of the pie chart.

Color Pie Chart - Alternate Version

Title and description:

<svg aria-labelledby="title3 desc3">
  <title id="title1">Color Options Pie Chart</title>
  <desc id="desc1">Percentage breakdown of color options</desc>
</svg>

Linking method:

<!-- No link -->

---

Github Page