Accessibility with icons | SoloLearn: Learn to code for FREE!


Accessibility with icons

I have a NavBar that has 1 link and 1 button. The problem is: Both are represented by icons, is there a way to add some kind of invisible label so that people with screen readers don't get confused? I'm using react-icons.

1/1/2020 2:49:18 PM

oh Common

4 Answers

New Answer

+2 They said don't use aria-label and that aria-labelledby is for when you have another element that contains the text relevant or whatever. If there's text, then yeah, aria-labelledby. If it's just an icon though, no other explanations, then use alt.


Maybe an alt attribute.


Rain I've found something about an aria-labelledby attribute, still have to test it tho, I'm not sure if it works


Ooh, I get it now. The problem is that the icons are react components, so I'm not sure if using alt will work. I will test it soon. Thanks!