Jump to content

You are here:

  1. Examples
  2. Sensible ARIA usage
  3. Label & labelledby

Labelling elements using aria-label and aria-labelledby

ARIA provides attributes which override the accessible label of an element. As they are treated differently in modern browsers and screen readers, they must be used with caution. They also have some noticeable side effects. There exist alternative techniques that are much more robust.

Background

How an element is announced by a screen reader is usually determined by its content. For example, the following link's label is "Google":

<a href="...">
  Google
</a>

So a screen reader will announce:

Google. Link.

Intended use

ARIA provides two attributes that allow to override these labels.

Setting a label

Using aria-label, an element's label can be set directly. For example, the following link's label is "No, Bing!":

<a href="..." aria-label="No, Bing!">
  Google
</a>

So a screen reader will announce:

No, Bing! Link.

Labelling an element using aria-labelPreview

Referencing a label

Using aria-labelledby, an element's label can be set by referencing the ID of another element. For example, the following link's label is "No, Bing!":

<a href="..." aria-labelledby="bing">
  Google
</a>

<div id="bing">
  No, Bing!
</div>

By the way, elements hidden using CSS can still be referenced:

#bing {
  display: none;
}

Again, a screen reader will announce:

No, Bing! Link.

Labelling an element using aria-labelledbyPreview

Peculiarities and side effects

Differences between browsers

While Firefox respects aria-label and aria-labelledby in both browse and focus mode, Internet Explorer only respects it in focus mode.

Text not searchable

Text added with aria-label is not searchable in browsers. This is confusing to screen reader users, as they are not aware of any difference between "normal" text and aria-label text. The same applies for text hidden with display: none but referenced using aria-labelledby.

Real world use

In general, HTML elements provide their own way of labelling:

As such, there are very rare cases (if any) where aria-label and aria-labelledby are truly the only way to go. For example, a valid usage of aria-label could be to override an existing label with additional, more precise information specifically for screen reader users:

<button aria-label="Zoom image: opens a high resolution version, press Esc to close">
  Zoom image
</button>

However, why not present this information to every user, for example using a tooltip (see Tooltip widgets (or: screen tip, balloon))?

<button>
  Zoom image
  <span class="tooltip">Opens a high resolution version, press Esc to close</span>
</button>

So if you are thinking about enhancing existing information, in most cases there are better ways than using ARIA - ways that are more robust and gives profit to all users.

Conclusion

If you aim at providing a user experience that is the same for all audiences, you will probably never need aria-label and aria-labelledby. And due to the described peculiarities and side effects, we do not recommend to use them anyway.

Instead, aim to find labels that are working for all audiences. And if you really need to attach additional information for screen readers, better use visually hidden text (see Hiding elements visually by moving them off-screen).

Previous/next navigation