aria-label 不能用于 <table> 元素，因其被 ARIA 规范禁止且被屏幕阅读器忽略；正确方式是使用 <caption> 或 aria-labelledby 提供可访问名称。
aria-label 不能用于 <table> 元素来添加表格描述——它会完全失效，屏幕阅读器直接忽略。
为什么 aria-label 在 <table> 上不生效
HTML 表格本身是语义化容器，但 aria-label 只对**可交互、有隐式或显式角色（如 button、link、checkbox）的元素**起作用。<table> 默认角色是 table，而 ARIA 规范明确禁止在 table、tr、td 等原生表格元素上使用 aria-label。浏览器和读屏器会静默丢弃该属性，无障碍树中看不到任何名称。
正确做法：用 caption 或 aria-labelledby
给无标题表格加描述，必须走语义化路径：
-
<caption>是首选：放在<table>内部最上方，天然成为表格的可访问名称，支持翻译、SEO 和所有读屏器，例如：<table> <caption>2024 年各地区销售完成率</caption> <thead>...</thead> <tbody>...</tbody> </table>
- 若需复用页面中已有的可见文本（比如上方的
<h2>），用aria-labelledby：确保目标元素存在、未被隐藏，且 ID 拼写完全一致，例如：<h2 id="sales-summary">销售汇总</h2> <table aria-labelledby="sales-summary"> <tbody>...</tbody> </table>
- 禁用
aria-label+<table>组合：Lighthouse 和 axe 会报错，且实测 NVDA/VoiceOver 完全不读
当 caption 不可用时的兜底方案
某些 CMS 或组件库限制了 <caption> 使用（比如强制渲染为 div 布局），此时应：
立即学习“前端免费学习笔记（深入）”；
- 改用语义化替代结构：用
<role="table">包裹自定义容器，并显式加aria-label—— 但仅限于你完全控制 DOM 且放弃原生<table>语义的场景 - 绝对避免在原生
<table>上套div再加aria-label：这破坏表格语义层级，读屏器可能将整张表识别为普通容器而非表格 - 验证方式：打开 Chrome DevTools → Elements 面板 → 右键表格节点 → “Inspect Accessibility Tree”，确认 “Name” 字段是否显示预期文本
真正容易被忽略的是：即使写了 aria-labelledby，只要目标 id 对应的元素被 display: none、aria-hidden="true" 或 JS 动态移除，整个表格就对读屏器“失联”——不会报错，也不会 fallback 到其他文本，就是彻底静音。
