咏叹调网格单元格标签在 SVG 矩形内始终为空白

Aria gridcell label always blank inside SVG rect

本文关键字：空白 单元格 网格 标签 SVG 咏叹调      更新时间：2023-09-26

我正在尝试开发一个可访问的条形图。由于目前还没有正式的图形 ARIA 角色，我决定在我的 SVG 中添加role="grid"。大多数东西都工作正常，但是当我使用画外音测试我的图表时，网格单元总是blank的。

这是说明我的图形的代码笔。这是我使用画外音进行测试的视频。

这是我为 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，并且两个浏览器中都存在此问题。

使用具有 aria-label 属性和img角色的 <title> 和 <desc> 元素作为回退：

<?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 容器或图形元素中包含以下元素：

标题    为包含它的元素提供人类可读的标题。标题元素可以由图形用户代理呈现为工具提示。它可以通过语音合成器呈现为语音。描述    提供包含它的元素的更长更完整的说明。作者应为具有功能意义的复杂内容或其他内容提供描述。

引用

  • SVG 辅助功能
  • SVG 可访问性测试：使用表测试断言
  • 创建辅助 SVG 的提示
  • 使用 ARIA 增强 SVG 可访问性
  • 可访问的 SVG
  • SVG 的可访问性如何？
  • 创作可访问 SVG 的当前状态
  • 用于按钮和链接的内联 SVG
  • 文本链接：屏幕阅读器的最佳做法
  • 可访问性：SVG 和 MathML 的推荐替代文本约定？
相关文章：