Contenido

Tarjeta

Agrupa contenido relacionado con heading y acciones.

.ally-cardMVP 1.0Accesible por defecto

Ejemplo

Vista real construida con los archivos compilados de Ally.

Componente

Tarjeta accesible

Contenido agrupado con encabezado y acción clara.

Ver detalle

<article class="ally-card ally-card-media ally-card-interactive">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20420%22%3E%0A%20%20%20%20%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%234f46d8%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230b6bcb%22/%3E%3C/linearGradient%3E%3C/defs%3E%0A%20%20%20%20%3Crect%20width%3D%22640%22%20height%3D%22420%22%20rx%3D%2232%22%20fill%3D%22url%28%23g%29%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22500%22%20cy%3D%2280%22%20r%3D%22120%22%20fill%3D%22white%22%20opacity%3D%22.12%22/%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22360%22%20r%3D%22150%22%20fill%3D%22white%22%20opacity%3D%22.08%22/%3E%0A%20%20%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2252%25%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20fill%3D%22white%22%20font-family%3D%22system-ui%22%20font-size%3D%2242%22%20font-weight%3D%22700%22%3EAlly%3C/text%3E%0A%20%20%20%20%3C/svg%3E" alt="Composición abstracta de Ally">
<div class="ally-card-body">
<span class="ally-badge">Componente</span>
<h3>Tarjeta accesible</h3>
<p>Contenido agrupado con encabezado y acción clara.</p>
<a href="#detalle">Ver detalle</a>
</div>
</article>

Contrato accesible

Propósito: Agrupa contenido relacionado con heading y acciones.
Clases CSS: .ally-card 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 sigue el orden lógico; los elementos nativos conservan su comportamiento estándar.
Foco: No introduce controles invisibles ni altera el orden lógico.
Estados: default, hover, focus, active y disabled cuando corresponda.
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-card">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.