Se abre en una pestaña nueva

Diseño web

Carruseles web: cuándo ayudan y cómo hacerlos accesibles

Qué es un carrusel o slider, por qué casi nadie ve las demás diapositivas, cuándo debe moverse solo y cómo hacerlo accesible.

Revisada5 de noviembre de 2026
Lectura
Forma parte deDiseño web
Escucha esta guía
0:00 /6:48

Respuesta corta: un carrusel, también llamado slider o presentación, muestra un elemento a la vez en el mismo espacio. Mucha gente ve solo la primera diapositiva, así que abre con tu mensaje principal y dale también su propia página. Si el carrusel se mueve solo, deja que la gente lo detenga, y haz que todos los controles funcionen con el teclado.

Qué es un carrusel

El W3C describe los carruseles como elementos que muestran una colección de elementos de uno en uno, y dice que también se llaman presentaciones o sliders. Se usan para titulares de noticias, artículos destacados en la página de inicio y galerías de imágenes.

El mismo tutorial avisa que los carruseles son discutidos desde el punto de vista de la usabilidad, porque su contenido puede ser difícil de descubrir. Hacer uno accesible también puede hacerlo más fácil de usar.

Problema Qué pasa Qué ayuda
Diapositivas ocultas Mucha gente ve solo la primera diapositiva, o ninguna Abrir con el mensaje principal y darle también su propia página
Se mueve solo Cambia antes de que acabes de leer Un botón para detenerlo, pausa con el mouse o el foco, y quieto en el celular
Controles poco claros Los puntos y las flechas pequeñas pasan desapercibidos o cuesta tocarlos Botones grandes dentro del carrusel, con la diapositiva actual marcada

Resumen propio del tutorial de carruseles del W3C y de NN/g, consultados el 5 de noviembre de 2026.

Por qué casi nadie ve las demás diapositivas

NN/g vio que la gente suele pasar de largo las imágenes grandes de un carrusel. Se pierde su contenido, o al menos todo lo que va después de la primera. Su consejo es poner el contenido importante también en otra página de tu sitio.

En una página de inicio que estudió NN/g, una oferta compartía un panel que cambiaba cada 5 segundos, así que solo se veía el 20% del tiempo. Como se mueve, la gente puede tomarlo por un anuncio e ignorarlo.

NN/g sugiere considerar un carrusel fijo o una sola imagen principal. Nuestra guía de la página de inicio explica qué debe tener esa primera pantalla.

Si se mueve solo

NN/g desaconseja el avance automático cuando no tienes claro que el tiempo deje leer cada diapositiva a la mayoría, o cuando el contenido parece publicidad. También dice que no avance solo en el celular, donde la gente baja rápido y no ve el cambio.

Cuando un carrusel sí se mueve, NN/g usa como referencia 3 palabras por segundo. El W3C recomienda un botón para detener y reanudar el movimiento, y una pausa mientras el puntero está sobre el carrusel o el foco del teclado está dentro.

Una pausa que dura solo mientras el foco sigue en el carrusel no cuenta como pausa según las WCAG, así que el botón sigue haciendo falta. Nuestra guía de las animaciones web explica la regla del W3C para todo lo que se mueve solo.

Controles que la gente encuentra y puede usar

El tutorial del W3C usa botones de verdad para anterior y siguiente, y un botón por diapositiva con la actual resaltada. Todas las funciones, incluido pasar de una diapositiva a otra, deben funcionar con el teclado; nuestra guía de la navegación con teclado explica cómo probarlo.

Quien usa un lector de pantalla necesita oír qué elemento se está mostrando. El tutorial lo hace con una zona de avisos invisible, una región viva en modo polite, que lee «Item x of y», y nuestra guía de aria-live la explica. También pide no mover el foco del teclado cuando alguien usa los botones de anterior o siguiente.

NN/g añade que la gente debe ver cuántas diapositivas hay y cuál se está mostrando. Los controles van dentro del carrusel, lo bastante grandes para leerlos y pulsarlos. Los puntos son una mala pista en el celular, donde la gente a menudo no los ve.

Cómo poner un carrusel que funcione

  1. Pregúntate si lo necesitas: una sola imagen con un mensaje puede funcionar mejor.
  2. Usa 5 diapositivas o menos, cada una con un mensaje corto.
  3. Pon el mensaje más importante en la primera diapositiva y en su propia página.
  4. Agrega botones de anterior, siguiente y de cada diapositiva dentro del carrusel, grandes para tocarlos, con la actual marcada.
  5. Si se mueve solo, agrega un botón para detenerlo, páusalo al pasar el mouse y con el foco, y déjalo quieto en el celular.
  6. Da a cada diapositiva tiempo para leerla, a unas 3 palabras por segundo.
  7. Pruébalo solo con el teclado y con un lector de pantalla, en el celular y en la computadora.

Antes de publicar tu carrusel

  • El mensaje principal está en la primera diapositiva y en su propia página.
  • Hay 5 diapositivas o menos.
  • Todos los controles funcionan con el teclado y muestran dónde estás.
  • Un lector de pantalla anuncia qué diapositiva se muestra.
  • El movimiento se puede detener con un botón, y en el celular no se mueve.
  • Cada diapositiva se ve el tiempo suficiente para leerla.

RecuerdaCasi todos ven solo la primera diapositiva, así que abre con lo importante y repítelo en otro lugar. Si el carrusel se mueve, deja que la gente lo detenga, y haz que todos los controles funcionen con teclado y lector de pantalla.

Nuestro servicio de diseño web hace contigo páginas como estas. Escríbenos en el formulario o por WhatsApp.

Respuestas rápidas sobre los carruseles web

¿Un slider es lo mismo que un carrusel?

Sí. El W3C dice que los carruseles también se llaman presentaciones o sliders. Con cualquier nombre, la idea es la misma: se ve un elemento a la vez en el mismo espacio, y la gente pasa de uno a otro o el carrusel avanza solo.

¿Cuántas diapositivas debe tener un carrusel?

NN/g sugiere 5 o menos, porque es poco probable que la gente mire más. En el celular cansa deslizar muchas, y pasadas unas cinco cuesta saber cuáles ya viste.

¿Mi carrusel debe girar solo?

Normalmente no. NN/g lo desaconseja cuando no puedes acertar con el tiempo o las diapositivas parecen anuncios, y nunca en el celular. Si se mueve, la gente necesita un botón para detenerlo y tiempo para leer cada diapositiva.

¿Cuánto tiempo debe verse cada diapositiva?

El suficiente para leerla. La referencia de NN/g es de unas tres palabras por segundo, así que cuenta las palabras de cada diapositiva y suma tiempo para la imagen. NN/g también aconseja probar el tiempo, o al menos calcular cuánto necesita un visitante promedio.

¿Basta con pausar al pasar el mouse?

No. El W3C recomienda pausar al pasar el mouse y con el foco del teclado, y además un botón para detener y reanudar el movimiento. Una pausa que dura solo mientras el foco sigue en el carrusel no cuenta como forma de pausar según las WCAG.

Fuentes

Todas consultadas el 5 de noviembre de 2026, en inglés. W3C Web Accessibility Initiative: Carousels Tutorial. Functionality. Animations. Understanding Success Criterion 2.2.2: Pause, Stop, Hide. NN/g: Carousel Usability: Designing an Effective UI for Websites with Content Overload. Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility.

Pedro Galindez

Pedro Galindez

Fundador de Feedback Studios, estudio de crecimiento bilingüe en Miami.

Escuchar0:00 /6:48

Más guías

Revisada 5 de noviembre de 2026

Shopify o WordPress: cuál le conviene a tu tienda online

En qué se diferencian Shopify y WordPress con WooCommerce en cargos, cobros, dominio y datos de productos, según la documentación de cada uno.

Revisada 5 de noviembre de 2026

Wix o WordPress: cuál le conviene a la web de tu negocio

En qué se diferencian Wix y WordPress en hosting, dominio, mantenimiento y mudanza de la web, según la documentación de cada plataforma.

Revisada 5 de noviembre de 2026

Lista para lanzar una web: qué revisar antes de publicarla

Qué revisar antes de publicar una web nueva: noindex, redirecciones de las direcciones antiguas, formularios y medición, accesibilidad y Search Console.

Revisada 6 de noviembre de 2026

Operadores de búsqueda de Google: cómo revisar tu sitio con site: y otros comandos

Qué son los operadores de búsqueda de Google, los que más vas a usar, cómo revisar tu propio sitio con site: y lo que no te dice.

Revisada 5 de noviembre de 2026

Recursos de Google Ads: vínculos a sitios, textos destacados y botón de llamada

Qué son los recursos de Google Ads, cómo funcionan los textos destacados y los recursos de llamada, cuánto cuestan y cuándo se muestran.

Revisada 3 de noviembre de 2026

Tiempo hasta el primer byte (TTFB): qué es y cómo bajarlo

Las cinco fases que suman el TTFB, qué valor es bueno, cómo medirlo, cómo bajarlo y nuestras propias cifras.

Siguiente paso

Cuéntanos qué necesitas

Escríbenos por WhatsApp o envíanos un mensaje. Respondemos en español o en inglés.