search

angulardart / angular_components

The official Material Design components for AngularDart. Used at Google in production apps.
https://pub.dev/packages/angular_components
372 stars 123 forks source link

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

Open mandazi opened 4 years ago

mandazi commented 4 years ago

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 4 years ago

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.