About This Accessibility Rule
The visible label of interactive items labeled through their content must be included in their accessible name.
This rule applies to any element with the following attributes:
- a semantic role that is a widget that supports name from content,
- visible text, and
-
an
aria-labeloraria-labelledbyattribute.
button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, and treeitem are widget roles that support name from content.
The whole visible text content of the target element either matches its accessible name or is contained within it.
Leading and trailing whitespace and case sensitivity differences should be disregarded.
Users using speech input can interact with a web page by saying the visible text labels of menus, links, and buttons.
Voice input users are confused when they utter a visible text label, but the speech command does not work since the accessible (programmatic) name of the component does not match the visible label. When a user interface component contains a visible text label — whether the label is actual text or a picture of text — that text must also appear in the component’s accessible (programmatic) name. When the visual label and accessible (programmatic) name for interactive components are synchronized, users using speech input can engage with those components successfully.
What this Accessibility Rule Checks
For any user interface element with a visible text label, the accessible name must match (or include) the label’s visible text.
Learn more:
- → Deque University - How To Fix
- → WCAG 2.1 - Success Criterion 2.5.3 Label in Name
- → WCAG 2.1 - Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name
- → WCAG 2.1 - Using label elements to associate text labels with form controls
- → WCAG 2.1 - Using aria-labelledby to provide a name for user interface controls
- → WCAG 2.1 - Using aria-label to provide an invisible label where a visible label cannot be used
- → WCAG 2.1 - Using the title attribute to identify form controls when the label element cannot be used
Detect accessibility issues automatically
Rocket Validator scans thousands of pages with Axe Core and the W3C Validator, finding accessibility issues across your entire site.