← Back to Accessalyze

aria-label Best Practices: When and How to Use It

ARIA (Accessible Rich Internet Applications) attributes help bridge the gap between visual UI and screen readers. But they're easy to misuse — overuse or incorrect usage can make accessibility worse. Here is how to use them correctly.

The Three Labeling Attributes

aria-label

Provides a string as the accessible name. Overrides any visible text. Not translatable by automated translation tools.

<button aria-label="Close dialog">✕</button>

aria-labelledby

Points to one or more element IDs whose text content becomes the accessible name. Preferred over aria-label when visible text already exists.

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

aria-describedby

Adds supplementary description (announced after the name). Use for hints, instructions, or error messages — not as a label replacement.

<label for="password">Password</label>
<input type="password" id="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 8 characters, including one number.</p>

Priority Order for Accessible Names

Browsers compute accessible names in this order (highest wins):

1. aria-labelledby
2. aria-label
3. Native label (<label for>, alt, <caption>, <title> on SVG)
4. Element text content (for buttons, links)
5. title attribute (last resort)

When to Use aria-label

1. Icon-only buttons

<button aria-label="Search">
  <svg aria-hidden="true">...magnifying glass...</svg>
</button>

2. Close / dismiss buttons

<button aria-label="Close subscription dialog">×</button>

Note: be specific. "Close" is ambiguous when multiple dialogs can exist. "Close subscription dialog" is better.

3. Landmark regions that share the same role

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>

4. Multiple forms on a page

<form aria-label="Newsletter signup">...</form>
<form aria-label="Contact request">...</form>

When NOT to Use aria-label

Don't hide existing visible text

<!-- The visible text "Buy now" is overridden with a different label -->
<button aria-label="Purchase the premium plan">Buy now</button>

<!-- Let the visible text be the label — or use aria-labelledby -->
<button>Buy premium plan</button>

Don't use aria-label on non-interactive elements

<p aria-label="Important paragraph">This is a paragraph.</p>

aria-label has no effect on most non-interactive elements like <p>, <div>, <span>. It only works on elements with roles.

Don't duplicate the visible text

<button aria-label="Submit">Submit</button>

Redundant. The button text "Submit" already provides the accessible name. Remove the aria-label.

Don't use aria-label on images instead of alt

<img src="logo.png" aria-label="Company logo">

<img src="logo.png" alt="Company logo">

Common ARIA Mistakes to Avoid

• Using role="button" on a <div> instead of just using <button>
• Applying ARIA roles/attributes to the wrong element type
• Using aria-hidden="true" on a focused element (keyboard users become lost)
• Nesting interactive elements (<button> inside <a>)
• Using aria-label in a language different from the page

← Back to Accessalyze