HtmlHow-ToBeginner · 3 min read

How to Use ARIA Labels in HTML for Better Accessibility

Use the aria-label attribute in HTML elements to provide a descriptive label for screen readers when the visible text is insufficient or missing. Add aria-label="description" inside an element tag to improve accessibility without changing the visual layout.

📐

Syntax

The aria-label attribute is added inside an HTML tag to give an accessible name to elements. It takes a string value that describes the element's purpose or content for screen readers.

aria-label: The attribute name.
"description": The text that describes the element for assistive technologies.

html

<element aria-label="description">Content</element>

💻

Example

This example shows a button with no visible text but an aria-label that describes its action for screen readers.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ARIA Label Example</title>
</head>
<body>
  <button aria-label="Close dialog" style="font-size: 2rem;">&#10006;</button>
</body>
</html>

Output

A large button with an X symbol visible on the page. Screen readers announce it as 'Close dialog'.

⚠️

Common Pitfalls

Common mistakes when using aria-label include:

Using aria-label when visible text already describes the element, causing redundancy.
Providing vague or unclear labels that confuse users.
Forgetting to add aria-label on interactive elements without visible text.

html

<!-- Wrong: redundant label -->
<button aria-label="Submit form">Submit</button>

<!-- Right: use aria-label only if no visible text -->
<button aria-label="Submit form">&#x2714;</button>

📊

Quick Reference

Tips for using aria-label effectively:

Use it to label icons or buttons without visible text.
Keep labels short and clear.
Do not duplicate visible text with aria-label.
Test with screen readers to ensure clarity.

✅

Key Takeaways

Use aria-label to provide accessible names for elements without visible text.

Avoid redundant labels by not using aria-label when visible text already describes the element.

Keep aria-label text clear and concise for better screen reader understanding.

Test your page with screen readers to ensure aria-label improves accessibility.

Apply aria-label mainly on interactive elements like buttons, links, and icons.