Don't put aria-label on generic elements like divs - Manuel Matuzovic

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. <div aria-label="News"> … </div> 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. <div aria-label="News">Content</div>

<p> Some inline <span aria-label="News">content</span> </p>

<ge-neric aria-label="News"> Content </ge-neric> 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 containers

Screen Reader Browser Announcement

VoiceOver macOS Safari 26.3.1 News, group

VoiceOver iOS Safari 26.3 Content

Talkback Android Chrome 148 News

Talkback Android Firefox 150 Content

Jaws 2026

Windows 11 Chrome 148 Content

NVDA 2026.1.1 Windows 11 Chrome 148 Content

NVDA 2026.1.1 Windows 11 Firefox 150 Content

Narrator, Windows 11 Chrome 148 News, group, content

Update: Verena made me aware that results may differ if the element is empty. So, I tested that as well. I tested both an empty div with 0 width and height, and one that takes up space. There was no announcement in VoiceOver on iOS, JAWS and Narrator in Chrome, or Talkback in Firefox. <div aria-label="News" style="width:100px; height:100px"></div> <div aria-label="News"></div>

Results from testing empty labeled generic elements

Screen Reader Browser Announcement

VoiceOver macOS Safari 26.3.1 News, empty group

VoiceOver iOS Safari 26.3 None

Talkback Android Chrome 148 News

Talkback Android Firefox 150 None

Jaws 2026 Windows 11 Chrome 148 None

NVDA 2026.1.1 Windows 11 Chrome 148 News

NVDA 2026.1.1 Windows 11 Firefox 150 News

Narrator, Windows 11 Chrome 148 None

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. <section aria-label="News"> … </section> 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. <div popover aria-label="I'm not sure how useful a label here is"> </div> Updates Update 25.05.26: Added more tests.