如何构建一个无障碍的 HTML 表格？

Question

如何构建一个无障碍的 HTML 表格？

Accepted Answer

HTML 表格用于呈现**表格数据**（成行成列的相关数据）——而非布局。一个无障碍的表格使用恰当的结构，让屏幕阅读器能在朗读每个单元格时一并朗读其表头。 ```html

Q2 Sales by Region
Region	Revenue
North	$12,000
South	$9,500
Total	$21,500

``` ## 对无障碍性至关重要的部分 - **带 `scope` 的 ``** —— 标记表头单元格。`scope="col"` 用于列表头，`scope="row"` 用于行表头。屏幕阅读器便会朗读"North，Revenue：$12,000"，而不是脱离上下文地读出单元格。 - **``** —— 整个表格的标题，是 `` 的第一个子元素；会被朗读出来以帮助用户建立方位感。 - **``/``/``** —— 分组表头、主体和汇总行；有助于导航，并能在打印时让表头重复出现。 ## 不要用表格做布局 ```html

sidebar

content

``` 布局表格会让屏幕阅读器困惑（它们会朗读数据表的语义）且缺乏灵活性。页面布局请使用 CSS Grid/Flexbox。 ## 为什么这很重要恰当的表格语义（``、``、分区）正是让数据表对屏幕阅读器用户可用的关键——它们把每个数值与其行表头和列表头联系起来。请把 `` 严格保留给真正的表格数据。