Carousel & Slider

El carrusel es uno de los componentes más malinterpretados de la web: la inmensa mayoría de usuarios nunca avanza más allá del primer slide. En ND.edu (Notre Dame), el primer slot concentró el 84 % de todos los clics sobre el componente, y la tasa de clic general del carrusel fue de apenas ~1 % del tráfico. Si colocas la oferta principal, el CTA central o un aviso legal solo en el slide 3, garantizas que casi nadie lo verá. Todo contenido esencial debe vivir también fuera del carrusel, en una sección estática accesible sin interacción: el carrusel amplía, no sustituye.

Cualquier carrusel que avance automáticamente debe ofrecer un control de pausa, detención u ocultamiento si el movimiento dura más de cinco segundos. Es un requisito de accesibilidad Nivel A (WCAG 2.2.2 "Pause, Stop, Hide"), obligatorio bajo ADA, Section 508 y la European Accessibility Act, no una recomendación opcional. La auto-rotación sin control afecta a personas con TDAH, baja visión, motricidad reducida y a usuarios de teclado que pierden el contexto cuando el contenido se mueve sin su consentimiento. Además debe pausarse en hover y al recibir foco de teclado.

Las flechas anterior/siguiente y los indicadores de posición deben verse sin necesidad de hover y tener un área de toque mínima de 24 × 24 px (WCAG 2.5.8 AA), idealmente 44 × 44 px (WCAG 2.5.5 AAA). Los dots diminutos como único control son insuficientes, especialmente en móvil, donde el pulgar no tiene la precisión de un cursor. Combina ambos: flechas para avanzar y retroceder, dots para saltar a un slide concreto. Los controles deben ser obvios a primera vista, con contraste fuerte y posicionados en los costados.

El usuario debe saber en todo momento en qué slide está y cuántos existen; la desorientación dentro de un carrusel es una de las principales causas de abandono. Usa un indicador visible, dots activo/inactivo, numeración "2 / 5" o barra de progreso segmentada, y replica esa información para lectores de pantalla con aria-label="Slide 2 of 5". Erik Runyon documentó que las interacciones caen drásticamente con cada slide: el primero concentra el 84 % en ND.edu y los siguientes apenas un puñado de clics. Saber que el conjunto es pequeño puede motivar a explorarlo; por eso recomienda un máximo de tres o cuatro slides.

Un carrusel accesible requiere la estructura ARIA del WAI-ARIA Authoring Practices Guide. El contenedor lleva role="region" (o role="group") con aria-roledescription="carousel" y un aria-label descriptivo. Cada slide lleva role="group" con aria-roledescription="slide" y su propio aria-label ("1 of 5"). El contenedor de slides usa aria-live="polite" en rotación manual, o aria-live="off" si hay auto-rotación (para no inundar al lector de pantalla). La rotación automática debe detenerse cuando el foco de teclado entra y reanudarse solo por activación explícita.

<section role="region"
  aria-roledescription="carousel"
  aria-label="Galería de suites">

  <!-- off con auto-rotación, polite si es manual -->
  <div aria-live="polite" aria-atomic="false">
    <div role="group"
      aria-roledescription="slide"
      aria-label="1 of 5"> ... </div>
  </div>
</section>

<!-- Screen reader no anuncia nada -->
<div class="carousel">
  <div class="slide"> ... </div>
  <div class="slide"> ... </div>
</div>

En dispositivos táctiles el carrusel debe responder al swipe horizontal para cambiar de slide, pero nunca interferir con el scroll vertical de la página. Implementa un umbral de dirección: si el arrastre supera ~30° respecto al eje horizontal, el gesto se trata como scroll y se delega al navegador. Declarar touch-action: pan-y en el contenedor permite que el navegador gestione el desplazamiento vertical sin bloqueo. No elimines los controles visuales asumiendo que el swipe basta: cuando hay controles a la vista, deslizar resulta ser una de las interacciones menos usadas, según el análisis de carruseles móviles de Smashing Magazine.

Un carrusel con cinco imágenes de alta resolución que carga los cinco assets en el primer render añade peso innecesario al LCP y al tiempo total de carga. Solo el primer slide, y opcionalmente el segundo como precarga, debe cargarse al inicio; el resto se carga conforme el usuario se aproxima, mediante IntersectionObserver o loading="lazy". El Intersection Observer corre de forma asíncrona en el compositor sin bloquear el hilo principal, mientras que getBoundingClientRect() fuerza un re-layout en cada llamada y genera jank. Para control determinístico, un observer con rootMargin: "200px" es más predecible que loading="lazy" nativo dentro de un carrusel.

El carrusel es la solución correcta cuando el contenido es secuencial, exploratorio y no requiere comparación directa entre ítems (galería de fotos de producto, portafolio). Cuando el usuario necesita comparar opciones, ver todo el catálogo o decidir, planes, precios, beneficios, un grid o lista estática casi siempre es superior: permite escaneo visual en paralelo sin interacción adicional. Seis planes de precios en carrusel ocultan cinco opciones que el usuario debería ver a la vez; en grid las compara de un vistazo. Nielsen Norman observa que la gente suele saltarse de inmediato estas imágenes grandes, y secciones estáticas suelen rendir igual de bien siendo más simples de usar.