List item

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.

An HTML ordered ol or unordered ul list should have only list items li as direct children, and list items should have only lists as direct parents. It’s a common mistake to place other HTML elements such as divs as direct children of lists, especially as containers for conditional content. List items may have HTML elements within them, including other lists. For Angular and React, use a container that doesn’t render such as ng-container or <></>.

• Use semantic HTML and ARIA roles for lists and list items so that assistive technologies recognize them as part of a list structure. Lists are landmarks and can be used for keyboard navigation. Screen readers announce the item number in ordered lists, and can announce the total number of items in lists.
• If a list item is interactive, its accessible name should match its visible label. Focus should move through list items in a meaningful, logical order.
• Include appropriate text alternatives for icons or images within a list item.
• Don’t use list markers to convey important information. They’re pseudo-elements, meaning they aren’t focusable or clickable and are inaccessible to screen readers.
• Use logical CSS for the contents of a list item to ensure it switches seamlessly between right-to-left (RTL) and left-to-right (LTR) modes.

VGAR (internal only)

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