Input fields
Input fields are where users enter and edit text. It is usually part of the form components.
Accessibility
1. Anatomy
Aria attributes
Value | Purpose |
aria-label= “label” | Annotates the label of the buttons. |
aria-modal= “boolean” | Indicates the dialog is a modal. |
aria-labelledby= “IDREF” | Refers to the heading containing the currently displayed month and year, which defines the accessible name for the dialog. |
aria-live= “polite” | Indicates the element that displays information about keyboard commands for navigating the grid should be automatically announced by screen readers. |
- Users can use either month and year selector or pagination to navigate.
- Users can either type or select the date from the calendar.
3. Keyboard experience
3.1 Opening the calendar
3.2 Move around the calendar
Tab to move around the calendar. You will not leave the calendar without choosing a date options or hit “esc”. Please note, tab will not go through all the numbers. You will have to use arrows to move around the date.
3.3 Select a date
Tab to move around the calendar. You will not leave the calendar without choosing a date options or hit “esc”. Please note, tab will not go through all the numbers. You will have to use arrows to move around the date.
