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: Multiselects are a composite of native HTML elements. Follow the latest examples to ensure these elements are accessible using the keyboard and screen readers.

This component can display a message when no options are found.
Note that the multiselect menu is a listbox component. It uses elements with the role of “option” which doesn’t allow other form controls inside them. The “checkboxes” are not actual checkbox inputs.
Maintain common keyboard shortcuts used for editing text unless the use case requires a different behavior. Reference Input for more.

Keyboard controls

Input

Maintain common keyboard shortcuts used for editing text unless uniquely specified. Refer to Input for details.

Keyboard actions and their corresponding behaviors for input
Key	Behavior
`Tab`	Moves to the next interactive focusable element
`Shift` + `Tab`	Moves to the previous focusable element
`↑↓→←`	Opens the menu.

Menu (listbox pop-up)

Reference Listbox for detailed interactions. Focus will loop in a circular direction among the menu items.

Keyboard actions and their corresponding behaviors for menu (listbox pop-up)
Key	Behavior
`Enter`	Selects the focused highlighted option.
`Esc`	Dismisses menu and clears any inline autocomplete while maintaining user-entered input.
`Tab`	Moves to the next interactive focusable element and closes the menu.
`Shift` + `Tab`	Moves to the previous focusable element and closes the menu.
`↑↓→←`	Moves between the options when the menu is open. Arrow key interaction will loop focus within the options. When focus is on the last option within the set, the right/down arrow keys will move focus to the first option. When focus is on the first option within the set, the left/up arrow key will move focus to the last option.

VGAR (internal only)

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