What is aria-label attribute in HTML and How to Use It

The aria-label attribute in HTML provides an accessible name to elements that do not have visible text labels. It helps screen readers describe the purpose of an element to users with disabilities, improving web accessibility.

How It Works

The aria-label attribute works like a name tag for elements on a webpage that might not have clear text labels. Imagine you are at a party and someone wears a name tag so others know who they are. Similarly, aria-label gives a hidden description to elements so screen readers can announce what they do.

This attribute is especially useful for buttons, icons, or links that use images or symbols without text. Screen readers read the aria-label value aloud, helping users who rely on audio to understand the page content and navigate easily.

Example

This example shows a button with a search icon but no visible text. The aria-label attribute gives it a clear name for screen readers.

html

<button aria-label="Search">
  🔍
</button>

Output

A button showing a magnifying glass icon (🔍) with no visible text.

When to Use

Use aria-label when an element has no visible text but needs a clear description for screen readers. For example:

• Icon-only buttons like search, close, or menu
• Links represented by images without text
• Interactive elements where the purpose is not obvious visually

This helps users with visual impairments understand and use your website effectively.

Key Points

• aria-label provides an invisible label for screen readers.
• It improves accessibility for non-text elements.
• Use it to describe buttons, links, or icons without visible text.
• It does not change the visual appearance of the element.

Key Takeaways

The aria-label attribute gives a hidden name to elements for screen readers.

Use aria-label on elements without visible text to improve accessibility.

It helps users with disabilities understand the purpose of icons and buttons.

aria-label does not affect what sighted users see on the page.