Toast demo (aria-live)

TAB DEMO

Toasts (aria-live)

Try Tab → Enter • compare BEFORE vs AFTER

“Saved” message

Step 1: press Tab Step 2: activate Save Tip: press Space to emphasize AFTER

BEFORE: the toast is visual-only (no live region). AFTER: the toast is inside a live region (role="status" / aria-live), so screen readers can announce it without moving focus.

BEFORE (visual-only)

Settings

Keyboard focus stays on the button.

If you can’t see the toast, you might miss that “Save” succeeded.

Saved. Your settings were updated.

Not announced (no live region).

AFTER (aria-live)

Settings

Message is announced (screen readers).

Same UI, but the message is in a live region.

Saved. Your settings were updated.

Announced via role="status".

Last activation: (none yet)

Tip: add ?autoplay=1 to auto-run the demo for capture.

Share this demo