Accessible SVG
Add <title> and <desc> inside SVG for screen readers. Use role="img" for meaningful icons and aria-hidden="true" for decorative ones.
HTML
Intermediate
3 min read
Accessible SVG
Example
<!-- Meaningful icon -->
<svg role="img" aria-labelledby="star-title"
width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<title id="star-title">5 out of 5 star rating</title>
<path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="gold"/>
</svg>
<!-- Decorative icon -->
<svg aria-hidden="true" focusable="false" width="20" height="20">
<use href="#icon-decoration"/>
</svg> Pro Tip
Decorative SVGs should have aria-hidden="true" and focusable="false".