How To Add Alt Text To Embedded SVG? - Custom Code - Forum

Trang chủ » Html Svg Tag Alt Attribute » How To Add Alt Text To Embedded SVG? - Custom Code - Forum

Có thể bạn quan tâm

How to add alt text to embedded SVG? Design help Custom code October 27, 2021, 11:34pm 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!

October 28, 2021, 12:03am 2 robertfdev:

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

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 October 28, 2021, 8:41am 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

October 28, 2021, 1:55pm 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.

October 28, 2021, 1:59pm 5 robertfdev:

Perhaps there’s a way to do this with SVG files but I’m not aware of it.

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> October 28, 2021, 2:10pm 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:

October 28, 2021, 3:52pm 7 robertfdev:

the Audit Panel still complains

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

2 Likes January 12, 2022, 9:06am 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 December 3, 2023, 1:45pm 9

For anyone searching this problem.

robertfdev:

Each icon is implemented as a Link block element that contains an Embed element.

Most likely the Audit Panel complains about the Link Div and not the Embed element (still make sure to use <title> in the embed).

To fix the Audit Complain your have to add a custom attribute with the Name “aria-label” and Attribute “Whatever Link” on the Link Div (Click element - Right Panel - Settings - Custom attributes)

Screenshot 2023-12-03 at 14.40.16

3 Likes
Topic Replies Views Activity
How to fix non-descriptive link content CMS 14 3720 February 12, 2025
Audit Panel - Non descriptive link content General 1 1144 July 17, 2023
How to link URL to embed .SVG icon General 7 6009 November 25, 2020
Alt text for JSON lottie animation set in the designer but does not output SEO 3 648 November 15, 2023
Alt text for collection item images CMS 3 1942 April 7, 2022
Unfortunately, your browser is unsupported. Please switch to a supported browser to view rich content, log in and reply.

Từ khóa » Html Svg Tag Alt Attribute