Testing SVG images inside links

This page explores different possible accessible name outcomes when using SVGs inside links.

These examples follow the Accessible Name and Description Computation specification. Their purpose is to help you verify that browsers and assistive technologies expose the expected accessible names for a range of common SVG-in-link patterns.

Example 1: no name from link or SVG

There is no accessible name for the <a> element.

Avoid. The link has no visible text or accessible name.

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

Example 2: aria-label from SVG

The accessible name for the <a> element should be: Close.

Acceptable. The SVG provides an accessible name for the link, although labelling the link itself is generally preferred.

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

Example 3: <title> from SVG

The accessible name for the <a> element should be: Close.

Acceptable. The SVG <title> provides an accessible name for the link, although labelling the link itself is generally preferred.

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

Example 4: aria-label on link

The accessible name for the <a> element should be: Dismiss.

Recommended. The link itself provides the accessible name, making the labelling explicit and independent of the SVG.

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

Example 5: aria-label on link, overriding <title> on SVG

The accessible name for the <a> element should be: Dismiss.

Acceptable. The link's aria-label provides the accessible name. The SVG <title> is ignored because the link already has its own accessible name.

<a href="#" aria-label="Dismiss">
  <svg>
    <title>Close</title>
  </svg>
</a>

Example 6: role="img" plus aria-label on SVG

The accessible name for the <a> element should be: Close.

Acceptable.The SVG provides an accessible name for the link. However, labelling the link directly is generally preferred.

<a href="#">
  <svg role="img" aria-label="Close"></svg>
</a>

Example 7: decorative SVG (aria-hidden) with visible text

The accessible name for the <a> element should be: Close.

Recommended. The visible link text provides the accessible name, while the decorative SVG is ignored by assistive technologies.

<a href="#">
  <svg aria-hidden="true"></svg>
  Close
</a>

Example 8: aria-labelledby on SVG, referencing hidden text

The accessible name for the <a> element should be: Close.

Acceptable, but possibly fragile. The SVG receives its accessible name from aria-labelledby, which becomes the accessible name of the link. Unlike Example 2, the label text lives in a separate element outside the link, connected only by matching id values. This works correctly as written, but is easier to accidentally break during future edits with no visible symptom. Example 2's aria-label directly on the SVG achieves the same result with less risk.

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

<p id="link-svg-label" class="hidden">Close</p>

Testing home