When a screen reader encounters an element on your page, it reads out information to help visually impaired users understand what is there. But what if the element does not have visible text — like a button with only an icon? That is where ARIA labels come in. They give you a way to provide accessible names that screen readers can announce.
The aria-label Attribute
The aria-label attribute adds a text description to an element that screen readers will read aloud. It is especially useful for elements that have no visible text but still need an accessible name.
<button aria-label="Close menu">
<svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
</button>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
aria-labelledby: Referencing Visible Text
Sometimes the label already exists as visible text on the page. Instead of duplicating it, use aria-labelledby to point to the ID of the element containing the label. This keeps your labels in sync — change the visible text and the accessible name updates automatically.
<h2 id="section-title">User Settings</h2>
<div role="region" aria-labelledby="section-title">
<p>Settings content here...</p>
</div>
<label id="email-label" for="email">Email Address</label>
<input type="email" id="email" aria-labelledby="email-label">
aria-describedby for Additional Info
While aria-labelledby provides the primary name, aria-describedby points to additional description text. Screen readers announce the label first, then the description. This is perfect for hints, error messages, or extra context.
<label for="password">Password</label>
<input type="password" id="password" aria-describedby="password-hint">
<p id="password-hint">Must be at least 8 characters with one number.</p>
<input type="text" id="username" aria-label="Username" aria-describedby="username-error">
<p id="username-error" role="alert">This username is already taken.</p>
When to Use ARIA Labels
Use ARIA labels when an element has no visible text (icon buttons, image-only links), when you need to disambiguate multiple elements of the same type (two navigation regions), or when visible text alone is not descriptive enough. Remember: if there is visible text that works as a label, prefer using that instead.
<!-- Icon-only search button -->
<button aria-label="Search">🔍</button>
<!-- Multiple navigation landmarks -->
<nav aria-label="Primary">...</nav>
<nav aria-label="Footer">...</nav>
<!-- Image that conveys meaning -->
<img src="chart.png" alt="Sales increased 25% this quarter">