Developer 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. |
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
- 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
for=""andid=""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 anid="my-error-message", then the input should havearia-describedby="my-error-message".
Find live examples in the A11y style guide.
Considerations for designers
- Focus must be visible.
- Don’t hide the input label on focus.
Resources
A11y style guide describes core principles for the accessible inputs and textarea.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.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 "Author:".
3. Screen reader goes to the next element.
4. Screen reader says "Tap to edit:Martin Eden button".
5. Screen reader triggers element default action.
6. Screen reader says "Martin Eden Insertion at end of text. Author: edit text Press Enter to apply value, press Escape to discard changes group".
7. Screen reader presses the "Backspace" button.
8. Screen reader says "n".
9. Screen reader presses the "Backspace" button.
10. Screen reader says "e".
11. Screen reader presses the "Backspace" button.
12. Screen reader says "d".
13. Screen reader presses the "Backspace" button.
14. Screen reader says "E".
15. Screen reader presses the "Backspace" button.
16. Screen reader presses the "Backspace" button.
17. Screen reader says "n".
18. Screen reader presses the "Backspace" button.
19. Screen reader says "i".
20. Screen reader presses the "Backspace" button.
21. Screen reader says "t".
22. Screen reader presses the "Backspace" button.
23. Screen reader says "r".
24. Screen reader presses the "Backspace" button.
25. Screen reader says "You are currently on a text field. To enter text in this field, type.".
26. Screen reader presses the "Backspace" button.
27. Screen reader presses the "Backspace" button.
28. Screen reader types "Algernon".
29. Screen reader says "Algernon".
30. Screen reader presses the "Enter" button.
31. Screen reader says "Tap to edit:Algernon button".
32. Screen reader triggers element default action.
33. Screen reader says "Algernon Insertion at end of text. Author: edit text Press Enter to apply value, press Escape to discard changes group".
34. Screen reader types "Hello world?".
35. Screen reader says "world ?".
36. Screen reader presses the "Escape" button.
37. Screen reader says "Tap to edit:Algernon button".1. Screen reader goes into the active element.
2. Screen reader says "Author:".
3. Screen reader goes to the next element.
4. Screen reader says "Tap to edit:Martin Eden button".
5. Screen reader triggers element default action.
6. Screen reader says "Martin Eden Insertion at end of text. Author: edit text Press Enter to apply value, press Escape to discard changes group".
7. Screen reader presses the "Backspace" button.
8. Screen reader says "n".
9. Screen reader presses the "Backspace" button.
10. Screen reader says "e".
11. Screen reader presses the "Backspace" button.
12. Screen reader says "d".
13. Screen reader presses the "Backspace" button.
14. Screen reader says "E".
15. Screen reader presses the "Backspace" button.
16. Screen reader presses the "Backspace" button.
17. Screen reader says "n".
18. Screen reader presses the "Backspace" button.
19. Screen reader says "i".
20. Screen reader presses the "Backspace" button.
21. Screen reader says "t".
22. Screen reader presses the "Backspace" button.
23. Screen reader says "r".
24. Screen reader presses the "Backspace" button.
25. Screen reader says "You are currently on a text field. To enter text in this field, type.".
26. Screen reader presses the "Backspace" button.
27. Screen reader presses the "Backspace" button.
28. Screen reader types "Algernon".
29. Screen reader says "Algernon".
30. Screen reader presses the "Enter" button.
31. Screen reader says "Tap to edit:Algernon button".
32. Screen reader triggers element default action.
33. Screen reader says "Algernon Insertion at end of text. Author: edit text Press Enter to apply value, press Escape to discard changes group".
34. Screen reader types "Hello world?".
35. Screen reader says "world ?".
36. Screen reader presses the "Escape" button.
37. Screen reader says "Tap to edit:Algernon button".