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

Question

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.

Answer 1

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.