angulardart/angular_components

material-progress: Accessibility with Screen Readers like JAWS

mandazi opened this issue · 1 comments

mandazi commented

In the material-progress HTML there are ARIA tags but screen readers like JAWS simply say the number. I would like to add the text "percent" so the screen reader would pronounce "70 percent" as an example.

[attr.aria-valuenow]="ariaValueNow"

Source: https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_progress/material_progress.html

The screen reader is reading that when the value changes. So it is saying "10" then "20" then etc. I would like it to say "10 percent" then "20 percent" then "30 percent".

What is the best way to accomplish this with the existing code?

Reference documentation on progress bar and ARIA tags: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

mandazi commented

So I was able to come up with a workaround using the aria-live tag on a label outside of the progress bar. The screen reader still announces just the number, but now it announces the label with the percent.

Still doesn't solve the original issue, but if anyone is looking for a workaround.