Accessibility when including SVGs directly

https://stackoverflow.com/questions/23129267

05-07-2023
|

Question

I have been using boilerplate .ir for sometime to replace text with images for logos and icons.

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  *text-indent: 100%;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

But now I would like to start using svgs for all my icons and logos and when using svgs as backgrounds or as <img> you can't control the innards of the svg ie i wouldn't be able to change a fill color.

So what I want to know is, what is the best way to include the svg while maintaining good SEO for titles and links?

Or is there any way of replacing text with an svg?

Or adding textual description like an alt tag or anything like that?

edit

I stated this was for SEO, but with hindsight, i'm thinking in terms of accessibility.

When including an svg image how would I describe what it is to a screen reader, in a similar way to the <img src="#" alt="image description"> or the .ir method above?

Solution

You can add a <desc> tag as the first element inside your SVG. Give it a unique id attribute and then add an aria-labelledby attribute to the SVG element itself with the value of this attribute the ID of the desc element.

This will work in all browsers and screen readers that I know-of.

If you have other elements inside your SVG (e.g. text elements), you will want to set all of them to aria-hidden="true" so that those screen readers that do read that text do not redundantly read additional information from the SVG itself.

Here is an example

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow