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

# Don't put aria-label on generic elements like divs - Manuel Matuzovic Source: [https://www.matuzo.at/blog/2026/aria-label-generic-elements](https://www.matuzo.at/blog/2026/aria-label-generic-elements) posted on22\.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 thisLooking at the ARIA spec, you'll find section["5\.2\.8\.6 Roles which cannot be named \(Name prohibited\)"](https://www.w3.org/TR/wai-aria/#namefromprohibited)\. It lists all roles that cannot be named\. It includes “generic”, which is the default role of divs and spans\. - [`caption`](https://www.w3.org/TR/wai-aria/#caption) - [`code`](https://www.w3.org/TR/wai-aria/#code) - [`deletion`](https://www.w3.org/TR/wai-aria/#deletion) - [`emphasis`](https://www.w3.org/TR/wai-aria/#emphasis) - [`generic`](https://www.w3.org/TR/wai-aria/#generic) - [`insertion`](https://www.w3.org/TR/wai-aria/#insertion) - [`paragraph`](https://www.w3.org/TR/wai-aria/#paragraph) - [`presentation`](https://www.w3.org/TR/wai-aria/#presentation) - [`strong`](https://www.w3.org/TR/wai-aria/#strong) - [`subscript`](https://www.w3.org/TR/wai-aria/#subscript) - [`superscript`](https://www.w3.org/TR/wai-aria/#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 containersScreen ReaderBrowserAnnouncementVoiceOver macOSSafari 26\.3\.1News, groupVoiceOver iOSSafari 26\.3ContentTalkback AndroidChrome 148NewsTalkback AndroidFirefox 150ContentJaws 2026 Windows 11Chrome 148ContentNVDA 2026\.1\.1 Windows 11Chrome 148ContentNVDA 2026\.1\.1 Windows 11Firefox 150ContentNarrator, Windows 11Chrome 148News, 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 elementsScreen ReaderBrowserAnnouncementVoiceOver macOSSafari 26\.3\.1News, empty groupVoiceOver iOSSafari 26\.3*None*Talkback AndroidChrome 148NewsTalkback AndroidFirefox 150*None*Jaws 2026 Windows 11Chrome 148*None*NVDA 2026\.1\.1 Windows 11Chrome 148NewsNVDA 2026\.1\.1 Windows 11Firefox 150NewsNarrator, Windows 11Chrome 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\.