Resolved: Screen reader reading out group when ever aria label is used

In this post, we will see how to resolve Screen reader reading out group when ever aria label is used

Question:

I am using the mac default screen reader.
I am expecting the screen reader to read the text and aria-label as is.
But instead it reads out group twice. It seems to read out group whenever aria-label is used.
But why? This is not a group and believe this is causing confusion for the person listening to it.
Anyway I can turn off the screen reader from saying group?
Tried adding role=’text’ which doesn’t make a difference.
This is the html
I am expecting it to read out:
Some text This used to cost $1000 now it costs 2000 some ending text.
But instead it reads out the following where it adds group twice.
Some text This used to cost, group $1000 now it costs group 2000 some ending text

Best Answer:

See “Practical Support: aria-label, aria-labelledby and aria-describedby“. The third last bullet point says:

Don’t use aria-label or aria-labelledby on a span or div unless its given a role.

In your case, there isn’t an appropriate role. But you can still get what you want by having screen reader text. This is text that is not visible but is read by a screen reader. You should continue to use the <strike> element (see Update below regarding <strike>) because it’s visually correct, but unfortunately the <strike> element doesn’t convey any semantics to the screen reader so you have to code that yourself.
The “sr-only” class is not a specially named class but it’s common to use that name for a class that visually hides text that is available for screen readers (sr). So “sr-only” means “screen reader only” text.
You can see an example of “sr-only” here, What is sr-only in Bootstrap 3?
Update: I neglected so point out that the <strike> element was deprecated in HTML5. The replacement is either <s> or <del>.

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com