Operable Guideline 2.5 Input Modalities

2.5.3 Label in Name

A control's accessible name must include its visible text

Level A 1 automated check

What it asks for, in plain English

People who control their computer by voice say what they see: 'click Search', 'click Add to basket'. Speech software matches those words against each control's accessible name, which is the name assistive tech uses. If a developer has set an aria-label that says something different from the visible text, the words on screen do not work.

So for any control that has visible text, its accessible name must contain that text, ideally starting with it. The name may add more ('Search this site' for a button that shows 'Search'), but it must not replace or reorder it ('Find' for a button that shows 'Search').

This also matters for screen reader users who see the screen; they hear one word and read another, and assume something is wrong.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.5.3 page has the full intent, techniques and definitions.

Who it affects

Someone with a spinal injury using speech recognition says 'click Submit' four times and nothing happens, because the button's name is 'Send form'.

A person with low vision using a screen reader alongside the screen reads 'Next' and hears 'Continue to payment', and loses confidence in the page.

Anyone using a voice assistant to drive a browser hits the same mismatch.

Example

Broken
<button aria-label="Submit enquiry form">Send message</button>
<a href="/basket" aria-label="View cart">Basket (2)</a>

Saying 'click Send message' or 'click Basket' finds nothing, because the names are 'Submit enquiry form' and 'View cart'.

Fixed
<button>Send message</button>
<a href="/basket">Basket (2)<span class="visually-hidden">, view items</span></a>

Drop the aria-label and let the visible text be the name. If you need extra words, add them after the visible text rather than replacing it.

How to check it

  1. Inspect each button and link that has an aria-label or aria-labelledby. Compare it with the text on screen; the visible words must appear in the name, in the same order.
  2. Turn on Voice Control (Mac) or Voice Access (Windows) and say 'click' followed by the visible text of several controls. They should activate.
  3. Check icon buttons that also show a word, and form buttons where the label was 'improved' with ARIA.
  4. Check controls whose visible text comes from an image; the alt text is the name and must match the words in the image.

What Websight checks for 2.5.3

Websight runs this automated check for 2.5.3:

A The words on a control must be part of its accessible name label-content-name-mismatch People who use voice control activate a control by saying the words they can see on it.

Only a person can check this reliably. A scanner can compare a plain aria-label against plain visible text and catch the obvious mismatches, but it cannot read words in images or icons, and most of these labels are set in script. Test with speech control.

Practical tips

  • Do not put aria-label on anything that already has visible text. The text is the name.
  • If you need a longer name, start it with the visible words and add detail after them.
  • Watch for translations: a translated visible label with an untranslated aria-label is a common mismatch.

Scan your page and see where 2.5.3 stands

Websight gives a score out of 100, explains each automated finding in plain English, and lists the checks a person still needs to do.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.