SVG 中的可访问图表

Posted 2023-03-28

【中文标题】SVG 中的可访问图表

【英文标题】：Accessible diagram in SVG

【发布时间】：2022-01-19 05:48:48

【问题描述】：

您将如何改进 SVG 中图表的可访问性？

<svg class="chart" viewBox="0 0 420 150" aria-labelledby="desc" >
  <desc id="desc">Ein Diagramm</desc>

  <g class="bar" tabindex="0" aria-describedby="bar1info">
    <rect   />
    <text id="bar1info" x="45" y="9.5">4 apples</text>
  </g>
</svg>

aria-attribute 是否足以将 rect 与其图例联系起来？有必要吗？

条形图/图表应该是可标签的还是应该避免使用tabindex="0"？

【参考方案1】：

关于这个主题有很好的网络文章。包括以下内容：

Accessible SVGs - CSS Tricks Accessible SVGs: Perfect Patterns For Screen Reader Users - Smashing Magazine

【讨论】：

添加一个角色="listitem" 似乎不错。你会保留tabindex 和aria-describedby 吗？

【参考方案2】：

aria-attribute 是否足以将 rect 与其图例联系起来？有必要吗？

在这种情况下没有必要，具有标签的分组没有任何用途，因为文本元素将在本机公开。

条形图/图表应该是可标签的还是应该避免使用 tabindex="0"？

如果这是静态内容，那么 no 作为项目只有在它们以某种方式交互时才应该是可聚焦的。

屏幕阅读器用户可以在图表中导航，如果他们不希望它是可聚焦的。

复杂的 SVG 和图形

您似乎正在根据提供的代码制作某种形式的条形图。

通常，对于复杂的 SVG、图形等，您最好的选择是对屏幕阅读器隐藏 SVG 本身并在表格中提供数据。

您可以在 SVG 上使用 aria-hidden="true" 将其从可访问性树中删除（focusable="false" 仅适用于 IE），或者如果将其作为外部图像包含，则将 alt 属性设置为 ""。

<svg aria-hidden="true" focusable="false"></svg>

<!-- or if external -->

<img src="mysvg.svg" >

然后我们可以在页面中添加一个表格，其中包含图表中使用的数据。

如果您的设计允许表格可见，那会更好，但在很多情况下这是不可能的，因此我们可以使用 visually hidden CSS class 直观地隐藏它。

示例

.visually-hidden  
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */

<svg class="chart" viewBox="0 0 420 150" aria-hidden="true" focusable="false">
  <desc id="desc">Ein Diagramm</desc>
  <g class="bar">
    <rect   />
    <text x="45" y="9.5">4 apples</text>
  </g>
</svg>

<table class="visually-hidden">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>4</td>
  </tr>
</table>