包含链接的 SVG 的 ARIA 角色

Question

我有一张世界地图的内联 SVG。一些国家被突出显示并可点击。为了使地图尽可能易于访问，我添加了一个 ARIA 角色和 aria-labelledby 属性，将 SVG 链接到它的描述：

<svg role="img" aria-labelledby="description">

  <!-- description -->
  <desc id="description">A world map illustration. The following two countries are highlighted: United States, United Kingdom.</desc>

  <!-- countries -->
  <a xlink:href="#">
    <path data-name="United States" class="country highlighted" d="..." />
  </a>
  <a xlink:href="#">
    <path data-name="United Kingdom" class="country highlighted" d="..." />
  </a>
  <path data-name="Canada" class="country" d="..." />
  <path data-name="Mexico" class="country" d="..." />
  ...

</svg>

不过，我担心许多辅助技术会停在图像元素上，而不会继续向下遍历树，从而阻止用户与内部链接进行交互。

使用 Chrome devtools 检查元素并查看 Accessibility Tree 似乎证实了这种怀疑。当我聚焦 <a> 元素时，它在“辅助功能树”窗格中显示为 Ignored。

问题：标记此 SVG 的正确方法是什么，以便对其进行适当标记并且组成链接可点击，并且（理想情况下）保持其语义为图片？

我应该使用多个 role 值吗？还是在这种情况下添加 img 角色弊大于利？或者有其他方法吗？

Answer 1

找到似乎有效的解决方案：

role 属性有一个更新的值，figure，它具有图形的语义，同时允许其内容保持可访问性：

figure (role)

A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable.

因此示例中 SVG 上的 role="img" 应更改为 role="figure"。

包含链接的 SVG 的 ARIA 角色

ARIA role for SVG that contains links

html

svg

accessibility

wai-aria