Relume Community Icon
  • Avatar of 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>
  • Avatar of Sam B.

    you need to set the role as img and then add in a title tag 👍

  • Avatar of Sam B.

    Looking at it, that seems to follow the link you provided, is that not working for you?

  • Avatar of 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.

  • Avatar of Susan M.

    Better

    • aria-label attribute

    Best

    • aria-labelledby attribute

  • Avatar of 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

  • Avatar of Susan M.

    It almost seems like adding them as code was not a good approach. Adding them as SVG files was probably easier.

  • Avatar of Sam B.

    Embedded code is useful because you can do things like changing the colour of the SVG on the fly in webflow

  • Avatar of 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.

  • Avatar of Sam B.

    but if they're decorative graphics that are going to stay as they are, then adding them as graphics will work fine

  • Avatar of Sam B.

    Shouldn't have any noticable site speed hit switching them out for graphics then 👍

  • Avatar of 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.

  • Avatar of 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?

  • Avatar of Sam B.

    If it's those graphics on the membership advantages section, then yes decorative would be fine

  • Avatar of Sam B.

    uploading them as graphics would also give you the option to provide alt-text for them too if your client was worried

  • Avatar of Susan M.

    Right. Thank you. I think I "over developed" these using code instead of just graphics.

  • Avatar of 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>

  • Avatar of 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>
  • Avatar of Susan M.

    Thank you!

  • Avatar of Sam B.

    No problem!

  • Avatar of 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.

  • Avatar of 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.

  • Avatar of Matt J.

    Sam B. got it! Makes sense, quite unfortunate though

  • Avatar of 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.

  • Avatar of Matt J.

    right

  • Avatar of 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 ;)

  • Avatar of 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!

  • Avatar of Matt J.

    nice!

  • Avatar of 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

  • Avatar of Sam B.

    Much simpler than the role and title fix I've been using, thank you 🙌

  • Avatar of 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.