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.
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.
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):
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:
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.
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.
