Accessibility

Accessible banner requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG guidelines

1.1.1 Non-text content

For hero banners, it's important to provide alternative text for images to ensure that users who are visually impaired can understand the content. The alternative text should describe the content of the image in a concise and meaningful way W3C (2018).

1.4.3 Minimum contrast

Banners should use appropriate contrast to ensure that all users, including those with low vision, can read the content. The text should have a minimum contrast ratio of 4.5:1 against the background W3C (2018).

2.1 Keyboard Accessible

Hero banners should be accessible via keyboard navigation to ensure that users who cannot use a mouse can still access the content. All interactive elements should be operable by keyboard, and keyboard focus should be visible to users W3C (2018).

2.4.4 Use descriptive link text

Any links within the banner should have descriptive link text that accurately describes the destination of the link. This helps users with screen readers and other assistive technologies to understand the content W3C (2018).