Search code examples
htmlaccessibility

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

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?

Solution

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