What’s the difference between aria-label, aria-labelledby, and aria-describedby?

Icons, buttons, and form fields make perfect sense visually, but what happens when someone can’t see them? Screen reader users rely on text descriptions to understand and interact with your interface. Adding basic labels is a great starting point, but you may be missing an opportunity to give helpful context that sighted users take for granted.

ARIA gives us three powerful attributes for adding these descriptions: aria-label, aria-labelledby, and aria-describedby. Each serves a different purpose, and knowing when to use which one can transform a confusing experience into a clear one.

aria-label provides an accessible name that completely replaces any visible text. Use it for icon-only buttons or when a visual label doesn’t exist. But there’s a catch: it only works on interactive elements and landmarks, not on generic divs or spans.

<button aria-label="Close dialog">
  <svg>...</svg>
</button>

aria-labelledby points to existing text elsewhere in your HTML to create the accessible name. It works best when your label already exists on the page. Even better, it can combine multiple elements into one label by referencing multiple IDs.

<h2 id="billing">Billing Address</h2>
<form aria-labelledby="billing">...</form>

aria-describedby provides additional context beyond the element’s label. Think of it as supplementary information like error messages, formatting hints, or help text. Screen readers announce this after the label, not instead of it.

<input type="password" aria-label="New password" aria-describedby="pwd-help">
<span id="pwd-help">Must contain 8+ characters</span>

The Simple Rule

Ask yourself: Am I naming this element or adding extra context?

• Naming it? Use aria-label (if no visible text exists) or aria-labelledby (if text exists elsewhere)
• Adding context? Use aria-describedby

Test your implementation with a screen reader to verify its accuracy. Labels are announced immediately when focus lands on an element. Descriptions come after a brief pause. That timing difference matters for user comprehension.