Skip to content


The aria-label should be used to provide a text alternative to an element that has no visible text on the screen.


aria-label is an attribute defined in the WAI-ARIA(opens in a new tab) specification. This specification extends native HTML, allowing you to change the way an HTML element is “translated” into the accessibility tree.

By default, an HTML element will use its text content as the accessibility label. If an element has aria-label, the accessible name becomes the string that it’s passed in the attribute.

// accessible name: send
<button aria-label="send email">send</button>
// accessible name: send email

You can make use of aria-label by adding it to certain Footnote 1) HTML elements.


VoiceOver on OSX will read this button as “menu, button”, as shown in the image below.

Screenshot of VoiceOver on OSX  when focusing the button in the example

You should use it when you have non-textual indication of an element’s purpose, but still need to provide text alternates for users who use assistive technology, such as screen readers.

Example 1: Icon Button

<button aria-label="Close">
viewBox="0 0 24 24"
d="M19 6.41L17.59 5 12 10.59 6.41 5 5
6.41 10.59 12 5 17.59 6.41 19 12
13.41 17.59 19 19 17.59 13.41 12z" />
placeholder="What's your name?"
aria-label="Your name" />
<nav aria-label=’primary’>
...List on links here...
<nav aria-label=’secondary’>
...List on links here...
See "Multiple Navigation Landmarks" pattern
<section aria-label="projects">
<section aria-label="team">

When label text is visible on screen, you should use aria-labelledby instead of aria-label.

// ⛔ BAD: using aria-label when text
// is visible on screen
<nav aria-label="Related Content">
<h2>Related Content</h2>
...List on links here...
// ✅ Good: using aria-labelledby when text
// is visible on screen
<nav aria-labelledby="nav-title">
<h2 id='nav-title'>Related Content</h2>
...List on links here...

If the element has text content, you DON’T need to add aria-label, as it is redundant.

// ⛔ BAD: over-using aria-label
<button aria-label="Send">Send</button>
// ✅ GOOD: use it only when needed it

A new a11y tool is coming...

We're building the next-generation accessibility tool, and this can't be done without you. We're looking for accessibility superheroes.

To be notified when we launch, drop your email below.

Leave your email and we'll get in touch when we launch. You won't get SPAMed.