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

Có thể bạn quan tâm

Design help Custom code robertfdev (Robert F.) 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! webdev (Jeff Selser) October 28, 2021, 12:03am 2

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 Tor_Vegard_Tobiasse1 (Tor Vegard Tobiassen) 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 robertfdev (Robert F.) 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. webdev (Jeff Selser) October 28, 2021, 1:59pm 5

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. robertfdev (Robert F.) 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: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.

webdev (Jeff Selser) October 28, 2021, 3:52pm 7

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 Fernando_Comet (Fernando Comet) 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:1 Like Sascha_Tribula (Sascha Tribula) December 3, 2023, 1:45pm 9 For anyone searching this problem.

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 Related topics

Topic

Replies

Views

Activity

How to fix non-descriptive link content CMS

3902

February 12, 2025

Audit Panel - Non descriptive link content General

1149

July 17, 2023

How to link URL to embed .SVG icon General

6025

November 25, 2020

Alt text for JSON lottie animation set in the designer but does not output SEO

651

November 15, 2023

Alt text for collection item images CMS

1945

April 7, 2022

Từ khóa » Html Svg Tag Alt Attribute

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

Accessible SVGs | CSS-Tricks

Accessibility: Recommended Alt-text Convention For SVG And MathML?

Svg-img-alt - Accessibility Insights

SVG & Icon Fonts | Accessibility Guidelines

Accessible SVG: Methods For Adding Alternative Content - Web Design

Is It Possible To Add An 'alt Text' To A Svg File - BigCommerce Support

SVG Images And Graphics Require Accessible Text Axe Rules

HTML Img Alt Attribute - W3Schools

6.2. Managing Alternative Text On SVG (Scalable Vector Graphics)

What Should You Use In Place Of Alt Tags For SVG Files For SEO ...

t - Web APIs | MDN

Usage Of Alt Attribute For SVG Elements Is Not Allowed #5569 - GitHub

Accessible SVGs - University Of Melbourne

Decorative Images | Web Accessibility Initiative (WAI) - W3C

Liên Hệ