Menu
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.
430
The purpose of aria-label is the same as aria-labelledby . Both provide an accessible name for an element. If there is no visible name for the element you can reference, use aria-label to provide the user with a recognizable accessible name.
Aria-label, aria-labelledby are ignored on all static content unless it has a an interactive role, img role, or nav , main , search roles. Aria-label, aria-labelledby are override headings.
To hide an element to screen readers (and child elements), simply add the aria-hidden="true" attribute. Content can still be made accessible to ATs via aria-describedby or aria-labelledby .
At this time, ARIA is not supported by all technologies. However, support for ARIA is most definitely growing. Those who do support ARIA include browsers, AT (i.e. screen readers, magnifiers, text-to-speech, etc.), applications, and JavaScript toolkits.
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.
91
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
