Visa Product Design System

Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.

Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.

Best practices

Ensure the following best practices are met when implementing this component during development.

Note: Date and time selectors are inputs with or . Our libraries use these HTML elements, so different browsers will show this component differently. As a result, developers have a limited amount of control over how these elements appear and behave.

Always label and elements and associate them with related content.

Keyboard controls

VPDS date and time selectors share keyboard behavior with text inputs. The special date and time menus are controlled by the browser.

Input field

Reference Text field and Button specs for base behavior.

Keyboard actions and their corresponding behaviors for input field
Key	Behavior
`←` `→`	Moves between the date fields mm/dd/yyyy and adjust the entries within those fields.
`↑` `↓`	Moves between the date fields mm/dd/yyyy and adjust the entries within those fields.
character `0`-`9`	Accepts all valid characters.
`Space`	Opens the date selector menu and places focus on the selected date displayed in the input text field. If no date has been selected, it places the focus on the current date.

Date selector menu

Keyboard actions and their corresponding behaviors for date selector menu
Key	Behavior
`Esc`	Closes the menu and moves the focus back on menu-prompting element. If the focus or hover was set to a different menu item, closing the menu with Esc will not update the selection.
`Tab`	Moves the focus to the next item of the tab sequence within the date selector menu. Note: Only one button within the calendar grid is in the tab sequence. The focus will loop back to the top (Month and year label) when the focus is on the last button (Today).
`Shift` + `Tab`	Moves the focus to the previous item of the tab sequence within the date selector menu. Note: Only one button within the calendar grid is in the tab sequence. Focus will loop back to the bottom (Today) when the focus is on the first button (Month and year label).

Date selector menu: Dates grid

Keyboard actions and their corresponding behaviors for date selector menu: dates grid
Key	Behavior
`Enter`	Selects the date receiving focus, places focus back on the menu-prompting element, and updates the text field to display the selected date.
`↑↓←→`	Moves the focus to the next menu item. The focus moves based on the set grid. ←→ moves the focus to the previous or next day incrementally. If the focus is on the last day of the week, pressing → moves the focus to the following day. For example, if the focus was on the end of the week, pressing → shifts the focus to the following start of the week. ↑↓ moves the focus to the previous or next week, on the same day of the week.
`Home` `End`	Home key moves the focus to the first day of the current week. End key moves the focus to the last day of the current week.
`Page up` `Page down`	Page Up key changes the grid of dates to the previous month. Page Down key changes the grid of dates to next month. Set focus to the same date. If that day does not exist, then move focus to closest available date. For example, for dates that don’t exist within all months, such as the 29, 30, and 31, move the focus to the last date of the month.

Date selector menu: Month and year label and navigation buttons

Keyboard actions and their corresponding behaviors for date selector menu: month and year label and navigation buttons
Key	Behavior
`Space` OR `Enter`	Changes the month and/or year displayed in the calendar grid.

Clear button

Keyboard actions and their corresponding behaviors for clear button
Key	Behavior
`Space` OR `Enter`	Space or enter key on the Clear button closes the date selector menu, reset the month, date, and year in the input, and return the focus to the menu-prompting element.

Today button

Keyboard actions and their corresponding behaviors for today button
Key	Behavior
`Space` OR `Enter`	Space or enter key on the Today button selects today’s date and close the menu.

VGAR (internal only)

Find links to the Visa Global Accessibility Requirements (VGAR) for this component.