Windows Narrator screen reader announces the word cloud SVG element as a decorative image
kborchers opened this issue · comments
It would be great, either through some option or other method, to be able to customize the attributes on the SVG element and the text elements inside of the SVG that is created to better accommodate screen readers and other assistive technology through ARIA roles and other attributes.
Hey @kborchers, I think this could be customizable and set. I'm not familiar with ARIA requirements, so can you point me to the minimal amount of customizations required to specify the SVG attributes? Is this good on just the main SVG node?
@chrisrzhou so sorry for my delayed response! I saw your comment and then totally forgot to circle back to this and respond.
This is sort of tough to answer as depending on the use case, the requirements could be different. For example, in our specific use case, we would like to present the word cloud to a screen reader as a list. In that case, we would need to be able to add attributes to both the SVG node as well as the child text nodes. On the SVG node we would need to add role="list" and on the text nodes we would need to add role="listitem".
That said, perhaps just adding the ability to specify a role attribute for the SVG node and optionally another role attribute for the text nodes, I imagine that could cover most use cases. If someone just wants the word cloud presented as an image, they could just give it role="img" at the SVG node and no roles on the text nodes and they would likely be ok though in that case they would probably also want to have a aria-label="Some description of the image" on the SVG node.
I'm starting to ramble but if you have additional questions please let me know and I would be happy to try and answer them more quickly this time.
Thanks!
This shouldn't be hard, and it sounds like we would just like to add properties to svg and text nodes. I can take a look at this soon.
@kborchers, the latest changes in main has this implemented in options.textAttributes and options.svgAttributes. The docs (options.mdx) cover an example on this.
I'll release a package after #54 and #55 are merged as well.
Now available in v1.2.5: https://codesandbox.io/s/angry-payne-guqg8?file=/src/App.tsx
Closing the issue and thanks for the suggestion!
Awesome, thanks @chrisrzhou! We'll update to 1.2.5 ASAP!