▼
Streaming live at 10am (PST)

How to add alt text to embedded SVG?

Design help Custom code
#1

When I try to publish my web page, the new experimental Audit Panel is flagging each of the five social media icons in my footer with this error:

Non-descriptive link content (5)
Link content conveys a link’s purpose – what it is and where it leads. Links should have text content or an image with alt text.

Each icon is implemented as a Link block element that contains an Embed element. Each Embed element then contains the tag and xml code that renders the icon.

It looks like this error is telling me that I need to add an alt tag to my SVG. However, when I look up the SVG tag on MDN, it doesn’t appear to allow an alt attribute. I also tried adding alt=“Twitter” to the svg tag but that didn’t make the errors go away.

What’s the correct way to fix this error? Thanks!

#2

See - — the SVG accessible name element - SVG: Scalable Vector Graphics | MDN (mozilla.org)

The <title> element provides an accessible, short-text description of any SVG container element or graphics element.

#3

I know that its best to embed the code. but I fixed this by just adding the SVG file instead and added the alt text to the media file

#4

Thanks. I embedded the code because I want to change the color of the icons when you hover over them and this is easy to do with the code. Perhaps there’s a way to do this with SVG files but I’m not aware of it.

#5

As instructed in my post just add <title>Your Image Description </title> inside the SVG.

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4">
    <title>I'm a circle</title>
  </circle>

  <rect x="11" y="1" width="8" height="8">
    <title>I'm a square</title>
  </rect>
</svg>
#6

Thank you Jeff. After referring to the MDN article, I added a title tag to my embedded code like this:

<svg>...</svg>
<title>Twitter</title>
<path ... />
</svg>

Once I added the title tag, I’m able to see the title when I hover over the icon. However, the Audit Panel still complains with the same error as before. I’m not sure if I’m just not understanding what the Panel is telling or perhaps it’s a bug. I’m not sure. Oh well. :slightly_smiling_face:

#7

Ignore it, if you added the title you are good. Automated tools are never perfect, code can be.

1 Like