aria-label会完全覆盖单元格的可见文本，屏幕阅读器只读取其指定内容；仅当可见文本不足以传达语义时才应使用，且需避免与aria-labelledby混用或误加在不该加的位置。

表格单元格加 aria-label 会覆盖可见文本吗

会，而且是完全覆盖。只要 aria-label 存在，屏幕阅读器就只读它指定的字符串，忽略 <td> 内所有子内容（包括 <code><strong>✓</strong>、图标、数字甚至空格）。这不是 bug，是规范行为。

• 比如 <td aria-label="操作成功">✓</td>，读出来就是“操作成功”，不会提“对勾”或“符号”
• 如果单元格本身有语义明确的可见文本（如“已发货”），再加 aria-label="订单已完成"，反而造成信息冗余或不一致
• 真正需要的是：当可见文本不足以传达完整语义时（例如仅用颜色/图标表示状态），才用 aria-label 补充——不是为了“锦上添花”，而是填补语义缺口

为什么不能给 加 role="tooltip" 配 aria-label

<td> 不是合法的 <code>role="tooltip" 容器。WAI-ARIA 规范明确要求 tooltip 必须是独立浮层，由触发元素通过 aria-describedby 关联，且需配合 aria-hidden、定位控制和焦点管理。把 role="tooltip" 直接写在 <td> 上，多数屏幕阅读器会忽略该 role，甚至导致整个单元格被跳过。 <ul> <li>错误写法：<code><td role="tooltip" aria-label="预计7月10日送达">7月10日</td>

正确做法：视觉 tooltip 用 CSS 实现（如 position: absolute + visibility: hidden），语音提示用 aria-label 单独提供，二者职责分离

若需动态提示（如悬停显示详情），应另建一个 <div role="tooltip"> 元素，用 <code>aria-describedby 指向它，而不是塞进 <td> <h3>表格中哪些单元格适合加 aria-label</h3> <p>只有两类情况真正需要：<strong>无可见文本但需传达语义</strong>，或<strong>可见文本严重歧义且无法修改 DOM</strong>。不是所有带图标的单元格都该加。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>✅ 适合：<code><td aria-label="删除此行数据"><button>?️</button></td>（按钮无文字）

✅ 适合：<td aria-label="等待审核，未开始处理">⏳</td>（仅用图标表示状态，无辅助文本）

❌ 不适合：<td aria-label="2026-07-06">2026-07-06</td>（日期本身已清晰，加了反而干扰）

❌ 不适合：<td aria-label="张三"><strong>张三</strong></td>（重复定义，且覆盖加粗样式语义）

React 或 Vue 里动态渲染表格时 aria-label 容易漏什么

框架的条件渲染和 props 合并逻辑会让 aria-label “悄悄消失”。它不像普通 HTML 属性那样稳定存在。

• JSX 中必须写成小写连字符：aria-label，不能写 ariaLabel（React 不识别驼峰）
• 条件赋值要小心：aria-label={status === 'done' ? '已完成' : undefined} → 属性会被彻底移除，不是设为空；想清空得显式写 aria-label=""
• 自定义组件封装表格单元格时，aria-label 必须透传到最终渲染的 <td> 或 <code><button></button> 上，不能只挂在包装 <div> 上 <li>服务端渲染（SSR）中若 <code>aria-label 值依赖客户端状态，首次渲染可能为空字符串，导致屏幕阅读器跳过该单元格
真实场景里最常出问题的，不是没加 aria-label，而是加在了不该加的地方、覆盖了本该朗读的可见文本、或者和 aria-labelledby 混用导致静默失效。验证时别只看 HTML 是否存在这个属性，得用 Chrome DevTools 的 Accessibility 面板检查「Name Computation」是否真指向了你预期的来源。