0Pricing
Web Accessibility Academy · Lektion

status-, alert- und log-Rollen

Wählen Sie für jede Art von Aktualisierung die passende Live-Rolle.

status-, alert- und log-Rollen ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Roles Build In Politeness

Some ARIA roles turn an element into a live region for you, setting a sensible politeness level automatically so you write less markup.

role status Is Polite

The status role marks a region that updates politely. It is perfect for low-key confirmations like a saved or copied message. 📋

<div role="status">Copied to clipboard</div>

status Means aria-live polite

Using role status is shorthand for aria-live set to polite. You get the same behavior with clearer, more semantic intent.

role alert Is Assertive

The alert role announces assertively the instant its content appears. Reach for it when something needs attention right now. ⚠️

<div role="alert">Payment failed</div>

alert Means aria-live assertive

An alert behaves like aria-live assertive plus aria-atomic true. It interrupts and reads its whole text as one message.

role log Is for Streams

The log role suits content where new entries get added in order, like a chat thread or an activity feed. It reads politely.

<ul role="log" aria-live="polite"></ul>

log Preserves Order

A log signals that older messages matter and sequence is meaningful, so assistive tech reads additions in the order they arrive.

Status vs Alert in Practice

Pick status for a gentle confirmation and alert for a problem. A saved badge is status; a form-blocking error is alert.

Alerts Should Be Earned

Overusing the alert role makes everything interrupt and feel noisy. Reserve it for genuine errors and time-sensitive warnings.

Place the Role Before Content

Like raw live regions, an element with role status should exist before you inject text, so the screen reader is already watching it.

<p role="status" id="out"></p>

Roles Add Meaning Too

Beyond politeness, these roles describe what the region is. That semantic clarity helps both screen readers and the next developer.

Quick Check

You need to announce a form submission error that blocks the user immediately. Which role fits?

Recap: Live Roles

You now know status is polite, alert is assertive, and log keeps ordered streams. Choose the role that matches the update's weight. ✅

Häufig gestellte Fragen

Ist die Lektion „status-, alert- und log-Rollen“ kostenlos?

Ja — der vollständige Text von „status-, alert- und log-Rollen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „status-, alert- und log-Rollen“?

Wählen Sie für jede Art von Aktualisierung die passende Live-Rolle. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Web Accessibility Academy zu starten?

Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „status-, alert- und log-Rollen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?

Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. polite oder assertive: Dringlichkeit wählen
  2. status-, alert- und log-Rollen
  3. Toasts, Ladesymbole und Zähler ankündigen
  4. Warum Live-Regionen scheitern und wie man sie behebt
← Zurück zu Web Accessibility Academy