NVDA 屏幕阅读器无法读取视觉隐藏文本

Question

下面提到的代码是表格的一部分，其中想要显示一些文本并希望在视觉上隐藏一些文本，但屏幕阅读器不会通过鼠标悬停来拾取视觉上隐藏的文本。我正在使用 bootstrap 5。

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

屏幕阅读器不读取电池，即使我删除视觉隐藏类，它也会单独读取两个文本，而不是一起读取。

Answer 1

如果您使用鼠标，则暗示您视力良好或视力不佳，而不是失明。

在这种情况下，或多或少会假设您正在使用屏幕阅读器，并不是因为您通常看不到屏幕，而只是因为您看得不够清楚和/或无法阅读文本。 仅文本。 假设您能够很好地区分其余所有内容。

这使得屏幕阅读软件不仅对盲人有用，而且对视力不佳的人甚至还有阅读障碍的人都有用。 盲人通常从不使用鼠标，除非在非常特殊的情况下，或者当某些东西不太容易访问时作为最后的手段。

如果我们假设您有视力，那么就很容易理解为什么视觉上隐藏的文本不被阅读。 使用鼠标时，只会读取光标下真正可见的内容。读到看不见的东西会很奇怪，对吗？

特别是对于您的情况，假设您看得足够清楚，可以通过一些视觉线索（例如电池图标）理解这 29% 的含义，即使您可能无法准确读取它（换句话说，你看得很清楚，足以猜测它代表当前的电池负载，你只需要屏幕阅读器告诉你它确实是 29%，而不是 27 或 28)。

对于那些看不到视觉线索的人来说，视觉上隐藏的文字“电池”必须在那里。换句话说，这只适用于完全失明的人，他们无法通过其他方式猜测其含义。

总而言之，视觉上隐藏的文本仅在使用键盘导航时才会被读取，而在使用鼠标时不会被读取，如果您考虑一下，这是完全正常的。