复杂表头必须用id+headers显式绑定，禁用scope；多级表头需拆分为多个独立table，每个配aria-labelledby和完整thead/tbody，确保无障碍合规。
复杂表头不能靠 scope 硬撑，必须用 id + headers 显式绑定，否则屏幕阅读器读到“85”时根本不知道这是 Biology 的 Practical 还是 Theory 成绩。
多级表头必须禁用 scope，改用 id + headers
当出现 colspan、rowspan 或嵌套标题（如“Biology → Practical”）时，scope 会失效或被错误推断。辅助技术无法自动关联二级标题和具体数据单元格。
<th> 必须带唯一 <code>id，比如id="bio-prac"、id="chem-theory"<td> 的 <code>headers值是空格分隔的多个id，顺序即播报顺序（如headers="student bio-prac"）- 不要混用
scope和headers——一旦设了headers，scope就被忽略 - 避免给同一
<th> 设置多个 <code>id；每个id只能对应一个语义维度（学科、考核类型、年份等）scope="rowgroup"只在特定位置有效scope="rowgroup"不是万能分组标签，它只在<tbody> 内部、且作为该 <code><tbody> 的第一行时才被正确识别为“此标题管下面所有 <code><tr>”。放在 <code><thead> 或独立 <code><tr> 里毫无作用。 <ul><li>必须配合 <code><tbody> 使用，单独写 <code><th scope="rowgroup">Q1</th>在<tr> 里无效 <li>不支持嵌套 <code>scope="rowgroup"（如“Q1 → Jan”），这种场景应改用headers或直接拆表 - 旧版 JAWS 对
scope="rowgroup"支持不稳定，关键业务建议辅以aria-labelledby - 每个业务分组（如“Hospitalization”）封装为一个完整、自洽的
<table> <li>用 <code><section aria-labelledby="sec-id"></section>包裹，<section></section>必须配aria-labelledby指向内部<h2></h2>的 ID - 每个子表必须有
<caption></caption>（如<caption>Hospitalization cost breakdown</caption>），且<caption></caption>是<table> 的首个子元素 <li><code><th scope="row"> 和 <code><th scope="col"> 必须显式声明，漏掉会导致行列归属错乱 <p>最容易被忽略的是：动态渲染表格时，后端返回扁平数组，前端循环生成 <code><tr> 时经常忘记给首列 <code><th> 加 <code>scope，或误把scope="col"用在行标题上——这种错误在视觉上完全看不出来，但对屏幕阅读器用户就是信息黑洞。
含 3 层以上逻辑分组的表格，优先拆成多个独立 <table>
<p>医疗账单、保险条款、财务附注这类表格，强行维持单表结构会导致 <code>headers 维护爆炸、易出错，且多数屏幕阅读器导航体验差。WCAG 明确推荐「分表策略」为 AA 级合规首选。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
