NVDA screen reader cannot read visually hidden text

Question

The code mentioned below is a part of a table where I want to show some text and want to visually hide some text, but the visually hidden text will not be picked up by the screen reader on mouseover. I'm using bootstrap 5.

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

The screen reader does not read the battery, and even if I remove the visual hidden class, it reads the two texts separately, not together.

Answer 1

If you use a mouse, it implies that you have good or poor vision, not blindness.

In this case, it's more or less assumed that you're using a screen reader, not because you can't see the screen normally, but simply because you can't see clearly enough and/or can't read the text. Text only. Assuming you can distinguish everything else pretty well.

This makes screen reading software useful not only for blind people, but also for people with low vision and even people with dyslexia. Blind people usually never use a mouse except in very special circumstances or as a last resort when something is not very accessible.

If we assume you have sight, it's easy to understand why visually hidden text is not read. When using the mouse, only what is actually visible under the cursor is read. It would be weird to read about something unseen, right?

Especially for your case, assuming you see clearly enough, you can understand what that 29% means through some visual clue (such as the battery icon), even though you may not be able to read it accurately (in other words, you can see It's clear enough to guess that it represents the current battery load, you just need the screen reader to tell you that it is indeed 29%, not 27 or 28).

For those who cannot see the visual clues, the visually hidden "battery" of words must be there. In other words, this only works for people who are completely blind and cannot guess its meaning by other means.

To summarize, visually hidden text is only read when navigating using the keyboard and not when using the mouse, which is completely normal if you think about it.