Formulario

Ejemplo

Vista real construida con los archivos compilados de Ally.

<form class="ally-form" data-ally-form>
<div class="ally-field">
<label class="ally-label" for="page-formulario-name">Nombre</label>
<input class="ally-input" id="page-formulario-name" name="name" required>
<p class="ally-validation" data-ally-error-for="page-formulario-name" data-message="Escribe tu nombre." hidden>
</p>
</div>
<div class="ally-field">
<label class="ally-label" for="page-formulario-email">Correo</label>
<input class="ally-input" id="page-formulario-email" type="email" name="email" required>
</div>
<button class="ally-btn ally-btn-primary" type="submit">Guardar</button>
</form>

Contrato accesible

Propósito

Agrupa controles, validación y mensajes asociados.

Clases CSS

.ally-form y modificadores de estado documentados.

HTML

Elemento semántico correspondiente, heading o nombre accesible y controles nativos.

ARIA

Labels, required, aria-invalid y aria-describedby para errores.

Teclado

Tab sigue el orden DOM; Enter envía cuando corresponde.

Foco

El label conduce al control; el primer error recibe foco tras un envío inválido.

Estados

default, hover, focus, disabled, required, valid, invalid y loading.

Ally Debug

Valida estructura, nombres, relaciones, controles y estados detectables dentro del scope.

Estados y variantes

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

Accesibilidad

No hacer

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