Testing SVG images inside links and buttons

Links

Link example 1: no name from link or SVG

<a href="#">
  <svg></svg>
</a>

Pass = No accessible name

Link example 2: aria-label from SVG

<a href="#">
  <svg aria-label="Hello"></svg>
</a>

Pass = Accessible name must be "Hello" from link content

Link example 3: title from SVG

Hello
<a href="#">
  <svg>
    <title>Hello</title>
  </svg>
</a>

Pass = Accessible name must be "Hello" from link content

Link example 4: aria-label on link

<a href="#" aria-label="Goodbye">
  <svg aria-label="Hello"></svg>
</a>

Pass = Accessible name must be "Goodbye" from aria-label

Link example 5: aria-label on link

Hello
<a href="#" aria-label="Goodbye">
  <svg>
    <title>Hello</title>
  </svg>
</a>

Pass = Accessible name must be "Goodbye" from aria-label


Buttons

Button example 1: no name from button or SVG

<button>
  <svg></svg>
</button>

Pass = No accessible name

Button example 2: aria-label from SVG

<button>
  <svg aria-label="Hello">
  </svg>
</button>

Pass = Accessible name must be "Hello" from button content

Button example 3: title from SVG

<button>
  <svg>
    <title>Hello</title>
  </svg>
</button>

Pass = Accessible name must be "Hello" from button content

Button example 4: aria-label on link

<button aria-label="Goodbye">
  <svg aria-label="Hello">
  </svg>
</button>

Pass = Accessible name must be "Goodbye" from aria-label

Button example 5: aria-label on link

<button aria-label="Goodbye">
  <svg>
    <title>Hello</title>
  </svg>
</button>

Pass = Accessible name must be "Goodbye" from aria-label