headers属性仅识别同table内真实存在的th元素的id，非标准标签或动态插入的id均无效；必须确保th存在且id在初始渲染时已就位，多级表头需逐级绑定，跨table或动态渲染易导致语义断裂。

headers属性只认id，不认非标准表头元素

写了

headers="name">却没效果？大概率是那个“表头”根本不是<code><th>，而是<code><div>、<code><span>或<code><p>。HTML 规范明确限定：<code>headers只能引用同<code><table>内、真实存在的<code><th id="...">元素——其他任何标签，哪怕加了<code>role="columnheader"，只要没用<code><th>，就无法被<code>headers匹配。
<p>常见错误包括：<code><div id="name">姓名</div>配<code><td headers="name">→ 静默失效；<code><th class="header">姓名</th>配<code><td headers="name">→ 缺<code>id，照样断连。
<ul><li>必须把非标准结构先改造成语义正确的<code><th>：哪怕视觉上要隐藏，也保留<code><th id="name">，再用 CSS 控制显示
<li>如果实在不能改 DOM（比如第三方组件封装死），就别用<code>headers>，改用<code>aria-labelledby指向那个<code>div</code>的<code>id</code></code></code>
</li>
<li>
<code>aria-labelledby</code>和<code>headers</code>不能共存——后者会覆盖前者，选一个用到底</li>


<h3>跨<tbody>或跨<table>时headers完全失效
<p><code>headers</code>的作用域严格限定在**单个</p>
<pre class="brush:php;toolbar:false;">

内、且同一<tbody>/<code><thead>/<code><tfoot>分组中**。哪怕两个<code><tbody>视觉上是连续年份（如“2023年数据”“2024年数据”），它们内部的<code><th id="year">互不可见。 <p>典型翻车场景：<code><tbody id="2023"><th id="sales">销售额</th></tbody> <tbody id="2024"><td headers="sales">120</td></tbody>→ 读屏器根本找不到<code>sales，因为不在同一个<pre class="brush:php;toolbar:false;">&lt;tbody&gt;里。 &lt;ul&gt;&lt;li&gt;解决方案只有两个：合并成一个&lt;code&gt;&lt;tbody&gt;，或把重复表头复制一份到每个&lt;code&gt;&lt;tbody&gt;开头 &lt;li&gt;不要试图用 JS 动态补&lt;code&gt;id——无障碍树在初始渲染时构建，后续插入的&lt;code&gt;&lt;th id&gt;不会自动关联已存在的&lt;code&gt;&lt;td headers&gt; &lt;li&gt;如果表格由 React/Vue 渲染，确保&lt;code&gt;&lt;th id&gt;节点在&lt;code&gt;&lt;td headers&gt;挂载前已完成 commit &lt;h3&gt;多级嵌套表头必须逐级绑定，不能全塞进一个headers值&lt;/h3&gt; &lt;p&gt;比如有三层表头：“部门 → 小组 → 成员”，底层&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow artxards&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; rel=&quot;nofollow&quot; href=&quot;/xiazai/skill3458&quot; title=&quot;html-ppt-to-pdf&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg&quot; alt=&quot;html-ppt-to-pdf&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill3458&quot; title=&quot;html-ppt-to-pdf&quot; class=&quot;overflowclass&quot;&gt;html-ppt-to-pdf&lt;/a&gt; &lt;p class=&quot;overflowclass&quot;&gt;将使用 `&lt;section class=&quot;slide&quot;&gt;` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。&lt;/p&gt; &lt;/div&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill3458&quot; title=&quot;html-ppt-to-pdf&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;td&gt;不该写&lt;code&gt;headers=&quot;dept group member&quot;&gt;。这样会导致屏幕阅读器重复播报：“部门 部门，小组 小组，成员 成员”，语义冗余错乱。 &lt;p&gt;正确逻辑是建立语义链：&lt;code&gt;&lt;th id=&quot;dept&quot;&gt;部门&lt;/th&gt; → &lt;code&gt;&lt;th id=&quot;group&quot; headers=&quot;dept&quot;&gt;小组&lt;/th&gt; → &lt;code&gt;&lt;td headers=&quot;group&quot;&gt;张三&lt;/td&gt;。此时读屏器读出“小组 张三”，而“小组”本身已通过&lt;code&gt;headers=&quot;dept&quot;&gt;带出“部门”上下文。&lt;/code&gt;&lt;/code&gt;&lt;/code&gt;&lt;/code&gt;&lt;/p&gt; &lt;ul&gt;&lt;li&gt;数据单元格只直接关联它**正上方/左方最近一级**的&lt;code&gt;&lt;th id&gt;，父级由中间层&lt;code&gt;headers&lt;/code&gt;传递 &lt;li&gt;检查 Chrome DevTools 的 Accessibility 面板，看“Related headers”是否只列出预期的一个 ID（比如&lt;code&gt;group&lt;/code&gt;），而不是一堆重复项&lt;/li&gt; &lt;li&gt;如果用了&lt;code&gt;colspan&lt;/code&gt;或&lt;code&gt;rowspan&lt;/code&gt;，确保被跨区域内的每一列/行都对应有带&lt;code&gt;id&lt;/code&gt;的&lt;code&gt;&lt;th&gt;，否则空缺位置的&lt;code&gt;&lt;td&gt;会丢失语义 &lt;h3&gt;动态渲染时headers失效的真正原因不是JS慢，而是DOM时机错位&lt;/h3&gt; &lt;p&gt;React/Vue 表格中&lt;code&gt;headers&lt;/code&gt;首次不生效，90% 不是因为框架慢，而是&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;th id&gt;节点比&lt;code&gt;&lt;td headers&gt;晚进入 DOM 树。浏览器在解析 HTML 或首次挂载组件时就固化了无障碍关系，后续插入的&lt;code&gt;&lt;th&gt;不会触发重关联。 &lt;p&gt;例如 Vue 中：&lt;code&gt;&lt;td :headers=&quot;headerId&quot;&gt;在&lt;code&gt;mounted&lt;/code&gt;钩子前已渲染，但&lt;code&gt;&lt;th :id=&quot;headerId&quot;&gt;在&lt;code&gt;mounted&lt;/code&gt;里才赋值——这时&lt;code&gt;headers&lt;/code&gt;查无此 ID，静默失败。 &lt;ul&gt;&lt;li&gt;解决办法：把&lt;code&gt;&lt;th id&gt;的定义提前到模板顶层，或用&lt;code&gt;v-if&lt;/code&gt;确保它和&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;td&gt;一起挂载 &lt;li&gt;避免在&lt;code&gt;data里动态拼接&lt;code&gt;headers&lt;/code&gt;字符串，而应在计算属性中确保所有依赖&lt;code&gt;id&lt;/code&gt;已存在&lt;/code&gt; &lt;/li&gt; &lt;li&gt;调试时用&lt;code&gt;document.getElementById(&quot;xxx&quot;)&lt;/code&gt;手动验证——返回&lt;code&gt;null&lt;/code&gt;就说明还没挂载，别怪&lt;code&gt;headers&lt;/code&gt; &lt;/li&gt; 真正容易被忽略的是：&lt;code&gt;headers&lt;/code&gt;不是“声明即生效”的属性，它依赖的是**渲染完成瞬间的 DOM 快照**。哪怕一秒后所有 ID 都齐全，只要初始快照缺失，语义就永久断裂。&lt;/td&gt;</pre> </th>