Menu
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?
809
Definition. aria-label is an attribute defined in the WAI-ARIA(opens in a new tab) specification. This specification extends native HTML, allowing you to change the way an HTML element is "translated" into the accessibility tree. By default, an HTML element will use its text content as the accessibility label.
aria-label should be used in conjunction with the title attribute. Aria for screen readers, and title attribute for other people who want more information about the action of the button.
ARIA attributes can be used to make unsemantic HTML more accessible to screen reader users. For example, a developer who is struggling to style a native checkbox across multiple browsers might decide to use a div and some JavaScript to emulate one.
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.
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.
132
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>
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!!
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
