Skip to content
Tech News
← Back to articles

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

2026-05-22 | original
read original get Accessibility Labeling Guide → more articles
Why This Matters

This article highlights the importance of avoiding the use of aria-label on generic elements like divs and spans, as it can lead to inconsistent and unreliable accessibility experiences across different screen readers and browsers. Properly managing ARIA labels ensures that assistive technologies accurately interpret web content, improving accessibility for all users. Adhering to these best practices is crucial for developers aiming to create inclusive digital environments.

Key Takeaways

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 .

<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.

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

... continue reading

Explore topics: aria-label web accessibility screen readers aria-label on divs aria roles
Related:
Show HN: Pardus Browser- a browser for AI agents without Chromium

© 2026 GoKawiil

About | Editorial Policy | Contact