Making SVG Accessible
We've started to switch from icon fonts to SVG, which is fantastic.
Unfortunately most of our SVGs don't seem to be accessible.
To ensure the AT can access the
- Add the appropriate ID’s to the
<title id="uniqueTitleID">The title of the SVG</title>
<desc id="uniqueDescID">A longer, more complete description for complex graphics.</desc>
- On the
aria-labelledby="uniqueTitleID uniqueDescID"(use the title and desc ID’s) - both title and description are included in
aria-labelledbybecause it has better screen-reader support than aria-describedby (see tip gitlab-ce#4)
role="img"(so that the SVG is not traversed by browsers that map the SVG to the group role)
Can we consider making our SVGs more accessible by following the steps above?