axis 属性在 HTML5 中被正式弃用，因无浏览器或屏幕阅读器实际依赖它，且值无校验、易出错；现代可访问性应使用 headers 或 aria-labelledby 明确表头关联。
axis 属性在 <td> 中已废弃，不推荐用于新项目，也不影响渲染或功能逻辑。 它曾用于辅助技术语义分类，但现代可访问性实践已转向 scope、headers 和 ARIA（如 aria-labelledby）来明确表头与数据单元格的关联。
为什么 axis 不再被使用
该属性在 HTML5 中被正式弃用，W3C 明确不鼓励使用。主流浏览器虽仍“支持”（即不报错、可读取），但：
-
axis值无强制校验，拼写错误或空格不一致（如"sales, q1"vs"sales,q1"）会导致辅助技术完全忽略 - 没有浏览器或屏幕阅读器实际依赖
axis做单元格映射；它们优先解析scope和headers - HTML 检查工具（如 axe、WAVE）会将
axis标记为“过时属性”，影响无障碍审计结果
headers 属性才是 <td> 关联复杂表头的正确方式
当表头跨行跨列（如多级表头、合并单元格），headers 是唯一能显式绑定多个 <th> ID 的标准属性。
实操要点：
- 每个参与关联的
<th>必须有唯一id（不能仅靠colspan/rowspan推断） -
<td headers="id1 id2 id3">中 ID 顺序无关，但必须用空格分隔（不是逗号） - 若表头含动态内容（如 React 渲染），需确保
id在服务端/客户端稳定生成，避免重复或缺失
示例：
<table>
<thead>
<tr><th id="year">年份</th><th id="region">地区</th></tr>
<tr><th id="q1" headers="year">Q1</th><th id="q2" headers="year">Q2</th></tr>
</thead>
<tbody>
<tr><td headers="year q1">2025</td><td headers="year q2">2026</td></tr>
</tbody>
</table>
遇到多层嵌套表头时，优先用 ARIA 而非尝试复活 axis
当 headers 难以维护（如模板化组件、表头结构频繁变动），更健壮的做法是用 aria-labelledby：
-
aria-labelledby支持跨<thead>/<tbody>引用，且可指向非<th>元素（如带role="columnheader"的<div>） - 它不依赖表格 DOM 结构，更适合现代框架（Vue/React）中虚拟滚动或动态列场景
- 注意：不要同时设
headers和aria-labelledby，屏幕阅读器可能只取后者，造成冗余或冲突
真正容易被忽略的是：即使你写了 axis，只要没配 headers 或 ARIA，复杂表头在 VoiceOver、NVDA 上基本无法被正确朗读——这不是兼容性问题，而是语义链根本没建立。动手前先检查 <th> 是否有 id，再决定用 headers 还是 aria-labelledby。
