I am developing a React app using a bunch of SVG images/icons. They don't have visible texts but I want to show some tooltips on hover. What attributes and sub-elements should an accessible SVG element/component have? What is the React-friendly usage of SVGs?

CodePudding user response：

Based on this answer from a similar question, you can use the SVG <title> element. But if you prefer a more react friendly way, I suggest you use an external library like react-svg-tooltip.

CodePudding user response：

While I agree with the mention of the previous post, both it and the previous answer are incomplete from my perspective. To truly maximize accessibility of SVG powered components, I recommend <title> and <desc>. Search engines, namely Google, will soon come to recognize that the description tag is also important in many cases.

This is from the documentation of <desc>:

The element provides an accessible, long-text description of any SVG container element or graphics element.

CodePudding user response：

Make sure your "widgets" are keyboard accessible by setting tabindex to 0. Also check if they have proper roles. You can use the Accessibility Tree of your browser's dev tools.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles