无障碍表格需严格遵循caption、scope、headers三原则：caption须为table首个子元素且内容具体；scope="col"/"row"必须显式声明表头归属；复杂结构须用id+headers精准绑定。

无障碍表格不是“加点属性就完事”，而是让屏幕阅读器能准确说出“张三，年龄，32”而不是只念“32”。核心就三点：caption定全局意图、scope定局部归属、headers兜底复杂结构——漏掉任意一个，视障用户听到的就是碎片信息。

caption 必须紧贴

开头，且不能写成“数据表”

caption是屏幕阅读器进入表格时最先读出的内容，相当于“说明书封面”。它不渲染在视觉顶部，但语义权重最高。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 位置必须是 <table> 的第一个子元素，写在 <code><thead> 前面；塞进 <code><thead> 或用 CSS 隐藏后靠 <code>aria-labelledby 补救，都无效
• 内容要具体，比如 <caption>2026年Q1前端班学员考核成绩</caption>，而非 <caption>数据表</caption>
• 别用已废弃的 summary 属性——现代检测工具（如 axe）会直接报错，且 VoiceOver/NVDA 已完全忽略它

scope="col" 和 scope="row" 不是可选装饰，是强制声明

没有 scope，<th> 就只是加粗文本。屏幕阅读器不会因为它是第一行或第一列，就自动认为它管整列或整行。 <ul><li><code><th scope="col"> 只能出现在 <code><thead> 里，用于横向列标题（如“姓名”“城市”） <li><code><th scope="row"> 只能出现在 <code><tbody> 每行的第一个 <code><th>（如“张三”“李四”），不能放在 <code><td> 里 <li>筛选行里的控件必须用 <code><td> 包裹，内部 <code><input> 加 aria-label，绝不能给 <tr> 加 <code>role="search"——这会破坏表格隐式角色，触发 aria-requires-children 报错

复杂表格（跨行/多级表头）必须用 id + headers 显式绑定

当出现 rowspan、colspan 或嵌套 <thead> 时，<code>scope 失效。屏幕阅读器无法自动推断“这个 <td> 同时属于哪几个表头”。 <ul><li>给每个相关 <code><th> 加唯一 <code>id，例如 <th id="name-header" scope="col">姓名</th>

• 在对应 <td> 上用空格分隔多个 <code>id：headers="name-header dept-header"
• 不要依赖视觉对齐——屏幕阅读器只认 headers 值，哪怕 DOM 顺序错乱，只要 headers 写对，播报就正确

真正难的不是查文档写对 scope，而是在每次敲下 <th> 时，下意识问一句：“它管的是行，还是列？”——这个条件反射比任何自动化工具都管用。</th>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！