构建人人可用的无障碍图表

图表的困境

图表和图形本质上是视觉对象。它们通过形状、位置和颜色来编码信息——而对于相当一部分受众来说，这三种通道要么毫无意义，要么会被扭曲。

大约 8% 的男性存在某种形式的色觉缺陷。除非开发者明确提供了信息，否则屏幕阅读器用户无法从 SVG 柱状图中获得任何有意义的内容。而键盘用户经常发现交互式图表根本无法触达。

结果是：数据可视化很可能是网页设计中，视力正常用户的体验与其他所有人的体验之间差距最大的领域。而且这个差距很少被组织注意到，因为无障碍审计往往先关注表单和导航，之后才轮到报表页面上的图表。

本指南讲解无障碍数据可视化真正需要什么——不是一份核对清单，而是理解图表为什么会失败，以及该如何应对。

为什么图表格外困难

大多数 HTML 元素都具有辅助技术能够理解的原生角色、名称和状态。<button> 就是按钮。<table> 就是带有行和列的表格。表单输入框有自己的标签。

而用 SVG 或 canvas 渲染的图表没有这些。它只是一幅绘图。屏幕阅读器看到的是一张图片（运气好的话），或者什么都看不到。开发者必须从零开始重建语义层。

与此同时，图表往往是页面上最重要的内容。展示月度营收的柱状图、追踪用户增长的折线图、按类别拆分占比的饼图——这些常常正是用户来到页面的原因。将它们排除在相当一部分访问者之外是一个严重问题，而不是小小的不便。

颜色的问题：绝不能只依赖颜色

最常见的图表无障碍失败，是把颜色作为区分数据系列或类别的唯一方式。

一张折线图中的四条线仅靠颜色区分——红、蓝、绿、橙——对许多色觉缺陷用户来说无法阅读，而对使用高对比度模式或灰度显示器的用户来说则完全失去意义。

解决办法是冗余编码：在颜色之外，再叠加至少一种其他视觉属性。

折线图：在颜色之外使用不同的虚线样式（实线、虚线、点线、点划线）
柱状图：在颜色之外使用纹理或图案，或直接在柱形上添加数据标签
散点图：在颜色之外使用不同的标记形状（圆形、方形、三角形、菱形）
饼图：在每个扇区内部或旁边添加文字标签——绝不能只依赖图例

这属于 WCAG 2.2 1.4.1 颜色的使用（A 级）的范畴：颜色不得作为传达信息的唯一手段。

图表的对比度

图表柱形、折线线条和数据点等非文本视觉元素，依据 1.4.11 非文本对比度（AA 级），必须与背景达到 3:1 的对比度。请使用对比度检查工具测试你的图表配色——许多品牌配色在大面积区域看起来没问题，但在较小尺寸下无法满足这一要求。

图表中的文字——坐标轴标签、数据标签、图例——必须满足与正文相同的对比度要求：依据 1.4.3 最小对比度，普通文本为 4.5:1，大号文本为 3:1。

提供文本替代

每张图表都需要一个能够传达其所展示数据的文本替代。具体采用什么形式，取决于数据的复杂程度。

简单图表：描述性替代文本

对于展示五个数值的柱状图，一段写得好的 alt 属性就能概括核心结论：

<img
  src="monthly-revenue.png"
  alt="Monthly revenue Q1 2025: Jan £42k, Feb £38k, Mar £51k,
       Apr £49k, May £56k. Steady upward trend from February onwards."
>

这里的替代文本做了两件事：陈述数据点，并概括关键洞察。不要只从视觉上描述图表（“一张展示营收的柱状图”），而要描述图表所传达的信息。

复杂图表：补充数据表格

当图表包含的数据超出 alt 属性能容纳的范围时，请在附近提供一个无障碍数据表格。这同时也服务于那些相比可视化形式更偏好表格数据的用户。表格可以默认隐藏，但必须可以触达：

<figure>
  <figcaption>Revenue by region, Q1 2025</figcaption>
  <svg aria-labelledby="chart-title" aria-describedby="chart-desc" role="img">
    <title id="chart-title">Revenue by region, Q1 2025</title>
    <desc id="chart-desc">Bar chart showing UK leading with £180k,
    followed by DE at £124k, FR at £98k, and NL at £71k.</desc>
    <!-- chart content -->
  </svg>
  <details>
    <summary>View as table</summary>
    <table>
      <caption>Revenue by region, Q1 2025</caption>
      <thead><tr><th>Region</th><th>Revenue</th></tr></thead>
      <tbody>
        <tr><td>UK</td><td>£180,000</td></tr>
        <tr><td>DE</td><td>£124,000</td></tr>
        <tr><td>FR</td><td>£98,000</td></tr>
        <tr><td>NL</td><td>£71,000</td></tr>
      </tbody>
    </table>
  </details>
</figure>

SVG 专属模式

以内联方式渲染（而非作为图片文件）的 SVG 图表，可以借助 ARIA 直接实现无障碍。关键模式包括：

为 <svg> 元素添加 role="img"
将 <title> 作为 <svg> 的第一个子元素提供，并用 aria-labelledby 关联
为较长的描述添加 <desc>，并用 aria-describedby 关联
用 aria-hidden="true" 标记装饰性元素（网格线、刻度线），以减少干扰

对于用户可以选择数据点的交互式图表，每个交互元素都需要正确的角色、名称和键盘支持。

交互式图表的键盘导航

如果你的图表是交互式的——悬停提示、可点击的分段、框选和缩放——依据 2.1.1 键盘（A 级），它们必须完全可以通过键盘操作。

对于包含大量数据点的图表，请实现漫游式 tabindex 模式：图表中同一时间只有一个元素处于 Tab 键序列中，方向键在图表内的数据点之间移动。

<!-- Each bar is a button, navigable with arrow keys -->
<g role="group" aria-label="Monthly revenue bars">
  <rect
    role="button"
    tabindex="0"
    aria-label="January: £42,000"
    onkeydown="handleChartKey(event)"
    ...
  />
</g>

只在鼠标悬停时显示的提示框，也必须在键盘聚焦时显示。只有鼠标用户能看到的提示框就是一项无障碍失败。

选择合适的图表类型

有些图表类型天生就比其他类型更具无障碍性。当你可以选择时：

图表类型	无障碍性	说明
柱状图	高	数值易于用标签编码；可以实现良好的键盘支持
折线图	高	使用不同的虚线样式；为关键数据点添加标注
表格	最高	最容易实现无障碍；对数据而言往往是正确的选择
散点图	中	需要细致区分标记形状；键盘导航实现复杂
热力图	低	天生依赖颜色；务必提供表格替代
饼图/环形图	低	难以比较数值；分段超过 3-4 个时应避免使用

拿不准时，一个排版良好的表格几乎总是比图表更具无障碍性——而且无论是否有残障，往往都更容易阅读。不要因为图表看起来时髦就使用它；只有当它真正能帮助用户比表格数据更快理解趋势或对比时，才使用图表。

测试你的图表

自动化无障碍扫描工具可以检查缺失的 alt 属性和某些 ARIA 模式，但它们无法验证图表数据是否有意义、键盘导航是否正常工作，或者图表对屏幕阅读器用户来说是否合理。请用以下方式测试：

屏幕阅读器（NVDA + Firefox、JAWS + Chrome、VoiceOver + Safari）：导航到图表并验证朗读出的内容
仅用键盘：用 Tab 键移动到图表，确认所有交互元素都可以通过键盘触达和操作
色盲模拟：使用 Chrome DevTools（Rendering > Emulate vision deficiency），查看图表在不同类型色觉缺陷下的呈现效果
放大到 200%：验证标签和图例不会重叠或被截断

我们的屏幕阅读器评估服务由真实的辅助技术用户来测试图表——这是了解你的用户实际体验的最快方式。