Developer Input
What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Enter | Submits the entered value. |
Backspace | Erases character or symbol before the cursor. |
See detailed information about the keyboard support for the inputs in the Keyboard control guide.
Considerations for developers
- Use labels for every input and make the
for=""andid=""values match. IDs must be unique on each page, only one label can be associated to each unique form element. Keep it simple – do not all browsers correctly expose multiple labels that are linked to the same form element. Refer to our examples. - Make optional fields obvious by adding text "optional" to the input.
- Inputs with the
invalidstate should be associated with their error message usingaria-describedby.
Resources
- 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.
Other recommendations
Find more accessibility recommendations in the common Accessibility guide.