Visual and programmatic labels should align.
What you need to know
- Some buttons, form fields, selectors and other interactive elements may have a programmatic label (label that is inside the code) that is slightly different from what visually shows on the website.
- Programmatic labels include HTML labels, ARIA labels, and alt text.
- For example, let’s say your button visually says “buy,” but the programmatic label you have associated with it is “order”.
- One alternative to the exact same label is to start the label and text off with the same few words.
- Visually a user might see “buy desktop,” but programmatically the label might be “buy desktop computer”. As long as there are no other labels that start with “buy desktop”, you’re in good shape. It’s actually somewhat common to have a few of these mismatches. As another example, a password field may be labeled as login.
What you need to do
- Make sure any visual and corresponding labels sync up. They may, but don’t have to be, exactly the same.
Check out “Failure Due to the Accessible Name Not Containing the Visible Label Text” from W3C’s Web Accessibility Initiative for more information about this criterion.