Alert Banner
Alert banners communicate critical information to users across your website. Use them to display important notifications, warnings, announcements, and informational messages that require immediate attention. The alert-banner component supports multiple severity levels, optional dismiss functionality, and call-to-action links to guide users to relevant resources.
Do
- Use appropriate alert levels to match the urgency and importance of your message.
- Write clear, concise headings that immediately communicate the alert's purpose.
- Include actionable next steps when users need to take specific actions.
- Use dismissible alerts for temporary notifications and updates.
- Use persistent alerts for critical information that must remain visible.
- Provide descriptive link text that explains where the link leads or what action it performs.
- Test with screen readers to ensure your alert content is properly announced.
- Keep content scannable with short paragraphs and clear language.
Don't
- Don't overuse alert banners — too many alerts reduce their effectiveness and create alert fatigue.
- Don't use vague language like "Something went wrong" — be specific about the issue and solution.
- Don't rely solely on color to convey meaning — the component includes icons for this reason.
- Don't make alerts auto-dismiss — users need time to read and act on the information.
- Don't use alert level inconsistently — maintain the same meaning across your site (e.g., always use "warning" for the same type of content).
- Don't include lengthy content — keep messages brief and link to detailed information when needed.
- Don't use alerts for non-urgent information — consider other components like in-page callouts for general tips.
- Don't forget to test keyboard navigation — ensure all interactive elements are accessible without a mouse.
Accessibility Best Practices
Screen Reader Support
- Semantic markup: The component uses proper heading elements (
role="heading"witharia-level="2") to maintain document structure. - Alert announcements: The
aria-hidden="false"attribute ensures screen readers announce the alert content when it appears. - Descriptive headings: Use clear, descriptive text in the
labelthat explains the alert's purpose without relying on visual cues.
Keyboard Navigation
- Dismiss functionality: The dismiss button is fully keyboard accessible with proper focus management.
- Link accessibility: Call-to-action links receive proper focus indicators and can be activated with Enter/Space keys.
- Tab order: Interactive elements follow logical tab sequence from content to action links to dismiss button.
Visual Accessibility
- Color contrast: Alert levels use high-contrast color combinations that meet WCAG AA standards.
- Multiple indicators: Icons accompany color coding to ensure information isn't conveyed through color alone.
- Focus indicators: Clear focus rings appear on interactive elements for keyboard users.
Content Guidelines
- Clear language: Write alert messages in plain language that's easy to understand.
- Specific actions: When including links, use descriptive link text that explains the destination (avoid "click here" or "read more" without context).
- Appropriate urgency: Match the alert level to the actual importance of the message.
Implementation Considerations
- Persistent vs. dismissible: Use persistent alerts for critical information that users must see; use dismissible alerts for less critical updates.
- Timing: Avoid auto-dismissing alerts as this can prevent users from reading the full content.
- Placement: Position alerts prominently but avoid blocking essential page content. Typically these should be positioned at the top of the page above the header.
- Testing: Regularly test with screen readers and keyboard-only navigation to ensure accessibility