javascript - Aria gridcell 标签在 SVG 矩形内始终为空白

Question

我正在尝试开发一个易于访问的条形图。由于目前还没有正式的图形 ARIA Angular 色，我决定将 role="grid" 添加到我的 SVG 中。大部分内容工作正常，但当我使用 Voice Over 测试我的图表时，gridcell 总是空白。

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

这就是我为我的 rect 标签配置 gridcell 的方式:

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

问题:我做错了什么吗？为什么画外音无法识别 aria 标签？

更新 1:我使用的是 Chrome 和 Safari，这两个浏览器都存在这个问题。

Answer 1

使用 <title>和 <desc>带有 aria-label 的元素属性和 img作为后备 Angular 色:

<?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>

The simplest way to specify a text equivalent for an SVG graphic is to include the following elements in any SVG container or graphics element:

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. 

引用资料

• SVG Accessibility
• SVG Accessibility Testing: Test Assertions with Tables
• Tips for Creating Accessible SVG
• Using ARIA to enhance SVG accessibility
• Accessible SVGs
• Just how accessible is SVG?
• Current State of Authoring Accessible SVG
• Inline SVG used for buttons and links
• Text Links: Best Practices for Screen Readers
• Accessibility: recommended alt-text convention for SVG and MathML?