What Is Aria-Label and How to Use It

What is aria-label and how should I use it?

It's an attribute designed to help assistive technology (e.g. screen readers) attach a label to an otherwise anonymous HTML element.

So there's the <label> element:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

The <label> explicitly tells the user to type their name into the input box where id="fmUserName".

aria-label does much the same thing, but it's for those cases where it isn't practical or desirable to have a label on screen. Take the MDN example:

<button aria-label="Close" onclick="myDialog.close()">X</button>`

Most people would be able to infer visually that this button will close the dialog. A blind person using assistive technology might just hear "X" read aloud, which doesn't mean much without the visual clues. aria-label explicitly tells them what the button will do.

where and when to use aria-label?

aria-label to provide an invisible label where a visible label cannot be used.

The purpose of this technique is to provide a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.

all html tags support's aria-label area-label attributes can be used with

<button aria-label="Close">X</button>

What can aria-label be used on?

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:

• http://www.davidmacd.com/blog/does-aria-override-static-backup.html
• https://a11ysupport.io/tech/aria/aria-label_attribute

What is the difference between aria-label and title attributes?

ARIA-tags are used for disabled visitors of your site. It's very nice of Bootstrap, that they support it by default.

Accessible Rich Internet Applications (ARIA) defines ways to make Web
content and Web applications (especially those developed with Ajax and
JavaScript) more accessible to people with disabilities. For example,
ARIA enables accessible navigation landmarks, JavaScript widgets, form
hints and error messages, live content updates, and more.

Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

To answer your question, which one you should use, use only the title-attribute. Because this attribute is used if your mouse go over the button and shows the text of title as a tooltip. With aria-label is not supported in this way.

Is using a label enough or should I add aria attributes?

Label alone is fine as long as you have the for and id attributes matching, like you do in your v1 example. You can see this is the recommended solution wherever it's possible to do so in the related section in the W3C WAI documentation.

Why? A label is great because it is helpful for vision impaired users and users with motor control issues (and all users, for that matter!) can click on the label to focus the input. Aria labels are beneficial for vision impaired users because screen readers will be able to indicate to the user which elements relate to one another. But if a label is already there and is properly set up as you have it with for and id attributes, it doesn't do anything extra.

There is a lot of information that you can use for future work in the W3C WAI documentation as well as these Aria Design Patterns. (And many more places too!)

---

Related Topics