On this page
Accessible Names
What a name is#
Without a name, a button can be announced as just “button.”
Common sources
- Element content (button text, link text)
- Associated <label> for inputs
- aria-labelledby referencing visible text
- aria-label when no suitable visible text exists
Name playground#
Interactive demo
Change the name source
Name source
- Name source
- text content
- Role
- button
- Name
- "Save draft"
- State
- enabled
- Markup
<button type="button">Save draft</button>
Preferred techniques#
Prefer visible labels. Use aria-label when there is no suitable visible text—not as a substitute for clear UI.
Test
| Action | Expect |
|---|---|
Inspect name | Name matches visible purpose |
Icon-only button | Has aria-label or visible text alternative |
Input | Has a programmatic label association |