Relume Community Icon

Home

Announcements
Figma Support
General
Showcase
Webflow Support

Powered by Tightknit

Adding Alt Tags to SVG Embeds: Tips and Resources | Relume Community

Adding Alt Tags to SVG Embeds: Tips and Resources

·Apr 29, 2024 02:07 PM

Hi Lumers! I've created icon lists from Relume components and my client wants the SVGs to have alt tags however they are all embeds and not graphic files. Does anyone know if there's a way to add alt tags to svg embeds in attributes? Someone shared this with me https://accessibilityinsights.io/info-examples/web/svg-img-alt/ This is the project: https://ochsner-health-network.webflow.io/

31 comments

· Sorted by Oldest

Sam B.
·
Hi Susan! I had this issue a little while ago, I found this:
<svg role="img"> <title>Alt text goes here</title> <path /> </svg>
Sam B.
·
you need to set the role as img and then add in a title tag 👍
Sam B.
·
Looking at it, that seems to follow the link you provided, is that not working for you?
Susan M.
·
Thank you so much. I was wondering if we could use attributes instead to tell screen readers to ignore SVG like we do when placing "decorative" on an icon from the asset panel.
Susan M.
·
Better
aria-label attribute
Best
aria-labelledby attribute
Sam B.
·
I'm not sure you'd be able to do that in attributes because you'd have to target a specific block in the embed, you should be able to add those into the code embed though if they're embedded graphics
Susan M.
·
It almost seems like adding them as code was not a good approach. Adding them as SVG files was probably easier.
Sam B.
·
Embedded code is useful because you can do things like changing the colour of the SVG on the fly in webflow
Susan M.
·
Right. I was going for site speed but at what cost? Changing the colors with font color CSS is not needed in this case.
👍1
Sam B.
·
but if they're decorative graphics that are going to stay as they are, then adding them as graphics will work fine
Sam B.
·
Shouldn't have any noticable site speed hit switching them out for graphics then 👍
Susan M.
·
they provided the icons as SVG files with the rounded backgrounds. I rather create the backgrounds with CSS so it would be more flexible for background colors ect.
Susan M.
·
I'll probably just reload them as graphics as you said. Do you think it's accessible enough just placing "decorative" on them?
Sam B.
·
If it's those graphics on the membership advantages section, then yes decorative would be fine
Sam B.
·
uploading them as graphics would also give you the option to provide alt-text for them too if your client was worried