Accessible SVG Link Icons

October 31, 2022


Accessible SVG icons are tricky. For standalone SVG icons with a purpose, give them a role, if they are purely decorative, hide them, same goes for SVGs inside links.

For SVGs used as images

Hide the image from screen readers and give the anchor tag a title.

<a href='' title='Github' target={"_blank"} rel="noreferrer" className={styles.button}> <img src='./github.svg' alt='Github' aria-hidden="true" className={styles.img} width="16" height="16"/> </a>

For SVGs used inline

<a href="" title="GitHub"> <svg aria-hidden="true" ... > <!-- contents of the SVG image --> </svg> </a>

Inline SVG(not links)

<svg role="img" aria-label="Github"> <!-- contents of the SVG image --> </svg>


<svg role="img" ...> <title>GitHub</title> <!-- contents of the SVG image --> </svg>