最稳妥方案是使用 class="visually-hidden" 配合 aria-hidden="false"，并用 aria-describedby 关联图表与隐藏表格，确保屏幕阅读器可读且保留语义结构。

HTML表格里藏数据但不显示，又得让屏幕阅读器读到

用 aria-hidden="false" + class="visually-hidden" 组合最稳妥。单纯设 display: none 或 visibility: hidden 会让屏幕阅读器彻底跳过，数据就真“消失”了。

常见错误是只加 CSS 隐藏却忘了声明可访问性状态，结果视障用户和 SEO 都收不到数据。实际场景比如：图表下方附原始数据表（供辅助技术解析），但主视觉只展示 SVG 或 Canvas 图形。

• 推荐写法：

  月份	1月
  销售额	12000

• CSS 中 .visually-hidden 应用标准“视觉隐藏但保留可访问性”样式（移出视口 + 裁剪 + 屏幕阅读器强制读取）
• 别用 hidden 属性——它等价于 aria-hidden="true"，会主动屏蔽读屏

用 aria-describedby 关联图表和隐藏表格

光藏好表格还不够，得告诉屏幕阅读器“这张图的数据在哪”。直接在 或 上挂 aria-describedby，指向表格的 id。

否则即使表格可访问，用户也无法建立“图表—数据”的语义关联，辅助技术只会孤立读图或孤立读表。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 示例：

  <svg aria-describedby="data-table-2024">...</svg>

  ...
• 注意：aria-describedby 值必须严格匹配目标元素的 id，大小写、连字符都不能错
• 如果图表是动态渲染的（如 D3.js），记得在插入 DOM 后同步设置该属性，不然初始状态不生效

role="presentation" 别乱用在表格上

有人想“隐藏表格结构只留数据”，给

加 role="presentation" —— 这会让整个表格语义坍塌，屏幕阅读器当普通 div 读，表头、行列关系全丢，数据变成一串无结构文本。

真正需要的是“保留表格语义 + 隐藏视觉呈现”，不是抹掉语义。除非你确定不需要任何表格语义（比如纯装饰性网格），否则别碰这个 role。

• role="presentation" 适合
  模拟表格布局时“取消误报的表格角色”
• 对真实

，应保持默认 role，靠 CSS 和 aria-hidden 控制显隐

测试方法：用 NVDA 或 VoiceOver 打开页面，听它是否正确播报“表格，2 行 2 列”，而不是“div，包含文本…”

导出 CSV 或打印时怎么把隐藏表格一起带上

浏览器默认打印或 JS 导出逻辑通常忽略 display: none 元素，但 .visually-hidden 类一般用 position: absolute; clip: rect(...) 实现，这类元素仍存在于渲染树中，能被 window.print() 或 document.querySelectorAll('table') 捕获。

关键点在于：隐藏方式决定了能否被程序读取。用绝对定位裁剪比 display:none 更“诚实”。

• 导出脚本里别过滤 .visually-hidden，它只是视觉层干预
• 打印样式表（@media print）里可以单独重置 .visually-hidden 为 display: table，确保打印版可见
• 如果用了 display: none，就得在导出前临时 removeAttribute('style') 或切换 class，容易漏或出竞态

事情说清了就结束。最常被绕过的其实是 aria-describedby 的 ID 匹配和 visually-hidden 的 CSS 实现细节——这两个地方一错，前面所有努力就白搭。