Take this aria-label quiz
Developers can use aria-label to either provide an accessible name for an element (which does not have any text e.g. an icon) or to provide extra context to an interactive element like in our Read more links example.
But it can be confusing to know when to use an aria-label and to know what a screen-reader will hear if/when we use it.
Take this small quiz to test your knowledge on aria-label…
Example 1
<button aria-label="Close modal" type="button">
Close
</button>
Toggle example 1
aria-label overrides the text inside the button. In the
accessibility tree, 'Close modal' would be
displayed instead of 'Close'.
Example 2
<h2 aria-label="My favourite colour is blue">
My favourite colour is red
</h2>
Toggle example 2
My favourite colour is red
aria-label only works on interactive elements or elements with a role defined (either implicitly or explicitly). In theory, you can't add it to headings or paragraphs.
But some screen-readers (like VoiceOver and NVDA) do read out the aria-label whereas JAWS does not.
Given that screen-readers behave differently, it is best not to add aria-label to non-interactive elements.
Example 3
<button aria-label="Save details" type="button">
Save details
</button>
Toggle example 3
If the aria-label and innerText of the interactive element is the same then
the screen-reader technically does read out the aria-label but it's just adding extra bytes to the page
weight.
Example 4
<button aria-label="Save details" type="button">
Next
</button>
Toggle example 4
An aria-label should contain the text of the visible text in the same order in which it appears.
Someone using speech input (but not a screen-reader and therefore do not have access to an aria-label)
may say 'Click, Next button' but if the aria-label is wholly different to the visible text then the
action may not fire.
While it is not necessary that the visible text and accessible name match exactly, it is a best practice to have the accessible name begin with the visible text.
Further reading:
Example 5
<button aria-label="My aria-label" title="My title" type="button">
Click me
</button>
Toggle example 5
Voiceover on MacOS reads 'My aria-label, button, my title', this is because aria-label trumps the title and the innerText of the button.
It is rare that the title attribute is useful. This is because it is only available on hover, which non-mouse users will miss out on. But very occasionally, it can add extra context.
Example 6
<button aria-label="Same title" title="Same title" type="button">
Click me
</button>
Toggle example 6
Voiceover (the Apple screen-reader) and JAWS (Windows) are both clever enough to recognise that the title and the aria-label are the same. Therefore it does not read out the title.
Testing
These scenarios where tested in the following browser/screen-reader/OS combinations:
- Voiceover, MacOS Ventura (13.4), Safari (16.5)
- JAWS 2023, Windows 11, Edge 115
- NVDA 2023, Windows 11, Firefox 116
They were last tested on 15th August 2023.