Social Badges stack - link text

I love everything about how easy the Social Badges stack is to quickly add and style social media links to a project.

However, they don’t provide a corresponding text link as to what they are. So, screen readers for the blind simply skip over them completely.

To make my sites ADA compliant, I’ve had to just use social media icons and use Alt text to describe them. But, I was hoping there might be a way to add a field to the stack that would insert something in the code that would act as a descriptor that screen readers would see? Tooltips don’t really address the problem properly.

Thanks for any input!

I don’t have a lot of experience in this field, but can you use a title attribute for the screen reader? If so, you can add that as a custom attribute when you create the link. The same could be done if you you can use aria attributes.

43

1 Like

I’ll give each of those a try and test. Thanks! I’ll report back here.

I tried to add a Custom Attribute in the link panel (above) and nothing was added to the code unless it (apparently) is already in the stack?

For example, the following are always there, with no values, whether you use them or not:

rel="", onclick="", target=""

So, they work if used in the Custom Attributes panel.

But, others do not. For instance, “title=” does not work. However, it shows up when you “Use Tooltip”. But, if you do not select “Use Tooltip”, and try to just use the “title=” Attribute via the panel, it gets ignored.

I don’t know if this helps figure out what is happening, or what might be done to override/insert additional attributes into the stack.


Note: For fun, I inserted the following in the URL field (with no added Custom Attributes):

<a href="https://google.com" rel="nofollow" target="_blank" title="Google Website">Google</a>

That added the “rel=” and “target=” into the code, but ignored “title=”.

Yes, the Social Badges stack does not currently offer those tags. My original reply was to ask you if a title attribute would work for your use case as I am unfamiliar. Basically I need to learn from you what attribute(s) would be helpful to add so that in a future update I can add them. If you can help me out with that I can get it added into the stack. I’m currently working on a big update for Foundry so adding that in as a future feature would be good to do now.

Gotcha. Here is the best info I can find. Straight from Font Awesome directly:

https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility

This is best practices. Anything else would be a kludge and really not ADA compliant.

If the above is doable in a future update, that would be fantastic. Thanks for considering the suggestion. If I can be of any help testing, etc. please let me know.

That is a bit more than just adding a title tag to the link unfortunately.

Something like this, also recommended by FA’s site, would be doable, and seems like what is necessary since it is a link and not a static element.

Also, I just checked and I was mistaken, the title tag already exists for this stack’s child items, along with rel, class, id and onclick. I must have been thinking of something else.

As per that FA screenshot, yes, I think aria-label would fit the bill.

I’ll get that added into the stack for the big Foundry update.

3 Likes

AWESOME, you rock! That will make my life much easier. :slight_smile:

It unfortunately isn’t launching in the near future. I have a lot of work to get done still, along with documentation, videos, etc.

1 Like

No worries. Just knowing it’s coming is enough.

1 Like