When a Control Needs aria-label

aria-label can give an icon button a name. It can also replace good visible text with a different name, making one control mean different things to different users.

I begin with native HTML and visible text. ARIA should fill a real gap, not decorate every element.

An icon button needs a name

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

The X icon has no reliable text name. aria-label="Close" names the button, while aria-hidden keeps the decorative SVG quiet.

If the button already contains text, use it:

<button>Close</button>

Prefer a visible form label

This technically names an input:

<input type="email" aria-label="Email address">

A visible label helps everyone:

<label for="email">Email address</label>
<input id="email" type="email">

A compact search field may reasonably use aria-label="Search website" when no visible label fits. That exception is not a reason to hide every form label.

Match what the control says on screen

This name remains close to the visible action:

<button aria-label="Delete account">Delete</button>

This does not:

<button aria-label="Send newsletter">Continue</button>

If useful text already exists elsewhere, reference it instead of copying it:

<h2 id="dialog-title">Delete project?</h2>
<div role="dialog" aria-labelledby="dialog-title">...</div>

ARIA does not create native behaviour

Avoid rebuilding a button:

<div role="button" aria-label="Save"></div>

when HTML already has one:

<button>Save</button>

Several navigation regions can benefit from distinct names:

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

One obvious navigation landmark may need no extra label. Context matters.

Use aria-label when a control genuinely lacks a useful name. If the page already says clearly what it is, let the HTML speak for itself.

← Back to all articles