What is aria-label?

aria-label is an HTML attribute that provides an accessible name for elements like <button>, <video>, <a> and landmarks, to name a few. It helps users who rely on assistive technologies, such as screen readers, understand an element’s function or content or, in the case of landmarks, enhance the navigation. This is particularly important for user interface elements, where clarity and accessibility are key. Developers often use aria-label to add context, especially for interactive elements. While it is useful for elements without visible labels (such as icon-only buttons), we need to be aware that aria-label overwrites an element’s accessible name and it’s generally best to avoid it when a visible label is present.

To understand why, we need to first clarify the difference between visible name and accessible name.

Visible Name vs. Accessible Name

Each user interface element on a webpage can have two names:

• Visible Name: The text or label seen by sighted users.


• Accessible Name: The name that assistive technologies (e.g., screen readers, voice control devices) recognize and use to activate the element.

When an element doesn’t have an aria-label, visible name and accessible name are the same. However,when aria-label is used, the accessible name may differ from the visible name, leading to two potential risks especially for voice control users.

Example Scenarios

1. Button with visible label and no aria-label

<button>Sign up</button>

Let’s take a simple ‘Sign up’ button as an example. Since we haven’t set any aria-label attribute on it, the visible label automatically becomes its accessible label, as shown in the image below from Chrome’s Accessibility Tab. This means both screen readers and voice control assistive devices will recognize it as the accessible name of the interactive control.

NVDA announces the button as “Sign up,” which is both its visible and accessible name:

Voice Access recognizes the button and can activate it by saying ” click Sign up”:

2.

Icon-only button

A button with just a magnifying glass icon may be visually clear to sighted users but could be confusing to screen reader users, as they would only hear “button” without context.

• Without aria-label: Screen readers would announce it as “button,” providing no information about its function.


• With aria-label: By setting aria-label="Search this site", we ensure that screen readers will announce the button as “Search this site,” giving clear context about its purpose.

2. Link with Insufficient Text (e.g., “Read More”)

A link with the text “Read More” is often too vague, leaving users unsure about what content they are about to read.

• Without aria-label: The screen reader would announce it as “Read more,” which is unclear on what specific content the user is engaging with.


• With aria-label: By adding aria-label="Read more about accessibility", we provide clearer context and improve navigation for screen reader users.

When to Use aria-label

Use aria-label when:

• 
  

  The element has no visible text label, such as an icon-only button.

  
  


• 
  

  The visible text is insufficient (e.g., “More” could be clarified as aria-label="More settings").

  
  


• 
  

  You need to provide additional context beyond what is visually present.

  
  


• 
  

  Creating custom interactive elements that don’t inherently support labels.

  
  

What should we consider when choosing a value for aria-label?

Important: aria-label will override the visible label for screen readers, meaning that assistive technologies will only recognize the accessible name defined by aria-label, not the visible text. When choosing the value, consider two types of users:

1. Screen Reader Users

• Clarity: Will the user understand what the element does based solely on the accessible name?


• Consistency: Is there a risk of confusion between the visible and accessible names? A mismatch could cause confusion.

2. Speech-Input Users

• 
  
  
  
  • Functionality: Speech-input users rely on the accessible name for voice commands. If the aria-label differs from the visible name, they may not be able to activate or focus on the element using voice commands.
  
  
  • Consistency: It’s important that the accessible name either matches or includes the visible name. For example, if a user says “click ‘Read more,'” but the accessible name is aria-label="Find out more", the command will fail because the name doesn’t match what the software recognizes.
  
  
  
  

Best Practices and Common Mistakes

✅ Use aria-label only when necessary and avoid redundancy.
✅ Keep labels concise and meaningful.
❌ Don’t override an already clear visible label with aria-label.
❌ Avoid generic labels like “Click Here” without additional context.
❌ Include the visible label in the aria-label(ideally the aria-label should start with the visible label)

By using aria-label thoughtfully, you can enhance web accessibility for both screen reader users and those who rely on speech-input devices. Keep in mind that clarity and consistency are key when selecting accessible names.