The User Experience of Toast Messages
A toast message or floating notification is a common way to deliver brief messages about the system's state. It neatly informs the user of the successful result of their action and provides warnings or alerts about system status issues, without altering the page layout or occupying real estate within the page flow.
A11y concerns #
Asynchronous updates and messages, like all your other content, need to be communicated in an inclusive way. When implemented correctly, these messages are announced by screen readers when rendered, but do not capture focus for screen reader users or Assistive Technology users.
However, this pattern can still pose significant accessibility issues and should be avoided for the following reasons.
#1 Out of View for some users #
Toast messages are difficult to see for screen magnifier users and commonly render outside of their view.
#2 Too fast for some #
Toast Messages auto-dismiss before some users can read and act on the content, particularly for distracted or slower-reading users.
#3 Too slow for others #
Depending on the content and value of the toast messages, they can be perceived to linger too long for some users, obscuring the content and actions below them.
#4 Too intrusive #
Toast messages can be distracting for users if overused, occupy space above important real estate, can add additional actions (to dismiss), and can get in the way of the user's next tasks.
#5 Implementation complexity #
Toast messages are challenging to implement so that they are reliably announced to screen reader users and function correctly across a variety of scenarios, such as returning from a modal, updating items on the current page, navigating between pages, or resolving asynchronous or long-running tasks. Achieving this consistency without disrupting focus management is especially difficult. For instance, if a toast with an urgent action (like “Undo”) auto-dismisses without capturing focus, many users will miss it entirely. On the other hand, forcing focus can interrupt the user’s workflow and cause distraction.
In short, the pattern often cannot be optimized for both users who need to act on the toast and those who do not. It hangs around too long for some users and some pieces of content, but not long enough for others. They may be missed entirely by a distracted user or introduce unnecessary haste, challenge, and anxiety to your user's experience.
References