表格必须用语义化标签确保无障碍：caption需为table首个子元素且具业务含义；th必须声明scope属性；复杂表格用id+headers显式绑定；筛选行禁用role属性。

caption 必须紧贴 且不能空泛

屏幕阅读器进入表格时，第一个播报的就是

内容。如果它被塞进 里，或者写成 ，用户根本不知道这表格是干啥的。

正确做法是让它成为

数据表

的首个子元素，内容需具业务指向性：

... ✅

2026年Q1前端班学员考核成绩

... ❌（位置错）

或空 caption ❌（语义失效）

scope 属性不是可选，而是强制声明

没写 scope 的

—— 只能出现在 ，管整列

—— 只能放在 每行第一个

在对应数据单元格上写 headers，多个用空格分隔：

别依赖视觉对齐——DOM 顺序乱了也没关系，只要 headers 值写对，播报就准

筛选行千万别给

加 role

很多人为了“增强语义”，给筛选行的

加 role="search"，结果触发 aria-requires-children 报错。根本原因是破坏了 的原生表格角色，让屏幕阅读器把它从表格结构中剥离。

正确做法极其简单：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 保留原生

结构，不加任何 role

把 放进

...

表格

，对屏幕阅读器来说只是加粗文本，不带任何行列归属关系。用户听到“张三”“32”“上海”，但完全不知道哪个是姓名、哪个是年龄、哪个是城市。 必须按规则显式标注：	姓名
张三
，不能塞进	无表头的列（如操作按钮列）别用	，直接用	复杂表格必须用 id + headers 显式绑定 一旦出现 rowspan、colspan 或多级表头，scope 就失效。屏幕阅读器无法自动推断一个	同时属于哪几个表头，必须靠 headers 手动指明。 实操步骤很明确： 给每个关键表头加唯一 id：	姓名	张三
里 每个输入框配 aria-label（如 aria-label="按姓名筛选"），或用 aria-labelledby 指向对应列头 id 真正难的不是查文档写对 scope，而是在每次敲下	时，下意识问一句：“它管的是行，还是列？”这个条件反射比任何自动化工具都管用。

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