Der NVDA-Bildschirmleser kann visuell verborgenen Text nicht lesen

Question

Der unten erwähnte Code ist Teil einer Tabelle, in der ich etwas Text anzeigen und etwas Text visuell ausblenden möchte, aber der visuell ausgeblendete Text wird beim Mouseover nicht vom Bildschirmleser erfasst. Ich verwende Bootstrap 5.

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

Der Bildschirmleser liest den Akku nicht, und selbst wenn ich die Klasse visual-hidden entferne, liest er die beiden Texte einzeln statt zusammen.

Answer 1

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

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

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

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

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

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

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