Cómo crear sliders accesibles con Bootstrap o Tailwind

Los sliders o carruseles son un recurso muy habitual en páginas web para mostrar imágenes, promociones o testimonios. Sin embargo, son también uno de los componentes menos accesibles si no se implementan correctamente: botones invisibles, autoplay sin control, falta de roles ARIA…

En este post vamos a ver cómo construir sliders accesibles, tanto con Bootstrap (que ya nos da un carrusel integrado) como con Tailwind (donde deberemos hacer la lógica a mano).

Problemas comunes de accesibilidad web en sliders

1. Autoplay incontrolable → El contenido cambia solo, sin que el usuario lo haya pedido.

2. Controles ocultos o no descriptivos → Botones sin texto alternativo o que solo muestran un icono.

3. Falta de soporte de teclado → No se puede navegar entre diapositivas con flechas o Tab.

4. Información no anunciada a lectores de pantalla → El usuario no sabe qué slide está activo.

Slider accesible con Bootstrap 5

Bootstrap ya trae el componente carousel, pero hay que configurarlo bien:👉 Recomendaciones:

<div id="carouselExample" class="carousel slide" aria-label="Galería destacada">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img1.jpg" class="d-block w-100" alt="Descripción de la imagen 1">
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" class="d-block w-100" alt="Descripción de la imagen 2">
    </div>
  </div>

  <!-- Controles -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"
          aria-label="Anterior">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"
          aria-label="Siguiente">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>

  <!-- Indicadores -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"
            aria-current="true" aria-label="Ver slide 1"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"
            aria-label="Ver slide 2"></button>
  </div>
</div>

• Añadir alt descriptivos en cada imagen.

• Evitar el autoplay (data-bs-ride="carousel") o dar un botón para pausar/reanudar.

• Los indicadores (aria-label="Ver slide X") ayudan a la navegación con lector de pantalla.

Slider accesible con Tailwind

Aquí debemos montar un slider sencillo con botones y roles ARIA:

<div class="relative w-full max-w-2xl mx-auto" aria-label="Galería de imágenes">
  <!-- Slides -->
  <div class="overflow-hidden relative">
    <div id="slide1" class="slide block" role="group" aria-roledescription="slide" aria-label="1 de 2">
      <img src="img1.jpg" alt="Descripción de la imagen 1" class="w-full">
    </div>
    <div id="slide2" class="slide hidden" role="group" aria-roledescription="slide" aria-label="2 de 2">
      <img src="img2.jpg" alt="Descripción de la imagen 2" class="w-full">
    </div>
  </div>

  <!-- Controles -->
  <button id="prevBtn" class="absolute left-0 top-1/2 -translate-y-1/2 bg-gray-800 text-white p-2 rounded"
          aria-label="Anterior">◀</button>
  <button id="nextBtn" class="absolute right-0 top-1/2 -translate-y-1/2 bg-gray-800 text-white p-2 rounded"
          aria-label="Siguiente">▶</button>
</div>

<script>
  const slides = document.querySelectorAll(".slide");
  let current = 0;

  function showSlide(index) {
    slides.forEach((s, i) => {
      s.classList.toggle("hidden", i !== index);
      s.classList.toggle("block", i === index);
    });
  }

  document.getElementById("prevBtn").addEventListener("click", () => {
    current = (current - 1 + slides.length) % slides.length;
    showSlide(current);
  });

  document.getElementById("nextBtn").addEventListener("click", () => {
    current = (current + 1) % slides.length;
    showSlide(current);
  });

  // Navegación con teclado
  document.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft") {
      current = (current - 1 + slides.length) % slides.length;
      showSlide(current);
    } else if (e.key === "ArrowRight") {
      current = (current + 1) % slides.length;
      showSlide(current);
    }
  });
</script>

👉 Claves:

• Cada slide tiene role="group" y aria-roledescription="slide", con un aria-label="X de Y".

• Botones con aria-label claros.

• Navegación con teclado (← →).

• Sin autoplay, para que el usuario tenga control total.

Conclusión

• Los sliders pueden ser un dolor de cabeza en accesibilidad web, pero sí se pueden hacer inclusivos.

• En Bootstrap es más fácil, solo debemos cuidar alt, aria-label y desactivar autoplay.

• En Tailwind hay que construir la lógica, pero con roles ARIA, control de teclado y sin autoplay, conseguimos un slider totalmente usable.