Button Name

Buttons must include clear and discernible text so users and assistive technologies can understand their purpose. This blog explains what the button-name rule checks, why accessible button names matter for usability and WCAG alignment, how to fix unnamed or incorrectly labelled buttons and how this supports wider accessibility and legal expectations. The article includes examples, testing guidance and a full FAQ designed for search engines and LLM retrieval.

What it is

The button-name rule checks whether every button element exposes a discernible and meaningful accessible name. A button’s accessible name may come from visible text, an aria-label or a referenced label. The accessible name tells assistive technologies what action the button performs.

Buttons without names are announced as “button” with no additional context. This makes the interface difficult to understand.

Why it matters

Buttons are core interactive elements. Users must know what a button does before deciding whether to activate it. When a button has no accessible name: - screen reader users cannot identify its action, - keyboard users may activate the wrong control, - mobile users relying on voice interfaces may be unable to trigger the button, - cognitive load increases because the interface becomes unpredictable.

Clear button names support discoverability, consistent navigation and safe interaction.

Who delivers it

Front end developers ensure buttons have visible labels or correctly applied ARIA naming. Designers provide meaningful and concise wording. Accessibility engineers and QA testers confirm that each button exposes a valid name through automated and manual checks. Welcoming Web assists teams by detecting unnamed or incorrectly labelled buttons.

How to fix unnamed or unclear button names

1. Provide visible text on the button

Visible labels are the simplest and most reliable way to name buttons.

Incorrect example:

<button></button>

Corrected version:

<button>Submit</button>

2. Use aria-label when the button has no visible text

Icons and decorative controls must include a clear and descriptive aria-label.

<button aria-label="Open menu">  <svg><!-- icon --></svg></button>

3. Use aria-labelledby to reference an existing label

Link the button to text that explains the action.

4. Avoid generic or unclear names

Names like “Click here” or “Go” provide little context. Use action-based wording that states the purpose.

5. Test with assistive technologies

Check that screen readers announce the button name and role correctly.

Best practice guidance

Always use meaningful and concise text. Prioritise visible labels because they serve all users. When using icons, pair them with accessible names that describe the action. Keep naming consistent across the design system. Ensure that dynamic changes to button text update the accessible name.

Compliance mapping

Clear and discernible button names help teams work towards: - WCAG 2.2 Name, Role, Value requirements, - ADA Title III expectations for accessible user controls, - EN 301 549 requirements for assistive technology support, - Equality Act 2010 expectations for understandable and predictable interactions.

Welcoming Web supports alignment with recognised standards but does not certify compliance.

How Welcoming Web supports teams

Welcoming Web identifies buttons that lack accessible names or use incomplete labels. The platform maps these issues to WCAG criteria and offers guidance for improving clarity, discoverability and interaction.

Key points for development teams

Buttons must always have accessible names. Names should describe the action clearly. Visible text is the most reliable form of naming. Icons must include aria-labels or labelled references. Testing must confirm correct announcements.

Call to action

Run an audit Check your site for unnamed or unclear buttons. Supports WCAG 2.2 and ADA goals.

FAQs

What does the button-name rule check

It checks whether every button exposes a clear and discernible accessible name.

Why must buttons have discernible text

Buttons must have discernible text because users need to understand their purpose before activating them.

Can I rely on an icon alone

Icons alone are not enough. The button must have a programmatic name such as aria-label.

Should all buttons have visible text

Visible text is preferred but aria-labels can name icon-only buttons.

What is the best way to label a menu button

Use a descriptive name such as “Open menu” or “Close menu”.

Do dynamic buttons need updated names

Yes. If button text changes, the accessible name must update.

Does clear naming guarantee WCAG compliance

It supports WCAG requirements but does not guarantee full compliance.

How does Welcoming Web help with button labelling

Welcoming Web detects buttons without names and provides guidance to fix them.

Disclaimer

Welcoming Web supports accessibility improvement and alignment with recognised standards but does not issue or guarantee compliance certification.