Skip to content

Accessibility #76

@vaxul

Description

@vaxul

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions