What Is an ARIA Label and How to Use It
Learn what aria-label does, when to use it, and how it differs from visible labels, aria-labelledby, and aria-describedby.
aria-label supplies a concise accessible name for an element when a suitable visible or native label is unavailable or unsuitable. Use it for controls such as an icon-only button when the control’s role supports naming. If suitable visible text already exists, prefer a native HTML label where appropriate or use aria-labelledby to reference that text.
What an accessible name does
An accessible name identifies an element’s purpose for assistive technologies. For example, a button whose visible content is only an “×” needs a name that communicates what activating it does.
<button type="button" aria-label="Close dialog">×</button>The name should be concise and specific. “Close dialog” communicates the action; a longer explanation belongs in a description associated with the control.
When to use aria-label
Use aria-label when all of these are true:
- The element needs an accessible name.
- No suitable visible text or native labeling method can provide that name.
- The element’s role supports an author-provided name.
A common case is an icon-only button. Another is a custom control that cannot use a native label association. The wording should explain the control’s purpose or action, not merely describe its appearance. See the W3C guidance on using aria-label to provide a name.
Choose the right labeling method
| Situation | Preferred approach | Example |
|---|---|---|
| Standard form field with a visible label | Native <label> |
<label for="email">Email address</label> |
| Suitable visible text exists elsewhere in the DOM | aria-labelledby referencing that text |
aria-labelledby="search-label" |
| No suitable visible label is available or usable | aria-label, if the role permits naming |
aria-label="Close dialog" |
| The user needs a longer explanation | aria-describedby for the description |
aria-describedby="password-help" |
W3C guidance favors visible text as the source of an accessible name: it is easier to maintain and avoids duplicated wording and translation work. For standard form controls, use the native label association when it fits. W3C’s form labeling tutorial explains native labels.
aria-label and aria-labelledby
aria-label provides the name as a string. aria-labelledby points to one or more elements whose text supplies the name. When suitable visible naming text exists, referencing it avoids maintaining a second copy of the same wording. WAI-ARIA gives aria-labelledby precedence over aria-label when calculating the accessible name.
<span id="search-label">Search</span>
<button type="button" aria-labelledby="search-label">⌕</button>WAI-ARIA 1.2 says authors should use aria-labelledby and should not use aria-label when label text is available in the DOM, typically as visible text. Read the WAI-ARIA 1.2 specification for the naming rules.
Use native labels for form controls
For an ordinary form field, associate its visible label using HTML. This gives users a visible label and provides the field’s name without duplicating it in an ARIA string.
<label for="email">Email address</label>
<input id="email" name="email" type="email">Adding an aria-label to an already labeled control can replace its existing name. If it does not match the visible label, it may make the control harder to identify, including for people using speech input. Check the final computed name rather than assuming attributes simply add together.
Keep names and descriptions distinct
A name identifies the control. A description gives additional instructions or context. Keep the accessible name short, then associate longer help text with aria-describedby.
<label for="password">Password</label>
<input id="password" name="password" type="password" aria-describedby="password-help">
<p id="password-help">Use at least 12 characters.</p>More detail about names and descriptions is in the WAI-ARIA Authoring Practices Guide.
Common mistakes and how to fix them
- Adding a redundant ARIA name to visible text. Prefer the text itself or reference it with
aria-labelledby. - Using an action name that does not match the control. Name the purpose accurately, such as “Remove item,” rather than a vague “Button.”
- Using a long help sentence as the name. Keep the name concise and associate instructions with
aria-describedby. - Assuming aria-label adds to the existing name. It may override a native form label, image alternative text, or link text. Verify the computed name is accurate and retains useful visible wording.
- Applying naming attributes to every element. Some roles prohibit naming. Check the role’s naming rules in WAI-ARIA before adding a name.
- Using aria-label on a standard input instead of a visible label. Use a native
<label>when possible so the field is identified visually and programmatically.
Review the accessible name in your implementation
- Identify the element’s role and confirm that role supports naming.
- Find the name users currently get from visible content and native HTML labeling.
- Choose the existing visible text, native label, or a concise
aria-labelonly if needed. - Check the computed accessible name in your accessibility inspection workflow and confirm it says what the control does.
- Check that the visible label, if present, is not contradicted or obscured by the accessible name.
These checks follow the cited W3C naming guidance; they are not a claim that a particular browser or assistive technology has been tested.
Or skip the browser setup
If documenting a page’s controls is part of your workflow, ScreenshotNeo is a website screenshot API and MCP server. A single request returns a screenshot or PDF; it does not replace checking accessible names in your implementation. Its clean-shot flow accepts cookie banners and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture, with each step configurable. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents.
One-call example (see the ScreenshotNeo API documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free account and get 1,000 screenshots a month with no card.
FAQ
Does aria-label make an element accessible by itself?
No. It supplies a name, but does not create an appropriate role, keyboard behavior, focus handling, or visible instructions.
Can aria-label be used on a link?
It can provide a name when needed, but may override the link’s visible text. Keep the resulting name accurate and aligned with the visible content.
Should an icon-only button have an accessible name?
Yes. Give it a concise name that describes its action, such as “Close dialog.”
Is aria-label the same as alt text?
No. They are different labeling mechanisms. On an image, aria-label can override its alternative text, so avoid adding it without a specific naming need. See W3C’s guidance on aria-label for naming and guidance on aria-labelledby.
