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">
Toggle example 1

Example 2

<h2 aria-label="My favourite colour is blue">
  My favourite colour is red
Toggle example 2

My favourite colour is red

Example 3

<button aria-label="Save details" type="button">
  Save details
Toggle example 3

Example 4

<button aria-label="Save details" type="button">
Toggle example 4

Example 5

<button aria-label="My aria-label" title="My title" type="button">
  Click me
Toggle example 5

Example 6

<button aria-label="Same title" title="Same title" type="button">
  Click me
Toggle example 6


These scenarios where tested in the following browser/screen-reader/OS combinations:

They were last tested on 15th August 2023.

Want to work with us?

Let’s talk about your project