用好 scope 属性可让屏幕阅读器准确识别表头作用范围：列标题加 scope="col"，行标题加 scope="row"，配合 caption、thead/tbody 等语义结构，实现数据与标题的自动关联，提升视障用户表格理解效率。

用好 scope 属性，能让屏幕阅读器准确识别表格中每个 是管“一列”还是“一行”，从而把数字、姓名、日期这些数据和它们对应的标题自然关联起来。视觉上没变化，但对视障用户来说，这是从“一堆格子”变成“有结构的报表”的关键一步。

明确区分列标题和行标题

表格顶部的“姓名”“年龄”“城市”属于列标题，应加 scope="col"；左侧首列如“张三”“李四”属于行标题，应加 scope="row"。这样屏幕阅读器读到某个数据单元格（）时，会自动补读它上方的列标题和左侧的行标题，例如：“张三，姓名，32，年龄，北京，城市”。

• 姓名
• 年龄
• 张三 32 北京

避免只用视觉位置暗示结构

别依赖“第一行就是标题”或“第一列就是名称”这种隐含逻辑。没有 scope，屏幕阅读器无法判断某格是标题还是普通内容。就像抽屉没贴标签——东西都在，但用户得挨个拉开确认。加上 scope，等于给每个标题贴上“管列”或“管行”的清晰标识。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 即使表格有合并单元格（colspan/rowspan），也要为每个 显式设置 scope
• 多级表头（如“2024年→1月”“2024年→2月”）需逐层标注，上级用 scope="colgroup" 或配合 和 ARIA 增强

搭配 caption 和语义化结构更完整

提供表格整体意图（如“2024年销售员业绩统计”），scope 解决局部归属问题，两者配合，用户能快速判断“要不要深入听”。同时确保表格使用标准结构： 包列标题， 包数据行，不滥用

模拟表格。

• 员工基本信息表

  工号	姓名
  E001	王五

• 废弃已不被支持的 summary 属性，统一用 替代

验证是否生效的小方法

用键盘 Tab 进入表格后，开启 NVDA 或 VoiceOver，听它如何播报单元格。如果读出“列：姓名，行：张三，数据：32”，说明 scope 生效；如果只读“32”或报错“无标题”，就要检查 是否遗漏 scope 或写错值（仅接受 col、row、colgroup、rowgroup）。

• 浏览器开发者工具中检查元素，确认 scope 属性存在且拼写正确
• 用 axe 浏览器插件扫描，它会直接提示“ 缺少 scope 属性”类问题

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