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>
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<h1>
. Mostly on non-interactive elementsaria-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 witharia-label
might be that it's not going to be translated when the page is translated, or not reachable with searched byCtrl+F
which blind users tend to do for quicker navigation