ARIA Labels
Definition
Attributes that provide accessible names and descriptions for elements, helping screen readers convey meaning to users.
What are ARIA Labels?
ARIA (Accessible Rich Internet Applications) labels are HTML attributes that provide accessible names, descriptions, and roles for elements. They help screen readers understand and convey the purpose of interactive elements that might otherwise be ambiguous.
ARIA bridges the gap between visual design and screen reader interpretation.
Why ARIA Labels Matter
Clear Communication
Screen readers announce ARIA labels, telling users what an element does when the visual context isn't available.
Complex Interfaces
Modern web applications use icons, graphics, and custom components that need explicit labelling.
WCAG Compliance
Properly labelled elements are required for accessibility compliance.
Key ARIA Attributes
aria-label
Provides an accessible name directly:
<button aria-label="Close menu">X</button>
The screen reader announces "Close menu button" instead of just "X button."
aria-labelledby
Points to another element that provides the label:
<h2 id="cart-heading">Shopping Cart</h2>
<section aria-labelledby="cart-heading">...</section>
aria-describedby
Points to additional descriptive text:
<input aria-describedby="password-help">
<p id="password-help">Must be at least 8 characters</p>
aria-hidden
Hides content from screen readers:
<span aria-hidden="true">ā
ā
ā
ā
ā</span>
<span class="sr-only">4 out of 5 stars</span>
When to Use ARIA
Icon-Only Buttons
Buttons with only icons need aria-label to explain their purpose.
Image-Based Links
When links contain only images, provide accessible names.
Custom Components
Sliders, tabs, accordions, and other custom widgets need ARIA roles and labels.
Form Instructions
Additional help text should be connected using aria-describedby.
The First Rule of ARIA
"No ARIA is better than bad ARIA."
Use native HTML elements whenever possible. They have built-in accessibility that ARIA tries to replicate:
- Use
<button>instead of<div role="button"> - Use
<nav>instead of<div role="navigation"> - Use
<label>instead ofaria-labelfor form fields
ARIA is for situations where HTML alone isn't sufficient.
Common ARIA Mistakes
Redundant Labels
<!-- Wrong: announces "Close button button" -->
<button aria-label="Close button">Close</button>
Overriding Good Labels
<!-- Wrong: aria-label overrides visible text -->
<button aria-label="Submit">Send Message</button>
Using ARIA Instead of Native Elements
Custom components when native HTML would work better.