Accessible SVG Link Icons

October 31, 2022

a11y

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='https://github.com/gathoni-k' 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="https://github.com/gathoni-k" 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>

or

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