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

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…