What component has

Keyboard support

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.
Esc	Returns from edit mode to view mode.

See detailed information about the keyboard support for the input fileds in the Keyboard control guide.

Considerations for developers

• Use labels for every input and make the for="" and id="" values match. IDs must be unique on each page, only one label can be associated to each unique form element. Keep it simple: not all browsers correctly expose multiple labels that are linked to the same form element. Refer to our examples.
• Fields with error validation should have aria-describedby to 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 aria-describedby="my-error-message".

Considerations for designers

Avoid hiding the input label on focus.

Resources

• A11y style guide describes core principles for the accessible inputs and textarea.
• Find live examples of accessible inputs with different types in DigitalA11y project.

Other recommendations

See more accessibility recommendations in the common Accessibility guide.