Status Message
Mensaje de estado
Un mensaje de estado informa un resultado, progreso o espera sin abrir un diálogo ni quitar el enfoque.
Un ejemplo real
Después de que un comprador usa el código JULY15, el enfoque permanece donde está. Un estado indica: “Descuento aplicado; total NT$1,530.” Un código incorrecto muestra un error vinculado a su campo. Un fallo de pago que necesita una elección abre un cuadro de diálogo y cambia el enfoque en su lugar.
Partes principales
- 01Operación de activación
- 02Contenedor de mensajes persistente
- 03Anuncio no interrumpido
Úsalo cuando
Úsalo para una actualización que la gente debería notar sin interrumpir lo que está haciendo ni cambiar el enfoque.
No lo uses cuando
No confíes únicamente en un mensaje emergente que desaparece rápidamente. Si un mensaje requiere acción inmediata, dirige la atención al lugar donde las personas puedan actuar.
Nombre usado en código
role=status or an appropriate aria-live region without focus transfer Antes de lanzarlo
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 Mensaje de estado (Status Message). User context: Después de que un comprador usa el código JULY15, el enfoque permanece donde está. Un estado indica: “Descuento aplicado; total NT$1,530.” Un código incorrecto muestra un error vinculado a su campo. Un fallo de pago que necesita una elección abre un cuadro de diálogo y cambia el enfoque en su lugar. Recommended pattern: Mensaje de estado (Status Message). Why it fits: Úsalo para una actualización que la gente debería notar sin interrumpir lo que está haciendo ni cambiar el enfoque. Do not use it when: No confíes únicamente en un mensaje emergente que desaparece rápidamente. Si un mensaje requiere acción inmediata, dirige la atención al lugar donde las personas puedan actuar. 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): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Mensaje de estado (Status Message) is used now. Definition: Un mensaje de estado informa un resultado, progreso o espera sin abrir un diálogo ni quitar el enfoque. 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.