Does aria-label prevent the inner content being read out by assistive devices?

The MDN docs say you should use aria-label like this:

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

I don't have access to a screenreader, but I've seen comments on Stack Overflow suggesting that an aria-label does not replace the inner content, it only prefixes it. So in the above case it would read out "Close X", which is obviously not ideal.

Is this true? If so, what's the solution? I'm guessing it would make sense to wrap the inner content with an [aria-hidden=true] element, like this:

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

...but I'm cautious because I can't test it on a real screenreader.

3 Answers

Answers 1

Although the WAI-ARIA specification didn't help establishing a clear answer, here are some quotes from credible sources:

EDIT #1 (I missed this part reading the spec),
From the WAI-ARIA specification on aria-label:

In the cases where a visible label or visible tooltip is undesirable, authors MAY set the accessible name of the element using aria-label...

From Heydon at https://inclusive-components.design/toggle-button/:

Because aria-label overrides the unicode symbol text node ...

From Google Web fundamentals:

aria-label allows us to specify a string to be used as the accessible label. This overrides any other native labeling mechanism, such as a label element — for example, if a button has both text content and an aria-label, only the aria-label value will be used.

Which concludes you can skip <span aria-hidden="true">.

---

EDIT #2:

I should add that while aria-label only overrides the current elements text node, if you are using another element (e.g. <svg>) to display an icon instead of text you will have to hide it, like so:

<button aria-label="Close" onclick="myDialog.close()">   <svg aria-hidden="true" viewBox="0 0 24 24" height="45" width="45"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z"/><path fill="none" d="M0 0h24v24H0z"/></svg> </button> 

Answers 2

In most situations, the aria-label will be read out instead of the link's text.

This is actually a standard test scenario, and has extensive test results on powermapper: https://www.powermapper.com/tests/screen-readers/labelling/a-aria-label/

On the test results page, you can also hear the screen reader output.

Answers 3

This is what happens in Microsoft Edge and Internet Explorer, using the Windows Narrator:

• When the Narrator is reading the text and finds a button in the middle of it, aria-label is in fact prefixing the content, like this:
  [content before button] [aria-label value] [text inside the button tag] [content after button].
• When the user focuses (or clicks) the button, the narrator only says the aria-label value, and not the content inside the button, like this:
  [aria-label value] "button".

Hope this helps.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati