Breno Baptista

Marking Up Accessible SVGs

I highly recommend that you at least try once to use a screen reader to begin to understand how screen reader users navigate your website. Most operational systems come preinstalled with a screen reader.

Informational SVGs

Examples of informational SVGs

Add role='img' attribute and title tag as the first child of the SVG.

  • SVG: role='img' + <title>
  viewBox='0 0 512 512'
  <path d='M512 0C460.22 3.56 96.44 38.2 71.01 [...]' />

Decorative SVGs

These SVGs usually are placed within buttons and links or beside a text.

Examples of decorative SVGs

Add aria-hidden='true' attribute in the SVG tag. If you still want to have a tooltip, you can add a title tag as the first child of the SVG. Add aria-label='label here' attribute in the button or link tags.

  • Button/Link: aria-label='label here'
  • SVG: aria-hidden='true' + (optional) <title>
  aria-label='Contact me by email'
    viewBox='0 0 448 512'
    <title>Contact me by email</title>
    <path d='M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 [...]' />

Low-poly portrait of Breno Baptista

Breno Baptista is a software engineer who likes to explore new things every day. He is interested in Linux, open-source software, digital privacy and front-end development.