Status Message
Message de statut
Un message d’état rapporte un résultat, un progrès ou un temps d’attente sans ouvrir de dialogue ni détourner le focus.
Un vrai exemple
Après qu'un acheteur utilise le code JULY15, le focus reste là où il est. Un statut indique : « Remise appliquée ; total 1 530 NT$ ». Un mauvais code affiche une erreur liée à son champ. Un échec de paiement nécessitant un choix ouvre une boîte de dialogue et déplace le focus à la place.
Parties principales
- 01Opération de déclenchement
- 02Conteneur de messages persistant
- 03annonce non interrompante
Utilisez-le lorsque
Utilisez-le pour une mise à jour que les gens devraient remarquer sans interrompre ce qu'ils font ni déplacer le focus.
Ne l'utilisez pas lorsque
Ne vous fiez pas uniquement à un toast qui disparaît rapidement. Si un message nécessite une action immédiate, déplacez l'attention vers l'endroit où les gens peuvent agir.
Nom utilisé dans le code
role=status or an appropriate aria-live region without focus transfer Avant d'expédier
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 Message de statut (Status Message). User context: Après qu'un acheteur utilise le code JULY15, le focus reste là où il est. Un statut indique : « Remise appliquée ; total 1 530 NT$ ». Un mauvais code affiche une erreur liée à son champ. Un échec de paiement nécessitant un choix ouvre une boîte de dialogue et déplace le focus à la place. Recommended pattern: Message de statut (Status Message). Why it fits: Utilisez-le pour une mise à jour que les gens devraient remarquer sans interrompre ce qu'ils font ni déplacer le focus. Do not use it when: Ne vous fiez pas uniquement à un toast qui disparaît rapidement. Si un message nécessite une action immédiate, déplacez l'attention vers l'endroit où les gens peuvent agir. 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): La norme couvre uniquement le champ d'application énuméré. Elle ne choisit ni le style visuel, ni la décision de produit, ni l'exemple de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Message de statut (Status Message) is used now. Definition: Un message d’état rapporte un résultat, un progrès ou un temps d’attente sans ouvrir de dialogue ni détourner le focus. 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.