Área expansível versus abas: escolha a opção certa

Abas e acordeões ocultam e exibem conteúdo, por isso são confundidos. Escolher o padrão errado pode deixar os usuários desorientados.

Um conjunto de abas apresenta visões mutuamente exclusivas: abrir um painel fecha os demais. Ele é adequado para conteúdo que o usuário compara uma parte de cada vez.

Um acordeão permite que várias seções permaneçam abertas ao mesmo tempo. Ele é adequado para uma página longa de perguntas frequentes em que os usuários podem querer ver duas respostas lado a lado.

Uma única área que mostra e oculta conteúdo é uma divulgação: um botão e uma região. Use-a quando houver apenas um bloco opcional de detalhes a revelar.

Os padrões usam ARIA de maneiras diferentes. As abas precisam de tablist e teclas de seta; uma divulgação ou um acordeão precisa apenas de um botão com aria-expanded.

As abas funcionam melhor quando cada rótulo é curto e a linha cabe na parte superior. Se os rótulos forem longos, um acordeão empilhado verticalmente terá melhor leitura.

Em telas estreitas, uma linha horizontal de abas frequentemente ultrapassa a largura disponível. Um acordeão se empilha naturalmente, por isso muitas equipes mudam de padrão em telas pequenas.

Pergunte se as seções são independentes. Se os usuários se beneficiarem de ler várias juntas, escolha um acordeão; se apenas uma visão fizer sentido, escolha abas.

Evite criar qualquer um dos padrões usando apenas links que rolam a página. Links levam a lugares; esses controles alternam conteúdo, portanto precisam da semântica de botão.

Se um padrão não for claramente adequado, prefira o mais simples. Uma divulgação ou um acordeão tem menos ARIA que possa ser configurada incorretamente do que um componente completo de abas.

A escolha certa deve partir do conteúdo, não da aparência. Decida como os usuários precisam lê-lo e compará-lo; depois associe essa necessidade a um padrão.

Você aprendeu a escolher com base nas necessidades do conteúdo: abas para visões uma por vez, acordeões para várias seções abertas e uma divulgação para uma única revelação.