Como criar carrosséis acessíveis em uma landing page feita por IA

Carrosséis concentram depoimentos, cases e imagens num espaço pequeno. Também concentram falhas: rotação automática antes da leitura terminar, setas sem nome, pontos minúsculos, slides invisíveis que continuam no leitor de tela e foco que desaparece quando o item muda.

Um carrossel acessível precisa ser compreensível parado. A pessoa deve identificar o conjunto, escolher o item, pausar qualquer rotação e usar os controles por teclado, toque ou tecnologia assistiva. A revisão a seguir cobre estrutura, movimento, controles e o teste na página publicada.

Primeiro, questione o formato

Antes de corrigir ARIA, pergunte se o carrossel entrega valor real. Uma grade ou lista costuma expor mais conteúdo, facilitar comparação e exigir menos interação. Mantenha o carrossel quando a sequência tem sentido e a limitação de espaço é legítima, não porque o componente veio pronto no template.

Compare as opções:

Se remover a rotação destrói a compreensão, o conteúdo provavelmente depende demais do efeito. Reorganize a informação antes de adicionar controles.

Dê estrutura e nome ao conjunto

O padrão de carrossel da W3C recomenda um contêiner identificado, controles em botões e slides com nome e função compreensíveis. Dependendo da importância na arquitetura da página, o contêiner pode ser uma região ou um grupo.

Uma lista preserva a relação entre os itens mesmo antes do JavaScript:

<section aria-labelledby="depoimentos-titulo">
  <h2 id="depoimentos-titulo">O que clientes dizem</h2>
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</section>

Quando o script transforma essa lista em carrossel, mantenha títulos, parágrafos, links e imagens com a semântica própria. Não achate cada slide numa div sem relações.

Use aria-roledescription="carousel" apenas como complemento a uma função válida, como region ou group. Dê ao conjunto um nome com aria-labelledby quando já existe um título visível. O guia de títulos e regiões aprofunda essa decisão.

Esconda slides inativos de todos da mesma forma

Um slide fora da tela não deve continuar disponível para foco ou ser lido como se estivesse visível. Posição absoluta, transform ou opacity: 0 podem esconder visualmente sem remover controles da navegação por teclado.

Para cada slide inativo, confirme:

• o conteúdo não aparece visualmente;
• links e botões não recebem foco;
• o slide não entra na leitura como conteúdo atual;
• a mudança não apaga o item ativo antes do próximo estar pronto;
• desligar JavaScript ainda deixa uma lista utilizável ou uma alternativa coerente.

Não aplique aria-hidden="true" a um elemento que contém o foco. Troque o estado de maneira atômica: identifique o próximo slide, atualize visibilidade e acessibilidade e preserve o foco no controle que disparou a mudança.

Use botões com nomes que descrevem a ação

Setas desenhadas e bolinhas não têm nome por conta própria. Use button nativo para avançar, voltar, pausar e selecionar um item.

<button type="button" aria-label="Depoimento anterior">...</button>
<button type="button" aria-label="Próximo depoimento">...</button>

Ao ativar “Próximo”, mantenha o foco no botão. Assim, a pessoa pode avançar mais de uma vez sem procurar o controle novamente. Se houver seletores de slide, o nome precisa indicar qual item será exibido e o estado atual precisa ser distinguível sem depender apenas de cor.

Evite criar uma parada de Tab para dezenas de pontos. O padrão com grupo de botões aumenta a sequência de foco a cada slide. Para muitos itens, controles anterior/próximo ou um padrão de abas bem implementado podem reduzir o custo de navegação.

O artigo sobre nomes acessíveis de links e botões ajuda a comparar o texto visível, o nome anunciado e a ação real.

Evite rotação automática

Autoplay raramente é necessário numa landing page. Ele muda o conteúdo antes de algumas pessoas terminarem a leitura, disputa atenção com o restante da página e pode deslocar o contexto de quem usa leitor de tela.

Se a rotação automática permanecer, o padrão da W3C para carrosséis estabelece controles importantes:

• um botão permite parar e reiniciar a rotação;
• o controle de rotação aparece antes do conteúdo rotativo na ordem de Tab;
• a rotação para quando o foco entra no carrossel;
• ela não recomeça após foco sem uma ação explícita da pessoa;
• a rotação também para enquanto o ponteiro está sobre o carrossel.

O rótulo do botão deve indicar a ação disponível, como “Pausar rotação” ou “Iniciar rotação”. Um ícone sozinho não comunica se o movimento está ativo.

A WCAG 2.2 exige um mecanismo para pausar, parar ou ocultar determinado conteúdo que começa automaticamente, dura mais de cinco segundos e aparece junto de outro conteúdo. Parar apenas enquanto o botão recebe foco não resolve: a pessoa ficaria presa nele para conseguir ler.

Respeite movimento reduzido sem esconder conteúdo

Quando prefers-reduced-motion: reduce estiver ativo, comece sem rotação automática e elimine transições amplas. A pessoa ainda precisa navegar por todos os slides manualmente.

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    transition-duration: 0.01ms;
  }
}

Não deixe slides em opacity: 0 esperando um evento que não ocorrerá. Não remova os controles junto com a animação. Movimento, acesso ao conteúdo e mudança de estado são responsabilidades diferentes.

O guia sobre movimento reduzido mostra como inventariar CSS, JavaScript, GIF, vídeo e bibliotecas de animação sem recorrer a um reset global.

Anuncie mudanças sem criar ruído

Quando a própria pessoa escolhe o próximo slide, ela precisa perceber qual conteúdo entrou. Isso não significa transformar todo o carrossel numa região aria-live permanente.

Defina uma estratégia:

• mantenha o foco no controle acionado;
• dê a cada slide um nome que o diferencie;
• anuncie a posição quando ela ajuda, como “3 de 5”;
• evite reler todo o conteúdo do slide a cada avanço;
• não anuncie mudanças automáticas enquanto a rotação está ativa;
• interrompa a rotação quando o foco entra no componente.

Uma região ao vivo muito falante disputa com a leitura atual. Um contador visual atualizado sem equivalente programático deixa outra parte do público sem contexto. Teste com o leitor de tela previsto para o produto e ajuste a quantidade de informação.

Preserve teclado, toque e foco visível

O fluxo básico deve funcionar com Tab, Shift+Tab, Enter e Espaço. Setas direcionais só entram quando o padrão escolhido as define claramente, como num conjunto de abas; não intercepte teclas de navegação da página por conveniência.

Teste também:

• swipe sem remover botões visíveis;
• foco sobre imagens claras e escuras;
• controles encostados na borda da tela;
• tamanho e espaçamento dos alvos;
• zoom e largura de 320 pixels CSS;
• texto maior e tradução;
• primeiro e último slide;
• conteúdo interativo dentro de cada slide.

A orientação da W3C sobre estilo de carrosséis destaca contraste, estado além da cor e controles grandes o suficiente para toque. O roteiro de alvos de toque ajuda a medir área e espaçamento no layout real.

Não confie só num teste automático

Scanners podem encontrar botão sem nome, contraste baixo e alguns estados ARIA inválidos. Eles não confirmam se um depoimento desapareceu antes da leitura terminar, se a pausa persiste ou se o foco entrou num slide oculto.

Use uma matriz curta:

Faça ao menos duas voltas completas, pause no meio, saia do componente, volte e redimensione a janela. Estados quebrados aparecem nas transições, não numa captura estática.

Use um pedido de correção com limites

Revise os carrosséis desta landing page sem publicar ainda.

Escopo:
- fonte e commit: [referência]
- rotas e carrosséis: [inventário]
- conteúdo e ordem de cada slide: [fonte aprovada]

1. Questione se lista ou grade comunica melhor o conteúdo.
2. Registre nome, estrutura, slides ativos e inativos e todos os controles.
3. Remova autoplay quando não for essencial; caso permaneça, inclua pausa persistente.
4. Pare rotação ao receber foco e com movimento reduzido.
5. Teste teclado, leitor de tela, toque, zoom e tela estreita.
6. Preserve texto, imagens, links, tracking e ordem aprovada.
7. Entregue o inventário, o diff e as evidências antes de publicar.

Esse escopo evita que uma correção de acessibilidade troque depoimentos, reorganize campanhas ou altere eventos de analytics sem revisão.

Reteste a URL publicada

Depois de aprovar a implementação, siga a documentação de Publicação: publique uma nova Version, acompanhe o deploy e abra a URL final.

Na página servida, percorra todos os slides com teclado e leitor de tela, pare a rotação, ative movimento reduzido, redimensione e confirme cada link. Compare a ordem e o texto com a Version aprovada. Se scripts de build ou hidratação reintroduzirem slides focáveis ou autoplay, corrija a fonte e republique o mesmo Site. O carrossel está pronto quando continua utilizável mesmo parado, ampliado e operado sem gesto de arrastar.