Cómo crear galerías de imágenes accesibles con Bootstrap o Tailwind

Las galerías y carousels de imágenes son muy comunes en webs modernas: portfolios, tiendas online o secciones destacadas. Pero si no se implementan correctamente, pueden ser un muro de frustración para usuarios de lectores de pantalla o navegación con teclado.

En este post veremos cómo hacer galerías accesibles con Bootstrap y Tailwind, siguiendo buenas prácticas de accesibilidad web.

Problemas comunes en galerías

Botones de navegación sin contexto → Solo dicen "prev" y "next" sin aria-label.
Falta de navegación por teclado → No se pueden recorrer las imágenes con flechas.
Sin texto alternativo → Imágenes decorativas sin alt adecuado.
No anunciar la imagen activa → El lector de pantalla no sabe qué imagen se está mostrando.
Animación automática sin control → Cambios rápidos que no se pueden pausar.

Galerías accesibles con Bootstrap 5

Bootstrap incluye un componente de carousel, pero debemos configurarlo bien para accesibilidad web:

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" aria-label="Galería de imágenes destacadas">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img1.jpg" class="d-block w-100" alt="Vista panorámica de una ciudad al atardecer">
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" class="d-block w-100" alt="Detalle de un bosque en otoño">
    </div>
    <div class="carousel-item">
      <img src="img3.jpg" class="d-block w-100" alt="Montañas nevadas bajo un cielo azul">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev" aria-label="Imagen 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="Imagen siguiente">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

👉 Puntos clave:

aria-label en el contenedor para describir la galería.
alt en cada imagen con descripciones significativas.
Botones con aria-label="Imagen anterior/siguiente".

Galerías accesibles con Tailwind

En Tailwind no hay un carousel predefinido, pero podemos construirlo con semántica accesible:

<div class="relative w-full max-w-xl mx-auto" aria-label="Galería de imágenes destacadas">
  <!-- Imagen activa -->
  <div class="overflow-hidden rounded-md">
    <img src="img1.jpg" alt="Vista panorámica de una ciudad al atardecer" class="w-full h-auto">
  </div>

  <!-- Controles -->
  <button aria-label="Imagen anterior"
          class="absolute top-1/2 left-0 -translate-y-1/2 bg-white/70 hover:bg-white rounded-full p-2">
    ⬅️
  </button>
  <button aria-label="Imagen siguiente"
          class="absolute top-1/2 right-0 -translate-y-1/2 bg-white/70 hover:bg-white rounded-full p-2">
    ➡️
  </button>
</div>

👉 Aquí:

Usamos aria-label en el contenedor y en los botones.
Todas las imágenes deben tener alt significativo.
Se pueden añadir aria-live="polite" si el contenido cambia automáticamente.

Buenas prácticas para galerías accesibles

Añade siempre alt descriptivo en las imágenes.
Usa aria-label en los botones de navegación.
Ofrece la opción de pausar la animación automática.
Usa aria-live="polite" para que los lectores de pantalla anuncien cambios.
Asegura buen contraste en los controles y un foco visible.

Conclusión

Las galerías accesibles no solo cumplen con estándares de inclusión, sino que mejoran la experiencia de todos los usuarios:

En Bootstrap, basta con aplicar correctamente alt y aria-label.
En Tailwind, debemos construir los controles con roles y atributos accesibles.