Multimedia
Lightbox
Amplía medios dentro de un diálogo.
Ejemplo
Vista real construida con los archivos compilados de Ally.
<a class="ally-card ally-card-media" href="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%230b6bcb%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f8b8d%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%3EDise%C3%B1o%20inclusivo%3C/text%3E%0A%20%20%20%20%3C/svg%3E" data-ally-lightbox aria-label="Abrir vista ampliada">
<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%230b6bcb%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f8b8d%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%3EDise%C3%B1o%20inclusivo%3C/text%3E%0A%20%20%20%20%3C/svg%3E" alt="Composición abstracta sobre diseño inclusivo">
<span class="ally-card-body">Abrir imagen en lightbox</span>
</a>Contrato accesible
- Propósito
- Amplía medios dentro de un diálogo.
- Clases CSS
.ally-lightboxy modificadores de estado documentados.- HTML
- Elemento semántico correspondiente, heading o nombre accesible y controles nativos.
- ARIA
- Diálogo modal nombrado y descripción del medio.
- Teclado
- Tab queda dentro; Escape cierra y retorna al activador.
- Foco
- Foco visible y predecible; overlays devuelven el foco al control que los abrió.
- Estados
- closed, open, active, selected, expanded, disabled y loading según aplique.
- 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.
Accesibilidad
Prueba obligatoria: semántica, teclado, foco visible, zoom al 200%, contraste, reduced motion y lector de pantalla.
No hacer
<div class="ally-lightbox">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.