« Back to home

Testing SVG

This page tests SVG accessible name behaviour on its own, without an interactive wrapper. Compare with testing SVG images inside links, where the SVG sits inside an <a>. Here, each SVG is entirely standalone, no link, no button, nothing making it interactive.

Example 1: no name

Expected result: no accessible name is expected. Confirmed: the name-prohibited-roles bookmarklet found no issue here, SVG's implicit role is not on that list. Still worth confirming with a screen reader directly whether this SVG is exposed as a meaningful object at all.

<svg></svg>

Example 2: aria-label

Expected result: "Close" should be the accessible name. Confirmed: the name-prohibited-roles bookmarklet found no issue with aria-label here, no role="img" needed to avoid that specific concern. Whether it's needed for reliable announcement is a separate question, see Example 5.

<svg aria-label="Close"></svg>

Example 3: <title>

Expected result: "Close" should be the accessible name, via the native SVG <title> element, the SVG equivalent of alt. Confirmed: the name-prohibited-roles bookmarklet found no issue here either.

<svg>
  <title>Close</title>
</svg>

Example 4: aria-hidden, decorative icon

This is the common pattern used by icon libraries such as Font Awesome, a purely decorative icon that should never be announced.

Expected result: this SVG should be entirely excluded from the accessibility tree and never announced. This is the one example on this page with a well-established, uncontested outcome, decorative content hidden via aria-hidden is a settled, reliable pattern.

<svg aria-hidden="true"></svg>

Example 5: role="img" with aria-label

This example adds role="img" alongside aria-label. This is included as an open comparison, not a demonstrated fix.

Expected result: "Close" should be the accessible name, the same outcome as Example 2. Testing confirms role="img" is not required here to avoid a name-prohibited role. Historically, role="img" was recommended for a different reason, inconsistent browser support for SVG's implicit role. Whether that's still true, and whether it makes any measurable difference to actual screen reader announcement compared with Example 2, is worth testing directly rather than assuming either way.

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

Notes

Tested finding: the "Highlight name-prohibited roles" bookmarklet was run against Examples 1–3 below. It found no issues, SVG's implicit role, whatever a given browser resolves it to, is not on the name-prohibited list. This rules out one possible concern, but not others: whether the SVG is reliably exposed as a single, meaningful object at all, rather than ignored or having its internal shapes exposed separately, is still worth confirming with a screen reader directly.

Note for testing: confirm accessible name announcement for all five examples with your standard screen reader combinations. The name-prohibited-role question is now settled (no issue found), the open questions are whether Examples 1–3 are reliably exposed as meaningful objects without role="img", and whether Example 5's explicit role="img" makes any measurable difference to announcement compared with Example 2.

« Back to home