RatedWithAI

RatedWithAI

Accessibility scanner

Free Scan

WCAG 2.1

2.5.3 Label in Name

Level A success criterion

The accessible name of UI components should contain the visible label text.

Why it matters

Voice control users rely on matching visible labels to activate controls.

Common violations

  • Buttons labeled visually as "Send" but named "Submit"
  • Icon buttons with mismatched aria-labels
  • Custom controls with hidden labels

Code examples

Bad

<button aria-label="Submit">Send</button>

Good

<button aria-label="Send">Send</button>

How to fix

Ensure aria-label or aria-labelledby includes the visible label text.

Related criteria

4.1.2 Name, Role, Value2.4.6 Headings and Labels3.3.2 Labels or Instructions

Related resources

WordPress accessibility guideShopify accessibility guideSquarespace accessibility guide

Test & fix this criterion

Use these free tools and guides to check and fix 2.5.3 Label in Name violations:

Free accessibility checker — find WCAG violations automaticallyColor contrast checker — test contrast ratiosHow to fix common WCAG failuresTop 10 most common WCAG failures

Scan your site

Check your WCAG coverage in minutes

Start a free scan