htmlaccessibilitybootstrap-5screen-readersnvda

NVDA screen reader not readinng visually hidden text


Below mentioned code is part of table where want to display some text and want to keep visually hidden some text but screen reader is not picking up visually hidden text by Mouse hover. I am using bootstrap 5.

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

Screen reader not reading Battery and even If I remove visually-hidden class it is reading both text separately instead of together.


Solution

  • If you are using a mouse, it implicitly means that you are well sighted or partially sighted, not blind.

    In that case, it is more or less assumed that you are using a screen reader not because you can't see the screen in general, but only because you don't see well enough and/or have troubles reading the text. Only text. It is assumed that you can distinguish all the rest well enough.

    This makes the screen reading software useful and usable not only to blind, but also to partially sighted people, and also maybe for dyslexia. Blind people normally never use a mouse, except in very special circumstances, or as a last ressort when something isn't very accessible.

    If we assume that you have some sight, then it's pretty simple to understand why the visually hidden text isn't read. When using the mouse, only what's really visible under the cursor is read. It would be strange to read something invisible, right?

    IN particular for your case, it's assumed that you see well enough to understand what this 29% mean, by some visual clue, a battery icon for example, even if you may not be able to read it precisely (otherwise said, you see well enough to guess that it represent the current battery load, you just need the screen reader to tell you that it's indeed 29%, not 27 or 28).

    The visually hidden text "Battery" has to be there for those who can't see that visual clue. Otherwise said, it's only for completely blind people, who can't guess the meaning by another mean.

    To wrap it up, visually hidden text is only read when navigating with the keyboard, it isn't read when using the mouse, and that's perfectly normal if you think about it.