Mensajes de estado

Silktide le pide que verifique que los mensajes de estado —toasts, snackbars, banners de notificación, mensajes de éxito y error— estén configurados para que los los anuncien cuando aparezcan.

Se trata de una : la automatización no puede determinar de forma fiable cuáles elementos son superficies de estado (los nombres de clase, los idiomas y el marcado minificado varían sin fin), por lo que Silktide muestra el aviso en cada página y una persona lo confirma.

<!-- Silencioso: los lectores de pantalla no lo anunciarán cuando aparezca -->
<div class="toast">Artículo añadido al carrito</div>

<!-- Anunciado: role="status" lo convierte en una región en vivo -->
<div class="toast" role="status">Artículo añadido al carrito</div>

Por qué esto es importante

Los mensajes de estado informan del resultado de lo que el usuario acaba de hacer: "Formulario guardado", "Artículo añadido al carrito", "Se han encontrado 3 resultados", "Algo ha salido mal". Los usuarios videntes los ven aparecer; un lector de pantalla lee lo que tiene el foco en ese momento, y un mensaje que aparece en otra parte de la página no se anuncia. El usuario envía un formulario y no oye nada: no puede saber si ha funcionado, ha fallado o sigue cargando.

Marcar el mensaje como una indica a la que lo anuncie en el momento en que aparece, sin mover el foco del usuario.

Qué comprobar

Localice todas las superficies de estado de la página (toasts, snackbars, mensajes flash, banners de éxito/error en línea, actualizaciones del recuento de resultados).
Confirme que cada una —o un contenedor permanente en el que escriba— lleve role="status", role="alert", role="log" o aria-live="polite" / aria-live="assertive".
Dé preferencia a un contenedor de región en vivo que exista cuando se carga la página; inyecte solo el texto del mensaje en tiempo de ejecución. Las regiones en vivo creadas al mismo momento que su mensaje a menudo no se anuncian.

Si la página no tiene mensajes de estado, o todos se anuncian correctamente, el hallazgo.

Cómo solucionarlo

Añada un rol de región en vivo al contenedor del mensaje:
- role="status" para actualizaciones rutinarias como confirmaciones y recuentos de resultados.
- role="alert" para mensajes importantes y sensibles al tiempo, como errores.
O utilice directamente el atributo : aria-live="polite" (espera una pausa en el habla) o aria-live="assertive" (interrumpe de inmediato).

Cómo lo prueba Silktide

Silktide no puede detectar de forma fiable las superficies de estado automáticamente —adivinar por nombres de clase genera una falsa confianza y no detecta marcado generado o no inglés—, así que esta comprobación muestra una solicitud de revisión por página describiendo qué verificar.