Alerts

The four statuses

<div class="tmt-alert tmt-alert--error" role="alert">
  <span class="tmt-alert__icon" aria-hidden="true">✕</span>
  <div class="tmt-alert__content">
    <p class="tmt-alert__title">We could not reach the front door lock</p>
    <p>Check that the hub is powered on, then try again.</p>
  </div>
</div>

Three signals, not one

Every alert carries its meaning three ways: the icon, the title, and the accent bar on the inline-start edge. The colour is the fourth, and the least important.

This is not only about colour blindness. Tomatico's palette is monochrome, so a screen may legitimately be rendered without hue at all, and a printed report certainly is. An alert that only works in colour does not work.

The icon is aria-hidden — it repeats what the title already says, and announcing "check mark" before the message adds nothing.

Announcing alerts

An alert that appears after an action has to reach someone who cannot see it appear. The ARIA role decides how urgently it is announced.

• role="alert" interrupts whatever the screen reader is saying. Reserve it for errors and for anything the person must act on now.
• role="status" waits for a pause. Right for confirmations and warnings.
• role="note" is not announced at all. Right for anything present when the page loads.

Dismissible alerts

Only a message a person has finished with should be dismissible. Errors that block a task stay until the task is fixed.

<div class="tmt-alert tmt-alert--success" role="status">
  <span class="tmt-alert__icon" aria-hidden="true">✓</span>
  <div class="tmt-alert__content">…</div>
  <button class="tmt-btn tmt-btn--ghost tmt-btn--icon tmt-btn--sm"
          style="margin-inline-start: auto;">
    <span class="tmt-visually-hidden">Dismiss this message</span>
    <svg class="tmt-btn__icon" aria-hidden="true">…</svg>
  </button>
</div>

When an alert is dismissed, move focus somewhere sensible — usually the element that triggered the action. Focus left on a removed element falls back to the document, and the person loses their place.

Do not dismiss alerts on a timer. Someone reading with a magnifier, or in their second language, may not have finished.

Placement

• Page-level messages go at the top of the main content, below the heading. Not above the masthead.
• Form errors go in a summary at the top of the form and again beside each field. See Form validation.
• Field-level messages are not alerts — use .tmt-error-text.
• One alert at a time. A stack of four is a screen nobody reads.

Writing them

The title states what happened, in one line, with no full stop. The body says what it means and what to do next.