When using Icons (like the Facebook or Instagram logo) in Blocs I get an error from https://wave.webaim.org that the icon is an empty link and not ADA compliant. Am I doing anything wrong? I don’t see a way to add alt text to icons.
Thanks!
Hi @Dakart,
Welcome to the Blocs community.
To solve this, click on the icon and using the custom attributes option on the right panel you need to create…
aria-hidden="true"
The inputs fields will look like this
Name
aria-hidden
value
true
Another thing you can do for links, although the above is suggested for icons is aria-label and then the value is the label.
–
Pete
1 Like
Hi @PeteSharp !
Thank you for the help. I tested it, but unfortunately, it’s still giving me the error. I think it’s because it’s referencing a Class, not text or an image.
Here’s the page that’s giving me trouble. I tried it both ways with the aria-hidden and aria-label.
https://wave.webaim.org/report#/http://www.gwiltgroup.com/icon-agent.html
Yeah you are right.
Looks like Blocs is not adding the Aira to the link, but to the icon.
Maybe @Norm is able to chime in here.
1 Like
If google can’t pass this test, than who’s will? 
https://wave.webaim.org/report#/google.com
Blocs did, they just need to change the color design and they are gold. 
WAVE Report
1 Like
Would be great to have this and other WCAG 2.1 compliance issues addressed. I’ve had one client (a restaurant) get sued for non-compliance.
In the mean time a small JavaScript could add the attributes to the link. That will meet compliance.
To make it easy you can just target the icon, get the label and apply it to the closest a tag. That way you can still just add the attributes in the custom attribute option, and when the blocs fix is available just remove the script.
Which does open up the debate about protecting ourselves.
Accessibility is definitely a requirement worldwide. With or without legal obligations, we should be adding it. Which of course drives our prices up.
1 Like