How to make SVG elements accessible (in React)?

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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.