Carousel & Slider
Carousel & Slider
8 reglasNunca pongas contenido crítico solo dentro del carrusel
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.
Erik Runyon "Carousel Interaction Stats" (2013) · Baymard "10 UX Requirements for Homepage Carousels"Auto-rotación sin control de pausa viola WCAG 2.2.2 (Nivel A)
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.
WCAG 2.2.2 Pause, Stop, Hide (Nivel A) · Baymard req. 5–6 · Nielsen Norman "Auto-Forwarding Carousels"Controles siempre visibles con target ≥ 24 px (44 px ideal)
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.
WCAG 2.5.8 (AA, 24 px) / 2.5.5 (AAA, 44 px) · Nielsen Norman "Carousel Usability" · Baymard req. controlesIndica siempre la posición actual y el total de slides
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.
Aplica la semántica ARIA del APG: region, roledescription y live region
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>
Swipe horizontal en móvil sin secuestrar el scroll vertical
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.
Lazy-load los slides fuera del viewport al inicializar
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.
Prefiere grid o lista estática cuando el contenido es comparable
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.
Nielsen Norman "Carousel Usability" · Baymard "10 UX Requirements for Homepage Carousels"- R-507 Nunca pongas contenido crítico solo dentro del carrusel
- R-508 Auto-rotación sin control de pausa viola WCAG 2.2.2 (Nivel A)
- R-509 Controles siempre visibles con target ≥ 24 px (44 px ideal)
- R-510 Indica siempre la posición actual y el total de slides
- R-511 Aplica la semántica ARIA del APG: region, roledescription y live region
- R-512 Swipe horizontal en móvil sin secuestrar el scroll vertical
- R-513 Lazy-load los slides fuera del viewport al inicializar
- R-514 Prefiere grid o lista estática cuando el contenido es comparable