Visuals / SVG Complex

ClickUp Ticket

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
• Within the <svg> tag, the second element should be a <desc> tag that contains the longer alt text
• On the <svg> tag there should be aria-labelledby that connects to the <title> and/or <desc> ids
• On the <svg> tag there should be role="img"
• Note: both title and description are 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 uniqueDescID".
  Note: There can be more than one targeted ID element within the aria-labelledby attribute
• 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
• Include a desc tag within the <svg>. Give this desc tag a unique ID that corrospons with the one entered in the aria-labelledby attribute
• desc tags should be long and descriptive

Component Example

Code Snippets

HTML

                
<svg role="img" aria-labelledby="uniqueTitleID uniqueDescID" 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>
    <desc id="uniqueDescID">A longer, more complete description for complex graphics.</desc> 
    [... svg inside code]
</svg>
            

History Tracking

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