Engrain by ByteRush

QLT.04.03 Mid-level· 11 minCore — asked often

Dialogs, live regions, toasts and tooltips

What an accessible modal must do, how aria-live polite and assertive announce changes, role=status and role=alert, toasts that never steal focus and can be paused (WCAG 2.2.1), and tooltips that stay open on hover and focus (1.4.13).

Comes up in: Web fundamentals, Machine coding

Learn#

Shreya’s app shows “Saved” toasts in the corner. Screen-reader users never hear them, and the toasts vanish in 3 seconds, before some users can read them.

A live region is an element whose changes screen readers announce without moving focus. aria-live="polite" waits until the user is idle; aria-live="assertive" interrupts. A status message, such as “Saved” or “3 results”, uses role="status" (polite). Urgent problems use role="alert" (assertive):

<!-- Present on page load and empty, so later changes are announced -->
<div role="status" class="toasts"></div>
<div role="alert" class="errors"></div>

Add text inside them later, and screen readers read it.

Toasts must not steal focus, and users must be able to pause or extend timed content (WCAG 2.2.1): pause on hover and focus, and give important ones a close button instead of a timer.

A polite toast, an assertive alert, and a pauseStep 1 of 4

Page

  • <div role=status>Saved</div>

Console

    empty

    State

      empty

      The user saves a form. A toast "Saved" appears in the corner. Focus stays where it was.

      Read the steps as text
      1. The user saves a form. A toast "Saved" appears in the corner. Focus stays where it was.
      2. The toast container is a live region (role="status", which is polite). The screen reader finishes its sentence, then says "Saved".
      3. A payment fails. That toast uses role="alert" (assertive), so it interrupts and is read at once.
      4. The user moves the mouse onto the toast: its timer pauses, so slow readers are not rushed. It resumes when the mouse leaves.

      Predict#

      Predict first

      You create a new div with role="status" and the text "Saved", and insert it into the page at the same moment. Is it reliably announced?

      Interview angle#

      Say it like this — about 30 seconds

      “aria-live marks a region whose changes are announced without moving focus. Polite waits for the screen reader to finish, so I use it for most updates, like saved messages and result counts, often through role status. Assertive interrupts, so I use it only for urgent errors, often through role alert. The region must exist before content is added. Toasts should not steal focus and should pause on hover and focus. A modal dialog needs focus moved in, contained and restored, Escape to close, and an accessible name.”

      Stays on your device. Nothing is uploaded.
      Follow-up What is aria-live, and when do you use polite vs assertive?
      It announces changes to a region. Polite for normal updates; assertive only for urgent messages that must interrupt.
      Follow-up How do you make a custom modal accessible?
      Prefer dialog with showModal(); otherwise role=dialog, aria-modal, a name, focus moved in and trapped, the rest inert, Escape to close, and focus returned.
      Follow-up What does WCAG 1.4.13 require of tooltips?
      Content on hover or focus must be dismissible (Escape), hoverable (the pointer can move onto it), and persistent until dismissed.

      Practice#

      Guided

      Build an accessible toast queue: polite and assertive announcements, pause and resume, and expiry.

      Done when

      • Status toasts are announced politely, alerts assertively, and alerts never expire on their own.
      • Paused time does not count toward expiry.
      • tick removes expired toasts; dismiss removes one by id.
      Your solution
      Ctrl/⌘ + Enter

      Remember#

      Try to answer each card before you open it. Then add them to your reviews.

      aria-live polite vs assertive?

      Polite waits until the user is idle; assertive interrupts.

      Which role fits a "Saved" message?

      role="status" (polite).

      Why must a live region exist before its message?

      Screen readers announce changes to regions they already track.

      What three things does WCAG 1.4.13 require of tooltips?

      Dismissible, hoverable, persistent.

      Go deeper

      Four layers. Stop at the one your interview needs; each ends with a quick check.

      The core ideaEvery round
      role="status" implies polite and role="alert" implies assertive. Keep messages short; screen readers read the whole changed text.
      Check yourself: Does a live region move focus?

      No. It announces changes without moving focus.

      How it works underneathSenior rounds
      A modal must have a name, move focus inside on open, keep it inside, make the background inert, close on Escape, and return focus to the trigger on close. <dialog> with showModal() does most of this (WEB.07.02) .
      Check yourself: Which native element handles most modal requirements?

      dialog with showModal().

      Edge cases and trapsWhere people slip
      A tooltip shows short text on hover and focus, is linked with aria-describedby, and must stay while the pointer is over it and close on Escape (WCAG 1.4.13). Interactive content belongs in a popover, not a tooltip.
      Check yourself: Can a tooltip contain a link?

      No. Tooltips hold short text only; use a popover or dialog for interactive content.

      In productionStaff-level answers

      Toasts with actions such as Undo should stay until dismissed and be reachable by keyboard; consider a fixed notification area. Pause timers on hover and focus (WCAG 2.2.1) .

      Check yourself: How should a toast with an Undo action behave?

      Stay until dismissed (or be easy to reach), and let users reach the button by keyboard.

      Finished the five steps? Mark it, and its cards join your reviews.

      Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

      Interview questions this answers

      • What is aria-live and when do you use polite vs assertive?
      • How do you make a custom modal accessible?