2

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)

Pat McInnes
  • 23
  • 3
  • I think you have your answer already from Josh, but concerning your intent you might be interested in the following discussion: https://stackoverflow.com/questions/43491644/how-can-i-override-a-screen-readers-pronunciation-of-a-word-in-a-sentence-witho – Andy Jun 13 '22 at 12:37
  • This is a very useful resource which will answer your question: https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/ – brennanyoung Jun 14 '22 at 09:48

3 Answers3

7

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:

Josh
  • 3,872
  • 1
  • 12
  • 13
  • 4
    Note: `aria-label` can be used on a couple of non-operable element types, such as UL and OL. Another place it really needs to appear is NAV, in those cases where there is more than one navigation landmark, although (arguably) NAV is operable because its children are hyperlinks. `aria-label` **should** be used to provide alt text for SVG, which are often not operable. alt itself is not supported on SVG, even with `role=img`. The "big table" is here: https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/ – brennanyoung Jun 14 '22 at 09:47
  • 1
    Updated answer to reflect this info. Thank you! – Josh Jun 16 '22 at 18:43
1

Attributes aria-label and aria-labelledby are typically used and correctly recognized only on interactive elements such a buttons, form fields, links, etc. They usually don't work, i.e. not read or shown, when they are used on non-interactive elements such as <p>, <div>, <li>.

You can use aria-label or aria-labelledby on a <p>, <li>, but it will work only if it's interactive. The definition of interactive is quite simple: it means something you can interact with. More technically, it basically means focusable.

Note that with some browsers and/or screen readers, aria-label on elements that aren't naturally focusable may only work when navigating in form mode but not in browse mode. BY naturally focusable, I mean elements that don't need an explicit tabindex to be interactive.

The element <abbr> is a special case. The expanded meaning must be present in the title attribute and not aria-label.

QuentinC
  • 12,311
  • 4
  • 24
  • 37
0

It's most likely an attribute to help people with disabilities and the elderly. (e.g. screen readers) attach a label to an otherwise anonymous HTML element.

Usually search input field does not have visual label (thanks to designers). aria-label can be used to communicate the label of control to screen reader users.

When user focus on both button(by pressing tab) with area label — you can hear focusing on first x button — will tell you only x button but in case of second x button .. you will hear back to the page button only..

<button title="Close"> X </button>


<button aria-label="Back to the page" title="Close" > X </button>

i hope it helps.

you can read further information here https://www.aditus.io/aria/aria-label/

Rayl
  • 188
  • 1
  • 8