2.5.3: Label in Name
Label in Name is a guideline under WCAG 2.1 that ensures the text presented to users in the user interface is included in the accessible name. This is particularly important for users who rely on assistive technologies, such as screen readers. The visible label of an element must match or contain the accessible name provided in the code to ensure consistency and usability.
Importance of 2.5.3: Label in Name Success Criterion
Ensuring that the visible label matches the accessible name is crucial for accessibility. This helps users who rely on assistive technologies to navigate and interact with web content more effectively. When labels and names are consistent, it reduces confusion and enhances the user experience. It also helps in meeting legal accessibility standards, ensuring compliance with regulations like the Americans with Disabilities Act (ADA) and improving the overall usability of the website for all users, including those with disabilities.
Primary Use Cases and Requirements Under Guideline 2.5.3: Label in Name (Level A)
Text Input for Email
When labeling a text input field for email, it is crucial that the accessible name matches the visible label. This ensures that users using assistive technologies can interact with the input field accurately.
Who will be impacted if violated: Users relying on screen readers and speech recognition software. They might struggle to identify or interact with the input field correctly if the accessible name doesn't match the visible label.
Visible Label: Email
Correct Accessible Name: "Email input field for entering your email address"
<label for="email">Email</label>
<input type="email" id="email" aria-label="Email input field for entering your email address">
Password Input
For password inputs, the visible label must be part of the accessible name to ensure proper interaction for all users.
Who will be impacted if violated: Users using speech recognition software might face difficulties in identifying and interacting with the password field.
Visible Label: Password
Correct Accessible Name: "Password input field for entering your password"
<label for="password">Password</label>
<input type="password" id="password" aria-label="Password input field for entering your password">
Submit Button
The accessible name of a submit button should match its visible label to facilitate its identification and activation by users using assistive technologies.
Who will be impacted if violated: Users relying on speech recognition software may not be able to activate the button effectively if the accessible name differs from the visible label.
Visible Label: Submit
Correct Accessible Name: "Submit form"
<button aria-label="Submit form">Submit</button>
Search Button
The search button's accessible name should match the visible label to ensure users can activate it correctly using assistive technologies.
Who will be impacted if violated: Users using screen readers or speech recognition software may have trouble finding and using the search button if the accessible name does not include the visible label.
Visible Label: Search
Correct Accessible Name: "Search the website"
<button aria-label="Search the website">Search</button>
Home Link
Links should have accessible names that match their visible text to ensure easy navigation for users relying on assistive technologies.
Who will be impacted if violated: Screen reader users may find it difficult to understand the purpose of the link if the accessible name does not reflect the visible text.
Visible Label: Home
Correct Accessible Name: "Home page"
<a href="index.html" aria-label="Home page">Home</a>
Contact Us Link
The "Contact Us" link should have an accessible name that includes the visible text to ensure clarity and ease of use for all users.
Who will be impacted if violated: Users using screen readers or speech recognition software may have difficulty finding or using the link if the accessible name is different from the visible label.
Visible Label: Contact Us
Correct Accessible Name: "Contact us for more details"
<a href="contact.html" aria-label="Contact us for more details">Contact Us</a>
About Us Menu Item
Navigation items should have accessible names that match the visible text to provide clear navigation paths for users of assistive technologies.
Who will be impacted if violated: Screen reader users might struggle to understand the navigation structure if the accessible names are not consistent with the visible labels.
Visible Label: About Us
Correct Accessible Name: "About us information"
<li aria-label="About us information"><a href="about.html">About Us</a></li>
Services Menu Item
Menu items like "Services" should have accessible names that include the visible label text to ensure all users can navigate effectively.
Who will be impacted if violated: Users relying on assistive technologies may find it difficult to understand and navigate the menu if the accessible name is different from the visible label.
Visible Label: Services
Correct Accessible Name: "Our services"
<li aria-label="Our services"><a href="services.html">Services</a></li>
Cart Icon
Icons used as buttons should have accessible names that include the visible text to ensure users of assistive technologies can identify and activate the button correctly.
Who will be impacted if violated: Users using speech recognition software might face difficulties in activating the button if the accessible name doesn't match the visible label.
Visible Label: Cart
Correct Accessible Name: "View shopping cart"
<button aria-label="View shopping cart">
<i class="fas fa-shopping-cart"></i> Cart
</button>
User Profile Icon
Buttons with user profile icons should have accessible names that include the visible text to ensure clarity for users of assistive technologies.
Who will be impacted if violated: Users relying on speech recognition or screen readers may struggle to identify and activate the button if the accessible name differs from the visible label.
Visible Label: Profile
Correct Accessible Name: "Access user profile"
<button aria-label="Access user profile">
<i class="fas fa-user"></i> Profile
</button>
Read More Link
For elements with a visible label like "Read More," it is important to provide additional context in the accessible name to specify what the link or button is about.
Who will be impacted if violated: Users relying on screen readers may not understand the context of the link or button if the accessible name is too generic.
Visible Label: Read More
Correct Accessible Name: "Read more about the event"
<a href="details.html" aria-label="Read more about the event">Read More</a>
How to Test Label in Name
Testing the "Label in Name" requirement manually involves verifying that the accessible names of UI components include the visible label text. Here are the steps:
-
Step 1: Inspect the Element
Use browser developer tools (e.g., Chrome DevTools) to inspect the element you want to test.
-
Step 2: Check the Accessible Name
Verify that the
aria-labeloraria-labelledbyattribute (or equivalent accessible name property) includes the visible label text. Ensure that the accessible name provides additional context where necessary (e.g., "Read more about the event"). -
Step 3: Use Accessibility Testing Tools
Utilize tools like the Accessibility Insights for Web, WAVE, or Axe to check the accessible names of UI components.
-
Step 4: Test with Screen Readers
Use screen readers like NVDA, JAWS, or VoiceOver to navigate the page and ensure that the screen reader announces the element with the correct name.
-
Step 5: Test with Speech Recognition Software
Try activating the UI components using speech recognition software like Dragon NaturallySpeaking. Ensure the visible label text can be used to activate the element.