Accessibility
For developers
Section titled “For developers”| Role | Use for |
|---|---|
role="alert" | Urgent messages (errors, warnings) that need immediate screen-reader announcement. Implies aria-live="assertive". |
role="status" | Informational or success messages that are less urgent. Implies aria-live="polite". |
Color is not enough
Section titled “Color is not enough”Never rely on color alone to convey meaning. Always pair the scheme (is-error, is-warning, is-info, is-success) with an icon and text. This ensures the message is accessible to users with color vision deficiencies.
Dismiss
Section titled “Dismiss”- The close button must have an accessible label (e.g.
aria-label="Close"). - After dismissing an alert, move focus to a logical location — the element that triggered the alert or the next piece of content.