Visuals / SVG Simple

WCAG Description of Component

The HTML Accessibility API Mappings specify that the <svg> element has an implicit role of graphics-document. However browser support for the graphics-document role and the SVG Accessibility API Mappings is inconsistent.

This rule is limited to the explicit use of roles, as a clear indication that content should convey meaning, until the SVG Accessibility API Mappings is more stable and browser support is more consistent.

Browser and assistive technology support for SVG <title> and <desc> elements is currently inconsistent. Using WAI ARIA in combination with the img role for non-decorative <svg> elements significantly improves accessibility browser support.

Until browser support for the SVG Accessibility API Mappings is more consistent it is recommended to explicitly remove decorative <svg> elements from the accessibility tree.
Reference link

Recommended to take ~15m and review this article in full.

Functional Description

Within the <svg> tag, the first element must be a <title> tag that contains the svg title
On the <svg> tag there should be aria-labelledby that connects to the <title> id
On the <svg> tag there should be role="img"
Note: Note: title is included in aria-labelledby because it has better screen-reader support than aria-describedby

How to use this component

On the <svg> element include role="img"
On the <svg> element include aria-labelledby="uniqueTitleID"
Include a title tag within the <svg>. Give this title tag a unique ID that corrospons with the one entered in the aria-labelledby attribute
title tags should be short and concise

Component Example

Simple SVG Source

Code Snippets

HTML

                
<svg role="img" aria-labelledby="uniqueTitleID" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2335.5 1240.7">
    <title id="uniqueTitleID">The title of the svg</title>
    [... svg inside code]
</svg>

History Tracking

Code orginally created by Kelly; Approved by Steen on Nov 20,2023