SVG 的默认 ARIA 角色是什么？答案

【问题标题】：What is the default ARIA role for an SVG?SVG 的默认 ARIA 角色是什么？
【发布时间】：2018-03-11 03:17:47
【问题描述】：

如果role 属性不存在并且文档包含可见图形，我一直在尝试确定 SVG 标记的默认角色。

使用 Chrome 的辅助工具，它告诉我角色是SVGRoot：

但这不是一个有效的 ARIA 角色，它是 Chrome 自己在内部使用的角色之一。

我已经能够通过这个文档找到更多信息：WAI-ARIA Graphics Module，它指出了允许在 SVG 标签上使用哪些角色，但我似乎无法缩小应该是默认角色的范围.

如果没有提供有效的role 属性，用户代理应该默认 SVG 扮演什么角色？

【问题讨论】：

我认为没有默认值，因为 SVG 用于图形/图表，已经有足够的角色 graphic、diagram、chart 等，加上标题/desc，你应该被覆盖。
@Napoli，那么屏幕阅读器如何决定他们将如何处理它们或任何其他没有默认角色的元素？他们通常决定将其映射到默认角色吗？
@Godwin，不。如果 html 元素没有角色，或者您将角色设置为“演示”，则屏幕阅读器不知道该元素的用途。不会将默认角色映射到它。创建可访问的 SVG 是一个巨大的研究领域。

标签： html svg accessibility wai-aria

【解决方案1】：

根据 HTML 文档中的 ARIA，SVG has no default corresponding role

“无对应角色”状态定义如下：

标有无对应角色的元素，在表的第二列中没有任何隐含的ARIA语义，但它们确实具有意义，这种意义可以用角色、状态和属性来表示不是由 ARIA 提供的，而是通过可访问性 API 向辅助技术用户公开。因此，建议 Web 开发人员将角色属性添加到语义中立的元素（例如 div 或 span），而不是覆盖所列元素的语义。

正如@josh 已经回答的那样，SVG 元素的允许角色是application、document 或img

【讨论】：

太棒了。对于我们的用例，我不打算扮演一个角色，而是将没有角色的 SVG 作为其自身的指标。我认为这最符合 W3C 和 WCAG 的规定。
根据链接的文档（它又链接到 SVG-AAM），SVG 现在有一个隐含的graphics-document 角色。 w3.org/TR/svg-aam-1.0/#details-id-66

【解决方案2】：

SVG 本身没有隐含的 aria 角色，但是开发人员可以（并且可能应该）分配以下角色之一：application、document 或 img。

如果您的 SVG 具有需要用户输入的可聚焦元素，请使用 application。

如果您的 SVG 主要包含非交互式的信息性文本，请使用 document。

如果您的 SVG 是纯视觉的或使用一组元素组成单个图像，请使用 img。

来源：https://www.w3.org/TR/html-aria/#docconformance

【讨论】：