Test case: SVG buttons

These test cases demonstrate different techniques for creating the accessible name for a <button> element that contains an SVG <rect> element.

Button 1

The <svg> element has a <title> element.

Button 1 example

Button 1 code


<button><
<svg width="250" height="100"><
<title><Button 1</title><
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" /><
</svg><
</button><

Button 2

The <rect> element has a <title> element.

Button 2 example

Button 2 code


<button>
<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;">
<title>Button 2</title>
</rect>
</svg>
</button>

Button 3

The <button> element has an aria-label.

Button 3 xample

Button 3 code


<button aria-label="Button 3">
<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>
</button>

Button 4

The <svg> element has an aria-label.

Button 4 example

Button 4 code


<button>
<svg aria-label="Button 4" width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>
</button>

Button 5

The <rect> element has an aria-label.

Button 5 example

Button 5 code


<button>
<svg width="250" height="100">
<rect aria-label="Button 5" x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>
</button>

Button 6

The <button> element has aria-labelledby pointing to the <title> element of the <svg> element.

Button 6 example

Button 6 code


<button aria-labelledby="t6">
<svg width="250" height="100">
<title id="t6">Button 6</title>
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>
</button>

Button 7

The <button> element has aria-labelledby pointing to the <title> element of the <rect> element.

Button 7 example

Button 7 code


<button aria-labelledby="t7">
<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;">
<title id="t7">Button 7</title>
</rect>
</svg>
</button>

Button 8

The <svg> element has aria-labelledby pointing to the ,code><title> element of the <svg> element.

Button 8 example

Button 8 code


<button>
<svg aria-labelledby="t8" width="250" height="100">
<title id="t8">Button 8</title>
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>
</button>

Button 9

The <svg> element has aria-labelledby pointing to the ,code><title> element of the <rect> element.

Button 9 example

Button 9 code


<button>
<svg aria-labelledby="t9" width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;">
<title id="t9">Button 9</title>
</rect>
</svg>
</button>

Button 10

The <button> element has a title attribute.

Button 10 example

Button 10 code


<button title="Button 10">
<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>
</button>