gilbarbara/react-inlinesvg

Support for alt text and ARIA tags?

julianguyen opened this issue · 6 comments

julianguyen commented

I want to add alt text and ARIA tags to my SVGs, is this supported? If not, can it be? Accessibility is important :D

gilbarbara commented

feel free to submit a pull request

pfarnach commented

@julianguyen I had the same thought. It seems like you can edit the SVGs directly to make them a11y-friendly:
https://css-tricks.com/accessible-svgs/#article-header-id-6

  • 👍1
dirtyhenry commented

I started looking into how to implement this issue.

A good place could be within processSVG but about that, I had a question: how come SVG processing is done via regular expressions based substitutions as opposed to creating a DOM element from the SVG? Performance reasons? Compatibility reasons?

  • 👍1
nickmccurdy commented

I wrapped this library with a span that has the aria-label prop: https://github.com/MyCryptoHQ/ui/blob/master/src/atoms/Icon/Icon.tsx#L77

Also this seems like a duplicate of #105 which is more general

danpoq commented

A solution to add attributes or transform the SVG has been released in 0.8.4 🎉

gilbarbara commented

Hey

There is a new version with support for prop spreading that will work with ARIA
Can you please try it? npm i react-inlinesvg@next
There are a few changes in props, you can check it here