What exactly can aria-label
be used on?
I have found documentation that shows it can be used on interactive items (such as <button>
for example), but can it be used on any of the following:
<p>
, <span>
, <li>
or <abbr>
?
I am trying to have particular words and abbreviations within a paragraph, read out as something specific (eg: Aussies read out as "Ozzies" instead of "Ossies" or "NSW" read out as "New South Wales")
Testing in Microsoft Edge, Google Chrome, Mozilla Firefox (all Windows 10) and iPhone Safari (iOS)
You should generally not use aria-label
on static content. It's only intended to be used on interactive elements and some sectioning elements.
https://www.w3.org/TR/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby
aria-labelledby
andaria-describedby
are robustly supported for interactive content elements such as links and form controls including the many input types.For most assistive technology it's fine to use
aria-label
oraria-labelledby
on the<nav>
, and<main>
elements but not on<footer>
,<section>
,<article>
, or<header>
.There is mixed support for
aria-label
oraria-labelledby
on<aside>
.Talkback on Android overrides the content of all landmarks with
aria-label
oraria-labelledby
.Its fine to use
aria-label
oraria-labelledby
ondiv
elements withrole=navigation
,role=search
,role=main
, JAWS doesn't support them onrole=banner
,role=complementary
,role=contentinfo
. NVDA, VoiceOver, and Talkback are OK
aria-label
,aria-labelledby
andaria-describedby
work well ontable
,th
andtd
elements with a few exceptions for NVDA, VoiceOver on iOS, and Talkback discussed in next section.Don't use
aria-label
oraria-labelledby
on any heading elements because it overrides them on NVDA, VoiceOver and Talkback. JAWS ignores them.Don't use
aria-label
oraria-labelledby
on any other non-interactive content such asp
,legend
,li
, orul
, because it is ignored.Don't use
aria-label
oraria-labelledby
on aspan
ordiv
unless its given arole
. Whenaria-label
oraria-labelledby
are on interactive roles (such as a link or button) or an img role, they override the contents of thediv
orspan
. Other roles besides Landmarks (discussed above) are ignored.
Keep in mind that the above guidance was written in 2018, and support has likely improved among some browsers, but the advice above is still safe, and I would recommend mostly following it.
Thanks to brennanyoung for passing along this great article from Steve Faulkner: https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/
It's worth mentioning that the above test results are more recent than the advice given by W3C at the beginning of my post, and it does contradict the W3C advice in some places.
Additional Resources: