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

【问题标题】：Firefox A11y Audit with inline SVGs - content with images must be labeled带有内联 SVG 的 Firefox A11y 审计 - 必须标记带有图像的内容
【发布时间】：2020-01-18 20:52:02
【问题描述】：

例如，如果我有以下 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 guidelines

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

带有图片的内容必须加标签。 Learn more

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

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

这是demo page in fiddle that will reproduce this issue

【问题讨论】：

标签： html firefox svg accessibility firefox-developer-tools

【解决方案1】：

我很确定这是 FF 辅助工具中的错误或设计缺陷。 I have reported it here.

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

w3 says

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

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

我使用屏幕阅读器 (NVDA) 尝试了您的代码（包装在一个简单的 HTML 文档中），但它没有尝试宣布 rects，这是我所期望的。它确实宣布了可访问的名称。实际上它宣布了两次（which is a known NVDA bug at time of writing）。

我还尝试在 svg 的内容周围放置一个 <g role="presentation"> 元素，但辅助功能工具仍会在所有子项上标记警告。这不应该是必要的。

所以，我认为你很好。

【讨论】：

【解决方案2】：

Elements with img role 将 children presentational 属性设置为 true。所以rect 元素不能有替代名称。

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

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

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

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

【讨论】：

【解决方案3】：

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

根据MDN Web Docs：

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

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

【讨论】：

【解决方案4】：

这可能会迟到，但它总是有帮助。

由于 svg 没有文本，包括 aria-label="descriptive text here" 和 alt="svg description here" 应该有助于文本标签检查。但是，如果 svg 仅用于演示目的，则使用空的 alt 也有帮助。 This is to make screen readers recognise the svg, but will not describe the image (instead they'd just say "image", or similar).

【讨论】：