If I have the following SVG image for example:



<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][1] by setting `role=img` and including a `<title>` element

However, when I run the [Accessibility Audit in Firefox][5], 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][2]

<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][3]

  [1]: https://www.deque.com/blog/creating-accessible-svgs/
  [2]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names
  [3]: https://jsfiddle.net/KyleMit/7wbvogue/
  [4]: https://i.stack.imgur.com/afDJ3.png
  [5]: https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector#Check_for_accessibility_issues