htmlaccessibilityscreen-readerssitefinitywcag

What can aria-label be used on?

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)

Solution

  • 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 and aria-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 or aria-labelledby on the <nav>, and <main> elements but not on <footer>, <section>, <article>, or <header> .

    • There is mixed support for aria-label or aria-labelledby on <aside>.

    • Talkback on Android overrides the content of all landmarks with aria-label or aria-labelledby.

    • Its fine to use aria-label or aria-labelledby on div elements with role=navigation, role=search, role=main, JAWS doesn't support them on role=banner, role=complementary, role=contentinfo. NVDA, VoiceOver, and Talkback are OK

    • aria-label, aria-labelledby and aria-describedby work well on table, th and td elements with a few exceptions for NVDA, VoiceOver on iOS, and Talkback discussed in next section.

    • Don't use aria-label or aria-labelledby on any heading elements because it overrides them on NVDA, VoiceOver and Talkback. JAWS ignores them.

    • Don't use aria-label or aria-labelledby on any other non-interactive content such as p, legend, li, or ul, because it is ignored.

    • Don't use aria-label or aria-labelledby on a span or div unless its given a role. When aria-label or aria-labelledby are on interactive roles (such as a link or button) or an img role, they override the contents of the div or span. 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: