Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility #76

Open
vaxul opened this issue May 10, 2021 · 1 comment
Open

Accessibility #76

vaxul opened this issue May 10, 2021 · 1 comment

Comments

@vaxul
Copy link

vaxul commented May 10, 2021

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

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

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

No branches or pull requests

2 participants