VoiceOver: aria- descripbedby / aria- labeled by在svg-path上不工

Question

我试图通过使用aria-describedby/aria-labelledby来宣布每个甜甜圈图(svg)弧线/部分的含义。

• 在div中增加id，为需要公告的内容。
• 增加aria-describedby/aria-labelledby与svg path的id相同的字符串。
• 添加tabindex = "0"到svg path。

在MacOS VoiceOver with Chrome/Safari和iPhone ios VoiceOver with Safari上测试。

当选项卡在arc/section上时，VoiceOver只会显示图形符号而不是div的内容，但是无论使用aria-describedby/aria-labelledby，都会忽略宣布的内容。

<svg class="donut-chart" width="236px" viewBox="0 0 236 236">
<g class="donut-chart-arcs">
<path class="donut-chart-path" d="M118,218.3
A100.3, 100.3 0 0 1 117.50623649597293, 218.29878462674455
L117.63984309118025,191.15911349244897
A73.16, 73.16 0 0 0 118, 191.16 z" stroke="#ffffff" stroke-width="2px" fill="#0046ad" opacity="1" tabindex="0" aria-describedby="0.28"></path>
<path class="donut-chart-path" d="M117.50623649597293,218.29878462674455
A100.3, 100.3 0 0 1 33.32260328573676, 171.757124976093
L56.23531063194917,157.21107939432665
A73.16, 73.16 0 0 0 117.63984309118025, 191.15911349244897 z" stroke="#ffffff" stroke-width="2px" fill="#ec0439" opacity="1" tabindex="0" aria-describedby="56.89"></path>
<path class="donut-chart-path" d="M33.32260328573676,171.757124976093
A100.3, 100.3 0 0 1 63.65981518807381, 33.695585438212646
L78.36362990188914,56.5073682019904
A73.16, 73.16 0 0 0 56.23531063194917, 157.21107939432665 z" stroke="#ffffff" stroke-width="2px" fill="#1977d3" opacity="1" tabindex="0" aria-describedby="88.95"></path>
<path class="donut-chart-path" d="M63.65981518807381,33.695585438212646
A100.3, 100.3 0 0 1 173.18230621846504, 34.244384782800665
L158.25062335935098,56.907668900395784
A73.16, 73.16 0 0 0 78.36362990188914, 56.5073682019904 z" stroke="#ffffff" stroke-width="2px" fill="#7300cd" opacity="1" tabindex="0" aria-describedby="65.7"></path>
<path class="donut-chart-path" d="M173.18230621846504,34.244384782800665
A100.3, 100.3 0 0 1 117.99999999999994, 218.3
L117.99999999999996,191.16
A73.16, 73.16 0 0 0 158.25062335935098, 56.907668900395784 z" stroke="#ffffff" stroke-width="2px" fill="#aa00aa" opacity="1" tabindex="0" aria-describedby="145.55"></path>
</g>
</svg>

<div id="0.28">$0.28</div>
<div id="56.89">$56.89</div>
<div id="88.95">$88.95</div>
<div id="65.7">$65.7</div>
<div id="145.55">$145.55</div>

宣布div中的内容

Answer 1

我无法在VoiceOver中进行测试，但我会根据标准提供答案。

必须命名可聚焦元素

如果您允许关注这些元素，它们必须有一个可访问的名称，由aria-label或aria-labelledby提供。

描述只能由屏幕阅读器选择性地读取，这是一个配置选择。您可以另外提供一个，但不能作为唯一的文本。

不能命名没有角色的路径元素

ARIA标准禁止为具有特定角色的元素命名。

由于SVG标准中没有ARIA，因此不清楚SVGpath元素隐式地扮演哪个角色。它可能有role="none"，这是presentation角色的同义词，因此不能命名为。这就是Firefox的情况。

您的path使用哪个角色?

那么接下来的问题是你应该使用哪个角色。

这里引用的标准是W3C推荐的WAI-ARIA图形模块。

因此，当宣布图形符号时，Safari可能会从这个建议中得到解释。标准是:

用于传达简单含义或类别的图形对象，其中含义比特定的视觉外观更重要。它可以是一个较大的结构化图形的组件，例如图表或地图。

(强调我的)

SVG-Aria元素映射表还将<path>映射到graphics-symbol，如果它应该包含在可访问性树中。

包含元素的原因是aria-label和tabindex属性。

在W3C Wiki中还有一个旧的页面叫做SVG Accessibility/ARIA roles for charts。您的图表对应的角色可能是graphics dataunit:

图表或地图中不同的数据值。

由于Wiki页面从未成为推荐，您可以遵循标准的建议，提供aria-roledescription来接近Wiki角色:

<path role="graphics-symbol" aria-roledescription="dataunit">

如果你查看Highcharts的Donut图表，你可能会注意到他们使用<path role="img" aria-label="…">。

是否聚焦?

不清楚是否应该使这些数据单元可聚焦。最好不要在简单的图表中导航，在更复杂的图表中这样做最有可能提高对数据组的理解。

您应该与屏幕阅读器用户进行测试。

一般来说，只有可点击的交互元素才应该是可聚焦的。或者反过来说:

可聚焦元素应该具有交互语义

如果元素是可聚焦的，焦点需要是可见的，所以你还需要添加一个:focus样式。

如果你有比这个更大的图表，最好提供一个单独的制表位，就像在组件内部的键盘导航中解释的那样。

箭头键允许聚焦单个数据单元。

Highcharts再次提供了一个很好的例子。

注意。在IDs中

在id中使用句点.不是一个好的做法，正如MDN警告的那样:

.在CSS中有特殊的含义(它充当类选择器)。除非您小心地在CSS中转义它，否则它不会被识别为id属性值的一部分。很容易忘记这样做，从而导致代码中的bug难以检测。

游乐场

<svg class="donut-chart" width="236px" viewBox="0 0 236 236">
<g class="donut-chart-arcs">
<path class="donut-chart-path" d="M118,218.3
A100.3, 100.3 0 0 1 117.50623649597293, 218.29878462674455
L117.63984309118025,191.15911349244897
A73.16, 73.16 0 0 0 118, 191.16 z" stroke="#ffffff" stroke-width="2px" fill="#0046ad" opacity="1" tabindex="0" aria-labelledby="0-28" role="img"></path>
<path class="donut-chart-path" d="M117.50623649597293,218.29878462674455
A100.3, 100.3 0 0 1 33.32260328573676, 171.757124976093
L56.23531063194917,157.21107939432665
A73.16, 73.16 0 0 0 117.63984309118025, 191.15911349244897 z" stroke="#ffffff" stroke-width="2px" fill="#ec0439" opacity="1" tabindex="0" aria-labelledby="56-89" role="graphics-symbol" aria-roledescription="dataunit"></path>
<path class="donut-chart-path" d="M33.32260328573676,171.757124976093
A100.3, 100.3 0 0 1 63.65981518807381, 33.695585438212646
L78.36362990188914,56.5073682019904
A73.16, 73.16 0 0 0 56.23531063194917, 157.21107939432665 z" stroke="#ffffff" stroke-width="2px" fill="#1977d3" opacity="1" tabindex="0" aria-describedby="88.95"></path>
<path class="donut-chart-path" d="M63.65981518807381,33.695585438212646
A100.3, 100.3 0 0 1 173.18230621846504, 34.244384782800665
L158.25062335935098,56.907668900395784
A73.16, 73.16 0 0 0 78.36362990188914, 56.5073682019904 z" stroke="#ffffff" stroke-width="2px" fill="#7300cd" opacity="1" tabindex="0" aria-describedby="65.7"></path>
<path class="donut-chart-path" d="M173.18230621846504,34.244384782800665
A100.3, 100.3 0 0 1 117.99999999999994, 218.3
L117.99999999999996,191.16
A73.16, 73.16 0 0 0 158.25062335935098, 56.907668900395784 z" stroke="#ffffff" stroke-width="2px" fill="#aa00aa" opacity="1" tabindex="0" aria-describedby="145.55"></path>
</g>
</svg>
<div id="0-28">$0.28</div>
<div id="56-89">$56.89</div>
<div id="88-95">$88.95</div>
<div id="65-7">$65.7</div>
<div id="145-55">$145.55</div>