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

Question

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

<svg role="img" viewbox="0 0 100 50" height="100px">
  <title>Site Logo</title>
  <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>

我应该通过设置role=img并包含一个<title>元素来达到a11y svg 指南

但是，当我在 Firefox 中运行Accessibility Audit 时，它会为 SVG 中的每个元素/图形（路径、矩形、圆形）添加警告，并带有以下警告：

必须标记带有图像的内容。 了解更多

但我肯定不需要标记 svg 中的每条路径吗？

我应该怎么做才能改进 a11y 或向 FF 指出正确的替代文字是什么？

这是小提琴中的演示页面，将重现此问题

Answer 1

我很确定这是 FF 可访问性工具中的错误或设计缺陷。 我已经在这里报告了。

请记住，自动可访问性审核无法捕获所有问题，并且经常报告误报。 尝试安装（例如）WAVE 无障碍插件，这是另一个自动无障碍审核器。 它没有这样的抱怨。

w3 说

img 表示文档中的单个图形，无论它是否由一组绘图对象形成。

所以你是对的，SVG 根上的role="img"应该做正确的事情。 可访问性 API 不会尝试暴露子项，但 Firefox 当前测试版的可访问性工具显然会这样做。

我用屏幕阅读器 (NVDA) 尝试了你的代码（包装在一个简单的 HTML 文档中），但它没有尝试宣布 rects，这正是我所期望的。 它确实宣布了可访问的名称。 实际上它宣布了两次（这是撰写本文时已知的 NVDA 错误）。

我还尝试在 svg 的内容周围放置一个<g role="presentation">元素，但可访问性工具仍然在所有子项上标记警告。 这应该没有必要。

所以，我觉得你很好。

Answer 2

具有img角色的元素将children 表示属性设置为 true。 所以rect元素不能有一个替代名称。

这可能是由于这个 Firefox 插件中的一个错误。

请注意（奇怪的是？）可访问名称和描述指南规定名称可以是：

由 [...] 宿主语言标记机制生成，例如 HTML 中的alt或title属性，或SVG 中的desc元素。

因此，根据此声明，您应该使用desc元素。 我不确定这是否是文档中的错误，因为title元素似乎是一个更合适的选择。

Answer 3

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

根据MDN 网络文档：

该元素提供任何 SVG 容器元素或图形元素的可访问的简短文本描述。

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

Answer 4

这可能会迟到，但它一直都有帮助。

由于 svg 没有文本，包括aria-label="descriptive text here"和alt="svg description here"应该有助于文本标签检查。 但是，如果 svg 仅用于演示目的，使用空alt帮助。 这是为了让屏幕阅读器识别 svg，但不会描述图像（相反，他们只会说“图像”或类似内容）。