Visa Product Design System

Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.

Best practices

Landmarks

Each page needs landmark regions, such as, main (which is required), header, and footer. These areas help keyboard users to easily navigate a page. Each landmark needs an accessible name, particularly if there’s more than one of them. For example, if there are two elements, each needs a unique name.
An accessible name is optional for some elements which appear once per page, like and footer. All page content must be contained within a landmark region.

Don’t include the landmark role type (such as “main,” “banner,” “navigation,” or “contentinfo”) in the accessible name because this will already be announced by the screen reader.
Include a “Skip to main content” link as the first interactive element on every page (or as the second if a “Skip to login” link is present). This link moves focus directly to the main content region, or to the errors summary if present. It may be visually hidden until it receives keyboard focus.
Place global UI elements consistently throughout your application, not inside the element, so users can easily find them.
Don’t include more than one or .
Each screen should have exactly one region. This is the primary content area of the page.
Each screen should have exactly one heading, which should closely match the title attribute in the section. This includes single page apps (SPA). The heading text and head title should change each time the user visits a new page.
Include only one footer.
Ensure each has a unique accessible name.
Ensure each has an accessible name.

Scroll and zoom

The user should be able to reach every item on the page. Ensure elements fixed to the viewport can be scrolled and don’t block other parts of the page, especially when zoomed. It’s recommended to have either a fixed header or a fixed footer, not both, because zooming the page can leave little or no scrollable content area.

Some elements such as tables may be wider than what fits in the layout. It’s recommended to allow horizontal scroll on those elements or their immediate containers rather than allowing horizontal scroll on the whole page.

Logical tab order

Keyboard navigation through the page should be logical and useful. Each section’s order in the DOM, tab order, and visual order should all be in agreement.

VGAR (internal only)

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

Application layouts

Best practices

Landmarks

Scroll and zoom

Logical tab order

VGAR (internal only)