delarry

|

estudos

Accordion

11 de jun. de 2026

Delarry

…

Componentes

Accordion

Resumo

Accordion agrupa uma lista de itens de forma que possa revelar ou esconder o conteúdo contido onde os usuários podem clicar nele para revelar mais detalhes. Ele promove o controle e a liberdade do usuário , o terceiro dos 10 princípios de usabilidade para design de interface do usuário.

Os accordions são comumente usados nos seguintes padrões de design:

Perguntas frequentes (FAQ)
Recursos ou especificações do produto
Filtragem e classificação.

Anatomia

O Accordion por padrão possui os seguintes itens associados a ele;

Container: Espaço onde o conteúdo é anexado
Título: Texto explicativo sempre visível na interface
Ícone: Sinaliza que é possível realizar as ações de expandir e colapsar o componente
Conteúdo: Texto maior contido dentro do componente

Quando usar?

✅ Organizar grandes quantidades de conteúdo

Exibir muita informação de uma só vez pode tornar uma página confusa e sobrecarregada. Os acordeões exibem as informações em seções separadas e ocultam as informações irrelevantes para o usuário. Eles simplificam a página, reduzindo a carga cognitiva do usuário e permitindo que ele se concentre nas informações que precisa visualizar.

✅ Divulgação progressiva

Os usuários estão acostumados a rolar a página, mas rolam com um propósito . Recolher informações em acordeões não só encurta a página, como também garante que o conteúdo essencial permaneça visível. Os acordeões reduzem o esforço necessário para navegar por páginas longas e permitem que uma gama mais ampla de tópicos dentro do conteúdo permaneça acessível sem a necessidade de rolar a página.

✅ Espaço de tela limitado

Útil em dispositivos móveis ou telas pequenas, onde recolher o conteúdo economiza espaço.

✅ Quando os usuários precisam apenas de algumas informações na página

Provavelmente ignorarão a maior parte do conteúdo. Ocultar a maior parte do conteúdo da página ajuda os usuários a otimizar seu tempo, concentrando-se nos poucos tópicos relevantes.

✅ Quando a tarefa principal é um processo lógico, passo a passo

Essa abordagem é comumente usada para simplificar fluxos com várias etapas, tornando a experiência mais gerenciável para os usuários.

Evite o uso de accordion quando:

❌ Conteúdo mínimo

Evite usar esse recurso se as seções contiverem pouco texto; nesses casos, o uso de conteúdo embutido funciona melhor.

❌ Conteúdo acessado com frequência

O uso de acordeões em uma página de conteúdo pode dificultar o acesso dos usuários às informações de diferentes blocos de conteúdo.

❌ Informações críticas

Quando um usuário precisa acessar informações da maioria ou de todos os acordeões, expandir cada um deles pode se tornar cansativo. Cliques excessivos interrompem a interação do usuário com a página. Forçar os usuários a interagir com cada painel individualmente para acessar as informações pode levar à perda de contexto quando detalhes importantes estão dispersos em diferentes painéis.

❌ Quando o conteúdo possui uma hierarquia complexa com múltiplos subníveis

Ele pode se tornar muito difícil de ser exibido em um formato de hierarquia plana, como acordeões. Os usuários podem se sentir confusos e perder o controle de sua localização dentro da estrutura do acordeão. Nesses casos, considere alternativas como abas ou navegação local vertical para melhor acomodar a natureza hierárquica do conteúdo.

Variações

Os acordeões podem ter itens empilhados ou apenas um único item independente.

No entanto, às vezes você encontrará um acordeão solo sendo usado - ou seja, um único acordeão com cabeçalho e um único item.

Alternativamente, também vimos ícones de seta apontando para a direita quando o item do acordeão está oculto. Quando um usuário clica no cabeçalho do acordeão, o ícone de seta aponta para baixo , revelando o item do acordeão.

Um padrão de design de acordeão mais moderno que vimos recentemente é o ícone de mais (+) e - (ou x).

Também é possível criar accordions com design de cards expansívos

Alguns accordions permitem apenas um item expandido por vez, enquanto outros podem suportar múltiplas seleções ao mesmo tempo.

Acessibilidade

A

O estado expandido/colapsado nunca pode ser comunicado só por cor (WCAG 1.4.1)

A ordem visual dos itens precisa corresponder à ordem de leitura real do conteúdo (WCAG 1.3.2)

O título de um item não pode parecer mais importante que o título da seção (WCAG 1.3.1)

AA

O texto do título tem contraste mínimo de 4.5:1 contra o fundo; título grande (≥24px, ou ≥18.66px em bold) pode descer para 3:1 (WCAG 1.4.3)

O ícone de expandir/colapsar, qualquer borda que sinalize estado e o indicador de foco têm contraste mínimo de 3:1 contra o que está imediatamente ao redor (WCAG 1.4.11)

Cada título descreve com precisão o conteúdo do painel que ele controla (WCAG 2.4.6)

Todo título exibe um indicador de foco visível quando navegado por teclado (WCAG 2.4.7)

A área clicável de cada título mede no mínimo 24×24px (WCAG 2.5.8)

Quando um painel expande, o título que está em foco não pode ficar totalmente escondido atrás de elementos fixos, como uma barra de topo sticky (WCAG 2.4.11)

Em zoom até 400% ou largura de 320px, o accordion empilha e o conteúdo do painel não força rolagem horizontal (WCAG 1.4.10)

AAA

O texto do título alcança contraste de 7:1 (título grande: 4.5:1) (WCAG 1.4.6)

A animação de expandir/colapsar pode ser desativada ou reduzida quando o usuário sinaliza preferência por menos movimento no sistema operacional (WCAG 2.3.3)

O título em foco fica completamente visível (WCAG 2.4.12)

O indicador de foco tem, no mínimo, a área equivalente a um perímetro de 2px ao redor do título e contraste de 3:1 entre o estado focado e o não focado (WCAG 2.4.13)

A área clicável de cada título mede no mínimo 44×44px (WCAG 2.5.5)

Boas práticas

Certifique-se de que o título reflita com precisão o conteúdo do painel

Um título claro e descritivo é fundamental para despertar o interesse dos usuários em explorar o conteúdo detalhado dentro do acordeão.

O design visual do acordeão deve indicar claramente que ele pode ser expandido

Forneça ícones apropriados que comuniquem claramente a possibilidade de clicar nos títulos do acordeão. Além disso, certifique-se de que tanto o título quanto o ícone sejam clicáveis e que ambos expandam ou recolham o acordeão.

Permita que os usuários abram ou recolham várias seções simultaneamente

Considere incluir botões “Expandir tudo” e “Recolher tudo” para facilitar a navegação e permitir que os usuários personalizem sua experiência de visualização.