Contraseña

Ejemplo

Vista real construida con los archivos compilados de Ally.

<form class="ally-form" data-ally-form>
<div class="ally-field ally-password">
<label class="ally-label" for="page-contrasena-password">Contraseña</label>
<input id="page-contrasena-password" type="password" data-ally-password autocomplete="new-password">
<button class="ally-btn ally-btn-small" type="button" data-ally-password-toggle>Mostrar contraseña</button>
</div>
</form>

Contrato accesible

Propósito

Recibe contraseña y permite mostrar/ocultar con estado.

Clases CSS

.ally-password y modificadores de estado documentados.

HTML

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

ARIA

Usa HTML nativo primero y añade nombre, estado o relaciones ARIA solo cuando el patrón lo requiera.

Teclado

Tab alcanza el campo y el botón; Enter o Space alterna visibilidad.

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-password">Contenido sin elemento semántico, nombre accesible ni estados asociados.</div>