Pagination

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.

• Use a navigation landmark by containing the pagination in a nav element or an element with role="navigation" and give the element an aria-label. The landmark allows a user to navigate to this section and see it listed in a page summary.
• Code the pagination controls in an an HTML ul so screen readers announce the number of items.
• Ensure the button for the current page has the attribute aria-current="page".
• Manage the disabled state of the navigational buttons using the disabled attribute.
• Give all pagination controls accessible labels, as they are icon buttons.
• Don’t code overflow ellipses as button icons, as they’re not actionable.
• Use the library’s rtl class to ensure the arrows will point the correct direction in an RTL language.

Keyboard controls

VGAR (internal only)

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