如何让屏幕阅读器读取表格单元格（td）内的提示框（tooltip）？

问题分析 #

你当前用title属性搭配role="tooltip"的写法，多数屏幕阅读器确实不会自动读取title内容，尤其是表格单元格场景下，title属性的无障碍兼容性较差。

可行方案 #

方案1：使用aria-label属性 #

直接给td元素添加aria-label，屏幕阅读器会读取该属性内容，且不影响视觉显示：

<td aria-label="Hooray!"><strong>✓</strong></td>

方案2：视觉隐藏的辅助文本 #

如果需要更灵活的提示内容（比如多行或复杂文本），可在单元格内添加仅屏幕阅读器可见的隐藏文本：

<td>
  <strong>✓</strong>
  <span style="position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;">Hooray!</span>
</td>

这种方式通过CSS将辅助文本隐藏，仅对屏幕阅读器可见，兼容性最优。

方案3：aria-describedby关联描述文本 #

先定义隐藏的描述元素，再通过aria-describedby关联到目标单元格，适合重复使用相同提示内容的场景：

<td aria-describedby="tooltip1"><strong>✓</strong></td>
<span id="tooltip1" style="display:none;">Hooray!</span>

注意事项 #

• 不要依赖title属性做无障碍提示，它的屏幕阅读器支持度不一致，且仅鼠标悬停时显示，键盘用户无法感知。
• 提示内容要简洁准确，与单元格视觉内容对应。

内容的提问来源于stack exchange，提问作者newuser