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:
The next test aim to determine the most well supported method for linking to alternate versions of SVG files.
The last two tests aim to determine if linked SVG files can be made accessible to keyboard-only users
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>
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>
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 -->