Galería de Imágenes y Sistema de Lightbox

Sistema de Galería de Imágenes y Lightbox

Propósito

El Sistema de Galería de Imágenes y Lightbox proporciona una metodología de diseño rigurosa para mostrar colecciones de medios en la web. Estructura cómo se presenta un grupo de imágenes o videos en una cuadrícula estática (la galería) y cómo esos activos hacen la transición a un overlay inmersivo a pantalla completa y sin distracciones (el lightbox). Este sistema asegura que los portafolios visuales, los zooms de productos de comercio electrónico y los estudios de casos sigan siendo altamente responsivos, mantengan un profundo cumplimiento de accesibilidad (WCAG AA) y admitan dispositivos físicos mediante gestos táctiles, controles de teclado y trampas de foco.

Casos de Uso

• Sitios de portafolio que muestran fotografía, obras de arte, diseños arquitectónicos o estudios de casos.
• Páginas de Detalle de Producto (PDP) de comercio electrónico que requieren exploración detallada de imágenes a gran escala.
• Sitios de medios ricos en contenido donde los artículos presentan galerías de fotos interactivas.
• Páginas de eventos y páginas de aterrizaje de marketing que muestran fotografía de eventos o registros de testimonios.
• Sitios web inmobiliarios que presentan propiedades con recorridos interiores y exteriores de alta resolución.

Cuándo NO Usar

• Medio Único de Fondo o en Línea: Para imágenes de fondo independientes o diagramas simples en línea que no se beneficien de un zoom o interacción tipo carrusel.
• Vistas de Panel de Datos Pesados: Cuando la tarea principal es ordenar o analizar puntos de datos estructurados (por ejemplo, tablas o gráficos) donde un overlay a pantalla completa interrumpiría el espacio de trabajo. Utilice data-table-ui-system en su lugar.
• Documentos Complejos o PDFs: Donde los usuarios necesitan leer documentos de texto de varias páginas; los lightboxes están optimizados para medios visuales, no para activos que requieren mucha lectura.
• Modales Contextuales Independientes: Cuando el diálogo contiene entradas de formulario, configuraciones o aplicaciones interactivas en lugar de medios estructurados. Utilice overlay-and-dialog-system o settings-interface-system en su lugar.

Entradas

1. Inventario de Medios: Activos de origen de alta resolución y sus variantes de miniatura correspondientes de baja resolución o comprimidas.
2. Metadatos Contextuales: Títulos, descripciones, información de derechos de autor, leyendas y texto alternativo (alt) de accesibilidad necesario.
3. Reglas de Espaciado Responsivo: Espaciados de cuadrícula, márgenes y reglas de diseño de columnas según el responsive-grid-system y el fluid-spacing-system establecidos en el sitio.
4. Paleta de Contraste Interactivo: Especificaciones de color de texto e iconos accesibles (que cumplan con el contraste mínimo de 4.5:1 de WCAG) para controles overlay, botones de cierre y puntos de paginación.

Salidas

1. Especificación de la Cuadrícula de la Galería: Definición de diseños de columnas, relaciones de aspecto de imágenes, estados de hover y reglas de preservación del punto focal.
2. Plano de la Anatomía del Lightbox: Estructura del overlay a pantalla completa, detallando controles (Anterior, Siguiente, Cerrar), posiciones de leyendas y diseños de tiras de miniaturas.
3. Especificación de Gestos y Teclado: Una matriz de interacción completa que mapea eventos de teclado, zonas de toque y comportamientos de arrastre/deslizamiento.
4. Mapa de Puntos de Referencia de Accesibilidad: Roles lógicos (dialog, group), etiquetas (aria-label), reglas de trampa de foco y anuncios de estado en tiempo real.

Flujo de Trabajo

1. Construir la Base de la Cuadrícula de la Galería

Comience estructurando la galería principal de la página para equilibrar el escaneo visual y el espacio en pantalla:

• Estandarización de la Relación de Aspecto: Agrupe las miniaturas de la galería usando una relación de aspecto uniforme (por ejemplo, 1:1 cuadrado o 4:3 estándar) para establecer un ritmo ordenado. Use la propiedad CSS aspect-ratio para evitar saltos en el diseño.
• Espaciados y Márgenes: Use tokens de fluid-spacing-system (típicamente --space-s o --space-m) para los espacios de la cuadrícula.
• Señales de Hover/Foco: Aplique las convenciones de interactive-state-system. Cuando un usuario pasa el cursor o enfoca una miniatura, active un cambio visual sutil (por ejemplo, escalado de zoom, superposición suave de contraste, cursor personalizado de búsqueda/zoom) para indicar que el elemento es cliqueable.
• HTML Semántico: Estructure la galería usando un contenedor de lista (<ul> / <li>) con miniaturas marcadas como elementos button (o enlaces si se requiere indexación/enlace profundo) para garantizar la accesibilidad mediante teclado.

2. Diseñar el Fondo del Lightbox a Pantalla Completa

El fondo del lightbox debe separar al espectador del resto de la página:

• Capa de Velo: Superponga un fondo sólido o ligeramente translúcido (por ejemplo, #0a0a0a con un 95% de opacidad o un desenfoque de fondo oscuro) para eliminar distracciones periféricas.
• Preservación de la Relación de Aspecto: Posicione la imagen activa en el centro absoluto del viewport. Asegúrese de que el contenedor escale dinámicamente con max-width: 90vw y max-height: 80vh para que encaje dentro de cualquier viewport sin recortar o distorsionar la relación de aspecto original.
• Estado de Carga: Construya un indicador visual centrado (spinner, esqueleto de carga o anillo de progreso) que sea consciente de aria (aria-busy="true"), asegurando que los usuarios sepan que los activos de alta resolución se están descargando.

3. Establecer Controles de Navegación y Superposición de Leyendas

Posicione y estilice los elementos superpuestos para optimizar la ergonomía en escritorio y móvil:

• Objetivo de Cierre: Posicione el botón de Cerrar en la esquina superior derecha. Debe tener un límite visual claro, cumplir con un tamaño mínimo de objetivo táctil de 48x48px (o 44x44px según WCAG) y mantener un anillo de foco de teclado claro.
• Flechas Anterior y Siguiente: Centre las flechas de navegación verticalmente en los márgenes izquierdo y derecho. En dispositivos móviles, oculte estas flechas o muévalas ligeramente hacia adentro para mantener el enfoque completamente en las acciones táctiles de deslizamiento.
• Leyendas e Indicador de Índice: Coloque leyendas semánticas e índices (por ejemplo, "Imagen 3 de 12") en la parte inferior del contenedor. Use un contenedor aria-live para notificar a los lectores de pantalla sobre los eventos de cambio cuando se actualice el índice.
• Tira de Miniaturas: Debajo de la imagen principal, muestre una fila desplazable de miniaturas pequeñas. Resalte el elemento activo con un borde grueso y de alto contraste y un contorno :focus distintivo.

4. Conectar Mecánicas de Teclado y Gestos

El lightbox debe manejar la interacción periférica de escritorio y los gestos táctiles móviles con igual elegancia:

• Mapeos de Teclado: Asegure soporte inmediato para controles de teclado: Escape cierra el lightbox, ArrowRight/ArrowDown activa "Siguiente", y ArrowLeft/ArrowUp activa "Anterior".
• Trampa de Foco: Cuando el lightbox se abre, atrape el foco del teclado dentro de él. Los usuarios no deben poder tabular de vuelta a la página de fondo. El primer elemento enfocado debe ser el contenedor principal del diálogo o el botón de Cerrar.
• Restauración del Foco: Cuando el lightbox se cierra, restaure inmediatamente el foco al botón de miniatura específico que lo activó.
• Deslizar para Navegar: Soporte gestos táctiles suaves de deslizamiento a la izquierda y a la derecha.
• Deslizar para Descartar: Permita arrastrar o deslizar verticalmente (hacia arriba o hacia abajo) para descartar rápidamente el lightbox, replicando los patrones nativos de los sistemas operativos móviles.

5. Finalizar la Accesibilidad y los Esquemas de Documento

Aplique declaraciones ARIA avanzadas para garantizar una experiencia de lector de pantalla compatible con WCAG AA:

• Roles y Etiquetas: Marque el contenedor del lightbox con role="dialog", aria-modal="true", y etiquételo usando aria-label o aria-labelledby que haga referencia al título/leyenda.
• Oclusión del Fondo: Cuando el lightbox esté activo, aplique aria-hidden="true" al contenedor principal de la página (<main> o #app-root) para mantener los barridos del lector de pantalla aislados dentro del overlay.
• Actualizaciones en Vivo: Asegúrese de que los cambios de título/leyenda de la imagen sean anunciados colocándolos dentro o refiriéndolos a través de una zona aria-live="polite".

Reglas de Decisión

• La División de Resolución: Las miniaturas en la cuadrícula de la galería deben estar muy comprimidas y tener un tamaño apropiado (por ejemplo, ancho máximo de 600px). El lightbox debe cargar la variante de alta resolución maestra, pero solo bajo demanda (carga diferida de las diapositivas siguiente y anterior) para ahorrar ancho de banda móvil.
• Priorización de Teclado vs. Táctil: En viewports móviles (anchos < 768px), priorice el espacio en pantalla para la imagen. Oculte los controles de UI de escritorio (flechas Siguiente/Anterior) en favor de gestos táctiles de deslizamiento, pero mantenga siempre un botón de "Cerrar" muy visible.
• Bucle Infinito vs. Parada Forzada:
  • Use Bucle Infinito (el carrusel vuelve al 1 después del último elemento) cuando muestre portafolios creativos, testimonios o productos donde se prefiera un escaneo fluido.
  • Use Parada Forzada (la flecha siguiente deshabilitada en el último elemento) para tutoriales secuenciales paso a paso, conjuntos de instrucciones o líneas de tiempo cronológicas donde la direccionalidad es crítica.
• Leyendas vs. Espacio del Overlay: Si una imagen tiene una descripción larga, no la superponga sobre la imagen misma. Colóquela en una barra inferior dedicada debajo de los límites de la imagen, permitiendo que el texto se desplace independientemente si desborda el espacio vertical de la pantalla.
• Señal del Cursor en Escritorio: Cambie el cursor del escritorio dinámicamente:
  • Al pasar el cursor sobre las miniaturas de la galería: cursor: zoom-in
  • Imagen activa del lightbox (ampliable): cursor: zoom-in (al hacer clic se expande a resolución completa, cambiando el cursor a cursor: zoom-out para desplazamiento panorámico).
  • Al pasar el cursor sobre el fondo del lightbox: cursor: pointer (al hacer clic se cierra el overlay).

Restricciones

• Responsividad: Las imágenes nunca deben distorsionarse ni perder su relación de aspecto dentro del lightbox. Los contenedores deben usar unidades de viewport flexibles (vw/vh) y CSS object-fit: contain para mantenerse estrictamente dentro de los límites de la pantalla en todas las orientaciones del dispositivo.
• Relaciones de Contraste: Los controles interactivos de Cerrar, Navegación y Miniaturas deben cumplir una relación de contraste de al menos 4.5:1 contra el fondo y las superposiciones de imágenes.
• Estados de Foco: Cada elemento de navegación activo debe tener un anillo :focus-visible visible. Los indicadores de foco nunca deben ser recortados por cuadros delimitadores o elementos adyacentes.
• Objetivos Táctiles: Los objetivos de toque en dispositivos móviles deben cumplir con WCAG 2.2 SC 2.5.8 (al menos 24x24px, pero se recomienda encarecidamente 44x44px para acciones principales como Cerrar y Navegación).

Patrones de Falla Comunes

• La "Trampa de Tabulación Infinita": Tabulando fuera del lightbox abierto hacia la página de fondo, lo que hace que los lectores de pantalla lean contenido invisible y rompe la navegación por teclado.
• El "Desbordamiento de Imagen": Imágenes de retrato altas que se expanden más allá de la parte superior o inferior del viewport móvil, haciendo que las flechas de navegación o los botones de cierre sean completamente inaccesibles.
• Pérdida del Punto Focal: Las miniaturas en la galería estática recortan el sujeto principal (por ejemplo, la cabeza de una persona) debido al recorte centrado absoluto. Resuelva usando object-position o recorte responsivo personalizado.
• La "Salida Muerta": Olvidar conectar la tecla Escape, dejando a los usuarios que solo usan teclado atrapados dentro del overlay modal sin una forma intuitiva de cerrarlo.
• Desplazamiento del Diseño al Abrir: La barra de desplazamiento del navegador desaparece cuando se abre el lightbox, causando que toda la página de fondo tiemble o se desplace lateralmente. Resuelva agregando un margen coincidente o un relleno de bloqueo de desplazamiento.
• Sin Restauración del Foco: Al cerrar el lightbox, el foco se restablece al principio del mapa del sitio o al cuerpo, obligando a los usuarios de teclado a tabular a través de toda la navegación del encabezado nuevamente para regresar a donde estaban.

Criterios de Validación

• Las miniaturas de la galería usan una relación de aspecto estandarizada y tienen indicadores claros de hover/foco.
• Las imágenes activas del lightbox mantienen su relación de aspecto y encajan perfectamente dentro de los límites del viewport (max-width: 90vw y max-height: 80vh).
• El botón de cerrar y las flechas cumplen una relación de contraste mínima de 4.5:1 contra la capa de fondo.
• La navegación por teclado está activa: Escape cierra, ArrowRight avanza, ArrowLeft retrocede.
• El foco está atrapado dentro del lightbox cuando está abierto, y se restaura perfectamente al elemento de la galería que lo originó al cerrarse.
• Los gestos táctiles están habilitados: deslizar izquierda/derecha para navegar, deslizar arriba/abajo para descartar en viewports móviles.
• El contenedor principal de la página está marcado como aria-hidden="true" cuando el modal del lightbox está activo.
• El spinner de estado de carga es visible y está marcado como aria-busy="true" cuando los activos de alta resolución se están cargando.