Reviewed September 30, 2026
ARIA labels and accessible names
An accessible name is the text assistive technology uses for a control. Prefer a visible label. Use aria-label only when there is no visible text, such as an icon-only button. The W3C rule for authors is that no ARIA is better than bad ARIA.
When does a control need an accessible name?
WCAG 2.2 success criterion 4.1.2 (Name, Role, Value, Level A) requires that the name, role, and current value of every user interface component can be programmatically determined. A button, link, or input with no name is announced as “button” or “edit text” with nothing else. The user cannot tell what it does.
A label element tied to an input with for and id gives the field a name that sighted and non-sighted users share. That is the default. Reach for ARIA when the design has no visible text to attach, not as a way to patch a control that is already labeled. Whether a visible label or instruction is required at all is success criterion 3.3.2, covered on the labels or instructions page.
When is aria-label the right tool?
Use aria-label on an icon-only button whose purpose is not already written next to it. The name must match what the control does. “Submit” on a search icon is the wrong name. “Search” is the right one. “Close” on a dialog close icon is right. “X” is not.
- aria-label overrides visible text inside the control. If they disagree, the visible label is hidden from the accessibility tree.
- aria-labelledby points at the id of existing text. Use it when the name is a heading next to the control.
- aria-describedby adds extra instructions. It does not replace the name.
- Do not add role="button" to a link that already navigates. Change the element, or leave the role alone.
What does “label in name” require?
WCAG 2.5.3 (Label in Name, Level A) says the visible label’s text must be contained in the accessible name. Speech-control users speak what they see. If a button reads “Pay now” and the accessible name is “Submit payment”, the spoken command “click Pay now” can fail. Put the visible words inside the accessible name, in the same order.
How do you check the computed name?
In browser developer tools, open the accessibility pane and read the computed name. Then tab to the control and confirm a screen reader speaks that name plus the role. Authoring notes are in the WAI names and descriptions guide. The first rule of ARIA use is documented at Using ARIA.
Questions and answers
What is an ARIA label?
aria-label sets the accessible name of an element when there is no visible text to use. Assistive technology speaks that name. WCAG 2.2 success criterion 4.1.2 (Name, Role, Value, Level A) requires that the name and role can be programmatically determined.
When should you avoid aria-label?
Avoid aria-label when the control already has visible text. aria-label replaces the contents of the control in the accessibility tree. If the visible words and the aria-label disagree, a screen reader user hears the aria-label and a sighted user reads something else.
What is the difference between aria-label and aria-labelledby?
aria-label is a string you type on the element. aria-labelledby points at the id of text that already exists on the page, such as a heading next to a group of fields. Prefer aria-labelledby when the visible text should be the name, so the name cannot drift out of date.
Does placeholder text count as a label?
No. Placeholder text disappears as the user types, it is often low contrast, and it is not a reliable accessible name. Use a label element tied to the input with for and id.
Related guides
Ask for a review of a specific page
Send the URL and the template you care about. The reply names the highest-risk WCAG failures and the order to fix them.
Request an audit