Requires that the accessible name of a control contains its visible label text, so speech users can activate it by what they see.
People who use speech recognition operate a control by saying what they see on it: "click Search". If the visible label says "Search" but the accessible name behind it is "Find products", the command does nothing. A screen reader user who hears something different from what a sighted colleague reads aloud is also confused.
This criterion requires that for user interface components with labels that include text or images of text, the accessible name contains the text that is presented visually.
People who use speech recognition software and say what they see on screen. Screen reader users who work with sighted colleagues or follow instructions that refer to visible text. People with cognitive disabilities who are confused when what is heard does not match what is seen.
The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. A name that matches the visible label is part of "operable".
The technical counterpart is the standard EN 301 549, which incorporates WCAG 2.5.3 by reference and turns it into separate clauses for each kind of ICT.
| Clause | Type of ICT | What it requires |
|---|---|---|
| 9.2.5.3 | Web pages | Web content must satisfy WCAG success criterion 2.5.3. |
| 10.2.5.3 | Non-web documents (PDF, Office files) | Documents must have names that include their visible labels where the standard applies the criterion to them. |
| 11.2.5.3 | Non-web software (native mobile apps) | Software must have accessible names that contain the visible label text. |
Whether and how the criterion applies to non-web documents is stated in clause 10 of the standard. Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.
Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 2.5.3 is the same in WCAG 2.1 and 2.2.
A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.
Directive (EU) 2019/882, EUR-Lex, opens in a new tab
The accessible name replaces the visible text. If they differ, speech users cannot activate the control by what they read (F96).
TR<button aria-label="Find products">Search</button><button>Search</button>
<!-- or, if more detail is needed: -->
<button aria-label="Search products">Search</button>When you add detail, keep the visible words at the beginning.
<a href="/cart" aria-label="Open your cart (3 items)">3 items</a><a href="/cart" aria-label="3 items in your cart">3 items</a>Use label so that the visible text is the name.
<span>Email</span>
<input aria-label="Contact address"><label for="email">Email</label>
<input id="email" type="email">Hidden text appended after the visible text keeps the name correct.
<button><span class="sr-only">Remove item</span> Delete</button><button>Delete<span class="sr-only"> item 3</span></button>If the name is built from other elements, make sure the visible label is part of it.
<button id="b" aria-labelledby="other">Save</button>
<span id="other">Submit form</span><button id="b" aria-labelledby="b ctx">Save</button>
<span id="ctx" class="sr-only">profile</span>A control with no visible text label only needs a sensible name (4.1.2).
<button aria-label=""><svg>…</svg></button><button aria-label="Close"><svg aria-hidden="true">…</svg></button>The same applies to native controls. Make sure the accessibility label starts with, or contains, the visible text, and do not override a visible label with an unrelated one.
import SwiftUI
struct SearchButton: View {
var body: some View {
// Avoid: a visible "Search" with an unrelated accessibility label
// Button("Search") { }.accessibilityLabel("Find products")
// Default: the visible title is the label
Button("Search") { search() }
// If you need more detail, start with the visible text
Button("Search") { search() }
.accessibilityLabel("Search products")
}
}import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
@Composable
fun SearchButton() {
// Default: the button text is the accessible name
Button(onClick = { search() }) { Text("Search") }
// Avoid: a description that does not contain the visible text
// Modifier.semantics { contentDescription = "Find products" }
// If you need more detail, start with the visible text
Button(
onClick = { search() },
modifier = Modifier.semantics { contentDescription = "Search products" }
) { Text("Search") }
}aria-label and aria-labelledby on controls that also have visible text.aria-label that differs from the visible text: The most common failure (F96).Corpowid has been recognized by Gartner, a leading global research and advisory firm, for our innovation and performance in digital accessibility. These badges reflect our commitment to creating inclusive, AI-powered web experiences.
