Skip to main content

Accessibility UI Guidelines: Accessible Alerts

Components

3.13 Alerts

Alerts are used to notify users about important information, such as errors, warnings, or successful actions. Ensuring alerts are accessible helps deliver critical messages effectively to all users, including those using assistive technologies.

3.13.1 Semantic Markup

Use semantic HTML and ARIA attributes to make alerts accessible. Include role="alert" for critical messages that need immediate attention or role="status" for less urgent updates.

<!-- Accessible Alert -->
<div role="alert">
    Error: Unable to save your changes. Please try again.
</div>

<!-- Accessible Status -->
<div role="status">
    Your changes have been saved successfully.
</div>

3.13.2 Live Regions

Use ARIA live regions (aria-live) to ensure alerts are announced automatically by screen readers. Choose aria-live="assertive" for critical messages and aria-live="polite" for non-critical updates.

<!-- Alert with ARIA Live Region -->
<div aria-live="assertive" role="alert">
    The server is currently down. Please try again later.
</div>

3.13.3 Dismissible Alerts

Provide a way for users to dismiss alerts, such as a close button. Ensure dismiss buttons are keyboard accessible and labeled appropriately.

<!-- Dismissible Alert -->
<div role="alert">
    <p>Warning: Your session will expire soon.</p>
    <button aria-label="Dismiss alert">Dismiss</button>
</div>


// Close Alert on Button Click
document.querySelector('[aria-label="Dismiss alert"]').addEventListener('click', (e) => {
    e.target.closest('[role="alert"]').remove();
});

3.13.4 Styling Alerts

Style alerts to visually differentiate between different types (e.g., error, warning, success). Use color and icons, but do not rely solely on color to convey meaning.

/* Alert Styling */
[role="alert"] {
    padding: 1rem;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

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

/* Dismiss Button */
[aria-label="Dismiss alert"] {
    background: none;
    border: none;
    color: #007bff;
    font-size: 1rem;
    cursor: pointer;
}

3.13.5 Testing Alerts for Accessibility

Test alerts with assistive technologies to ensure they are announced correctly and function as intended.

// Test Checklist
// - Verify alerts with role="alert" are announced by screen readers immediately.
// - Check that dismiss buttons are accessible via keyboard and screen readers.
// - Validate the visual styling for clear differentiation of alert types.

Best Practices for Alerts

  • Use Semantic Roles: Apply role="alert" for urgent messages and role="status" for non-urgent updates.
  • Implement Live Regions: Use aria-live to ensure alerts are announced automatically to screen readers.
  • Provide Dismiss Options: Include accessible dismiss buttons for user-controlled alerts.
  • Style Alerts Clearly: Visually distinguish between alert types using colors, icons, and text.
  • Test Thoroughly: Regularly test alerts with assistive technologies to identify and resolve accessibility issues.