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.

1 Like
#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.

2 Likes
#8

I agree with you, maybe it is a webflow bug or I have something wrong.

I followed CSS-Tricks tutorial.

In example I used and svg code icon for Linkedin as follows:

<svg width="20px" id="linkedin" aria-labelledby="linkedin" role="img" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title id="linkedin">Linkedin</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="white_linkedin" fill="#FFFFFF" fill-rule="nonzero">
            <path d="M17.0391667,17.0433333 L14.0775,17.0433333 L14.0775,12.4025 C14.0775,11.2958333 14.055,9.87166667 12.5341667,9.87166667 C10.99,9.87166667 10.7541667,11.0758333 10.7541667,12.3208333 L10.7541667,17.0433333 L7.7925,17.0433333 L7.7925,7.5 L10.6375,7.5 L10.6375,8.80083333 L10.6758333,8.80083333 C11.0733333,8.05083333 12.04,7.25916667 13.4841667,7.25916667 C16.485,7.25916667 17.04,9.23416667 17.04,11.805 L17.04,17.0433333 L17.0391667,17.0433333 Z M4.4475,6.19416667 C3.49416667,6.19416667 2.72833333,5.4225 2.72833333,4.47333333 C2.72833333,3.525 3.495,2.75416667 4.4475,2.75416667 C5.3975,2.75416667 6.1675,3.525 6.1675,4.47333333 C6.1675,5.4225 5.39666667,6.19416667 4.4475,6.19416667 Z M5.9325,17.0433333 L2.9625,17.0433333 L2.9625,7.5 L5.9325,7.5 L5.9325,17.0433333 Z M18.5208333,0 L1.47583333,0 C0.66,0 0,0.645 0,1.44083333 L0,18.5591667 C0,19.3558333 0.66,20 1.47583333,20 L18.5183333,20 C19.3333333,20 20,19.3558333 20,18.5591667 L20,1.44083333 C20,0.645 19.3333333,0 18.5183333,0 L18.5208333,0 Z" id="Shape"></path>
        </g>
    </g>
</svg>```

But still have the alert
1 Like