Accordion vs. Tabs
Um acordeão abre seções numa página e pode deixar várias abertas. Abas mostram uma seção por vez num mesmo espaço.
Use um acordeão para perguntas ou seções que as pessoas possam ler juntas. Use abas para algumas visualizações separadas quando apenas uma importa de cada vez.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Accordion
Um acordeão empilha seções cujos títulos abrem ou fecham o próprio conteúdo.
Accordion
Um acordeão empilha seções cujos títulos abrem ou fecham o próprio conteúdo.
Escolha quando
Use-o para seções opcionais, cada uma com um título claro e separado.
Uma FAQ mostra as perguntas primeiro. A pessoa pode abrir uma resposta sem sair da página.
- Use-o quando
- Use-o para seções opcionais, cada uma com um título claro e separado.
- Não o use quando
- Nunca esconda informações curtas e essenciais apenas para deixar a página organizada.
- Nome usado no código
<details><summary>
Abas
Abas usam rótulos para alternar o conteúdo em um painel compartilhado. A tarefa principal continua aberta.
Visão geral, Atividade e Permissões mudam o painel abaixo enquanto o mesmo projeto permanece aberto.
- Use-o quando
- Use abas para algumas seções no mesmo nível quando seus rótulos devem permanecer visíveis.
- Não o use quando
- Nunca use guias como pequenos links para páginas que não têm relação entre si.
- Nome usado no código
role="tablist"
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| AccordionAccordion | Use-o para seções opcionais, cada uma com um título claro e separado. | Nunca esconda informações curtas e essenciais apenas para deixar a página organizada. | <details><summary> |
| AbasTabs | Use abas para algumas seções no mesmo nível quando seus rótulos devem permanecer visíveis. | Nunca use guias como pequenos links para páginas que não têm relação entre si. | role="tablist" |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Accordion (Accordion), Abas (Tabs) para o nosso fluxo real de usuário. Use esta regra: Um acordeão abre seções numa página e pode deixar várias abertas. Abas mostram uma seção por vez num mesmo espaço. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.