Criar carrosséis acessíveis

Robert Flack

Penny McLachlan

Lucas Radaelli

Publicado em: 29 de setembro de 2025

As pessoas amam ou odeiam, mas os carrosséis são um padrão amplamente usado e solicitado. Portanto, quando um carrossel é implementado, ele precisa ser robusto e acessível. Ele precisa ser interativo na primeira renderização, declarativo para facilitar a manutenção e criado com uma estrutura semântica testada com tecnologias assistivas.

No entanto, tornar carrosséis acessíveis costuma ser um desafio. Gerenciar o foco, receber anúncios do leitor de tela corretamente e processar elementos interativos fora da tela é complicado. Por isso, os carrosséis em muitos sites não são acessíveis. Esses desafios levaram a equipe do Chrome a trabalhar em carrosséis CSS interativos como parte do Módulo de transbordamento CSS nível 5, que foi lançado no Chrome 135.

Após o lançamento inicial do recurso no Chrome, recebemos muito feedback da comunidade, que estamos trabalhando para resolver. Isso inclui novas funcionalidades, como suporte a modos de marcador de rolagem discretos e de navegação, e várias correções de bugs. Exemplo:

• Suporte para contadores em texto alternativo, que foi lançado no Chrome 140.
• Correção de um problema em que um ::scroll-button state desativado não era lido corretamente pelos leitores de tela.
• Garantir que ::scroll-marker receba um nome de identificador ARIA do valor do conteúdo.
• Correção de um bug em que todos os pseudoelementos ::scroll-marker eram lidos como "selecionados".

Acreditamos que os recursos do CSS Overflow 5 podem criar carrosséis robustos e acessíveis que são interativos na primeira renderização. Esta postagem mostra como fazer isso, com foco em como usar esses recursos para resolver problemas de acessibilidade de longa data.

Para uma introdução mais geral aos carrosséis, consulte o artigo Carrosséis com CSS. Lembre-se: nenhuma interface pode ser garantida como acessível por padrão. É sempre necessário testar a acessibilidade das suas páginas.

De que tipo de carrossel você precisa?

Antes de começar a programar, é importante saber que tipo de carrossel você está criando. A estratégia de acessibilidade certa depende de como o usuário vai interagir com o conteúdo. Esta postagem aborda três tipos comuns:

Carrosséis de item único

Com carrosséis de um único item, apenas um slide fica totalmente visível e interativo por vez (por exemplo, banners principais ou apresentações de slides).

Carrosséis paginados automaticamente

Os carrosséis paginados automaticamente mostram "páginas" de conteúdo, como uma lista de produtos ou programas de TV.

Carrosséis com vários itens

Em carrosséis de vários itens, vários itens ficam visíveis ao mesmo tempo, mas você ainda pode rolar por eles individualmente sem paginação.

Cada tipo de carrossel tem considerações e práticas recomendadas de acessibilidade diferentes.

Carrosséis de item único

Este é um apresentação de slides clássica. Apenas um elemento filho deve ser lido por vez, embora em muitos casos os usuários vejam uma "espiada" do item seguinte ou anterior para fornecer pistas contextuais sobre conteúdo adicional. O objetivo é garantir que apenas o slide centralizado e totalmente visível seja interativo.

Confira como fazer isso, etapa por etapa.

Etapa 1: aplicar um único foco com ajuste de rolagem

Para garantir que o contêiner de rolagem sempre "se encaixe" em um slide, sem deixar nenhum item preso entre eles, use o encaixe de rolagem CSS. Isso garante que, depois de uma rolagem, um item seja perfeitamente "ajustado" à posição correta, criando uma experiência de usuário limpa.

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

Etapa 2: anunciar as mudanças no carrossel e nos slides

Um usuário com um leitor de tela precisa saber que entrou em um carrossel e quando o slide muda. Isso exige alguns atributos ARIA no contêiner do carrossel:

Esta é a estrutura HTML:

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

Etapa 3: tornar apenas o slide visível interativo

Isso é fundamental para a acessibilidade, porque impede que os usuários naveguem acidentalmente com a tecla Tab até botões ou links em slides fora da tela. Para isso, use a nova consulta de contêiner scroll-state e a propriedade interactivity.

Primeiro, torne cada item de slide inerte por padrão usando interactivity: inert. Em seguida, use uma consulta de contêiner scroll-state para segmentar o slide que está "ajustado" na janela de visualização e defina o conteúdo como 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;
    }
  }
}

Com esse CSS, o navegador processa automaticamente quais itens podem ser focalizados. Não é mais necessário JavaScript para gerenciar um tabindex. A consulta scroll-state torna todos os slides, exceto o atual, inertes.

Carrosséis paginados

Esse padrão é usado com frequência em galerias de produtos ou opções em que o conteúdo é agrupado em páginas. A acessibilidade pode ser tratada de duas maneiras, dependendo de como você quer apresentar o conteúdo.

Um carrossel com páginas discretas

Use um contêiner com role="region" e um único elemento com role="tabpanel" dentro dele. Esse painel de guias vai atualizar o conteúdo para refletir a guia ou página ativa.

<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 gerenciar a interatividade, use um truque de animação inteligente vinculado à linha do tempo view(). Isso garante que a ordem de tabulação alcance apenas os itens visíveis na tela.

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

Uma lista de conteúdos

Se o conteúdo for fundamentalmente uma lista, use um elemento <ul> para a semântica correta.

Exemplo:

<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>

Para esse padrão, não use a propriedade de interatividade para tornar o conteúdo fora da tela inerte. Isso afetaria a contagem de itens anunciada pelos leitores de tela, então todo o conteúdo precisa permanecer na árvore de acessibilidade.

Carrosséis com vários itens

Esse padrão é para carrosséis em que vários elementos filhos podem ficar visíveis e legíveis ao mesmo tempo. Por exemplo, uma seção "produtos relacionados" em um site de e-commerce.

Esses carrosséis se comportam de maneira diferente dependendo da sua resposta à seguinte decisão: você orienta o foco do usuário para um item por vez ou permite que ele acesse todo o conteúdo visível livremente?

Padrão 1: um único item interativo entre os itens visíveis

Nesse modelo, vários itens ficam visíveis, mas apenas o principal ou "atual" é interativo. Os outros itens visíveis são inertes. Esse padrão é útil para guiar um usuário por um conjunto de itens um por um.

Para criar isso corretamente, use o mesmo padrão de acessibilidade do carrossel de item único discutido anteriormente. Isso envolve:

• Use uma consulta de contêiner de estado de rolagem para aplicar interatividade: inerte a itens não ativos.
• Adicione padding suficiente ao redor dos itens para garantir que cada um deles possa ser ajustado à posição principal (por exemplo, o centro da porta de rolagem). Isso faz com que o modelo de navegação individual pareça intencional e suave.

Padrão 2: todos os itens visíveis são interativos

Se o objetivo for permitir que os usuários interajam livremente com todos os itens visíveis, a prática recomendada é garantir que nenhum conteúdo esteja inerte.

Para este padrão:

• Use um elemento <ul> se o conteúdo for semanticamente uma lista, já que isso fornece o contexto correto para usuários de leitores de tela.
• Não use o gerenciamento de interatividade (interactivity: inert). Todo o conteúdo visível precisa permanecer na árvore de acessibilidade e ser acessível usando a navegação com tabulação do teclado.

Conclusão

O CSS Overflow 5 permite criar de forma declarativa padrões comuns e interativos de carrossel com menos problemas de acessibilidade. Ao combinar HTML semântico, CSS moderno, como estado de rolagem e interatividade, e as funções ARIA corretas, é possível criar experiências acessíveis e de alta performance que são interativas no primeiro renderização.

Teste essas novas APIs! Como sempre, embora esses padrões e APIs sejam projetados para facilitar a criação de componentes interativos, rápidos e acessíveis, não há substituto para testes de acessibilidade completos. Você sempre precisará verificar se o código é acessível e funciona para sua meta de nível de referência.