SVG a11y test cases

Test cases for SVG accessibility, with and without ARIA.

Atomic tests

Simple tests, of one thing at a time. There are some more complex examples under development in the use-case-examples repository. The examples that have been improved for accessibility are listed below.

<svg> tests

• <svg>
• <svg> + group role

Basic SVG element tests

• <rect>
• <rect> + img role
• <path>
• <path> + img role

<text> tests

• <text>
• <text> + aria-labelledby
• <text> + <title>

<title> tests

• <title>
• <title> + aria-labelledby
• <title> + aria-labelledby + <ul>
• <title> + <foreignObject> + <ul>
• <title> + <ul>

<desc> tests

• <desc>
• <desc> + aria-describedby
• <desc> + <foreignObject> + <ul>
• <desc> + <ul>
• <desc> + <ul> + aria-describedby

<defs> tests

• <defs>
• <defs> + aria-hidden
• <defs> + <title> + aria-labelledby
• <defs> + <desc> + aria-describedby
• <defs> + <use> + aria-describedby
• <defs> + <title> + aria-labelledby

<use> tests

• <use> + <desc>
• <use> + <title>

<animate> tests

• <animate> + accesskey
• <animate> + click
• <animate> + keydown

<set> tests

• <set> + aria-label + accesskey
• <set> + <defs> + aria-labelledby + accesskey
• <set> + <use> + aria-labelledby + accesskey

Keyboard focus tests

• <a>
• <rect> + tabindex 0
• <rect> + tabindex 1

Complex examples

In the

sparse-chord

sparse-chord.svg is a graph that links things shown in 2 individual bar charts to each other.

Notes about the changes and lessons are pretty sparse, and we welcome additional testing results

rectrack2.svg is a flowchart with various loops

Notes about the changes and lessons cover what was done, but more testing would be really helpful.

Composed tree links

A diagram from the shadow DOM specification, of a tree of nodes

Notes about the changes and lessons Describe a lot of what was done, and some test results.

It is best to think of the above complex examples as drafts, or work in progress. The following are things that have had some work done on them, but are probably not consistent even with themselves.

Baeyer-Villiger Oxidation

A organic chemical reaction represented semi-graphically

chord.svg

chord.svg is a graph that shows the connections between elements in 2 different sets, in a way that allows comparing the relative "strength" of different connections.

There are some Notes about the changes and lessons in progress.