KEYBOARD-11: Visible labels at least partially match accessible names, ideally the beginnings of the strings.
How to test
- Identify each instance of an interactive control which has a visible label.
- Use devtools or a screen reader to ensure that the accessible name at least partially matches the visible text.
Exceptions
- Where a visible text label does not exist for a component.
How to fix
Ensure that the visible label matches, or at least partially matches, the accessible name. If the match is only partial, then it’s preferable that the visible label matches the start of the accessible name. Form fields can be given accessible labels which are partly different from their visible label using the `aria-label` attribute. However it is almost always best to allow the visible text to function as the accessible label, rather than using ARIA.
Related Standard: 2.5.3 A
This is one in a series of posts highlighting one of more than 270 accessibility tests in Mortise.io. Come back next week for more!