headers属性必须配合th的id才能生效，否则无效；常见错误包括id缺失、大小写不一致、含空格非法、动态渲染未挂载、headers用逗号或引号分隔、漏写id及顺序影响播报连贯性。

headers属性必须配th的id才能生效

写了headers="year q1 beijing"却没效果？八成是根本没设id，或者id值拼写不一致。它只认id属性，不看class、不读文本内容、不靠位置推断——哪怕2024年Q1视觉上就在那，没id="q1"就等于不存在。

常见错误包括：

• 2024年配headers="year"（大小写错）
• Q1（id含空格非法，浏览器直接忽略）
• 动态渲染时还没挂载，已输出（首次无障碍树无关联）

  多级表头必须用空格分隔多个id

  一个同时归属「年份 + 季度 + 地区」，headers值必须是"year q1 beijing"这样的空格分隔字符串。浏览器只把空格当分隔符，其他写法全无效：

  • headers="year,q1,beijing" → 解析失败，只当一个ID查找
  • headers=""year" "q1" "beijing" → 引号被当作ID字符的一部分，查不到目标
  • 漏掉任一id（比如只写"year q1"而漏了beijing）→ 屏幕阅读器只读出部分上下文
  • 顺序影响播报：虽然headers="q1 year beijing"和headers="year q1 beijing"都能匹配成功，但NVDA/VoiceOver会严格按空格分隔顺序依次读出每个文本

    父子表头别在td里重复写父级id

    多层表头本质是语义链，不是并列拼接。例如「季度」下分「Q1/Q2」，正确做法是逐级建立关联：

    • 顶层：季度
    • 中间层：Q1（显式声明它属于“季度”）
    • 数据单元格：120（只直接关联q1，语义链自动成立）

    不要写headers="quarter q1"：这会让读屏器重复读“季度 Q1 120,Q1 Q1 120”，造成冗余和混淆。父级表头的语义已通过中间层headers传递，无需在数据层重复。

    

    HTML Text Extract

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

    下载

    headers和scope不能混用

    headers和scope同时存在时，headers完全覆盖scope。WAI-ARIA规范明确规定：只要上有headers，scope就被完全忽略。这不是互补，而是替代。

    混用只会增加冗余，还容易误导调试方向。调试时打开 Chrome DevTools 的 Accessibility 面板，检查 “Related headers” 是否列出全部预期id。重复id或缺失id会导致整个headers绑定静默失效，退化为无关联状态。

    真正容易被跳过的细节是：headers不是“写完就有效”，它依赖完整的 DOM 结构可达性——id写错一个字母、被条件渲染漏掉、服务端与客户端渲染时机不同，都可能导致首次加载时语义链断裂。

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