Accessibility with icons

Question

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.

Answer 1

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.

Answer 2

Maybe an alt attribute.

Answer 3

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

Answer 4

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!