Writing Accessible Button Labels
Writing Accessible Button Labels records accessibility-focused writing guidance from the named standards body while keeping implementation and wording advice separate from unrelated general style rules.
Give a button a short, descriptive label that communicates its purpose, and keep its accessible name aligned with the visible label when visible text is present.
Key details
Important caveats
Scope Boundary
This page covers label wording and accessible-name alignment, not JavaScript behavior, focus management, or visual button styling.
Further guidance
Content
Give a button a short, descriptive label that communicates its purpose, and keep its accessible name aligned with the visible label when visible text is present.
Practical Application
Write a short button label that names the action or result, and keep the accessible name aligned with visible button text when visible text is present.
Purpose
W3C accessible-name guidance says interactive controls such as buttons need names that convey purpose and distinguish the element; visible text is preferred when suitable.
Reader Check
Could a user understand what will happen from the button name alone, and does the accessible name contain the visible wording rather than contradict it?
Worked Example
Example: Prefer the visible label “Save draft” with the same accessible name over a generic “Submit” label or an accessible name that says something different.
Sources and evidence
Sources are shown with the role they play in this guide. Historical or style-sensitive claims are kept within the evidence boundary described above.
- Providing Accessible Names and Descriptions — W3C WAI ARIA APG (opens in a new tab)W3C Web Accessibility Initiative · W3C WAI-ARIA Authoring Practices guidance for descriptive accessible names, visible labels, and button/control naming.