Did you know that aria-label isn't actually a good way to add an accessible name to an element?
Yeah, neither did I. That may seem a bit click-bait because not good is a harsh description. The actual problem is that the text content inside the aria-label does not work all the time with automated in-browser translations.
Adrian Roselli has done a detailed test with different browsers for aria-label translations. Even though the post is from 2019, with various updates through the years going all the way to 2024 as of this email, the point still stands.
aria-label does not translate.
If you're a developer, it's best to avoid relying on it.
What should you use instead to provide the accessible name?
- the visible text in the control
- another element's visible text using
aria-labelledby - text visible only to screen readers
That's my order of preference anyway.
I spent the better part of yesterday refactoring my own website to avoid using aria-label everywhere where possible and implemented one of the first two methods almost exclusively.