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 （角色）

可感知的section内容，通常包含graphical document，图像，代码段或示例文本。 figure MAY 的各个部分可供用户浏览。

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

包含链接的SVG的Aria角色

1 个答案: