Sistema de Slider de Comparación de Imágenes

¿Qué hace Sistema de Slider de Comparación de Imágenes?

Propósito

El Sistema de Slider de Comparación de Imágenes proporciona una metodología sistemática de diseño y espaciado para construir componentes interactivos de comparación visual "Antes y Después". Este sistema aborda el desafío de diseño de presentar dos estados superpuestos de una imagen (p. ej., restauración de fotos, gradación de color, maquetas de diseño, cambios ambientales o resultados médicos) de manera que permita a los usuarios deslizar, revelar y contrastar detalles dinámicamente. Previene la desorientación visual, preserva la estabilidad del diseño, asegura que los objetivos táctiles estén optimizados para dispositivos móviles y cumple con los estándares de accesibilidad WCAG AA mediante interacciones estructuradas por teclado y anuncios de lectores de pantalla.

---

Casos de Uso

• Escaparates de Software Creativo y de Edición: Comparar archivos RAW sin editar con fotografías finales editadas, ajustes preestablecidos de gradación de color o trabajos de retoque.
• Portafolios Arquitectónicos y de Diseño: Exhibir fases de antes y después de construcción, proyectos de remodelación, escenografía de interiores o renovaciones de sistemas de diseño web.
• Comercio Electrónico y Demostraciones de Productos: Presentar productos bajo diferentes condiciones (p. ej., pruebas de tela impermeable, protectores de pantalla, productos de limpieza o comparaciones de desgaste).
• Visualizaciones Ambientales y Científicas: Presentar cambios a lo largo del tiempo, como mapeo satelital de retrocesos glaciares, expansión urbana o proyectos de reforestación.
• Estudios de Casos Cosméticos y Médicos: Presentar resultados de tratamientos de alta fidelidad bajo condiciones espaciales y de iluminación idénticas.

---

Cuándo NO Usar

• Descubrimiento de Múltiples Elementos: Si necesitas comparar atributos discretos de 2 a 5 productos distintos, usa el sistema-de-matriz-de-comparación.
• Cuadrículas de Imágenes Generales: Para visualización estándar de imágenes, carruseles de medios o galerías, usa sistema-de-imágenes-y-medios o sistema-de-carrusel-y-slider.
• Comparaciones con Mucho Texto: Si el contenido principal es texto o datos tabulares (p. ej., características de versiones de software), usa sistema-de-interfaz-de-tabla-de-datos o elementos de lista <dl>.
• Cambios Sutiles de Bajo Contraste: Si las diferencias visuales entre las dos imágenes son mínimas y no se pueden percibir fácilmente, un diseño lado a lado o apilado con subtítulos claros es más útil.

---

Entradas

1. Activos de Doble Núcleo: Dos imágenes de alta calidad ("Antes" y "Después") tomadas desde la misma perspectiva espacial, encuadre y resolución.
2. Dimensiones del Componente: Relaciones de aspecto (p. ej., 16:9, 4:3 o 1:1) y límites del viewport (del sistema-de-imágenes-y-medios).
3. Tokens de Tipografía y Marca: Tamaños y colores de tipografía para etiquetas, manijas y textos instructivos (del sistema-de-tipografía-fluida).
4. Preferencias Táctiles y de Movimiento: Elecciones del usuario con respecto a gestos táctiles y estados de movimiento reducido a nivel de sistema.

---

Salidas

1. Plano de Anatomía del Slider: Definición del diseño que especifica el contenedor, la pista de fondo, la superposición de clip-path, la barra de control, la agarradera y las etiquetas de estado.
2. Especificación de Control por Teclado: Seguimiento de coordenadas accesible que asigna teclas como ArrowLeft, ArrowRight, Home y End a porcentajes relativos de clip-path.
3. Guía de Comportamiento Móvil y Táctil: Especificaciones precisas para las dimensiones del objetivo táctil, umbrales de arrastre por gestos y espaciado de la agarradera.
4. Reglas de Preservación del Diseño: Reglas estructurales (p. ej., preservación de la relación de aspecto y dimensionamiento absoluto) para prevenir el cambio de diseño (CLS).

---

Flujo de Trabajo

1. Establecer la Pista Espacial y el Contenedor

Preservar la relación de aspecto y la alineación estructural:

• Bloqueo de Relación de Aspecto: El contenedor debe tener una relación de aspecto explícita (p. ej., aspect-ratio: 16 / 9 o aspect-ratio: 1 / 1) para reservar espacio de diseño y prevenir el Cambio de Diseño Acumulativo (CLS).
• Superposición de Posicionamiento Absoluto: Configurar el contenedor como position: relative; overflow: hidden;. Colocar la imagen "Después" como un bloque de imagen de fondo estándar (width: 100%; height: 100%; object-fit: cover;).
• Bloque de Superposición de Recorte: Posicionar la imagen "Antes" dentro de un envoltorio de superposición con posición absoluta (position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;).
• Sincronización de Imágenes: Asegurar que tanto la imagen de fondo como la de superposición tengan dimensiones idénticas, propiedades de escalado (object-fit: cover) y alineaciones (object-position: center) para que se superpongan con precisión.

2. Implementar el Clip-Path de Revelado

Usar recorte CSS moderno en lugar de redimensionamiento de imágenes dual para prevenir sesgo visual:

• Valor de Clip-Path: Aplicar clip-path: inset(0 calc(100% - var(--exposure-ratio)) 0 0); al envoltorio de superposición, donde --exposure-ratio es una propiedad personalizada CSS (p. ej., 50%) que representa la posición del slider.
• Vinculación de Variable Dinámica: Actualizar --exposure-ratio dinámicamente mediante entradas de ratón, táctiles o de teclado.
• Evitar Distorsión de Imagen: No redimensionar las imágenes mismas durante la interacción de arrastre; solo recortar el contenedor envoltorio. Las imágenes deben permanecer estacionarias entre sí.

3. Diseñar la Manija y la Agarradera Táctil

La manija sirve como la señal visual principal para la interacción:

• Línea Divisoria Vertical: Estilizar una barra vertical posicionada absolutamente en left: var(--exposure-ratio);. Configurar el ancho como una línea delgada de alto contraste (p. ej., 2px a 4px) con una sombra para resaltar sobre diversos fondos de imagen.
• Objetivo de Agarradera: Posicionar una agarradera circular o redondeada centrada en la línea vertical.
• Indicadores Visuales: Incrustar flechas horizontales bidireccionales (← →) o texturas contrastantes dentro de la agarradera para señalar capacidades de arrastre horizontal.
• Tamaño del Objetivo Táctil (WCAG 2.2 SC 2.5.8): La agarradera interactiva debe tener un objetivo táctil físico de al menos 44px x 44px en interfaces móviles/táctiles, independientemente de su tamaño visual. Lograrlo usando pseudoelementos transparentes (::after) o relleno.

4. Construir Etiquetas de Texto Accesibles

Mantener el contexto y la orientación del usuario:

• Colocación de Etiquetas de Texto: Posicionar etiquetas (p. ej., "ANTES" y "DESPUÉS") en esquinas opuestas del contenedor (p. ej., "Antes" en la parte superior izquierda, "Después" en la parte superior derecha).
• Diseño de Alto Contraste: Usar fondos oscuros semitransparentes (velos) detrás de etiquetas de texto blancas para asegurar una relación de contraste mínima de 4.5:1 (WCAG AA) independientemente del contenido de la imagen.
• Retroalimentación de Estado Interactivo: Opcionalmente, desvanecer las etiquetas de texto cuando el slider está activo para minimizar la distracción visual, restaurándolas cuando la interacción termina.

5. Definir la Navegación por Teclado y la Integración ARIA

La interfaz debe ser completamente navegable solo con teclado:

• Respaldo de Slider de Rango: Respaldar la comparación visual con un elemento <input type="range"> nativo, visualmente oculto. Esto proporciona manejo nativo de rango, estados de enfoque y roles aria.
• Asociación de Atributos ARIA: Asignar aria-label (p. ej., "Comparación de imágenes antes y después"), aria-valuemin="0", aria-valuemax="100" y aria-valuenow dinámico que represente el porcentaje.
• Mapeo de Eventos de Teclado:
  • ArrowLeft / ArrowDown: Disminuir posición en 1% (o 5% para movimiento más rápido).
  • ArrowRight / ArrowUp: Incrementar posición en 1% (o 5%).
  • PageUp / PageDown: Mover la posición del slider en incrementos del 10%.
  • Home: Moverse inmediatamente al 0% (revelando completamente la imagen "Después").
  • End: Moverse inmediatamente al 100% (revelando completamente la imagen "Antes").
• Indicadores de Enfoque: Cuando el slider está enfocado, mostrar un anillo de enfoque de alto contraste y distinto alrededor de la agarradera. Nunca ocultar estilos de enfoque.

---

Reglas de Decisión

Selección del Modo de Movimiento del Slider

Modo de Interacción	Criterio de Uso	Método de Implementación
Clic/Toque y Arrastre Activo (Predeterminado)	Comparación de alta precisión; mejor para análisis detallados.	Actualizar --exposure-ratio en pointermove solo cuando el ratón/toque está presionado en la agarradera.
Seguimiento por Flotación	Comparaciones casuales/exploratorias; características de páginas de aterrizaje de baja fricción.	Actualizar --exposure-ratio directamente a medida que el cursor se mueve sobre cualquier parte del contenedor. No adecuado como método único; se requiere recurrir a clic/arrastre para dispositivos móviles.
Alternancia de Imágenes Duales (Clic en Cualquier Lugar)	Comparaciones simples y rápidas; mejor en pantallas pequeñas con cambios visuales muy distintos.	Hacer clic en cualquier lugar del contenedor desencadena una transición entre 0% y 100% de exposición con una suavización suave de 0.3s.

---

Restricciones

• Accesibilidad (WCAG AA): Las etiquetas de texto deben cumplir con la relación de contraste 4.5:1. El controlador interactivo debe soportar enfoque completo por teclado, indicadores visibles (:focus-visible) y objetivos táctiles mínimos de 44px x 44px.
• Cambio de Diseño Acumulativo (CLS): Ambas imágenes y su contenedor deben compartir la misma relación de aspecto predefinida exacta. Nunca permitir que el contenedor se colapse a 0px de altura mientras las imágenes se cargan. Usar CSS aspect-ratio o porcentajes de relleno en línea.
• Fluidez Responsiva: El componente debe escalarse dinámicamente a viewports móviles. En pantallas < 480px, escalar las etiquetas proporcionalmente o moverlas directamente debajo de la imagen para evitar superponer otras características visuales principales.
• Movimiento Reducido: Si un usuario prefiere movimiento reducido (@media (prefers-reduced-motion: reduce)), deshabilitar transiciones suaves cuando se usa navegación por teclado y evitar desencadenantes de seguimiento por flotación en favor de acciones explícitas de clic/toque.

---

Patrones de Falla Comunes

• La Trampa del "Aplastamiento de Imagen": Redimensionar o estirar las imágenes durante la interacción de arrastre en lugar de recortarlas, lo que resulta en visuales deformados.
• El Colapso de "Cero-CLS": No configurar las dimensiones del contenedor, lo que provoca que el diseño salte dramáticamente cuando las imágenes finalmente se descargan.
• Exclusión por Teclado: Crear un slider que solo se puede arrastrar con el ratón, haciéndolo completamente inutilizable para usuarios de teclado, lectores de pantalla y algunos usuarios de interruptores de asistencia.
• La "Agarradera Invisible" en Imágenes Claras: No agregar sombra, borde o superposición de alto contraste a la manija y la agarradera, lo que hace que se fusionen completamente con imágenes claras/ocupadas.
• Trampas de Objetivo Táctil: Hacer la agarradera diminuta (p. ej., 10px de ancho) sin relleno táctil, causando una enorme frustración del usuario en dispositivos móviles.

---

Criterios de Validación

• Alineación Precisa de Superposición: Las imágenes "Antes" y "Después" están perfectamente alineadas sin desplazamiento horizontal, aplastamiento o distorsión durante el deslizamiento.
• Cero Cambio de Diseño Acumulativo: El contenedor reserva espacio de diseño usando una relación de aspecto consistente o dimensiones explícitas antes de que las imágenes se carguen.
• Seguridad Táctil Móvil: El objetivo táctil de la manija/agarradera es de al menos 44px x 44px en viewports móviles/táctiles.
• Navegabilidad Completa por Teclado: Los usuarios pueden navegar, enfocar y ajustar la posición del slider usando teclas de teclado estándar (Flechas, Home, End).
• Cumplimiento de Estándares ARIA: El controlador interactivo usa elementos semánticos (como <input type="range">) o roles ARIA correctos (role="slider", aria-valuenow, aria-label).
• Cumplimiento de Contraste AA: Las etiquetas de texto ("Antes" y "Después") y los indicadores de enfoque cumplen con la relación de contraste WCAG 4.5:1 contra superficies adyacentes.
• Sensibilidad al Movimiento: El comportamiento de interacción respeta las preferencias del usuario de movimiento reducido (prefers-reduced-motion: reduce).