Aria-Label is Not Always the Answer
Tags: a11y, webdev, html
Published: 2021-12-04 11:37:22

---
title: Aria-Label is Not Always the Answer
published: true
date: 2021-11-29 00:00:00 UTC
tags: a11y, webdev, html, 
cover_image: https://images.ctfassets.net/sk24pdnnlwhc/1ZEK0v1IYY0biGSzSxEpX/32227900cb7af32a204824b1e3af7f4f/aria-label-is-not-always-the-answer.png
canonical_url: https://eevis.codes/blog/2021-11-29/aria-label-is-not-always-the-answer/
---

Okay, you've learned about accessibility and that there is sometimes a need to make, for example, the link text more descriptive for screen reader users. You've learned about the `aria-label`-attribute, and its powers. It's the answer to everything!

I'm afraid I have to say that it is not. It doesn't work with all HTML elements. In this blog post, I'll dig a bit deeper into the `aria-label`-attribute, and its usage and limitations, and options. 

## What Is `aria-label`?

So, let's first talk about the specification and where to use it. [W3C Recommendation for Accessible Rich Internet Applications (WAI-ARIA)-document][1] defines `aria-label` as "a string value that labels the current element." You can use it to provide a recognizable name of the object if there is no visible text on the screen that could be used as the label. If there was, `aria-labelledby` should be used.   

The most important thing, and the reason I'm writing this article, is that developers should use it only with the following elements:
- interactive elements (such as links, buttons, inputs et cetera)
- Elements that have a landmark role
- Elements that have an ARIA-widget role
- `img` or `iframe`-elements

Source: [Short note about `aria-label,` `aria-labelledby` and `aria-describedby` by Léonie Watson.][2]

`aria-label` on these elements works consistently with assistive technologies. The support is inconsistent if you use it with any other tag, such as `div` or `span.` More about that in [Aria-label and non-supported elements](#aria-label-and-non-supported-elements).

Let's look into each one of these elements a bit more.

### Interactive Elements

Interactive elements are tags intended for user interaction. It means, for example, `button`, `a` (when `href`-attribute is present), `input` , `details` and others. The main idea is that users can interact with them. 

### Elements with Landmark Role

Elements can have landmark roles either implicitly or explicitly. Having an implicit role means that some of the HTML elements have roles set to them natively. The explicit role, on the other hand, is set with `role`-attribute. 

I'll list the different roles and elements that already have those roles:

<table>
<caption>Landmark-roles with HTML-elements having those roles</caption>
<thead>
<tr>
<th>Role</th>
<th>HTML-element</th>
</tr>
</thead>
<tbody>
<tr>
<td>banner</td>
<td>(document) <code>&lt;header&gt;</code></td>
</tr>
<tr>
<td>complementary</td>
<td><code>&lt;aside&gt;</code></td>
</tr>
<tr>
<td>contentinfo</td>
<td>(document) <code>&lt;footer&gt;</code></td>
</tr>
<tr>
<td>form</td>
<td>&lt;form&gt; (if provided an accessible name via <code>aria-label</code> or <code>aria-labelledby</code>)</td>
</tr><tr>
<td>main</td>
<td><code>&lt;main&gt;</code></td>
</tr><tr><td>navigation</td>
<td><code>&lt;nav&gt;</code></td>
</tr><tr><td>region</td>
<td><code>&lt;section&gt;</code></td>
</tr>
</tbody>
</table>

Source: [MDN's list of landmark roles][3]

In addition to the roles listed, there's a `search`-role, which is only an explicit role, so, set with `role`-attribute.

### Elements with ARIA-widget Role

ARIA-widget roles define typical interactive patterns. These patterns usually need JavaScript to implement their intended behavior.  There are multiple ARIA-widget roles, and I'm going to list a couple of them:

- `tab`
- `tablist`
- `searchbox`
- `treeitem`
- `switch`

You can find more from [MDN's list of ARIA-widget roles][4].

### `img` and `iframe`

Image and iframe are two elements where `aria-label` works as well. For `img,` there are rare cases when you might need `aria-label.` In general, you should use the `alt`-attribute to provide an accessible name for the image. 

## How does `aria-label` work?

`aria-label` overrides the visible text in elements, where the accessible name would come from the child element. For example:

```html
<button aria-label="Something else">
  click me
</button>
```
The above button would be exposed as "Something else" to screen reader users.

## `aria-label` and non-supported elements

So, as mentioned, the support for `aria-label` is inconsistent with, for example, `div` and `span.` If the `div` or `span` doesn't have any role, `aria-label` is ignored. The same goes for other non-interactive elements, such as `p,` `ul,` `li,` or `legend` as well. 

 If they have a landmark role, support is still inconsistent. Per [Notes on ARIA Use in HTML][5], some widget roles work better than others:

> 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.

## Options for `aria-label`

If `aria-label` is not the answer, then what is? Well, it depends. In general, I would recommend adding visible text. Usually, when you're adding text for screen-reader users, it would be helpful for sighted users as well. 

However, if a non-visible text is needed, you could add visually hidden text with CSS. You can read more and find a CSS-snippet from The A11Y Project's article [Hide Content][6].

## Wrapping Up

`aria-label` is a helpful tool in cases when you need to add an accessible name for an element, and there is no already visible text to be used. However, you can't use it with every HTML tag. In general, those tags that don't work are non-interactive elements. 

There are exceptions: If, for example, `div` has one of the roles listed above, then screen readers read it. But there are inconsistencies with some roles: for example, roles `banner`, `complementary,` and `contentinfo` are something that JAWS ignores, while VoiceOver, TalkBack, and NVDA support them. 

I listed two options for cases when `aria-label` doesn't work. You could add a visible text, as it usually would be helpful for all users. Another option is to add visually hidden text. 

## Links
- [W3C Recommendation for Accessible Rich Internet Applications (WAI-ARIA)-document][1]
- [Short note about `aria-label,` `aria-labelledby` and `aria-describedby` by Léonie Watson.][2]
- [MDN's list of landmark roles][3]
- [MDN's list of ARIA-widget roles][4]
- [Notes on ARIA Use in HTML][5]
- The A11y Project - [Hide Content][6]

[1]: https://www.w3.org/TR/wai-aria/
[2]: https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/
[3]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#3._landmark_roles
[4]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#2._widget_roles
[5]: https://www.w3.org/TR/using-aria/#notes2
[6]: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/