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

• Use a native HTML header landmark. Any nav landmark elements used within, such as for the mobile menu, need to have unique and descriptive aria-labels.
• Don’t use the word “navigation” in the aria-label, as this will be announced automatically and be redundant for screen readers.
• Use aria-current="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.
• Adjust the behaviors and breakpoints for horizontal navigation to fit your app.The horizontal nav should be responsive, so as the viewport gets narrower, content becomes hidden until the “hamburger” mobile menu is visible.

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 with a custom logo. Choose between the class for light or dark foreground depending on the custom logo. 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 maincomponent.

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.