我正在尝试开发一个易于访问的条形图。由于目前还没有正式的图形 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,这两个浏览器都存在这个问题。
最佳答案
使用 <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?
关于javascript - Aria gridcell 标签在 SVG 矩形内始终为空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35300950/