Crea carruseles accesibles

Robert Flack
Penny McLachlan
Penny McLachlan
LinkedIn Bluesky
Lucas Radaelli
Lucas Radaelli
X LinkedIn

Fecha de publicación: 29 de septiembre de 2025

Te gusten o no, los carruseles son un patrón muy solicitado y utilizado. Por lo tanto, cuando se implementa un carrusel, debe ser sólido y accesible. Debe ser interactivo en la primera pintura, declarativo para facilitar el mantenimiento y estar creado con una estructura semántica que se pruebe con tecnologías de asistencia.

Sin embargo, hacer que los carruseles sean accesibles suele ser un desafío. Administrar el enfoque, lograr que los anuncios del lector de pantalla sean correctos y controlar los elementos interactivos fuera de la pantalla es complicado, por lo que los carruseles de muchos sitios no son accesibles. Estos desafíos llevaron al equipo de Chrome a trabajar en carruseles de CSS interactivos como parte del módulo de desbordamiento de CSS de nivel 5, que se lanzó en Chrome 135.

Después del lanzamiento inicial de la función en Chrome, recibimos muchos comentarios de la comunidad, que hemos estado trabajando para abordar. Esto incluye nuevas funciones, como la compatibilidad con modos de marcadores de desplazamiento discretos y de navegación, y varias correcciones de errores. Por ejemplo:

Creemos que las funciones de CSS Overflow 5 pueden crear carruseles sólidos y accesibles que sean interactivos desde la primera pintura. En esta publicación, se explica cómo hacerlo, con un enfoque en cómo usar estas funciones para resolver problemas de accesibilidad de larga data.

Para obtener una introducción más general a los carruseles, consulta el artículo Carruseles con CSS. Recuerda que no se puede garantizar que ninguna IU sea accesible de forma predeterminada, por lo que siempre debes probar la accesibilidad de tus páginas.

Antes de comenzar a escribir código, es importante saber qué tipo de carrusel vas a crear. La estrategia de accesibilidad adecuada depende de cómo se supone que el usuario debe experimentar el contenido. En esta publicación, se abordan tres tipos comunes:

Carruseles de un solo elemento

Carrusel con un elemento en la pantalla y marcadores para seleccionar otros elementos.

Con los carruseles de un solo elemento, solo una diapositiva es completamente visible e interactiva a la vez (por ejemplo, los banners de héroe o las presentaciones de diapositivas).

Carruseles paginados automáticamente

Carrusel con varias diapositivas que se muestran a la vez.

Los carruseles paginados automáticamente muestran "páginas" de contenido, como una lista de productos o programas de TV.

Carruseles con varios elementos

En los carruseles de varios elementos, se pueden ver varios elementos a la vez, pero puedes desplazarte por ellos de forma individual sin paginación.

Cada tipo de carrusel tiene diferentes consideraciones de accesibilidad y prácticas recomendadas.

Carruseles de un solo elemento

Esta es una presentación clásica. Solo se debe leer un elemento secundario a la vez, aunque, en muchos casos, los usuarios verán un "avance" del elemento siguiente o anterior para proporcionar pistas contextuales sobre el contenido adicional. El objetivo es garantizar que solo la diapositiva centrada y completamente visible sea interactiva.

A continuación, te mostramos cómo hacerlo accesible paso a paso.

Paso 1: Aplica un solo enfoque con el ajuste de desplazamiento

Para garantizar que el contenedor de desplazamiento siempre se ajuste a una diapositiva, sin dejar ningún elemento atascado de forma incómoda en el medio, usa el ajuste de desplazamiento de CSS. Esto garantiza que, después de un desplazamiento, un elemento se "ajuste" perfectamente a su posición correcta, lo que crea una experiencia del usuario limpia.

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

Un usuario con un lector de pantalla necesita saber que ingresó a un carrusel y cuándo cambia la diapositiva. Esto requiere algunos atributos de ARIA en el contenedor del carrusel:


Atributo ARIA
Explicación

role="region"
Identifica el carrusel como una región de referencia en la página, lo que facilita la navegación hacia él.

aria-label
Otorga a la región un nombre descriptivo, como "Presentación de productos destacados".

aria-live="polite"
Este es el ingrediente mágico. Indica a los lectores de pantalla que anuncien los cambios en esta región de forma cortés, como cuando una nueva diapositiva se desplaza a la vista, sin interrumpir al usuario.

Esta es la estructura HTML:

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

Paso 3: Haz que solo la diapositiva visible sea interactiva

Esto es fundamental para la accesibilidad, ya que evita que los usuarios presionen accidentalmente la tecla Tab para acceder a botones o vínculos en diapositivas fuera de la pantalla. Para lograrlo, usa la nueva consulta de contenedor scroll-state y la propiedad interactivity.

Primero, haz que cada elemento de la diapositiva sea inerte de forma predeterminada con interactivity: inert. Luego, usa una consulta de contenedor scroll-state para segmentar la diapositiva que se encuentra actualmente "ajustada" en el viewport y establece su contenido en interactivity: auto.

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

Con este CSS, el navegador controla automáticamente qué elementos se pueden enfocar. Ya no se necesita JavaScript para administrar un tabindex. La consulta scroll-state hace que todas las diapositivas, excepto la actual, sean inertes.

Carruseles paginados

Este patrón se usa a menudo para galerías de productos o elecciones en las que el contenido se agrupa en páginas. La accesibilidad se puede controlar de dos maneras, según cómo quieras presentar el contenido.

Usa un contenedor con role="region" que tenga un solo elemento con role="tabpanel" dentro. Este panel de pestañas actualizará su contenido para reflejar la pestaña o página activa.

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

Para administrar la interactividad, usa un truco de animación inteligente vinculado al cronograma de view(). Esto garantiza que el orden de tabulación solo llegue a los elementos visibles actualmente en la pantalla.

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

Una lista de contenidos

Si el contenido es fundamentalmente una lista, usa un elemento <ul> para la semántica correcta.

Por ejemplo:

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

En este patrón, no uses la propiedad de interactividad para que el contenido fuera de la pantalla sea inerte. Si lo hicieras, se afectaría el recuento de elementos que anuncian los lectores de pantalla, por lo que todo el contenido debe permanecer en el árbol de accesibilidad.

Carruseles con varios elementos

Este patrón es para los carruseles en los que se pueden ver y leer varios elementos secundarios al mismo tiempo. Por ejemplo, una biblioteca de “productos relacionados” en un sitio de comercio electrónico.

Estos carruseles se comportan de manera diferente según tu respuesta a la siguiente decisión: ¿guías el enfoque del usuario hacia un elemento a la vez o le permites acceder a todo el contenido visible libremente?

Patrón 1: Un solo elemento "a" interactivo entre los elementos visibles

En este modelo, se ven varios elementos, pero solo el elemento principal o "actual" es interactivo. Los demás elementos visibles son inertes. Este patrón es útil para guiar a un usuario a través de un conjunto de elementos uno por uno.

Para compilarlo correctamente, debes usar el mismo patrón de accesibilidad que el carrusel de un solo elemento que se analizó anteriormente. Esto incluye lo siguiente:

  • Usa una consulta de contenedor de estado de desplazamiento para aplicar interactividad: inerte a elementos no activos.
  • Agrega suficiente relleno alrededor de los elementos para garantizar que cada uno de ellos se pueda ajustar a la posición principal (por ejemplo, el centro del puerto de desplazamiento). Esto hace que el modelo de navegación de a uno se sienta intencional y fluido.

Patrón 2: Todos los elementos visibles son interactivos

Si tu objetivo es permitir que los usuarios interactúen libremente con todos los elementos visibles, la práctica recomendada es asegurarte de que ningún contenido sea inerte.

Para este patrón:

  • Usa un elemento <ul> si el contenido es semánticamente una lista, ya que esto proporciona el contexto correcto para los usuarios de lectores de pantalla.
  • No uses la administración de la interactividad (interactivity: inert). Todo el contenido visible debe permanecer en el árbol de accesibilidad y ser accesible con la navegación con tabulación del teclado.

Conclusión

CSS Overflow 5 te permite compilar de forma declarativa patrones de carruseles interactivos comunes con menos problemas de accesibilidad. Si combinas HTML semántico, CSS moderno, como el estado de desplazamiento y la interactividad, y los roles ARIA adecuados, puedes crear experiencias accesibles y de alto rendimiento que sean interactivas desde la primera pintura.

Prueba estas nuevas APIs. Como siempre, aunque estos patrones y APIs están diseñados para que sea más fácil crear componentes interactivos, rápidos y accesibles, no hay sustituto para las pruebas de accesibilidad completas. Siempre deberás verificar que tu código sea accesible y que funcione para tu objetivo de referencia.