Accessibility

ARIA Attributes

Toast notifications include appropriate ARIA roles and attributes:

• role="status" for standard toasts
• role="alert" for error toasts
• aria-live="polite" for non-critical notifications
• aria-live="assertive" for important alerts

Keyboard Navigation

All toast notifications can be navigated to and dismissed with a keyboard:

• Tab: Move focus to the toast
• Enter/Space: Dismiss the toast when focused (if dismissible)
• Escape: Dismiss all toasts

Screen Reader Announcements

React Toast Kit uses a visually hidden ARIA live region to announce toast messages to screen readers without interrupting focus. This ensures that users are notified of important information regardless of their current focus position.

Reduced Motion Support

For users who prefer reduced motion, the toast animations automatically respect theprefers-reduced-motionmedia query, using more subtle animations or no animations at all.

Best Practices

• Use meaningful titles and descriptions that provide context when read by screen readers
• Keep toast messages concise and focused on a single piece of information
• Use appropriate toast variants (success, error, etc.) to convey the right semantic meaning
• Consider using longer durations for toasts with more content
• Ensure custom toast components include proper keyboard navigation and focus management

Implementation Example

// Setup with accessibility features enabled
<ToastProvider
  enableAccessibleAnnouncements={true} // Enable screen reader announcements
  defaultDuration={5000} // Give users enough time to read notifications
>
  <YourApp />
</ToastProvider>

// Accessible toast example
const showAccessibleAlert = () => {
  toast.error({
    title: 'Connection Error',
    description: 'Unable to connect to the server. Please check your internet connection.',
    // Proper accessibility settings
    dismissible: true,
    pauseOnHover: true,
    duration: 8000, // Longer duration for important messages
    // Optional callback when dismissed
    onDismiss: () => {
      console.log('User acknowledged the error');
      // Focus can be returned to a specific element if needed
      document.getElementById('retry-button')?.focus();
    },
  });
};