w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.21k stars 344 forks source link

The alertdialog has a toast on the "saved button" that disappears failing WCAG timing SC #1510

Open DavidMacDonald opened 4 years ago

DavidMacDonald commented 4 years ago

https://w3c.github.io/aria-practices/examples/dialog-modal/alertdialog.html

To reproduce.

This fails WCAG 2.2.1 Timing adjustable.

Solution: Toasts are hard to make conform. It would need to remain open and not disappear by itself. on the page until dismissed or user changes or refreshes page.

smhigley commented 4 years ago

The toast doesn't look like it's part of the alertdialog pattern, so could we switch to something like a loading > checked icon on the save button itself as confirmation? That has two benefits:

  1. It seems better for accessibility in general, since the feedback is not visually removed from the user's current focus
  2. No timeout

Any thoughts/objections?

DavidMacDonald commented 3 years ago

UPDATE: I made a twitter poll on toasts that might be interesting. https://twitter.com/davidmacd/status/1354383756266778625 image

StommePoes commented 3 years ago

As a screen mag user, I prefer local feedback! I wonder if many of the toast issues could be sidestepped if guidance around toasts mentioned devs could always compliment with local feedback. Sarah's example is one.

Meanwhile whatever devs are looking for in toasts (movement catching attention because it's specifically NOT where they were paying attention, to offer a message?) would still be exposed with the toastiness.

Toasts which remain onscreen (like on LinkedIn) have their own issues as well: every time you do a small thing, your viewport becomes cluttered. You can remove them by hand, but they used to stack up atop each other. If I shared 5 posts on LinkedIn, my whole left side of my screen was filled (they have now adjusted these to just up the number within the single message, making 1 slightly-bigger toast).

A persistent toast also has to deal with keyboard focus: how easy is it for a keyboarder to reach the close button of a toast? I can't remember where LinkedIn's were at the time that I had them all stack up, but by then I'd moved to a touchscreen laptop which meant I didn't have to do a Thousand Tabs of Death to clean my viewport.

Veyfeyken commented 3 years ago

I would very much like to recommend the example to developers but am holding back because of the current behaviour/failure. Any chance this get's picked up?