Curso de HTML / Criar conteúdo expansível com details e summary

details e summary criam um conteúdo que os usuários podem expandir e recolher sem escrever JavaScript. Eles são adequados para explicações opcionais, instruções mais longas ou respostas que os leitores podem querer revelar mediante solicitação.

Criar um painel expansível simples

<details>

  <summary>Ver horários de funcionamento</summary>

  <p>Abrimos de segunda a sexta-feira, das 9h às 18h.</p>

</details>

Coloque o código no body de um documento HTML e abra-o em um navegador. Inicialmente, apenas « Ver horários de funcionamento » aparece. Ative este texto com o mouse, por toque ou pelo teclado para revelar o parágrafo; ative-o novamente para fechá-lo. Coloque o summary primeiro dentro do details. O navegador fornece o estado de expansão básico e a interação; você não precisa de um script apenas para abrir e fechar.

O marcador e as bordas podem parecer diferentes dependendo do navegador ou depois do estilo CSS. O que importa é que o rótulo permaneça claro, que o conteúdo abra e feche, e que o foco do teclado continue visível.

Exibir o conteúdo inicialmente

Adicione o atributo open quando o painel deve ser exibido aberto inicialmente. Os usuários ainda podem fechá-lo e reabri-lo. A regra de presença booleana também é demonstrada com checked em Sintaxe HTML.

<details open>

  <summary>Informações de entrega</summary>

  <p>Os prazos de entrega variam dependendo da região.</p>

</details>

open é um atributo booleano. Escrever open="false" sempre mantém o atributo presente e abre o painel no início. Remova completamente o atributo para iniciar fechado. Não esconda uma condição que todos devem ler como se fosse uma informação adicional opcional.

Escolha títulos úteis

Vários elementos details podem aparecer juntos, mas cada summary deve identificar o que revela. Repetir "Mais informações" torna os elementos difíceis de distinguir. Uma pergunta frequente pode corresponder a este modelo, mas se sua resposta for curta e imediatamente útil, um texto visível comum pode ser mais rápido para os leitores.

Teste o resultado com um teclado e em uma tela estreita. A referência de detalhes em MDN descreve sua estrutura e atributos.

Verifique o funcionamento do teclado e o estado inicial

1. Reabra o arquivo e compare o exemplo fechado sem open com o exemplo aberto com open.
2. Pressione Tab para acessar o resumo e verifique seu indicador de foco. Mantenha este resumo básico em texto em vez de colocar links ou botões concorrentes nele.
3. Use Enter e Espaço separadamente para abrir e fechar. Se você adicionar CSS, repita o teste para garantir que o foco permaneça visível.

O HTML fornece o mecanismo nativo de expansão, mas adicionar outras interações pode introduzir um comportamento de foco que ainda requer testes. A referência de summary na MDN descreve suas condições de uso.

Se isso não funcionar

Verifique se summary está dentro de details e se as tags de fechamento estão presentes. Se você estilizou o controle, certifique-se de que a área clicável e o indicador de foco visível não tenham sido removidos. Um painel expansível obriga os leitores a realizar uma ação adicional, portanto, é preferível reservá-lo para conteúdos realmente opcionais ou longos, em vez de usá-lo apenas para um efeito visual. Amplie a revisão do foco e da interação com a pequena página em Bases de acessibilidade: Títulos, Links, Imagens e Teclado.