angular-svg-round-progressbar
angular-svg-round-progressbar copied to clipboard
ARIA progressbar nodes must have an accessible name
Issue
When running Deque's aXe DevTools I receive the error:
ARIA progressbar nodes must have an accessible name
Fix at least one (1) of these issues:
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute
https://dequeuniversity.com/rules/axe/4.4/aria-progressbar-name?application=AxeChrome
Solution
Please provide an @input
for at least one of the following:
- aria-label
- aria-labelledby
- title
Due to the accessibility issues with the title
attribute for mobile and keyboard users. A strong preference for aria-label
and aria-labeledby
.
It would be difficult to set an aria-label
or aria-labelledby
automatically from inside the library since it can't know what context the component is used in. You can set the aria-label
on the round-progress
element yourself.