WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: toast-style notifications

for

From: Mallory
Date: Jul 31, 2023 12:34PM

On Sun, Jul 30, 2023, at 8:05 PM, <EMAIL REMOVED> wrote:
> Hi All,
> I recently listened to a Syntax podcast that mostly focused on "toast"
> style popup notifications in Web apps.
>...
> Beyond that, I would guess there are many other requirements for making
> a toast notification accessible.

One group for whom it's difficult to make toasts accessible are low-vision screen magnification users (and while people use screen mag in different ways, the group of them I mostly mean are folks like me who tend to full-screen the magnified section. You could also use the setting where you move your mouse around a "regular" screen and a little window shows the area around the mouse magnified... but reading a lot of text like that can be a PITA for many). Most mag software, unless also running a screen reader, won't get any aria-anythings even if there's a read-aloud function, and since the toast is usually stuck to some edge of the screen (usually the bottom) and rely on motion to catch the user's attention, the screen magger may never encounter it, or only do when they happen to move their enlarged view to where the toast is. They'll not necessarily see the motion that's meant as the hand-wave-in-the-face that a toast is usually trying to do, to briefly catch attention. Toasts which disappear after some time have even less chance of being noticed (there's a WCAG guideline about those anyway).

When they're being used similar to alert dialogs, I was reluctantly okay with having the page move focus to the toast--the mag softwares I'm familiar with move either with the mouse OR with keyboard focus. However you then have people being pulled from whatever they were doing and they may have trouble finding how to get back to where they were. An example where I was kinda okay with it was an online test--after the user selected and submitted each answer, the "correct! blah blah!" or "sorry, you blew it" message was a toast, because designers were trying to make the test "engaging" or something. Since the user was otherwise ready to move on to another page at that point, moving keyboard focus there wasn't too terrible--the Next Question control was nearby.

But a real toast is usually not trying to completely interrupt someone--not an alert dialog. It's supposed to be more like, you're having dinner with someone and your phone, sitting at the edge of the table or in your pocket, makes a beep letting you know someone just apped you. You don't stop dinner, but you've been informed and can choose to take a look (you're at the hospital cafe waiting for news of the baby) or not (you're dining with colleagues and are not going to check that your friend has sent you yet another "OMG THIS DUCKLING FALLING ASLEEP IS HILARIOUS" video).

So since the web doesn't have a nicely universal way of making that kind of notification for ALL users, I'm not a huge fan of toasts. They are more robust if they can make a small noise (earcon) when they appear, and they should stay onscreen until either the user dismisses them or performs an action that causes them to adjust their message, and sometimes (I'd say rarely) you might even be okay moving focus to them (but then really consider whether an alert dialog is smarter), but I'm not sure they can be made as completely accessible as a lot of other web content.

cheers,
_mallory