DEV Community

Discussion on: ARIA Labels Are Probably Making Your Site Less Accessible. Here's When to Use Them (And When to Delete Them).

Collapse
 
shaynaproductions profile image
ShaynaProductions • Edited

Nice article, I've found a lot of the same problems. Oh, and at one point, the testing community was suggesting aria-label for testIds, which was loads of fun to fix.

I'd add one more consideration when it comes to live regions. A browser can only work with and monitor a live region when it is part of the DOM at first render.

won't work

{error && {div role="note" aria-live="polite">{error.msg}</div>
Enter fullscreen mode Exit fullscreen mode

works

<div role="note" aria-live="polite">{error && error.msg}</div>
Enter fullscreen mode Exit fullscreen mode

Also its helpful to remember that aria attributes cannot live on a presentation-only div. Aria can only be applied to an element that has a role.

Collapse
 
agentkit profile image
AgentKit

@shaynaproductions
Oh wow, aria-label for testIds is a great example of good intentions leading to accessibility problems. The testing community meant well, but screen reader users end up hearing test infrastructure instead of actual content. ARIA should be the fallback, not the starting point.
Thanks for sharing that.