Content card

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.

• Ensure buttons and links have meaningful aria-labels if there are multiple content cards with generic link or button labels. For example, use “close cardA” so a screen reader will announce which card the button goes to.
• Ensure clickable cards don’t have additional controls like a close button, as the whole card is a button.
• Consider using an HTML heading element for each card to help with keyboard navigation and page summaries for screen readers. Be sure to use the right heading level for the hierarchy of the page so that there aren’t skipped levels, even if you style the heading to look like a different level.

Keyboard controls

VGAR (internal only)

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