Melhor forma para listas com caption?

Há algumas formas de fazer uma lista HTML com caption/label. A que vamos mostrar não é a mais comum, mas ganha pontos pela semântica e acessibilidade.

Ir para o artigo

Lista com caption, lista com label, lista com título, listas com agrupamento de itens… Independentemente de como você chama, se você é do front end, com certeza vai ter que implementar isso algum dia.

E, das diversas possibilidades de se chegar ao resultado final, será esta a que vamos mostrar agora a melhor de todas?

Prover uma lista com caption semanticamente relevante e de olho na acessibilidade é algo bem interessante, e esses são alguns dos pontos fortes dessa técnica para menus com label.

Em diversas situações de UI, é preciso fornecer listas com separação por tópicos (na prática, algo como sublistas, mas listado tudo de uma vez), e é justamente esse componente visual que você vai aprender a fazer.

E, dentre as diversas técnicas que possibilitam isso — como menus aninhados; tag de título antes da tag de lista; lista de definição (que, semanticamente, serve para outra coisa) –, essa vai te surpreender pela simplicidade e por respeitar semântica e a11y.

Lista com caption/label: HTML

Comentamos que os pontos fortes dessa técnica, além de sua simplicidade, é ela ser feita respeitando a semântica HTML de lista e acessibilidade.

Para tanto, o HTML é bastante dentro do comum; nada de especial é preciso ser feito, podendo ser codado algo mais ou menos como:

Aliás, vai ser preciso colocar algo diferentinho, sim. Mas não se preocupe, é um pouco diferente, mas, ainda assim, bastante comum: um atributo data-.

Então, logo na próprio tag <ul>, altere para o seguinte:

Se você está se perguntando para o quê isso vai ser e como é possível aproveitar atributos data- no CSS, então agora você vai ter uma bela surpresa!

Lista com caption/label: CSS

Para começar, vamos nos valer de Variáveis CSS para definir algumas cores que serão usadas para a estilização do menu com caption:

Toda a parte visual que estamos mostrando é para o exemplo de implementação da técnica de menus com label; obviamente, você irá colocar o CSS conforme seja necessário em seu projeto.

Tendo essas cores definidas, é possível passar à estilização:

Atente-se que estamos usando Sass para a estilização. Se você tentar usar aninhamento com CSS puro, não vai funcionar.

Se não souber muito bem o que é Sass e/ou tiver dúvidas quanto a se uso, confira nosso artigo com o básico de Sass para se virar nas webs.

Agora, a cereja do bolo:

A criação de um pseudo-elemento ::before que vai mostrar o valor de data-title através de attr().

Com isso, ao se adicionar múltiplas listas, uma seguida da outra, o visual mostrado é de uma lista com caption/label dentro dos parâmetros prometidos: com simplicidade e respeitando semântica e a11y.

Resultado final da implementação de lista com caption/label

Confira o resultado final ao vivo:

See the Pen Melhor forma para listas com caption? by dpw (@desenvolvweb) on CodePen.

Conclusão

Em webdev, há sempre diversas maneiras para se chegar a resultados de UI. Todas as abordagens tem suas vantagens e desvantagens; cabe a você decidir qual vai usar na sua implementação específica.

Certamente a técnica que mostramos para listas com caption será um adendo valioso em seu arsenal de possibilidades, o que vai ajudar bastante nas tomadas de decisão sempre que for necessário implementar este tipo de lista.

E aí, já teve que implementar uma lista com labels assim? Qual técnica você usou e o que tem a dizer sobre isso? Conta pra gente nos comentários!