Status Message
Statusnachricht
Eine Statusmeldung berichtet ein Ergebnis, den Fortschritt oder Wartestände, ohne ein Dialogfeld zu öffnen oder den Fokus abzuziehen.
Ein echtes Beispiel
Nachdem ein Käufer den Code JULY15 verwendet hat, bleibt der Fokus, wo er ist. Ein Status zeigt an: „Rabatt angewendet; Gesamtbetrag NT$1.530.“ Ein falscher Code zeigt einen Fehler in Verbindung mit seinem Feld. Ein Zahlungsfehler, der eine Auswahl erfordert, öffnet ein Dialogfeld und verschiebt stattdessen den Fokus.
Hauptteile
- 01auslösende Operation
- 02Persistenter Nachrichtencontainer
- 03unterbrechungsfreie Ankündigung
Verwenden Sie es, wenn
Verwenden Sie es für ein Update, das die Leute bemerken sollten, ohne dass sie ihre Arbeit stoppen oder den Fokus verschieben.
Nutze es nicht, wenn
Verlassen Sie sich nicht nur auf einen Toast, der schnell verschwindet. Wenn eine Nachricht sofortiges Handeln erfordert, richten Sie den Fokus auf den Ort, an dem Menschen handeln können.
In Code verwendeter Name
role=status or an appropriate aria-live region without focus transfer Vor dem Ausliefern
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Statusnachricht (Status Message). User context: Nachdem ein Käufer den Code JULY15 verwendet hat, bleibt der Fokus, wo er ist. Ein Status zeigt an: „Rabatt angewendet; Gesamtbetrag NT$1.530.“ Ein falscher Code zeigt einen Fehler in Verbindung mit seinem Feld. Ein Zahlungsfehler, der eine Auswahl erfordert, öffnet ein Dialogfeld und verschiebt stattdessen den Fokus. Recommended pattern: Statusnachricht (Status Message). Why it fits: Verwenden Sie es für ein Update, das die Leute bemerken sollten, ohne dass sie ihre Arbeit stoppen oder den Fokus verschieben. Do not use it when: Verlassen Sie sich nicht nur auf einen Toast, der schnell verschwindet. Wenn eine Nachricht sofortiges Handeln erfordert, richten Sie den Fokus auf den Ort, an dem Menschen handeln können. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Der Standard deckt nur den aufgeführten Umfang ab. Er wählt nicht den visuellen Stil, die Produktentscheidung oder das Vibulary-Beispiel aus. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Statusnachricht (Status Message) is used now. Definition: Eine Statusmeldung berichtet ein Ergebnis, den Fortschritt oder Wartestände, ohne ein Dialogfeld zu öffnen oder den Fokus abzuziehen. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.