If I have the following SVG image for example:
<!-- language: lang-html --> <pre><code><svg <b>role="img"</b> viewbox="0 0 100 50" height="100px"> <b><title>Site Logo</title></b> <rect x="0" y="00" width="100" height="10" fill="red"></rect> <rect x="0" y="10" width="100" height="10" fill="salmon"></rect> <rect x="0" y="20" width="100" height="10" fill="pink"></rect> <rect x="0" y="30" width="100" height="10" fill="aqua"></rect> <rect x="0" y="40" width="100" height="10" fill="blue"></rect> </svg></code></pre>I should be hitting a11y svg guidelines by setting role=img
and including a <title>
element
However, when I run the Accessibility Audit in Firefox, it adds a warning for every element/graphic inside the SVG (path, rect, circ) with the following warning:
<img src="https://i.stack.imgur.com/afDJ3.png" width="550" alt="Example warning" title="">Content with images must be labeled. Learn more
But surely I don't need to mark up every individual path within the svg?
What should I do to improve a11y or indicate to FF what the correct alt text is?