Navigation drawer

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: Although the list resembles tabs and uses tab styles, it does not have tablist roles or behaviors.

• Use aria-current="true" or aria-selected="true" to set the active tab.
• Make sure users can scroll to all the content within the drawer.
• Ensure nav elements have an aria-label with a unique and meaningful name. The label text shouldn’t include the word “navigation” as this will be announced automatically and be redundant for the screen reader.
• Implement navigation drawers as dialog elements.

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 a 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.

Keyboard controls

VGAR (internal only)

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