Don't put aria-label on generic elements like divs - Manuel Matuzovic
Don't put aria-label on generic elements like divs
posted on 22.05.2026
This post is part of a series called #WebAccessibilityFails, where I collect common issues I find in accessibility audits so that you can avoid them in the future.
The title already tells most of the story, but here's why you must avoid labeling generic elements like divs or spans using aria-label or aria-labelledby.
Don't do this
Looking at the ARIA spec, you'll find section "5.2.8.6 Roles which cannot be named (Name prohibited)". It lists all roles that cannot be named. It includes “generic”, which is the default role of divs and spans.
caption
code
deletion
emphasis
generic
insertion
paragraph
presentation
strong
subscript
superscript
So, in theory, it's not allowed, but there is also a practical reason to avoid it. Browsers treat labeled generic elements very differently. Below you'll find the results for the following three elements I tested. The results were the same for every element. I've used the arrow keys on desktop and swipe on mobile to navigate.
Content
Some inline content
Content
VoiceOver in Safari on macOS announces “News, group“, Talkback in Chrome on Android “News“, and Narrator on Windows 11 with Chrome "News, group, content". All the other tested screen readers ignore the author-defined label completely and announce the text content.
Results from testing labeled generic elements
Screen Reader<br>Browser<br>Announcement
VoiceOver macOS<br>Safari 26.3.1<br>News, group
VoiceOver iOS<br>Safari 26.3<br>Content
Talkback Android<br>Chrome 148<br>News
Talkback Android<br>Firefox 150<br>Content
Jaws 2026 Windows 11<br>Chrome 148<br>Content
NVDA 2026.1.1 Windows 11<br>Chrome 148<br>Content
NVDA 2026.1.1 Windows 11<br>Firefox 150<br>Content
Narrator, Windows 11<br>Chrome 148<br>News, group, content
Exceptions
Of course, there are exceptions because otherwise it would be too easy. Honestly, I don't know all of them, but from the top of my head, I can think of two.
sections
The section element has a generic role by default. If you put aria-label or aria-labelledby on the element, its implicit role changes from generic to region, turning it into a landmark. It's fine to label sections if it helps your users.
popovers
If you put the popover attribute on a div, its implicit role changes to group. So, if you label it –I'm not saying that you should – you're technically labeling a group and not a generic element, which is fine.