Component Library
Labels - Form controls
Issue Description
For user interface components with labels that include text or images of text, the accessible name does not contain the text that is presented visually.
- Underscores are used to indicate a fill-in-the-blank space, but the screen reader simply announces the characters literally as "underline, underline, underline..."
Recommendation
Use labels that visually identify elements.
- For user interface components with labels that include text or images of text, the name contains the same text that is presented visually.
The label element identifies the control to all users. It is generally visible text, though sometimes hidden in an icon, such as at higher magnification or in a minimized navigation menu.
The label is often used as the name, such as the word Search preceding a search text entry field, or the text of a link. - When underscores are used to indicate a blank space, override the underlines with an <aria-label="fill-in-the-blank"> so the screen reader does not simply literally announce the characters, but gives the user insight into their purpose.
Speech input users benefit from intuitive and proper labels that can be discerned from the visible presentation, and confusion results when the labels and visual presentation do not match if the control does not respond to its visual name.