This content originally appeared on Digital A11Y and was authored by sathish kumar
Success Criterion 2.5.3 Label in Name (Level A): For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
A best practice is to have the text of the label at the start of the name.
Imagine you are using the voice control feature in iPhone or Windows recognition software to see how they work. When you are trying to activate a link “Sign in” which you visibly see, the speech input software, software is not able to activate the link.
You might be wondering why and try to solve the mystery. The answer lies in the code where the visible link text says “Sign in” but the aria-label says “Log in”. Now, let us put ourselves int eh shoes of those who use a speech input users and understand how it would be frustrating if the speech input program is not able to activate user interface controls just because the visible label and the accessible name do not match.
This success criterion intends to bridge the gap between the visible label and the accessible name so that people with disabilities who use visible label can use the same label programmatically.
Who benefits
- Speech input users – They can activate the controls without any surprises
- Text to Speech users – Converted text label and the visual label are the same that prevents confusion.
Examples
- A button’s visible label says “Buy now” and the accessible name too says “Buy now” instead of “Shop now”.
- A link has an image that says “Sign in to access the contents” and the alt attribute also says “Sign in to access the contents” instead of “Log in…”.
Points to Ponder
- Ensure the accessible names like aria-label and alt attribute contain the exact match of the visible label
- Ensure the visible label text and accessible name text are not interspersed
- Ensure the accessible name starts exactly with the visible name.
References
Understanding Success Criterion 2.5.3: Label in Name
This content originally appeared on Digital A11Y and was authored by sathish kumar
sathish kumar | Sciencx (2020-10-20T00:15:51+00:00) Understanding SC 2.5.3 Label in Name. Retrieved from https://www.scien.cx/2020/10/20/understanding-sc-2-5-3-label-in-name/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.