表格可访问性

用语义结构提升可读性与辅助技术体验

关键要点

可访问的表格需要完整的语义结构：清晰的 caption、正确的表头标记、以及表头关联。 对于复杂表格，建议使用 headers 与 id 显式关联。

常见坑：不要用 div + role=\"table\" 替代表格， 原生 table 的语义更完整。summary 属性已废弃， 说明内容请放在 caption 或与 aria-describedby 关联的文本中。

  • caption 描述表格用途
  • th + scope 标明行列关系
  • 必要时使用 headers 精确关联

基础语法

<table aria-describedby="note-a11y">
  <caption>季度目标完成情况</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

演示

可访问表格结构

A11y 该表格使用 caption、scope 与 aria-describedby，屏幕阅读器可准确读出表头与单元格关系。

季度目标完成情况
团队 目标 完成 状态
增长 120,000 110,500 推进中
体验 80,000 86,200 超额
品牌 60,000 52,300 需跟进 
<p id="note-a11y">...</p>
<table aria-describedby="note-a11y">
  <caption>季度目标完成情况</caption>
  <thead>
    <tr>
      <th scope="col">团队</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">增长</th>
      ...
    </tr>
  </tbody>
</table>