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

Adding Alt Tags to SVG Embeds: Tips and Resources

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

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
Susan M.
·
Right. Thank you. I think I "over developed" these using code instead of just graphics.
Susan M.
·
If I do have the requirement of changing colors on the fly then I need to remember to use <svg role="img"> <title>Alt text goes here</title> <path /> </svg>
Sam B.
·
As an aside, if you wanted to use aria labelledby then you could here, you'd need to give each of those titles an ID in webflow first then do this:
<svg role="img" aria-labelledby="ID"> <path /> </svg>
Susan M.
·
Thank you!
Sam B.
·
No problem!
Matt J.
·
Susan M. Sam B. super cool thread. I am not an accessibility expert but are we sure just adding aria-labelledby = facebook icon doesn't suffice for this or? Webflow's audit seems to be okay with this for when these things show up in the audit for links missing descriptions, etc. How does one test these things? Genuine questions.
Sam B.
·
I found the issue initially when testing on pagespeed insights, the social media links flag as an accessibility error if there’s no text element present. From that guidance in the link both the role and the aria-labelledby need to be set in the svg element. I wonder if this is something WAVE would pick up.
Matt J.
·
Sam B. got it! Makes sense, quite unfortunate though
Sam B.
·
Definitely, I'm more than open to an easier fix! Possibly adding both the role and the labelledby as attributes? Trouble is I think it adds the attributes to the embed element rather than the SVG element inside.
Matt J.
·
right
Susan M.
·
For this use case Lauren A. provided guidance that since the icon itself doesn't communicate any information, and the content would still make sense if the icon wasn't there. Therefore, alt text should not be added and you can add
aria-hidden="true"
to hide these from screen readers. How do you both feel about that? Thank you Lauren A. we were in the Finsweet slack community taking initially about this ;)
❤️1
Sam B.
·
Definitely would agree with not adding alt text to these. That's good knowledge for marking embedded svg's as hidden/decorative. Thanks Lauren A. and Susan M. for that one!
Matt J.
·
nice!
Lauren A.
·
Hey Sam B., Matt J., and Susan M.! Just wanted to add that the social media icons that y'all discuss above would be approached differently than the icons for Susan's use case because there are different accessibility considerations depending on how images are used in context. If you have social media icons that link to social accounts then these would be considered "functional images" because they are there to initiate an action, not to convey information. When you have a social icon with no alt text nested inside of a link block usually you will get the Webflow error "Non-descriptive link content". To correct this you can add aria-label="Facebook" to the link block. This will correct the audit error and give screen reader users the context they need. Here's a video of what it sounds like: https://www.loom.com/share/ea09ef7fe8984baf839844c6e084fb53?sid=0c53bdf3-565e-4359-910d-dd66fd204dc6
❤️2
💪1
🙌1
Sam B.
·
Much simpler than the role and title fix I've been using, thank you 🙌
❤️2
Susan M.
·
This is exactly the solution we were searching for. Thank you Lauren A.. I'm glad we all learned something too. That's what makes this community great.
❤️1