Making an svg logo accessible

• #accessibility
• #HTML

Introduction

I recently created a website template with Astro that has a great tool for highlighting accessibility issues. I added an anchor tag containing a pseudo company svg logo. The accessibility checker did not appreciate this.

Here is the orginal code that raised the issue.

<a href='/'>
 <svg
  xmlns='http://www.w3.org/2000/svg'
  width='24'
  height='24'
  fill='currentColor'
  class='bi bi-floppy'
  viewBox='0 0 16 16'
 >
 <path ... ></path>
 <path ... ></path>
 </svg>
</a>

Solution to make an svg logo accessible

Add to the svg attributes an aria-labelledby and role. The aria-labelledby attributes are then mirrored as id names in the title and desc tags respectively. Within these tags you need to provide descriptive text.

<a href='/'>
 <svg
  xmlns='http://www.w3.org/2000/svg'
  width='24'
  height='24'
  fill='currentColor'
  class='bi bi-floppy'
  viewBox='0 0 16 16'

  aria-labelledby='logoTitle logoDesc'
  role='img'
 >
 <title id='logoTitle'>Icon linked to home page</title>
 <desc id='logoDesc'>An icon that links to the homepage</desc>

 <path ... ></path>
 <path ... ></path>
 </svg>
</a>

That’s it!

Thank you for stumbling across this website and for reading my blog post entitled Making an svg logo accessible