Skip to main content

Ensure Accessible Name Contains the Visible Label Text

WCAG 2.1 Ultimate Guide
Disabilities Affected: Cognitive, Visual
Success Criterion: 2.5.3
Level: A
WCAG Link
For user interface components with visible text or image-of-text labels, the accessible name (programmatically determined name used by assistive tech) must contain the text presented visually.

Why It Matters

Speech input users interact with components by speaking their visible labels (e.g., “Click Submit”). If the accessible name (what the speech software targets) doesn’t match or contain the visible label, the voice command will fail. It also helps screen reader users and those with cognitive disabilities by providing consistency between what they see/hear and the underlying component name.

Fixing the Issue

Ensure the accessible name for a component includes the exact text shown visually.

  • If using <label for=”id”>, the label text becomes the accessible name.
  • If using aria-labelledby, the text of the referenced element(s) becomes the name.
  • If using aria-label, make sure its value contains the visible text. For example, if a button shows “Info”, aria-label=”More Information” is okay, but aria-label=”Details” is not, because it doesn’t contain “Info”. Best practice is often to match exactly or have the aria-label start with the visible text.
  • For standard buttons (<button>Submit</button>), the text content “Submit” is both the visible label and the accessible name, which is ideal.

Good Code Example

Accessible name contains the visible label text:

  • <label for="uname">Username</label>
<input type="text" id="uname">
<button>Search</button>
<button aria-label="Find out more about our services">
  More <img src="/wp-content/uploads/icon_info.svg" alt="" /> </button>
<span id="btn-label">Save Draft</span>
<button aria-labelledby="btn-label">
   <img src="/wp-content/uploads/submit-icon.svg" style="width:30px;" alt="" /> </button>
  • Save Draft

Bad Code Example

Accessible name does not match or contain the visible label:

  • <label for="email">Email</label>
<input type="text" id="email" aria-label="Enter your electronic mail address">
<button aria-label="Submit search query">Go</button>
<button aria-label="Remove">Delete Item</button>
Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling
Learn More
Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.
Schedule Consult