Skip to main content

Accessibility UI Guidelines: Notifications

Notifications

3.9 Notifications/Toasts

Notifications or toasts are temporary messages used to inform users about updates, errors, or actions performed. Ensuring notifications are accessible helps provide an inclusive experience for all users, including those using assistive technologies.

3.9.1 Semantic Markup

Use semantic HTML and ARIA attributes to structure notifications. Include role="alert" or role="status" for automatic announcements to screen readers.

<!-- Accessible Notification -->
<div role="alert" aria-live="assertive">
    Your changes have been saved successfully.
</div>

3.9.2 ARIA Live Regions

Use ARIA live regions to ensure notifications are announced to screen readers. Set aria-live="polite" for non-critical updates and aria-live="assertive" for urgent messages.

<!-- Notification with ARIA Live Region -->
<div aria-live="polite" role="status">
    A new update is available.
</div>

3.9.3 Dismissible Notifications

Provide a way for users to dismiss notifications, such as a close button. Ensure the dismiss action is accessible via keyboard and screen readers.

<!-- Dismissible Notification -->
<div role="alert" aria-live="assertive">
    <p>There was an error processing your request.</p>
    <button aria-label="Close Notification">Dismiss</button>
</div>


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

3.9.4 Timed Notifications

For timed notifications, ensure users have enough time to read them. Allow users to pause or extend the display time if necessary.

<!-- Timed Notification -->
<div role="alert" id="notification" aria-live="assertive">
    Your session will expire in 5 minutes.
</div>


// Auto-hide Notification After 5 Seconds
setTimeout(() => {
    const notification = document.getElementById('notification');
    if (notification) {
        notification.remove();
    }
}, 5000);

3.9.5 Styling and Visibility

Ensure notifications are styled for visibility with sufficient contrast and do not obstruct other important content.

/* Notification Styles */
[role="alert"],
[role="status"] {
    background-color: #005fcc;
    color: white;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0.3rem;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Close Button Styling */
button[aria-label="Close Notification"] {
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
}
button[aria-label="Close Notification"]:hover {
    text-decoration: underline;
}

3.9.6 Testing Notifications for Accessibility

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

// Test Checklist
// - Verify that notifications with live regions are announced by screen readers.
// - Ensure dismiss buttons are keyboard accessible and screen reader friendly.
// - Validate timing for auto-hide notifications, ensuring users have enough time to read them.

Best Practices for Notifications/Toasts

  • Use Semantic Roles: Apply role="alert" or role="status" for notifications based on urgency.
  • Provide Dismiss Options: Allow users to dismiss notifications with a clear and accessible control.
  • Use ARIA Live Regions: Ensure notifications are announced to screen readers using aria-live.
  • Design for Visibility: Style notifications with sufficient contrast and clear typography to ensure readability.
  • Manage Timing: Provide adequate display time for timed notifications, with options to pause or extend.
  • Test Thoroughly: Regularly test notifications with assistive technologies and automated tools to ensure accessibility.