Question

我正在尝试开发一个可访问的条形图。由于目前还没有正式的ARIA角色，我决定将role="grid"添加到我的SVG中。大多数东西都运行正常，但是当我使用Voice Over测试我的图表时，gridcell总是blank。

这是说明我的图表的codepen。这是我使用Voice Over进行测试的video。

这就是我为rect标签配置gridcell的方法：

<g className={barClass} role="gridcell" aria-label={bar.count + ' ' + bar.fruit}>
  <rect width={bar.count * 10} height="19" y={20 * index}/>
</g>

问题：我做错了什么？为什么画外音不能识别咏叹调标签？

更新1 ：我正在使用Chrome和Safari，这两个浏览器都存在此问题。

Answer 1

将<title>和<desc>元素与aria-label属性和img角色一起用作后备：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title>Network</title>
  <desc>An example of a computer network based on a hub</desc>
<!-- add graphic content here, and so on for the other components-->
  </g>
  <g id="ComputerA" aria-label="computer A: A common desktop PC" role="img">
    <title>Computer A</title>
    <desc>A common desktop PC</desc>
  </g>
  <g id="ComputerB">
    <title>Computer B</title>
    <desc>A common desktop PC</desc>
  </g>
  <g id="CableA" aria-label="Cable A: 10BaseT twisted pair cables" role="img">
     <title>Cable A</title>
     <desc>10BaseT twisted pair cable</desc>
  </g>
  <g id="CableB">
    <title>Cable B</title>
    <desc>10BaseT twisted pair cable</desc>
  </g>
  <g id="CableN">
    <title>Cable N</title>
    <desc>10BaseT twisted pair cable</desc>
  </g>
</svg>

为SVG图形指定文本等效项的最简单方法是在任何SVG容器或图形元素中包含以下元素：

title
    Provides a human-readable title for the element that contains it. The title element may be rendered by a graphical user agent as a tooltip. It may be rendered as speech by a speech synthesizer.
desc
    Provides a longer more complete description of an element that contains it. Authors should provide descriptions for complex or other content that has functional meaning.

<强>参考

Aria gridcell标签在SVG rect内总是空白

1 个答案: