Feedback

Alerta

Comunica estado con role alert/status según urgencia.

.ally-alertMVP 1.0Accesible por defecto

Ejemplo

Vista real construida con los archivos compilados de Ally.

Auditoría completada.
El reporte está listo.

No se pudo guardar.
Revisa la conexión e intenta nuevamente.

<div class="stack-c">
<div class="ally-alert ally-alert-success" role="status">
<div>
<strong>Auditoría completada.</strong>
<br>El reporte está listo.</div>
</div>
<div class="ally-alert ally-alert-danger" role="alert">
<div>
<strong>No se pudo guardar.</strong>
<br>Revisa la conexión e intenta nuevamente.</div>
</div>
</div>

Contrato accesible

Propósito: Comunica estado con role alert/status según urgencia.
Clases CSS: .ally-alert y modificadores de estado documentados.
HTML: Elemento semántico correspondiente, heading o nombre accesible y controles nativos.
ARIA: role="alert" para urgencia o role="status" para información.
Teclado: Tab sigue el orden lógico; los elementos nativos conservan su comportamiento estándar.
Foco: No mueve el foco automáticamente salvo que la corrección requiera acción inmediata.
Estados: info, success, warning, error, loading y dismissed.
Ally Debug: Valida estructura, nombres, relaciones, controles y estados detectables dentro del scope.

Estados y variantes

defaultfocusactivedisablederror

Los estados visibles deben acompañarse de texto, atributos nativos o propiedades ARIA; nunca dependen solo del color.

Prueba obligatoria: semántica, teclado, foco visible, zoom al 200%, contraste, reduced motion y lector de pantalla.

No hacer

<div class="ally-alert">Contenido sin elemento semántico, nombre accesible ni estados asociados.</div>

Un contenedor genérico con una clase visual no reemplaza la semántica, el nombre accesible ni la gestión de estados.