WCAG 2.1 AA: Ideal Support
Component is usable and understandable for the majority of people with or without disabilities. The meaning conveyed and the functionality available is the same.
What component has
||Moves focus to the next focusable element.|
||Moves focus to the previous focusable element.|
||Submits the entered value.|
See detailed information about the keyboard support for the input fields in the Keyboard control guide.
Considerations for developers
- Keep it simple – not all browsers correctly expose multiple labels that are linked to the same form element.
- Use labels for every input and make the
id=""values match. IDs must be unique on each page, only one label can be associated to each unique form element. Make required fields obvious by using an indicator – asterisk, description text, etc.
- Help text is crucial in ensuring accessibility of form fields. Fields with constraints should have visible instructions that are programmatically associated, such as through
aria-describedby. Include help text for all masked fields.
- Fields with error validation should have
aria-describedbyto insure that the associated field level error message is read by assistive technology. If the error message has an
id="my-error-message", then the input should have
Find live examples in the A11y style guide.
Considerations for designers
- Provide visible text instructions for inputs with constraints, such as a specific format for data.
- Focus must be visible.
- Don’t hide the input label on focus.
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.23.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element. 2. Screen reader says "In web content Card number Card number". 3. Screen reader goes to the next element. 4. Screen reader says "Card number edit text". 5. Screen reader goes into the active element. 6. Screen reader says "In edit text". 7. Screen reader types "55aa44 ". 8. Screen reader says "5544". 9. Screen reader goes out of active element. 10. Screen reader says "Out of edit text".