Accordion

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

Guia rápido para designers

Sempre avalie o contexto da aplicação, mesmo com a orientação tendo um padrão. Design de interação documenta a intenção. O funcionamento deve ser verificado na implementação.

Quando usar

Use para revelar seções de conteúdo relacionado, sem esconder informações essenciais sem indicação.

O que desenhar

Mostre títulos claros, seções abertas e fechadas e estados de interação dos cabeçalhos.

Como se comporta

Clique, toque, Enter ou espaço abre ou fecha a seção. O conteúdo fechado fica fora da navegação pelo teclado.

O que documentar no Figma

Defina se várias seções podem ficar abertas. Anote a ordem de navegação e como informar o estado aberto ou fechado.

Como revisar

Confira se o objetivo e os estados são claros em telas pequenas e grandes, com ampliação. Verifique os comportamentos documentados na implementação, incluindo teclado e leitor de telas quando aplicáveis.

Orientações completas

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes interativos do tipo Accordion.

Importante:
Dependendo do contexto de construção de seus respectivos componentes, é possível que haja mais questionamentos, bem como alguns dos apresentados aqui não ser necessários. A avaliação precisa ser feita caso a caso.

Projetando para a "não interação"

Antes de interagir é possível perceber visualmente quais cabeçalhos podem expandir ou recolher conteúdo?
É possível identificar visualmente quais seções estão abertas e quais estão fechadas?
O título de cada seção descreve claramente o conteúdo que será revelado?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Há feedback visual ao passar o mouse no cabeçalho acionável?
Ao clicar no cabeçalho, o painel correspondente alterna entre aberto e fechado?
Quando há regra de abertura única, a abertura de uma seção fecha as demais de forma previsível?

Projetando para uso com gestos

O alvo tocável do cabeçalho possui área suficiente para acionamento confortável?
Ao tocar no cabeçalho, o painel correspondente alterna entre aberto e fechado?
A mudança de estado fica perceptível visualmente após o toque?

Projetando para uso com teclado (qualquer dispositivo que não seja de apontamento)

Há foco visível no cabeçalho acionável?
É possível acionar cada cabeçalho com ENTER e SPACE?
É possível navegar entre os cabeçalhos pela ordem natural com TAB e SHIFT+TAB?

Projetando para uso com leitor de telas

O cabeçalho acionável é anunciado como botão?
O estado aberto ou fechado é anunciado corretamente?
A relação entre botão e painel é compreensível por nome, ordem ou associação programática?

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Accordion.

Importante:
Apenas os principais métodos estão listados aqui. Componentes customizados devem ter estudos aprofundados.

Interação com mouse (qualquer dispositivo de apontamento)

Clicar no cabeçalho abre ou fecha a seção relacionada.
O estado visual do cabeçalho deve mudar junto com o conteúdo exibido.
O conteúdo recolhido não deve permanecer navegável por teclado.

Interação com teclado (qualquer dispositivo que não seja de apontamento)

TAB move o foco entre cabeçalhos e demais componentes acionáveis.
ENTER ou SPACE alterna o estado da seção em foco.
Setas direcionais podem ser usadas como recurso adicional, quando documentadas e consistentes.

Interação com teclado (ou gestos) + leitor de telas

O botão deve expor o estado com aria-expanded.
Quando usado, aria-controls deve apontar para o painel controlado.
O conteúdo aberto deve ficar disponível na ordem de leitura e navegação.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)).

Cenário: Considerando que estou em uma página que contém accordion

Navegação por teclado

QUANDO uso a tecla Tab para mover o foco para um cabeçalho de accordion
O foco que VEJO é fortemente indicado visualmente
ENTÃO, quando uso Enter ou Barra de espaço
VEJO que a seção relacionada alterna entre aberta e fechada

Leitor de telas para desktop

Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e movo o foco para o componente
- OUÇO o nome do cabeçalho.
- OUÇO que o componente é um botão.
- OUÇO se a seção está expandida ou recolhida.
ENTÃO, quando aciono ou altero o componente
OUÇO ou percebo que o estado, valor, conteúdo ou ação correspondente foi atualizado.

Leitor de telas para dispositivos móveis

QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para focar no componente, acontece o seguinte:
- OUÇO o nome do cabeçalho.
- OUÇO que o componente é um botão.
- OUÇO se a seção está expandida ou recolhida.
ENTÃO, quando eu toco duas vezes ou uso o gesto adequado para ativar o componente
OUÇO ou percebo que o estado, valor, conteúdo ou ação correspondente foi atualizado.

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Accordion.

Accordion deve ser usado para revelar conteúdo relacionado, não para esconder informações essenciais sem indicação clara.
Conteúdo fechado não deve receber foco por teclado.
Quando apenas uma seção puder permanecer aberta, essa regra precisa ser previsível e testada.

Referências

Referências adicionais sobre componentes do tipo Accordion.

Importante:
A maior parte das referências estão na plataforma do curso junto com as aulas citadas neste material.

Isenção de responsabilidade:
Os links indicados aqui não são recomendações, mas apenas uma curadoria de referências onde você pode encontrar componentes construídos. É importante ressaltar que não há uma unificação nos formatos de construção e não há garantias de que os links mencionados aqui cumpram todos os padrões de design. Dúvidas devem ser direcionadas para as respectivas equipes envolvidas nas construções dos materiais indicados. Antes de "copiar" algum modelo apresentado, leve em consideração que todos os materiais são atualizados constantemente e que os padrões (principalmente proprietários) podem sofrer alterações.