Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Focus moves to the hour/minute select and opens the dropdown with hour/minute options. |
Shift + Tab | Focus moves to the previous focusable element. |
Up Arrow , Down Arrow | Moves focus between the options in the dropdown. If focus is on the last/first option, moves focus to the first/last option respectively. |
Space , Enter | Selects the option and closes the dropdown. |
Esc | Closes the dropdown and returns focus to the hour/minute select trigger. |
Roles and attributes
The list below describes roles and attributes that component already has.
| Role | Attribute | Element | Usage |
|---|---|---|---|
switch | div | Identifies button for changing time format as a switch. | |
aria-label | div | Defines the accessible name of the input, button. | |
aria-expanded="false" | div | Indicates that the popup element isn’t displayed. | |
aria-expanded="true" | div | Indicates that the popup element is displayed. | |
aria-autocomplete | div | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox , searchbox , or textbox and specifies how predictions will be presented if they are made. | |
aria-controls="#IDREF" | div | Identifies the element that serves as the popup. | |
aria-haspopup | div | Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. | |
aria-valuenow="NUMBER" | div | Defines the current value for a widget. |
For information about the dropdown behavior see Keyboard support for dropdown.
Resources
Find live examples of accessible inputs with different types in DigitalA11y project.
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 "In web content Your time Your time".
3. Screen reader goes to the next element.
4. Screen reader says "Your time group".
5. Screen reader goes into the active element.
6. Screen reader says "Time input, no time entered group".
7. Screen reader goes into the active element.
8. Screen reader says "Hours input field 00 list box pop up Menu pop-up combo box".
9. Screen reader goes into the active element.
10. Screen reader says "In Menu pop-up combo box".
11. Screen reader types "04".
12. Screen reader says "You are currently on a Menu pop-up combo box. Type text or, to display a list of choices, press Control-Option-Space.".
13. Screen reader goes to the next element.
14. Screen reader says "end of Time input, entered time is 4: AM group".
15. Screen reader types "20".
16. Screen reader says "20".
17. Screen reader presses the "Enter" button.
18. Screen reader goes out of active element.
19. Screen reader says "Your time group".
20. Screen reader goes into the active element.
21. Screen reader says "Time input, entered time is 4:20 AM group".1. Screen reader goes into the active element.
2. Screen reader says "In web content Your time Your time".
3. Screen reader goes to the next element.
4. Screen reader says "Your time group".
5. Screen reader goes into the active element.
6. Screen reader says "Time input, no time entered group".
7. Screen reader goes into the active element.
8. Screen reader says "Hours input field 00 list box pop up Menu pop-up combo box".
9. Screen reader goes into the active element.
10. Screen reader says "In Menu pop-up combo box".
11. Screen reader types "04".
12. Screen reader says "You are currently on a Menu pop-up combo box. Type text or, to display a list of choices, press Control-Option-Space.".
13. Screen reader goes to the next element.
14. Screen reader says "end of Time input, entered time is 4: AM group".
15. Screen reader types "20".
16. Screen reader says "20".
17. Screen reader presses the "Enter" button.
18. Screen reader goes out of active element.
19. Screen reader says "Your time group".
20. Screen reader goes into the active element.
21. Screen reader says "Time input, entered time is 4:20 AM group".