0

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

https://stackoverflow.com/questions/19616893/difference-between-aria-label-and-aria-labelledby 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.

0

Maybe an alt attribute.

0

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

0

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!