Skip to main content

aria-label in accessibility, explained.

Published 2021/08/18 08:47

What is aria-label is accessibility?

Let's explain

Suppose in your website you have a button:


This button appears when there's a popup window and its job is to close that window:

<button onclick="closeWindow()"></button>

To make the button as minimal as possible, you decide to give it a label "X", instead of "Close":

<button onclick="closeWindow()">X</button>

So the button will look like this:

The close button in the website

Although the button looks nice, there's a problem.

A screen reader will announce the label of the button as is. So once the button has the focus, the screen reader will say:

Cap X, button

That doesn't really give an very good picture of what the button is supposed to do to the screen reader user. We need a clearer label, but at the same time, keep the "X" as our label.

What can we do?

We can use an attribute in our HTML, called aria-label.

This is how it can be used in our button:

<button onclick="closeWindow()" aria-label="Close window">X</button>

So now the button will be announced like this:

Close window, button

In conclusion, if you need a screen reader to announce an element separately than its actual label, use aria-label.

To learn more see this page on MDN

Explained (32 part series)

  1. Javascript Scopes, explained.
  2. Javascript Promises, explained.
  3. Accessibility, explained.
  4. React, explained
  5. Should I use forEach() or map()?
  6. Should I use Flexbox or CSS Grid?
  7. Docker, explained.
  8. Unit testing, explained
  9. Git, explained.
  10. Typescript, explained.
  11. async/await, explained.
  12. The DOM, explained.
  13. Regular expressions, explained
  14. GraphQL, explained.
  15. Vue, explained.
  16. Svelte, explained.
  17. API, explained.
  18. Javascript Hosting, explained.
  19. Immediately Invoked Function Expressions (IIFE), explained.
  20. ARIA roles, explained.
  21. Test-driven Development, explained.
  22. ARIA live regions, explained.
  23. aria-label in accessibility, explained.
  24. Type coercion in Javascript, explained.
  25. Variables, explained.
  26. if statements, explained.
  27. Arrays, explained.
  28. Currying in Javascript, explained.
  29. Memoization, explained.
  30. For loops, explained.
  31. Javascript Prototypes, explained.
  32. React Hooks, explained.
2021 Savvas Stephanides
Buy me a coffee
Some icons from Freepik