DEV Community

Dev Encyclopedia
Dev Encyclopedia

Posted on • Originally published at devencyclopedia.com

Most React Devs Use aria-label Wrong (Here's the Fix)

Most React devs add aria-label to everything and call it accessible.

That's not accessibility — that's noise for screen reader users.

Here's the issue nobody talks about: aria-label strings don't get translated by browser translation tools. A German user who translates your page still hears your English labels out loud while reading German text.

The fix? Use aria-labelledby to point at visible text that's already on the page. It translates automatically.

That's just one of the patterns covered in my latest article on ARIA in React — including the correct setup for:

  • Icon buttons
  • Modal dialogs
  • Toast notifications
  • Loading spinners
  • Tab panels

Each one with a ❌ wrong vs ✅ correct code example.

👉 Read the full article on Dev Encyclopedia

Top comments (1)

Collapse
 
micaavigliano profile image
Mica

that is not A, that is B!!

well done, AI.