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.
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.
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!