html - 带有内联 SVG 的 Firefox A11y 审核 - 带有图像的内容必须带有标签

Question

例如，如果我有以下 SVG 图像:

<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>

我应该点击 a11y svg guidelines通过设置role=img并包括 <title>元素

但是，当我运行 Accessibility Audit in Firefox 时，它为 SVG 内的每个元素/图形(路径、矩形、圆形)添加警告，并显示以下警告:

Content with images must be labeled. Learn more

但是我肯定不需要标记 svg 中的每个单独路径吗？

我应该如何改进 a11y 或向 FF 指示正确的替代文本是什么？

这是一个demo page in fiddle that will reproduce this issue

Answer 1

我发现包括 <title>Image title</title> <svg role="img"></svg> 内的标签标签导致 FireFox 停止显示错误。请注意 svg 标签上包含的 role 属性(如之前的评论中所述)，以及开始标签可能需要的任何其他属性。

根据MDN Web Docs :

The element provides an accessible, short-text description of any SVG container element or graphics element.

所以，就像 <img> 的 alt 标签一样元素。听起来像 <desc>标签可用于附加描述信息。