Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Alerts

Alert components for displaying important messages to users. Alerts use proper ARIA roles and color is never the only indicator of message type.

HTML

<div class="ads-alert ads-alert-success" role="alert">
    <strong>Success:</strong> Your message here
</div>

<div class="ads-alert ads-alert-warning" role="alert">
    <strong>Warning:</strong> Your message here
</div>

<div class="ads-alert ads-alert-error" role="alert">
    <strong>Error:</strong> Your message here
</div>

CSS

.ads-alert {
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid;
    margin-bottom: 1rem;
}

.ads-alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.ads-alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.ads-alert-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

Accessibility Guidelines

Key Requirements

  • Use role="alert": Announces alert to screen readers immediately when it appears
  • Text labels required: Always include "Success:", "Warning:", or "Error:" text - never rely on color alone
  • Sufficient contrast: All text colors meet WCAG 4.5:1 minimum contrast ratio
  • Clear messaging: Messages should be specific and actionable
  • Persistent display: Alerts should remain visible until user dismisses them or takes action

Alert Types and When to Use

  • Success: Confirm completed actions (form submitted, changes saved)
  • Warning: Caution users about potential issues or required actions
  • Error: Inform users of problems that prevent task completion
  • Info (optional): Provide helpful information that doesn't require action

Dismissible Alerts

If adding a close button to dismiss alerts:

  • Include an accessible label like aria-label="Close alert" on the button
  • Use a clear X or "Close" text, not just an icon
  • Ensure the button is keyboard accessible
  • Consider whether the alert should be automatically dismissed after time

Custom Implementation Notes

Live regions: The role="alert" automatically creates a live region with assertive politeness. This means screen readers will interrupt current speech to announce the alert. Use this for important messages only. For less critical notifications, use role="status" instead.

Focus management: For error alerts, consider moving focus to the alert or to the first field with an error. This helps keyboard and screen reader users immediately understand and fix the problem.

Placement: Position alerts near the top of the page or near the related content. For form errors, place the error message near the problematic field AND include a summary alert at the top of the form.

How to Test for Accessibility

  1. Screen Reader Test:
    • Trigger an alert to appear dynamically
    • Verify screen reader announces the alert immediately
    • Verify both the label (Success/Warning/Error) and message are announced
  2. Visual Test:
    • Check contrast of text against background (4.5:1 minimum)
    • Verify alert is distinguishable without color (has text label)
    • Test with color blindness simulator
  3. Keyboard Test:
    • If alert has close button, verify it's keyboard accessible
    • Tab to close button and press Enter or Space to dismiss

References