Skip to content
This repository has been archived by the owner on May 20, 2023. It is now read-only.

material-progress: Accessibility with Screen Readers like JAWS #459

Open
mandazi opened this issue Feb 3, 2020 · 1 comment
Open

material-progress: Accessibility with Screen Readers like JAWS #459

mandazi opened this issue Feb 3, 2020 · 1 comment

Comments

@mandazi
Copy link

mandazi commented Feb 3, 2020

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
Copy link
Author

mandazi commented Feb 3, 2020

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant