coderitual/bounty

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.

Thanks @vaxul for raising this. I agree with you, component should support providing aria label. I am open for taking PR for this.