Intro
O Carrossel é um componente de exibição sequencial de conteúdos em destaque, permitindo alternância entre múltiplos itens dentro do mesmo espaço horizontal.
É classificado como:
- Componente de Destaque
- Estrutura de rotatividade controlada
- Elemento de priorização visual
Seu uso deve ser estratégico, priorizando campanhas institucionais, avisos importantes e conteúdos com forte apelo visual.
Anatomia Visual
Estrutura Principal
Carrossel
├── 1 Controle Anterior
├── 2 Área de Slide
│ └── Conteúdo do Banner
├── 1.1 Controle Próximo
└── 3 Indicadores
Acessibilidade
Obrigatório implementar:
aria-roledescription="carousel"aria-labeldescritivo- Botões com
aria-label="Próximo slide"etc. - Controle de autoplay pausável
- Navegação via teclado:
- Tab
- Enter
- Setas direcionais
Evitar:
- Autoplay sem controle
- Movimentos rápidos (<2 segundos)
Uso
Quando usar
- Destaques de alto impacto
- Comunicação institucional estratégica
- Homepages governamentais
- Campanhas temporárias
Quando não usar
- Para listas simples de conteúdo
- Para conteúdo essencial que não pode ser ocultado
- Para navegação primária
- Para excesso de informação concorrente
Regras de Boas Práticas
- Máximo recomendado: 3 a 5 slides
- Um CTA claro por slide
- Hierarquia tipográfica consistente
- Não sobrecarregar com múltiplos botões
O que fazer / O que não fazer
✅ Faça
- Use imagens otimizadas
- Priorize mensagens claras
- Ofereça controle manual
- Garanta pausa automática em interação
- Mantenha consistência visual entre slides
❌ Não faça
- Não use mais de um CTA principal por slide
- Não utilize texto excessivo
- Não use autoplay agressivo
- Não esconda informações críticas
- Não use carrossel como substituto de layout estruturado
Aplicações
Cenário 1 — Portal Institucional
- Slide 1: Portal Único
- Slide 2: Campanha social
- Slide 3: Aviso emergencial
- Slide 4: Evento público
Cenário 2 — Página de Serviços
- Destaques de programas
- Informações temporárias
- Editais abertos
Cenário 3 — Campanhas Públicas
- Comunicação visual forte
- Apoio de identidade visual específica
- Direcionamento para páginas internas
O Carrossel é um componente de alto impacto visual que:
- Organiza múltiplos destaques em espaço controlado
- Permite comunicação rotativa
- Reforça campanhas institucionais
- Direciona atenção do usuário
Seu uso deve ser criterioso, acessível e estrategicamente limitado para evitar dispersão de foco.