If I have the following SVG image for example:

<!-- language: lang-html --> <pre><code>&lt;svg <b>role="img"</b> viewbox="0 0 100 50" height="100px"&gt; <b>&lt;title&gt;Site Logo&lt;/title&gt;</b> &lt;rect x="0" y="00" width="100" height="10" fill="red"&gt;&lt;/rect&gt; &lt;rect x="0" y="10" width="100" height="10" fill="salmon"&gt;&lt;/rect&gt; &lt;rect x="0" y="20" width="100" height="10" fill="pink"&gt;&lt;/rect&gt; &lt;rect x="0" y="30" width="100" height="10" fill="aqua"&gt;&lt;/rect&gt; &lt;rect x="0" y="40" width="100" height="10" fill="blue"&gt;&lt;/rect&gt; &lt;/svg&gt;</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:

Content with images must be labeled. Learn more

<img src="https://i.stack.imgur.com/afDJ3.png" width="550" alt="Example warning" title="">

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?

Here's a demo page in fiddle that will reproduce this issue