Web Accessibility - Screen Reader reads HTML element differently on mouse hover and on tabbing

Question

Screen Reader reads HTML element like a button differently on mouse over and on tab. When mouse over, it reads "My super button". While tabbing, it reads "Button my super button".

<button aria-label="My super button">Super</button>

How can I make them same as "My super button"?

I am using NVDA as a Screen Reader from https://www.nvaccess.org/

Answer 1

This is expected behaviour.

For someone who is using a screen reader in conjunction with a mouse it is assumed they have some vision (ie they are using a screen magnifier in conjunction with screen reader software) so the additional 'button' at the beginning is not necessary as they already visually know it is a button.

The idea of a screen reader is to be as succinct as possible (get the most information relayed in the shortest amount of time) so this behaviour is desirable.

For someone using a keyboard it is assumed that they are entirely reliant on the screen reader for information so indicating the fact you have a button selected is essential.

It does raise a good question on whether we should assume anything about how someone uses a screen reader but that is a whole other debate (ie what if someone has a cognitive disability and uses a screen reader to reassure them of what they are pressing).

There possibly could be a random setting someone that I can't find (I have looked just now) that allows the behaviour to be identical but I can't find it.