An aria-label gives an element a text-based accessible name when a suitable visible or native label is unavailable or unsuitable. Use it sparingly: visible text and native HTML labeling are usually easier to maintain. If visible text already names an element, prefer referencing it with aria-labelledby rather than repeating the wording in aria-label.
What an ARIA label does
An accessible name is the short name assistive technologies can expose for an element, such as “Close dialog” for a button or “Search” for a search control. The aria-label attribute supplies that name as a string:
<button type="button" aria-label="Close dialog">×</button>The visible glyph is still shown, but the button’s accessible name communicates its action. The WAI-ARIA specification defines aria-label as a string value that labels the current element: WAI-ARIA 1.2.
When to use aria-label
Use aria-label when an element needs an accessible name, no suitable visible text or native label can provide it, and the element’s role supports naming. Icon-only controls are a common example. Choose wording that says what the control does, not merely what its icon looks like.
#1 Best Overall
<button type="button" aria-label="Open menu">☰</button>W3C guidance discusses aria-label for cases where a visible label cannot be used, including certain custom controls: ARIA14. Do not add naming attributes to roles that prohibit author-provided names; consult the role guidance in the WAI-ARIA specification.
Choose the right way to name an element
Use the following order of preference: native HTML labeling where it fits, existing visible text where available, and a string-valued aria-label when those options do not suit the control.
| Method | Best fit | Example |
|---|---|---|
Native <label> |
A standard form control with a visible label | <label for="email">Email address</label> |
aria-labelledby |
Text already in the DOM should provide the accessible name | aria-labelledby="search-label" |
aria-label |
A suitable visible or native label is unavailable or unsuitable | aria-label="Close dialog" |
Prefer a native label for form fields
For ordinary form controls, connect a visible <label> to the control with matching for and id values. This provides a usable visible label and an accessible name without duplicating label text in an ARIA attribute.
<label for="email">Email address</label>
<input id="email" name="email" type="email">See W3C’s Labeling Controls guidance.
Reuse existing text with aria-labelledby
When the text that should name a control already exists in the DOM, point to it with aria-labelledby. This avoids maintaining a second copy of the same wording:
<span id="search-label">Search</span>
<button type="button" aria-labelledby="search-label">⌕</button>WAI-ARIA says aria-labelledby takes precedence over aria-label when the accessible name is calculated. Its authoring guidance recommends using DOM text for the name where possible: Providing Accessible Names and Descriptions.
Use aria-label only when a text reference is not appropriate
If there is no suitable visible text to reference and a native label does not apply, provide a concise name directly. W3C’s specification states: “If the label text is available in the DOM (Document Object Model) (i.e. typically visible text content), authors SHOULD use aria-labelledby and SHOULD NOT use aria-label.”
Rank #4
Keep the name accurate and concise
An aria-label can replace a name that would otherwise come from visible text or native markup. For example, it can override a link’s text, a form control’s native label, or an image’s alternative text, depending on the element and naming calculation. Make sure the resulting name still accurately represents the element and does not discard useful wording users can see. See W3C’s guidance on ARIA8 and ARIA6.
Keep the name short enough to identify the control. If users need a longer explanation, associate that explanatory text with aria-describedby; a description is not a substitute for the control’s name.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Best Value
Check the accessible name in your implementation
- Identify the element’s purpose and confirm that its role supports an accessible name.
- Check whether visible text already names it. If so, use the text itself or reference it with
aria-labelledby. - For a standard form field, use a correctly associated native
<label>. - If no suitable visible or native label applies, add a concise, action- or purpose-specific
aria-label. - Inspect the resulting accessible name in your implementation and verify that it matches the element’s purpose and does not replace useful visible wording.
Or skip the browser setup
For capturing a page screenshot, ScreenshotNeo offers a one-request API; it is a screenshot service, not an accessibility-name checker. Its capture options can accept consent banners and remove known consent platforms, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are not billed, and an MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. 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.webpScreenshotNeo is made by Yorker Media. Sign up for 1,000 free screenshots a month with no card.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
