Sanfona na página: quando recolher conteúdo ajuda a ler

Recolha conteúdo numa sanfona quando a pessoa vai precisar de poucas partes da página, cada parte se sustenta sozinha e o título de cada bloco diz o que há dentro. Se ela vai ler quase tudo, ou se o texto é curto, deixe aberto (NN/g, Accordions on Desktop (em inglês)). No código, o par <details> e <summary> do HTML já abre e fecha sem nenhum script (MDN, o elemento details).

O que conta como sanfona

Sanfona é o bloco que mostra só um título e revela o conteúdo quando alguém clica nele. Ela tem três peças: o título, um ícone que indica se está aberta ou fechada e o painel com o conteúdo escondido (NN/g (em inglês)).

A diferença para uma janela por cima é o lugar onde o conteúdo aparece. A sanfona abre no próprio fluxo e empurra o resto da página para baixo, sem cobrir nada (NN/g, Accordions on Mobile (em inglês)).

Quando recolher ajuda

O artigo de 2023 do NN/g lista os casos em que a sanfona compensa (NN/g (em inglês)):

A pessoa quer poucas partes. Se ela vai pular quase tudo, esconder o resto poupa tempo.
A tarefa segue passos. Um checkout em etapas mostra só o passo atual e abre o próximo quando o anterior fica completo.
As partes são independentes. Página de perguntas e detalhes de produto entram aqui, porque ninguém precisa de duas seções lado a lado.
A tela é pequena e o texto é longo. No celular, recolher deixa a página com um tamanho que dá para percorrer.

No celular, o ganho maior é a visão geral. Os títulos fechados funcionam como um índice da página, e a pessoa vê de uma vez o que existe ali antes de escolher onde entrar (NN/g (em inglês)). Sem isso, ela rola, não acha e vai embora, mesmo quando a resposta estava mais abaixo.

Quando recolher atrapalha

A mesma fonte aponta os casos em que o melhor é mostrar tudo (NN/g (em inglês)):

A pessoa precisa da maior parte. Abrir bloco por bloco vira trabalho, e a página longa sai mais barata.
Há pouco conteúdo. Com tudo fechado, a página parece vazia e dá a impressão de que não tem nada de útil.
A hierarquia é funda. Sanfona dentro de sanfona faz a pessoa perder o lugar. Abas ou um menu lateral servem melhor.
O conteúdo não cabe num título. Se não dá para resumir o bloco em poucas palavras, ninguém sabe se vale abrir.
É um texto para ler de ponta a ponta. Notícia e relato perdem o fio quando são picados em blocos.

Há também custos que aparecem em qualquer caso. Cada abertura pede olhar, decidir e clicar. O que fica fechado pode passar despercebido. E a página impressa sai com os blocos fechados, a menos que o site abra tudo antes de imprimir (NN/g (em inglês)).

O sinal de que o bloco abre

Um título solto parece um link para outra página. Em 2020, o NN/g testou isso com 136 pessoas no celular, em menus com quatro opções de ícone e uma versão sem ícone (NN/g, Accordion Icons (em inglês)). A seta para baixo, que gira ao abrir, foi a escolha mais segura.

Sem ícone, ou com um ícone inventado, as pessoas esperavam sair da página. O sinal de mais e a seta para a direita não foram melhores que a falta de ícone nesse ponto (NN/g (em inglês)).

O mesmo estudo mostrou que os toques se dividem entre o texto e o ícone. Mesmo com a seta para baixo, 29% dos toques caíram no texto (NN/g (em inglês)). Por isso, texto e ícone precisam fazer a mesma coisa. Fazer o texto levar a outra página e o ícone abrir o bloco engana quem toca.

O que o código precisa fazer

O <details> resolve a base. O atributo open define se o bloco começa aberto (MDN). Na versão em inglês da mesma referência, o MDN descreve o atributo name: blocos com o mesmo nome formam um grupo em que só um fica aberto (MDN, details (em inglês)).

Quem monta a sanfona com outros elementos precisa refazer o que o navegador daria pronto. O padrão do W3C pede que o título de cada bloco seja um botão dentro de um título de nível adequado. O botão informa o estado em aria-expanded e abre com Enter ou Espaço (W3C, Accordion Pattern (em inglês)).

A busca da página é outro ponto. Numa sanfona comum, o texto fechado não aparece no “Encontrar na página”, e um link para um trecho dele não funciona. Desde o Chrome 102, o atributo hidden="until-found" deixa o navegador achar esse texto e abrir o bloco sozinho (Chrome for Developers, hidden=until-found). A mesma página avisa que o bloco ainda precisa abrir por clique, porque nem todo navegador entende o atributo.

No celular: o botão Voltar

Um problema próprio do celular é a desorientação. Quando o site rola a página para pôr o bloco aberto no topo, a pessoa acha que mudou de página. Ela toca em Voltar para fechar e sai da página inteira (NN/g (em inglês)).

O NN/g sugere duas saídas. Uma é tratar a abertura como um link interno, para o Voltar fechar o bloco. A outra é não rolar nada quando ele abre. Para blocos muito longos, um título que fica preso no topo enquanto a pessoa rola permite fechar sem subir tudo de novo (NN/g (em inglês)). Nos testes descritos no artigo, ninguém entendeu um botão escrito “Collapse”, algo como “recolher”.

Como fiz no kahue.net

Na página sobre mim, três blocos começam fechados: o resto das certificações, a experiência anterior e a formação com idiomas. Os três cargos mais recentes aparecem abertos. O que é consulta fica recolhido, e o que a pessoa lê primeiro fica à vista.

Cada barra fechada diz o que tem dentro sem precisar abrir. A das credenciais mostra “51 certificados e cursos”, e a da experiência mostra “2015-2024 · 10 cargos”. A faixa de anos sai do próprio dado, então se ajusta quando entra um cargo novo.

Usei <details> e <summary> de propósito. Os blocos abrem sem JavaScript, e o conteúdo fechado continua no HTML, então buscador e leitor de currículo leem tudo. A barra tem fundo, sombra e uma seta para baixo na cor de destaque, que gira ao abrir. Fiz assim porque uma linha de texto solta não mostra que dá para clicar.

O JavaScript entra só para duas coisas que o elemento não faz sozinho. Um link que chega com o endereço do bloco, como #experiencia-anterior, abre o bloco. E antes de imprimir, todos os blocos abrem, para o PDF não sair cortado. Os blocos não têm name, então dá para abrir vários ao mesmo tempo.

Pela lista do NN/g, falta um botão de abrir tudo. Na comparação com o padrão do W3C, a ordem está invertida: o <h2> da formação fica dentro do <summary>, e não o botão dentro do título.

Onde as fontes divergem

O próprio NN/g muda de tom conforme a tela. O texto de 2015 sobre celular diz que a sanfona é um dos elementos mais úteis ali (NN/g (em inglês)). O de 2023 sobre computador diz que o uso nem sempre é recomendado e lista mais casos contra do que a favor (NN/g (em inglês)).

O ícone também diverge. O artigo de 2023 diz que a seta para baixo e o sinal de mais funcionam melhor (NN/g (em inglês)). O estudo de 2020 achou que o sinal de mais não supera a falta de ícone (NN/g (em inglês)). A seta para baixo é o ponto em que os dois concordam.

Por fim, o grupo em que só um bloco abre. O MDN apresenta o atributo name como o jeito de fazer sanfona sem script (MDN (em inglês)). O NN/g pede que a pessoa possa abrir vários de uma vez, porque fechar um sozinho impede comparar dois blocos (NN/g (em inglês)). O recurso existe, mas a escolha de usá-lo depende da tarefa.

O erro comum: esconder o que a pessoa veio buscar

O tropeço mais frequente é recolher justamente a informação mais importante. O exemplo do NN/g é um site do governo americano que deixou as regras de uso de máscara dentro de um bloco fechado (NN/g (em inglês)). O texto era curto e cabia aberto na página.

A pergunta que separa os casos é simples. Se quase todo mundo que chega precisa daquilo, deixe aberto. A sanfona serve para o que só uma parte das pessoas procura, como as respostas de uma página de perguntas frequentes.