NVDA屏幕阅读器无法读取视觉隐藏文本求助（Bootstrap5）

问题根源 #

1. 原代码里两个独立的<span>会被屏幕阅读器判定为分离的文本节点，导致"29%"和"Battery"被拆分朗读。
2. 带visually-hidden类的<span>因不在可视区域，鼠标悬停时无法被NVDA捕捉到，自然读不到里面的内容。

解决方案 #

方案1：合并文本容器（保留视觉隐藏类）

把显示文本和视觉隐藏文本放在同一个语义容器内，让屏幕阅读器将其识别为连贯内容，同时鼠标悬停整个单元格时能读取完整信息：

<td class="col_featured">
  29% <span class="visually-hidden">Battery</span>
</td>

不需要额外嵌套<span>，单元格本身就能作为容器，视觉隐藏的文本会被屏幕阅读器读取，同时不影响页面视觉展示。

方案2：使用aria-label（更简洁）

直接通过单元格的aria-label属性提供完整可读文本，视觉上只展示必要内容：

<td class="col_featured" aria-label="29% Battery">
  29%
</td>

这种方式不需要额外的视觉隐藏元素，NVDA在焦点触发或鼠标悬停时，会直接读取aria-label里的完整内容，确保连贯朗读。

关键提示 #

• Bootstrap的visually-hidden类本身符合无障碍标准，问题出在元素拆分导致屏幕阅读器无法连贯解析内容。
• 要保证需要连贯读取的文本处于同一语义块内，避免拆分成多个独立内联元素。

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