Focus and Keyboard Accessibility for Notifications

Hi,

I’m on a team implementing an accessible Toast style notification (small pop-up with dismiss and action button, auto-dismisses after 10 seconds).

We are struggling on how to do this so that is accessible to a user who uses keyboard navigation *without* a screen reader, and haven’t found a lot of information online.

Current implementation:

  *   Notification is read using aria-live region set to “polite”
  *   Notification includes screen-reader-only text describing the key command used to take the primary action. Note: Dismiss currently doesn’t have a key command.
  *   Focus does not move

We are concerned about the discoverability of the key command to a user without a screen reader. We can display text informing all users of the key command, but it significantly increases the amount of text on the notification, which we are trying to avoid.

We thought about moving focus to the Toast when it appears (or as the next focusable item after the user’s current focus), but feel this would be disorienting and annoying to users. We are also debating whether a key command should automatically trigger the primary action, or if it should move the focus to the Toast, providing access to both the primary action and the dismiss buttons. If we allow the Toast to gain focus, we can also take advantage of this to ensure the Toast doesn’t time out and auto-dismiss until it loses focus.

Many “accessible” Toasts we’ve found online have the same issue, and are not accessible via keyboard without a screen reader, so we’re not sure if there is a best practice for this.

Any guidance or feedback would be greatly appreciated!

Rose