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: VPDS Listbox components are used within other components such as Multiselect and Combobox. Dropdown menu components aren’t listboxes. They use listbox CSS classes but function differently and have different roles.

An element with cannot have any form controls within it. In some implementations, the “checkboxes” within multi-select listboxes are spans styled to look like checkboxes.

Use the up and down arrow keys to cycle through the options. Using the Tab key will move the focus to the next focusable element after the listbox.

Keyboard controls

All vertical oriented listbox

Keyboard actions and their corresponding behaviors for vertical oriented listbox
Key	Behavior
`↑↓`	Navigates to an item.
`Home`	Moves the focus to the first listbox item. Recommend for lists with more than five items.
`End`	Moves the focus to the last listbox item. Recommend for lists with more than five items.
`Tab`	Moves to the next element in the form. Persist and maintain the view within the listbox when focus moves to the next element.
`Shift`+`Tab`	Moves focus onto the previously selected item. Note that this function is only true when the keyboard focus is one element next to listbox.

Multi-select listbox

Keyboard actions and their corresponding behaviors for multi-select listbox
Key	Behavior
`Enter` or `Space`	Checks/unchecks the checkbox when the component is in focus.
`Shift`+`Space`	Selects consecutive items from the most recently selected item to the focused item.
`Shift`+`↑`	Moves the focus to and toggles the selected state of the previous item.
`Shift`+`↓`	Moves the focus to and toggles the selected state of the next item.

VGAR (internal only)

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