用好 scope 属性可让屏幕阅读器准确识别表头作用范围：列标题加 scope="col"，行标题加 scope="row"，配合 caption、thead/tbody 等语义结构，实现数据与标题的自动关联，提升视障用户表格理解效率。
用好 scope 属性，能让屏幕阅读器准确识别表格中每个 <th> 是管“一列”还是“一行”，从而把数字、姓名、日期这些数据和它们对应的标题自然关联起来。视觉上没变化，但对视障用户来说，这是从“一堆格子”变成“有结构的报表”的关键一步。
明确区分列标题和行标题
表格顶部的“姓名”“年龄”“城市”属于列标题，应加 scope="col"；左侧首列如“张三”“李四”属于行标题，应加 scope="row"。这样屏幕阅读器读到某个数据单元格（<td>）时，会自动补读它上方的列标题和左侧的行标题，例如：“张三，姓名，32，年龄，北京，城市”。
<th scope="col">姓名</th><th scope="col">年龄</th><th scope="row">张三</th><td>32</td><td>北京</td>
避免只用视觉位置暗示结构
别依赖“第一行就是标题”或“第一列就是名称”这种隐含逻辑。没有 scope，屏幕阅读器无法判断某格是标题还是普通内容。就像抽屉没贴标签——东西都在，但用户得挨个拉开确认。加上 scope，等于给每个标题贴上“管列”或“管行”的清晰标识。
- 即使表格有合并单元格（
colspan/rowspan），也要为每个<th>显式设置scope - 多级表头（如“2024年→1月”“2024年→2月”）需逐层标注，上级用
scope="colgroup"或配合<colgroup>和 ARIA 增强
搭配 caption 和语义化结构更完整
<caption> 提供表格整体意图（如“2024年销售员业绩统计”），scope 解决局部归属问题，两者配合，用户能快速判断“要不要深入听”。同时确保表格使用标准结构：<thead> 包列标题，<tbody> 包数据行，不滥用 <div> 模拟表格。
立即学习“前端免费学习笔记（深入）”；
<table><caption>员工基本信息表</caption><thead><tr><th scope="col">工号</th><th scope="col">姓名</th></tr></thead><tbody><tr><th scope="row">E001</th><td>王五</td></tr></tbody></table>- 废弃已不被支持的
summary属性，统一用<caption>替代
验证是否生效的小方法
用键盘 Tab 进入表格后，开启 NVDA 或 VoiceOver，听它如何播报单元格。如果读出“列：姓名，行：张三，数据：32”，说明 scope 生效；如果只读“32”或报错“无标题”，就要检查 <th> 是否遗漏 scope 或写错值（仅接受 col、row、colgroup、rowgroup）。
- 浏览器开发者工具中检查元素，确认
scope属性存在且拼写正确 - 用 axe 浏览器插件扫描，它会直接提示“
<th>缺少 scope 属性”类问题
