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>

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.

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>

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.