最稳妥方案是使用 class="visually-hidden" 配合 aria-hidden="false"，并用 aria-describedby 关联图表与隐藏表格，确保屏幕阅读器可读且保留语义结构。
HTML表格里藏数据但不显示，又得让屏幕阅读器读到
用 aria-hidden="false" + class="visually-hidden" 组合最稳妥。单纯设 display: none 或 visibility: hidden 会让屏幕阅读器彻底跳过，数据就真“消失”了。
常见错误是只加 CSS 隐藏却忘了声明可访问性状态，结果视障用户和 SEO 都收不到数据。实际场景比如：图表下方附原始数据表（供辅助技术解析），但主视觉只展示 SVG 或 Canvas 图形。
- 推荐写法：
<table class="visually-hidden" aria-hidden="false"> <tr><th>月份</th><td>1月</td></tr> <tr><th>销售额</th><td>12000</td></tr> </table>
- CSS 中
.visually-hidden应用标准“视觉隐藏但保留可访问性”样式（移出视口 + 裁剪 + 屏幕阅读器强制读取） - 别用
hidden属性——它等价于aria-hidden="true"，会主动屏蔽读屏
用 aria-describedby 关联图表和隐藏表格
光藏好表格还不够，得告诉屏幕阅读器“这张图的数据在哪”。直接在 <svg></svg> 或 <canvas></canvas> 上挂 aria-describedby，指向表格的 id。
否则即使表格可访问，用户也无法建立“图表—数据”的语义关联，辅助技术只会孤立读图或孤立读表。
立即学习“前端免费学习笔记（深入）”；
- 示例：
<svg aria-describedby="data-table-2024">...</svg> <table id="data-table-2024" class="visually-hidden" aria-hidden="false">...</table>
- 注意：
aria-describedby值必须严格匹配目标元素的id，大小写、连字符都不能错 - 如果图表是动态渲染的（如 D3.js），记得在插入 DOM 后同步设置该属性，不然初始状态不生效
role="presentation" 别乱用在表格上
有人想“隐藏表格结构只留数据”，给 <table> 加 <code>role="presentation" —— 这会让整个表格语义坍塌，屏幕阅读器当普通 div 读，表头、行列关系全丢，数据变成一串无结构文本。
真正需要的是“保留表格语义 + 隐藏视觉呈现”，不是抹掉语义。除非你确定不需要任何表格语义（比如纯装饰性网格），否则别碰这个 role。
-
role="presentation"适合<div> 模拟表格布局时“取消误报的表格角色” <li>对真实 <code><table>，应保持默认 role，靠 CSS 和 <code>aria-hidden控制显隐 - 测试方法：用 NVDA 或 VoiceOver 打开页面，听它是否正确播报“表格，2 行 2 列”，而不是“div，包含文本…”
- 导出脚本里别过滤
.visually-hidden，它只是视觉层干预 - 打印样式表（
@media print）里可以单独重置.visually-hidden为display: table，确保打印版可见 - 如果用了
display: none，就得在导出前临时removeAttribute('style')或切换 class，容易漏或出竞态
导出 CSV 或打印时怎么把隐藏表格一起带上
浏览器默认打印或 JS 导出逻辑通常忽略 display: none 元素，但 .visually-hidden 类一般用 position: absolute; clip: rect(...) 实现，这类元素仍存在于渲染树中，能被 window.print() 或 document.querySelectorAll('table') 捕获。
关键点在于：隐藏方式决定了能否被程序读取。用绝对定位裁剪比 display:none 更“诚实”。
