HTML Academy · 课时

表格无障碍：scope、summary 与 caption

Q: 「表格无障碍：scope、summary 与 caption」这节课中我会学到什么？

添加说明文字和 scope 属性，为屏幕阅读器提供支持。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

添加说明文字和 scope 属性，为屏幕阅读器提供支持。

表格无障碍：scope、summary 与 caption 是 CoddyKit 上的免费 HTML Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

为什么表格无障碍访问很重要

屏幕阅读器用户会逐个单元格浏览数据表，因此每个数据单元格都需要有对应的表头上下文。

没有正确的标记时，屏幕阅读器只会读出原始值，而不会提供列或行的上下文
无障碍表格可以让所有人都理解数据

表格标题元素

<caption> 为表格提供可见的标题：

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

设置表格标题样式

使用 CSS 设置标题的样式和位置：

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

表头单元格上的作用域属性

scope 属性会告知屏幕阅读器表头适用于哪些单元格：

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

作用域值

scope 属性的值：

col——表头适用于同一列中的单元格
row——表头适用于同一行中的单元格
colgroup——表头适用于列组中的单元格
rowgroup——表头适用于行组中的单元格（tbody/thead）

复杂表头的作用域设置

跨列表头使用 colgroup 或 rowgroup 作用域：

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

数据单元格上的标头关联属性

对于非常复杂的表格，请使用 headers 将单元格与其表头明确关联：

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

何时使用作用域而非标头关联

使用建议：

带单行表头的简单表格 → 使用 scope="col" 和 scope="row"
带复杂跨列表头的表格 → 使用 headers 属性和 ID 引用
WCAG 1.3.1 要求以编程方式将表头与其数据单元格关联起来

表格上的 ARIA 标签属性

当不希望在视觉上显示表格标题时，请使用 ARIA 标签属性：

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

测试表格的无障碍性

验证表格是否具备无障碍性的方法：

使用屏幕阅读器中的表格面板（VoiceOver、NVDA）
安装 axe DevTools 浏览器扩展
针对页面 URL 运行 pa11y CLI
W3C 标记验证器可以检测缺少表格标题的问题

摘要属性（已弃用）

summary 属性曾用于帮助屏幕阅读器理解复杂表格，现在已在 HTML5 中弃用：

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

无障碍表格检查清单

数据表格的无障碍检查清单：

使用 <caption> 为表格添加标签
为所有表头单元格使用 <th>
为所有 <th> 元素添加 scope
使用 <thead>、<tbody> 和 <tfoot> 组织结构
对于复杂表格，请使用 id + headers

快速检查

对于作为整列表头的 th，应使用哪个作用域值？

回顾：表格无障碍访问

无障碍表格要点：

<caption>——可见的表格标题，屏幕阅读器会播报
scope="col"——列表头
scope="row"——行表头
scope="colgroup/rowgroup"——跨列表头
id + headers——用于复杂的多级表头
使用 axe、pa11y 或 VoiceOver 进行测试

常见问题解答

「表格无障碍：scope、summary 与 caption」课时是免费的吗？

是的 — 「表格无障碍：scope、summary 与 caption」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「表格无障碍：scope、summary 与 caption」这节课中我会学到什么？

添加说明文字和 scope 属性，为屏幕阅读器提供支持。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「表格无障碍：scope、summary 与 caption」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy