In-app notifications Required

Announce new items without stealing focus

Announce new notifications to screen readers through a polite live region, and never move focus or open a dialog for them.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Use the live region from announce changes without moving focus. Write one short line per batch, such as "2 new notifications", never one line per item. Give the bell button a name that includes the unread count. Toasts stay until closed or pause on hover and focus, as in give people enough time. Critical items stay in the inbox after the toast goes.

Example

<button type="button" class="inbox-bell" aria-expanded="false" aria-controls="inbox-panel">
  Notifications <span class="inbox-count">3 unread</span>
</button>
<p role="status" class="visually-hidden" id="inbox-announcer"></p>

How to check

Run axe-core on the page with the inbox open and closed, and get zero violations. A browser test creates a notification and finds its text in the role="status" element, while document.activeElement stays where it was.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers notifications playbook: https://agentwranglers.se/playbook/notifications/in-app-notifications/accessible-inbox.