Making toast notifications accessible

A toast that a screen reader never announces, or that disappears before a keyboard user can reach its button, does not work. These are the four things to check.

Announce it

Put the text in a live region so screen readers read it without moving focus. role="status" is polite and fits most messages. role="alert" interrupts, so keep it for urgent errors. Ding announces errors assertively and everything else politely. Live-region support varies between screen readers, so test with the ones your users have.

Give people time

A message on a timer is a problem for anyone who reads slowly or needs longer to react. Pause the timer on hover and on keyboard focus, keep toasts with buttons on screen longer, and do not auto-dismiss errors. In Ding, errors, loading toasts and toasts with a button stay until dismissed.

Keyboard access

If a toast has a button, keyboard users need a way to reach it. In Ding, Alt + T moves focus into the toast and Esc dismisses it.

Reduced motion

Spring animation looks good and some people turn motion off. Ding follows prefers-reduced-motion.

What a library cannot do for you

Do not let a toast be the only place a critical message or an Undo lives. Keep the text short and plain. See toast notification UX for when a toast is the right choice, and undo toast for a pattern that needs a second way back.