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

Question

A few hours ago I read about the aria-label attribute, which:

Defines a string value that labels the current element.

But in my opinion this is what the title attribute was supposed to do. I looked further in the Mozilla Developer Network to get some examples and explanations, but the only thing I found was

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

Which does not provide me with any label (so I assume I misunderstood the idea). I tried it here in jsfiddle.

So my question is: why do I need aria-label and how should I use it?

Looking at the resource you've linked it seems that `aria-label` may be used if you don't want to show the tooltip provided by title attribute: *In the cases where a visible label or visible tooltip is undesirable, authors MAY set the accessible name of the element using aria-label* — Fabrizio Calderan, Feb 26 '14 at 11:30
Does anyone know if it's appropriate to use aria-label for a more descriptive
text when the actual visible text inside the
element is too brief, and it isn't desired to have the full text visible? In the examples in this thread, a label could be used. But labels dont apply to headings which is why I ask — HelloWorld, Mar 11 '19 at 15:56
The only appropriate similar thing you are asking for is the "longdesc" property (for images only) that need more info - cant imagine there would be one for text as it should always be descriptive anyway Im afraid. - @HelloWorld — Jamie Paterson, Oct 24 '19 at 15:49
@HelloWorld I'd say NOT a good idea setting it on `
`. Mostly on non-interactive elements `aria-label` is ignored. Use a visually hidden span inside, or even better the same descriptive text for ALL of your users. Imagine a scenario where a blind user wants to show something to a sighted one saying "do you see that heading with 'xxx' text?" Sighted person don't see it because it's hidden. Other problems with `aria-label` might be that it's not going to be translated when the page is translated, or not reachable with searched by `Ctrl+F` which blind users tend to do for quicker navigation — Hrvoje Golcic, Jul 18 '20 at 11:17

score 599 · Accepted Answer · edited Jul 21 '23 at 11:37

599

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.

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

edited Jul 21 '23 at 11:37

Z0OM

1
4
18
29

answered Feb 26 '14 at 11:50

Olly Hodgson

15,076
3
40
60

11

Thanks for explanation, but how will he hear close? What can I do in my browser (chrome) to hear this? And how can a blind person select this button if he have no idea where it is? – Salvador Dali Feb 26 '14 at 11:57
1

I guess an extension like [ChromeVox](http://www.chromevox.com/) would be a good place to start? I've never used it though. They work by reading the screen aloud to the user, taking cues from the HTML (e.g. an `h1` should be emphasised more than a `p`, `a` is clearly a link`, `form` indicates somewhere to enter information, `aria-*` attributes give further clues to what the elements do, etc). – Olly Hodgson Feb 26 '14 at 13:08
3

In this particular case, I would add it to a title `attribute`. No harm in showing a tooltip to 'seeing' users when they hover the X. – GolezTrol Aug 17 '15 at 15:56
4

In addition to ChromeVox, there's [NVDA](http://a11yproject.com/posts/getting-started-with-nvda/). Both are fairly easy to install and start and quite difficult to master. – ivarni Oct 12 '15 at 07:20
1

`` is also used to give focus to the element via the `for` attribute, which is equivalent to `aria-labelledby`. `aria-label` is more equivalent to the `title` attribute than the `` element, since `title` is ignored in many screen readers. – thdoan Feb 27 '17 at 03:04
@10basetom As my answer above says, `aria-label` is effectively a replacement for `` for those situations where you can't use a ``. I agree - if you need to label something, `title` is not always the right way to do it :) – Olly Hodgson Feb 28 '17 at 10:07
2

@SalvadorDali - just for information. in mobile blind person can enable accessibility tool like for android mobile it is TalkBack and for iOS mobiles it is VoiceOver. by using this, the page gets read line by line. – Rahul J. Rane May 21 '19 at 13:08
Can I add the `aria-label` attribute to any element, for example, an `a` clickable element? – João Pimentel Ferreira Feb 14 '20 at 09:53
1

@JoãoPimentelFerreira Yes you can, e.g. `X`. – Olly Hodgson Feb 19 '20 at 17:46

score 88 · Answer 2 · edited Jan 17 '18 at 03:07

In the example you give, you're perfectly right, you have to set the title attribute.

If the aria-label is one tool used by assistive technologies (like screen readers), it is not natively supported on browsers and has no effect on them. It won't be of any help to most of the people targetted by the WCAG (except screen reader users), for instance a person with intellectal disabilities.

The "X" is not sufficient enough to give information to the action led by the button (think about someone with no computer knowledge). It might mean "close", "delete", "cancel", "reduce", a strange cross, a doodle, nothing.

Despite the fact that the W3C seems to promote the aria-label rather that the title attribute here: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 in a similar example, you can see that the technology support does not include standard browsers : http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

In fact aria-label, in this exact situation might be used to give more context to an action:

For instance, blind people do not perceive popups like those of us with good vision, it's like a change of context. "Back to the page" will be a more convenient alternative for a screen reader, when "Close" is more significant for someone with no screen reader.

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>

@HrvojeGolcic This is exactly what my answer is saying : ARIA is for screen readers only and won't help other users and having alternative means for all users is necessary. You don't need to comment below each answer when you already have your own answer. — Adam, Jul 18 '20 at 14:28
The answer is saying `you have to set the title attribute` which imho does not say what my comment does. I don't downvote the answer but rather comment to make sure people clearly understand the difference. I don't think it hurt anyone to leave comments, educating and making accessible web a better place. Nothing personal really. — Hrvoje Golcic, Jul 18 '20 at 15:05
Starting a comment with "Strongly disagree!" while paraphrasing the post is bad netiquette. Everything is clear in my answer that "X" is not a good text, but as this is the question asked, there's no need to answer on this point under my answer. Nothing personal, but just bad netiquette. — Adam, Jul 18 '20 at 22:10

score 56 · Answer 3 · answered May 30 '16 at 13:29

56

If you wants to know how aria-label helps you practically .. then follow the steps ... you will get it by your own ..

Create a html page having below code

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

Now, you need a virtual screen reader emulator which will run on browser to observe the difference. So, chrome browser users can install chromevox extension and mozilla users can go with fangs screen reader addin

Once done with installation, put headphones in your ears, open the html page and make focus on both button(by pressing tab) one-by-one .. and 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..

i hope you got it well now!!

answered May 30 '16 at 13:29

Moumit

8,314
9
55
59

1

An important point is that the `title` attribute is ignored, even on the first button. More info: https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/ – Sphinxxx Jun 26 '16 at 23:04
2

Is it still the case? Still better to provide either ```title``` **and** ```aria-label```? – Kamafeather Mar 15 '18 at 13:03
3

This is exactly what I wanted. I just wanted to see and hear how it works in the real world and the `chromevox` works like a charm and will recite the aria-labelledby fields. Thanks. – Raj Rajeshwar Singh Rathore Aug 22 '18 at 17:32
this should be way up – Dev Matee Feb 10 '22 at 10:50

score 17 · Answer 4 · edited Aug 22 '19 at 13:57

Prerequisite:

Aria is used to improve the user experience of visually impaired users. Visually impaired users navigate though application using screen reader software like JAWS, NVDA,.. While navigating through the application, screen reader software announces content to users. Aria can be used to add content in the code which helps screen reader users understand role, state, label and purpose of the control

Aria does not change anything visually. (Aria is scared of designers too).

aria-label

aria-label attribute is used to communicate the label to screen reader users. 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

How To Use:

<input type="edit" aria-label="search" placeholder="search">

There is no visual change in application. But screen readers can understand the purpose of control

aria-labelledby

Both aria-label and aria-labelledby is used to communicate the label. But aria-labelledby can be used to reference any label already present in the page whereas aria-label is used to communicate the label which i not displayed visually

Approach 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

Approach 2:

aria-labelledby can also be used to combine two labels for screen reader users

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">

score 10 · Answer 5 · answered Oct 09 '19 at 12:07

10

The title attribute displays a tooltip when the mouse is hovering the element. While this is a great addition, it doesn't help people who cannot use the mouse (due to mobility disabilities) or people who can't see this tooltip (e.g.: people with visual disabilities or people who use a screen reader).

As such, the mindful approach here would be to serve all users. I would add both title and aria-label attributes (serving different types of users and different types of usage of the web).

Here's a good article that explains aria-label in depth

answered Oct 09 '19 at 12:07

lucalanca

595
1
5
12

1

Keep in mind `aria-label` is mostly only visible to screen readers. `title` will not be available, as you said for people who don't use a mouse. **This includes smartphone users.** Would be good to implement a custom Tooltip solution that works for ALL users, with/without a mouse, and also with a screen reader e.g. what Bootstrap offers – Hrvoje Golcic Jul 18 '20 at 11:37

score 8 · Answer 6 · answered Jul 18 '20 at 11:39

As a side answer it's worth to note that:

ARIA is commonly used to improve the accessibility for screen readers. (not only but mostly atm.)
Using ARIA does not necessarily make things better! Easily ARIA can lead to significantly worse accessibility if not implemented and tested properly. Don't use ARIA just to have some "cool things in the code" which you don't fully understand. Sadly too often ARIA implementations introduce more issues than solutions in terms of accessibility. This is rather common since sighted users and developers are less likely to put extra effort in extensive testing with screen readers while on the other hand ARIA specs and validators are currently far from perfect and even confusing in some cases. On top of that each browser and screen reader implement the ARIA support non-uniformly causing the major inconsistencies in the behavior. Often it's better idea to avoid ARIA completely when it's not clear exactly what it does, how it behaves and it won't be tested intensively with all screen readers and browsers (or at least the most common combinations). Disclaimer: My intention is not to disgrace ARIA but rather its bad ARIA implementations. In fact it's not so uncommon that HTML5 don't offer any other alternatives where implementing ARIA would bring significant benefits for the accessibility e.g. aria-hidden or aria-expanded. But only if implemented and tested properly!

score 0 · Answer 7 · answered Apr 17 '22 at 11:22

0

I believe you should not use it at all unless you know what you are doing and you are going to check how it looks all over aria's supported devices. Don't bring a problem with the excuse of being a solution! people with disabilities will thank you

answered Apr 17 '22 at 11:22

Fo Nko

620
10
22

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

text when the actual visible text inside the

element is too brief, and it isn't desired to have the full text visible? In the examples in this thread, a label could be used. But labels dont apply to headings which is why I ask

7 Answers7

Linked