aria-details 已被 W3C 废弃且所有主流浏览器和读屏器均不支持，对表格数据无效；应改用 aria-describedby 指向真实、可访问的描述节点，并配合语义化 HTML 结构提升可访问性。
aria-details 不该用在表格数据上
直接说结论：aria-details 在当前所有主流浏览器和读屏器中均未被支持，W3C 规范也已将其标记为“废弃（deprecated）”，它不能为表格数据提供任何有效说明。你加了，屏幕阅读器不会朗读，开发者工具里也查不到行为反馈——等于白写。
替代方案：用 aria-describedby 指向真实存在的描述节点
真正能生效、被 NVDA/VoiceOver 实际读出的，是 aria-describedby。它要求目标元素必须真实存在、可访问、且不被隐藏（aria-hidden="true" 会阻断链路）。
- 把详细说明文字放在页面某处，赋予唯一 ID，例如：
<p id="desc-age">年龄字段表示用户注册时填写的周岁，不含小数</p> - 在对应
<td>或<th>上绑定：<td aria-describedby="desc-age">28</td> - 确保该描述段落不被
display: none或visibility: hidden隐藏——可用position: absolute; left: -9999px视觉隐藏但保留可访问性 - 不要跨表头复用同一个 ID；每个需要独立说明的单元格，应配独立描述节点
表格场景下更推荐的语义化做法
比起硬塞描述性文本，优先利用原生语义和结构降低理解门槛：
- 用
<caption>给整张表加标题，例如：<caption>2024 年用户注册信息统计（含字段定义说明）</caption> - 在
<thead>中用<th scope="col">明确列意图，必要时嵌套简短说明：<th scope="col">年龄 <small aria-hidden="true">(周岁)</small></th>，再配合aria-label="年龄（周岁）"让读屏器读全 - 对整列通用说明，可在
<th>内用aria-details的替代思路——实际是aria-describedby指向一个<div role="note">区域，而非单个<td> - 避免把长描述塞进
title属性——它只在悬停时出现，对键盘/读屏用户无效
容易被忽略的兼容性细节
aria-describedby 的链路依赖 DOM 顺序和可访问树完整性：
立即学习“前端免费学习笔记（深入）”；
- 目标 ID 必须在页面加载完成时就存在；动态插入的描述节点，需确保插入后立即触发
aria-describedby关联（部分旧版 JAWS 会缓存初始状态） - 若描述节点被包裹在
aria-hidden="true"容器内，即使自身没设该属性，也会被继承屏蔽——检查父级是否意外加了aria-hidden - 多个 ID 可用空格分隔：
aria-describedby="desc-age desc-unit"，但读屏器朗读顺序取决于 DOM 中节点出现顺序，不是书写顺序 - 表格行内频繁使用
aria-describedby会导致朗读冗长，建议仅对真正需要额外解释的非常规字段启用
