scope属性必须显式声明为scope="col"或scope="row"，caption须紧贴table开头且内容具体，筛选行tr禁用role="search"，复杂表头需用id+headers显式关联。

scope 属性必须显式声明，不能靠视觉猜

没有 scope，屏幕阅读器读到的就只是孤立文本，比如“张三”“22”“北京”，完全不知道哪个是姓名、哪个是年龄。它不靠位置对齐判断关系，只认 scope="col" 或 scope="row" 的明确声明。

常见错误包括：

• 在 里用 却漏写 scope="col"
• 在 每行第一个 （如人员姓名行标题）没加 scope="row"
• 把筛选行里的 错误换成 又不设 scope，导致辅助技术误判为表头

  正确做法：只要出现 ，立刻问一句——它管的是列还是行？然后对应加 scope="col" 或 scope="row"。

  caption 必须紧贴

  开始标签，且内容具体
  不是装饰，是屏幕阅读器进入表格时最先读出的上下文。放错位置或内容空泛，等于直接剥夺用户对表格用途的第一认知。

  必须满足两个硬性条件：

  • 位置：必须是
  的第一个子元素，不能塞进 或用 CSS 隐藏后又用 aria-labelledby 替代
  内容：避免“数据表”“信息汇总”这类无效表述；应写成“2026年Q1前端班学员考核成绩”或“上海地区4月订单明细”

  别用已废弃的 summary 属性——它已被 WCAG 2.1 明确弃用，现代检测工具会直接报错。

  

  DeepBI DHTML 页面生成器

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

  下载

  带筛选行的表格，千万别给

  加 role="search"

  这是最常触发 aria-requires-children 报错的操作。原因很直接：

  原生角色就是 role="row"，强行改成 role="search" 后，它就不再是表格的一部分，而是一个独立地标（landmark），导致其父 下出现非法子元素。

  正确处理筛选行的要点：

  • 保留原生
  ，不加任何 role
  筛选控件用 放在
  就是行， 时，scope 失效。屏幕阅读器无法自动推断“这个单元格到底属于哪几个表头”。这时必须手动建立映射。

  操作步骤很简单但容易漏：

  • 给每个相关

  里，每个都配 aria-label（如 aria-label="按姓名筛选"） 如果需要关联列头，用 aria-labelledby 指向对应	的 id，而不是靠视觉对齐 记住：
  就是表头，	就是单元格——它们的语义已经足够，堆 ARIA 反而破坏结构。 复杂表格（多层表头/跨行跨列）必须用 id + headers 显式绑定 当出现 rowspan、colspan 或嵌套
  加唯一 id（如 id="name-header"、id="dept-header"） 在对应	上用空格分隔多个 id：headers="name-header dept-header" 不要省略引号，也不要写成 headers="name-header,dept-header"（逗号是非法分隔符） 真正难的不是写对语法，而是每次写	时都停下来想清楚：它是否参与了某个数据单元格的语义定义？如果是，就得被纳入 headers 关联链。

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