Alerts & Notifications

Accessible alert patterns that communicate system feedback clearly and inclusively. Each alert state uses ARIA live regions to announce messages to screen readers while respecting user preferences and cognitive load.

Alert States

Four semantic alert states communicate different message types with appropriate color coding, iconography, and ARIA attributes.

Success Alerts

Changes saved successfully

Your profile has been updated and all changes are now live.

<div role="alert" aria-live="polite" class="flex items-start gap-3 p-4 bg-pepper-green-50 border-l-4 border-pepper-green-500 rounded-lg">
    <svg class="w-6 h-6 text-pepper-green-600">...</svg>
    <div class="flex-1">
        <h4 class="font-semibold text-body text-pepper-green-900">Title</h4>
        <p class="text-body-sm text-pepper-green-800">Message</p>
    </div>
</div>

Warning Alerts

Approaching storage limit

You have used 85% of your storage quota. Consider upgrading your plan.

<div role="alert" aria-live="polite" class="flex items-start gap-3 p-4 bg-pot-of-gold-50 border-l-4 border-pot-of-gold-500 rounded-lg">
    
</div>

Error Alerts

Form submission failed

Please correct the highlighted errors and try again.

<div role="alert" aria-live="assertive" class="flex items-start gap-3 p-4 bg-chicken-comb-50 border-l-4 border-chicken-comb-500 rounded-lg">
    
</div>

Info Alerts

New features available

Check out our latest updates including dark mode and accessibility improvements.

<div role="status" aria-live="polite" class="flex items-start gap-3 p-4 bg-leaf-50 border-l-4 border-leaf-500 rounded-lg">
    
</div>

Alert Sizes

Three size variants for different contexts: small for inline messages, medium for standard alerts, and large for prominent announcements.

Small Alert

Email verified successfully

Medium Alert (Default)

Your session will expire in 5 minutes due to inactivity.

Large Alert

System maintenance scheduled

The platform will be unavailable on Sunday, October 29th from 2:00 AM to 6:00 AM UTC for scheduled maintenance.

Inline Alerts (Form Validation)

Compact alerts for form field validation that appear directly beneath input fields.

Email Address

Valid email address

Password

Password must be at least 8 characters

Accessibility & Usage Guidelines

ARIA Live Regions

role="alert" + aria-live="assertive": Critical errors that interrupt screen readers immediately
role="alert" + aria-live="polite": Success/warning messages announced when user pauses
role="status" + aria-live="polite": Informational updates announced politely
aria-atomic="true": Ensures entire alert message is announced (optional)

Key Accessibility Features

Color contrast: All text meets WCAG 2.2 Level AA (4.5:1 minimum)
Keyboard navigation: Dismiss buttons focusable via Tab, activate with Enter/Space
Icon semantics: Icons paired with text labels (color not sole indicator)
Screen reader support: ARIA live regions announce messages dynamically
Focus management: Dismiss button receives focus ring on keyboard navigation

Usage Guidelines

When to use: System feedback, form validation, confirmation messages, warnings, errors
When NOT to use: Marketing announcements (use banners), long-form content (use modals)
Best practices:
- Keep messages concise (1-2 sentences)
- Use appropriate ARIA live region for message urgency
- Provide clear dismiss action (X button or auto-dismiss)
- Position inline alerts near related content
- Don't stack multiple alerts (prioritize most important)

ARIA Attributes Reference


<div role="alert" aria-live="polite">...</div>


<div role="alert" aria-live="assertive">...</div>


<div role="status" aria-live="polite">...</div>


<button type="button" aria-label="Dismiss alert">
    <svg>...</svg>
</button>