Operable · 2.5 Input Modalities
For user interface components labeled with text or images of text, the accessible name must contain the text shown visually. Best practice is for the name to start with the visible text, in the same order.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
In the command box, type "click Search" or "click Buy now", as a voice control user would say it. Then switch to Fails and give the same commands.
Harbor rain jacket
$59.00
Harbor rain jacket
$59.00
The tools follow the version you last used.
What happened
Why it passes
Each button's name starts with the words on screen, so "click Search" and "click Buy now" work, and a screen reader reads the same words the person sees.
Why it fails
The button showing "Search" is named "Find products", and "Buy now" is named "Add item to cart". Saying the words on screen does nothing, and screen reader users hear words that do not match.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
− aria-label="Find products"
Fails
Live preview
<form role="search"> <label for="q">What are you looking for?</label> <input type="search" id="q" name="q"> <button type="submit" aria-label="Find products">Search</button></form>The button shows "Search" but its accessible name is "Find products". A voice control user who says "click Search" gets no response.
Passes
Live preview
<form role="search"> <label for="q">What are you looking for?</label> <input type="search" id="q" name="q"> <button type="submit">Search</button></form>With no aria-label, the button's name is its text, "Search", so the words people see, say and hear are the same.
Fails
Live preview
<article> <h3>Council agrees new budget for libraries</h3> <p>Opening hours will be longer from April.</p> <a href="/news/library-budget" aria-label="Full story on the library budget">Read more</a></article>The aria-label replaces the visible words, so the name does not contain "Read more". Saying "click Read more" does not reach this link.
Passes
Live preview
<article> <h3>Council agrees new budget for libraries</h3> <p>Opening hours will be longer from April.</p> <a href="/news/library-budget">Read more<span class="visually-hidden"> about the library budget</span></a></article>The name becomes "Read more about the library budget". It starts with the visible words, and screen reader users still get the context.
Why it matters
Speech input users activate controls by saying their visible label, which works only when the accessible name contains that text. Screen reader users who can see the screen also benefit from hearing the same words they read.
W3C: Understanding 2.5.3Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures