Section message

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: Section messages shouldn’t rely on visual cues such as color or icons to communicate to users. Ensure there is additional text to relay information. Some of our libraries have default values for message type labels such as “success”, “warning”, and “error” but you may want to use custom labels, especially if your app is multilingual.

• Ensure section messages use headings in the correct hierarchical order without skipping levels. Headings can be styled to look like a different level. See your preferred library for more information on Typography.
• Use attributes to announce content to screen readers if you need to show a section message dynamically after the page loads. Select which attributes to use based on the message purpose and content.role with a value of status or alert, aria-live, and aria-atomic are useful.
• Ensure screen readers announce the messages at the desired time.

Keyboard controls

Note: Section messages are comprised of other elements which use standard keyboard actions. Activating the Escape key does not close the section message, as that might disrupt what the user is doing by closing something else.

VGAR (internal only)

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