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.
- 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
- Focus must be visible.
- Don’t hide the input label on focus.
- A11y style guide describes core principles for the accessible inputs and textarea.
- Forms tutorial from W3C helps you understand common methods for creating accessible forms.
- Find live examples of accessible inputs with different types in DigitalA11y project.
See more accessibility recommendations in the common Accessibility guide.