Contexto
Um carrossel mostra uma parte de uma coleção e permite avançar, voltar ou deslizar para ver os demais itens. Ele economiza espaço, mas também esconde conteúdo e pode introduzir movimento, controles difíceis de encontrar e problemas de leitura.
Use-o somente quando a exploração sequencial fizer sentido para a tarefa. Se cada conteúdo for importante, independente ou necessário para a decisão, uma composição estática costuma ser mais clara.
Comece pela tarefa, não pelo componente. Use carrossel quando os itens forem relacionados, a exploração em sequência trouxer valor e mostrar tudo ao mesmo tempo prejudicar a hierarquia.
Prefira uma seção estática quando as mensagens forem independentes ou quando qualquer item puder ser essencial. O carrossel não deve ser a única rota para conteúdo, produto ou ação importante.
Mostre controles de anterior e próximo com nomes acessíveis, posição atual e quantidade total. Em galerias, miniaturas ou rótulos úteis podem comunicar melhor o que existe do que pontos isolados.
Faça a navegação manual por padrão. Se a rotação automática for realmente necessária, permita pausar e parar, use um intervalo confortável e interrompa-a ao receber foco ou interação.
Mantenha texto real em HTML, layout estável, carregamento rápido e alternativa funcional para teclado, toque e leitores de tela.
Porque isso importa?
O conteúdo oculto de um carrossel pode passar despercebido. A pesquisa do Baymard encontrou problemas de usabilidade em uma parcela relevante dos carrosséis de homepages e recomenda considerar seções estáticas como alternativa mais simples.
A W3C trata carrosséis como componentes que exigem estrutura semântica, controles de navegação, comunicação das mudanças e controle do movimento. Portanto, o componente só é adequado quando a equipe consegue implementar e testar esses requisitos.
Essas fontes não tornam o carrossel sempre errado. Elas sustentam uma decisão condicional: o padrão pode funcionar para coleções relacionadas e exploração opcional, mas não deve ocultar informação essencial nem depender de rotação automática.
Quando usar?
- Para galerias de imagens relacionadas.
- Para explorar itens semelhantes.
- Quando a ordem dos itens fizer sentido.
- Quando a exploração for opcional.
- Quando controles claros couberem no layout.
- Quando houver tempo para testar acessibilidade.
Quando evitar?
- Para mensagens críticas.
- Para a única chamada principal.
- Para conteúdo independente e essencial.
- Quando houver muitos itens.
- Quando depender só de swipe.
- Quando a rotação distrair ou dificultar a leitura.
Recomendações
Faça
- Defina um objetivo.
- Relacione os itens.
- Mostre anterior e próximo.
- Indique posição e total.
- Prefira controle manual.
- Pause ao focar ou interagir.
- Use texto HTML.
- Teste teclado, toque e zoom.
Evite
- Não esconda informação essencial.
- Não use só pontos.
- Não exija apenas swipe.
- Não troque slides rapidamente.
- Não reinicie a posição sem motivo.
- Não sobreponha controles ao texto.
- Não use imagens com texto embutido.
- Não trate carrossel como padrão automático.
