Accessibility
vaxul opened this issue · 1 comments
vaxul commented
Hi, I was looking for a library like this and test it out.
I found out, it doesn't handle screen readers. NVDA with Windows would announce the following text for the basic example:
bounty
£ 0 1 2 3 4 5 6 7 8 9 0 0 1 2 3 4 5 6 7 8 9 0 0 1 2 3 4 5 6 7 8 9 0 , 0 1 2 3 4 5 6 7 8 9 0 0 1 2 3 4 5 6 7 8 9 0 0 1 2 3 4 5 6 7 8 9 0 . 0 1 2 3 4 5 6 7 8 9 0 0 1 2 3 4 5 6 7 8 9 0
Possible solution for this:
- add
aria-hidden="true"
to the inner<svg mask="...">
or wrap all in a single<g aria-hidden="true">
to hide the loose<text>
s for screen readers - add the example case add a
<desc>£144,167.60</desc>
to the outer SVG to announce the correct text to screen readers
For my project I have to hide the generated SVG for screen readers and show them the correct text.
coderitual commented
Thanks @vaxul for raising this. I agree with you, component should support providing aria label. I am open for taking PR for this.