Accessibility

Accessible in-page alert requirements

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

WCAG guidelines

1.3.1 Info and Relationships

The in-page alert title should fit within the heading structure of the page. Use the appropriate <h1> to <h6> tag to mark up your alert title. Screen readers use heading tags to announce content in the correct order and hierarchy. If the alert title isn't marked correctly, it will be announced in the wrong place. That makes it difficult for people using assistive technology to understand and navigate the page.

2.1 Keyboard Accessible

Ensure that global alerts are operable by providing keyboard accessibility. Users should be able to navigate and interact with alerts using only a keyboard, without requiring a mouse or other pointing device. This includes ensuring that all interactive elements within the alert are keyboard accessible (W3C, 2018).

3.1.2 Language of Parts

Ensure that global alerts are understandable by using clear and concise language. Alerts should be written in plain language, using simple vocabulary and sentence structures to make them easy to understand for all users (W3C, 2018).

4.1 Compatible

Ensure that global alerts are robust by using standard markup and code that is compatible with assistive technologies. Alerts should be coded using semantic HTML and CSS, and any scripts or other technologies used should be compatible with assistive technologies such as screen readers (W3C, 2018).