Status messages

Why it is accessible

A message such as “saved” or “copied” that appears in the corner of the screen for three seconds is invisible to a screen reader user, and too fast for someone who reads slowly. This region has the role status, so a screen reader reads out every new message politely, once it finishes the sentence it's currently on, without taking focus.

The timer pauses while you're pointing at the message with the mouse or have it focused with the keyboard, and the message can be closed at any time. Messages with no time limit stay until you close them. This is exactly what success criterion 2.2.1 requires.

Test it yourself

Keyboard

Press the button, then Tab to the close cross in the message: the countdown stops.
Escape closes the message, and focus moves to the next message or to the main content.

The message is read automatically, without changing focus and without interrupting the text currently being read.

Zoom and reflow

The message has a limited width and wraps when you zoom in; it never covers the whole screen.

Without JavaScript

The region is empty. Without scripts, no messages are ever generated that would need announcing.

Code to copy

<ad-toast data-label="Close" hidden></ad-toast>
<script type="module" src="/assets/js/components/ad-toast/ad-toast.js"></script>

<script type="module">
  document.dispatchEvent(new CustomEvent("ad:announce", {
    detail: { message: "Code copied to the clipboard", timeout: 8000 }
  }));
</script>

Demo