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.
According to https://css-tricks.com/accessible-svgs/#article-header-id-6,
To ensure the AT can access the
<title>
and<desc>
:
- Add the appropriate ID’s to the
<title>
and<desc>
:
<title id="uniqueTitleID">The title of the SVG</title>
<desc id="uniqueDescID">A longer, more complete description for complex graphics.</desc>
- On the
<svg>
tag, add:
aria-labelledby="uniqueTitleID uniqueDescID"
(use the title and desc ID’s) - both title and description are included inaria-labelledby
because 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?