如何让屏幕阅读器正确朗读表格单元格内的提示信息（tooltip）

通过为表格单元格（`

`）添加 `aria-label` 属性，可确保屏幕阅读器稳定、准确地播报提示文本，替代不可靠的 `title` 属性。

在 Web 可访问性实践中，原生 title 属性不被推荐用于传达关键语义信息，尤其在

等非交互元素中——多数屏幕阅读器（如 NVDA、JAWS、VoiceOver）默认忽略 title，或仅在特定焦点/悬停模式下低优先级触发，导致信息不可靠甚至完全丢失。

✅ 正确做法是使用 aria-label 显式声明可访问名称：

   ✓ 

该写法将使屏幕阅读器在聚焦或导航到该单元格时，直接朗读 “Hooray! Operation completed successfully.”，无需依赖鼠标悬停或额外交互。

⚠️ 注意事项：

• aria-label 会完全覆盖元素的可访问名称计算（即忽略其子内容文本），因此若单元格内已有可见文本（如 ✓），且该符号本身具有语义（如“成功”），建议结合 aria-labelledby 或视觉隐藏文本实现更精细控制；
• 避免在 role=”tooltip” 与 aria-label 混用： 不是合法的 tooltip 容器角色；role=”tooltip” 应仅用于动态显示、受控定位、关联触发元素的独立浮层（需配合 aria-describedby 和 aria-hidden 等属性），而非静态单元格；

• 若需兼顾视觉提示与无障碍，推荐使用 css 实现的视觉 tooltip + aria-label 分离语义：视觉层负责样式呈现，aria-label 专责语音输出。

总结：对于表格中需传达补充语义的单元格，aria-label 是最简洁、兼容性最佳、符合 WCAG 2.1 AA 标准的解决方案。它直击核心——为辅助技术提供明确、可预测、可编程的可访问名称。