Accessibility in inline SVGs

SVG (Scalable Vector Graphic) is one of the preferred formats for displaying graphic content on the web currently. Also, using them inline has been progressively more popular than using the img tag.

So let’s talk about making it accessible and put aside the misconceptions.

Accessibility basics

"undefined" anchor link

Accessibility doesn’t mean adding ARIA (set of roles and attributes that make the web content more accessible) to everything. Virtue is in the right measure:

• Adding too much creates noise. As it is said “No ARIA is better than bad ARIA”.

• Not putting what is necessary will mean that not everyone will be able to access the full content of our website.

Accessibility in graphics

"undefined" anchor link

To decide what ARIA we should add, we are going to answer several questions:

• Is only decorative and does not provide any information?

  Remove or don’t add the title tag inside the SVG, it will add noise in the Accessibility API. In most of the cases this is enough.

  <svg
    height="24px"
    width="24px"
    viewBox="0 0 16 16"
  >
    <path
      fill="currentColor"
      d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
    ></path>
  </svg>

• Is a relevant image or provide information?

  Include role="img" in it. This will ensure assistive technologies (AT) handle the SVG as an image.

  The first ARIA you can add is a title tag. Add it as the first child in the svg element.

  <svg
    role="img"
    height="24px"
    width="24px"
    viewBox="0 0 16 16"
  >
    <title>Github</title>
    <path
      fill="currentColor"
      d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
    ></path>
  </svg>

  Optionally, you can add a desc (description) tag. Only do it if a description is needed for understanding the SVG content.

  <svg
    role="img"
    height="24px"
    width="24px"
    viewBox="0 0 16 16"
  >
    <title>Github</title>
    <desc>Cat with cozy hands</desc>
    <path
      fill="currentColor"
      d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
    ></path>
  </svg>

• Is it inside an interactive element?

  Simply add accessibility on that interactive element.

  An aria-label is not the best option in these cases, so I suggest using a visually-hidden class:

  <a
    href="https://github.com/victor-lillo"
    target="_blank"
  >
    <span class="visually-hidden">Open repository</span>
    <svg
      height="24px"
      width="24px"
      viewBox="0 0 16 16"
    >
      <path
        fill="currentColor"
        d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
      ></path>
    </svg>
  </a>

Conclusion

"undefined" anchor link

Keep it simple, don’t try to reinvent the wheel. SVGs are graphic content, so treat them as images.

I hope you found this article useful.

Happy coding! 🚀