Web accessibility is the practice of ensuring that all people, including those with disabilities, can understand and interact with your website. To provide an accessible experience for users of certain assistive technologies—such as screen readers and speech recognition software—it’s critical to align the visual labels of website elements with their programmatic names: the labels these elements are given in your website’s code. This consistency in labeling is the focus of WCAG 2.5.3 Label in Name (Level A).
In this article, we’ll take a deeper dive into what this success criterion states, and why it’s important. We’ll also discuss how to implement WCAG 2.5.3 Label in Name on your website to create a better user experience.
What is WCAG 2.5.3 Label in Name (Level A)?
WCAG 2.5.3 Label in Name (Level A) is a success criterion in version 2.1 of the Web Content Accessibility Guidelines (WCAG). The success criterion states: “For user interface components with labels that include text or images of text, the name contains the text that is presented visually.”
In simpler terms, this means that the text visual users see on a button, form field, or other interactive element should match the programmatic label in the element’s code. Aligning visual and programmatic labels ensures that screen readers can accurately describe the element’s purpose. It also allows individuals who use speech recognition tools to navigate by speaking the element’s visible label.
Because this criterion helps users operate different website elements effectively, it’s listed under WCAG Principle 2, “Operable”. It is also listed under Guideline 2.5, “Input Modalities”, as it reduces barriers to usability for individuals who interact with web content through different input methods, beyond a keyboard and mouse.
Why is consistent labeling important?
Implementing WCAG 2.5.3 offers a number of benefits to both website owners and end-users. Here are some of the key advantages of meeting this success criterion:
- Improving accessibility for screen reader users: Screen readers rely on programmatic labels to describe interactive elements to users who are blind or have low vision. If the visual and programmatic labels match, users receive accurate information that helps them interact with your website.
- Improving accessibility for users of speech recognition software: Individuals who navigate websites with speech recognition tools may use the visual labels of elements in voice commands. The visual and programmatic names of elements must align for these commands to be executed effectively.
- Complying with legal requirements: Conforming to WCAG 2.1 Level A and AA criteria, including WCAG 2.5.3 Label in Name, is a best practice for compliance with many accessibility laws, including the Americans with Disabilities Act (ADA).
Key requirements for conforming with WCAG 2.5.3 Label in Name
To conform with WCAG 2.5.3, website owners must take the following actions:
- Ensure that elements with visual labels have programmatic labels: Any interactive element that has a visual label also needs to have a programmatic label (e.g., aria-label).
- Ensure that visual and programmatic labels align: The text users see on an interactive element (e.g., a button labeled “Submit”) must be consistent with the programmatic label.
- Use partial matches effectively: While exact matches are ideal, partial matches are also acceptable as long as the programmatic label starts with the same words as the visual label. For example, if an element’s visual label reads “Buy desktop,” the programmatic label “Buy desktop computer” is sufficient.
How to implement WCAG 2.5.3 Label in Name
If you’re ready to provide a more accessible web experience for users of assistive technologies, the best practices listed below will help you get started implementing WCAG 2.5.3.
- Perform a web accessibility audit: Engage an accessibility expert to audit your website. The audit will identify interactive elements such as buttons, form fields, links, and icons with text elements that are not labeled consistently.
- Update missing or inconsistent labels: Add or edit programmatic labels for interactive elements to create consistency with these elements’ visual labels. For form fields, use the <label> element to associate text labels with their corresponding input fields (e.g., <label for=”username”>Username:</label> <input type=”text” id=”username” name=”username”>). For custom interactive elements, such as buttons or dropdowns, use ARIA labels (e.g., aria-label or aria-labelledby) to provide programmatic labels. (e.g., <button aria-label=”Submit form”>Submit</button>).
- Test with screen readers: Use screen readers like NVDA or JAWS to test your website and verify that programmatic labels match visual labels.
Common mistakes to avoid
WCAG conformance may seem complicated and intimidating at first, and not everyone gets it right the first try. While implementing WCAG 2.3.5, watch out for the following potential mistakes:
- Mismatched labels: Using different text for visual and programmatic labels can confuse users and lead to accessibility issues.
- Missing labels: Omitting programmatic labels altogether makes it difficult for screen reader users to understand the purpose of interactive elements.
- Using placeholder text as labels: Placeholder text inside input fields isn’t a substitute for labels. Always use visible labels to ensure accessibility.
Adhering to WCAG 2.5.3 Label in Name (Level A) is crucial to providing a barrier-free experience for users of assistive technologies, particularly screen readers and speech recognition software. By ensuring that visual and programmatic labels align, you can ensure that all users can interact with your website—whether they do so with a keyboard and mouse, or other input devices.
Remember, accessibility is not just about compliance—it’s about creating a digital world that welcomes and works for everyone. By implementing WCAG 2.5.3 Label in Name, you take a key step toward that goal.
