Vertical navigation

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: Vertical navs are made up of multiple components. Follow guidelines for each of those.

• Use a native HTML header landmark.
• Ensure any nav landmark elements have unique and descriptive aria-labels. The label text should not include the word “navigation” as the screen reader will already announce that and it will be redundant.
• Only use a header element for the primary navigation if your application has both top and side navigation.
• Use aria-curent="page" on the link which leads to the current page. Links in the vertical menu look like tabs and use css classes for tabs, but are not tabs and don’t have tab roles.
• Ensure the content in the nav responds to a small window.

Logos

Our library has a classname just for the application name in the horizontal navigation component. There is a component for the Visa logo that adjusts for the user’s high contrast settings.

• Ensure the logo has an accessible name or is inside a link with an accessible name with aria-hidden="true" on the svg.
• Use one of the library’s classes for high contrast for a logo with light or dark foreground if you use a different logo, as setting a contrasting background behind the brand logo ensures it will have maximum contrast in high contrast mode without a visible change in default contrast mode.

Skip to main content link

The skip to main content link allows keyboard users to go directly to the main content of the page. This link is first in the DOM (unless there is a skip to login link). It appears when users land on the page and activates the tab key and is only visible when it receives keyboard focus. Activating the link moves focus to the main component.

Reference the examples to learn how to implement VPDS’s skip-link styles.

Skip to log in link

When navigation includes an account log in, the skip to log in link will appear when users press tab after page load and is tacked onto the top of the navigation bar. If user presses tab again, the user will be prompted with the skip to main content link.

Keyboard controls

VGAR (internal only)

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