Don't put aria-label on generic elements like divs
Recorded: May 26, 2026, 1:15 p.m.
| Original | Summarized |
Don't put aria-label on generic elements like divs - Manuel Matuzovic Skip to content Home Blog 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. <div aria-label="News"> 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 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. <p> <ge-neric aria-label="News"> Results from testing labeled generic containers Screen Reader VoiceOver macOS VoiceOver iOS Talkback Android Talkback Android Jaws 2026 Windows 11 NVDA 2026.1.1 Windows 11 NVDA 2026.1.1 Windows 11 Narrator, Windows 11 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. Results from testing empty labeled generic elements Screen Reader VoiceOver macOS VoiceOver iOS Talkback Android Talkback Android Jaws 2026 Windows 11 NVDA 2026.1.1 Windows 11 NVDA 2026.1.1 Windows 11 Narrator, Windows 11 Exceptions My blog doesn't support comments yet, but you can reply via e-mail. Back to top legal |
Manuel Matuzovic discusses the practice of applying aria-label or aria-labelledby to generic HTML elements such as divs or spans, arguing that this practice should generally be avoided due to inconsistent behavior across different assistive technologies. This principle is rooted in the structure defined by the WAI-ARIA specification, specifically referencing section 5.2.8.6 which lists roles that cannot be named, including the generic role associated with divs and spans. The author details empirical testing conducted across various screen readers and browsers to demonstrate the practical discrepancies arising from labeling these generic containers. The testing involved examining how screen readers announce the content when generic elements are labeled. The results indicated that screen readers like VoiceOver, Talkback, Jaws, NVDA, and Narrator often ignore the author-defined aria-label when applied to generic elements, instead announcing only the element's textual content. In some cases, the screen readers announce a combination of terms that interfere with the intended semantic meaning, such as announcing both the label and the element type or grouping context. Furthermore, the testing concluded that the behavior varied based on whether the generic element was empty or contained content, further complicating predictable accessibility outcomes. Despite this general caution, Manuel Matuzovic identifies specific exceptions where labeling generic or structurally similar elements is permissible. The first exception concerns the section element; since the section element inherently has a generic role, applying aria-label or aria-labelledby implicitly changes its role to region, effectively establishing it as a landmark. Labeling sections is acceptable if it serves to enhance user understanding. The second exception relates to popovers; when the popover attribute is applied to a div, the implicit role shifts to group. Consequently, labeling such elements is technically labeling a group rather than a generic element, which is considered permissible. The overall argument is that while accessibility requires clear labeling, labeling generic container elements like divs or spans without consideration for their specific roles creates ambiguity and can lead to unpredictable screen reader announcements, thereby undermining inclusive design principles. |