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:

<ul class="c-list">
  <li class="c-list__item">
    <a href="#" class="c-list__link">Item 1</a>
  </li>
  
  <li class="c-list__item">
    <a href="#" class="c-list__link">Item 2</a>
  </li>
  
  <li class="c-list__item">
    <a href="#" class="c-list__link">Item 3</a>
  </li>
  
  <li class="c-list__item">
    <a href="#" class="c-list__link">Item 4</a>
  </li>
</ul>

</li>

</li>

</li>

</li>

</ul>

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:

<ul class="c-list" data-title="Options Alpha">

1	<ul class="c-list" data-title="Options Alpha">

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:

:root {
  --color-white: #fafafa;
  --color-purple: #7209b7;
  --color-purple-light: #c782e2;
  --color-turquoise: #4cc9f0;
}

:root {

--color-white: #fafafa;

--color-purple: #7209b7;

--color-purple-light: #c782e2;

--color-turquoise: #4cc9f0;

}

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:

.c-list {
  background-color: var(--color-purple);
  list-style-type: none;
  margin: 0;
  padding: 0;
  
  &__link {
    color: var(--color-white);
    display: block;
    padding: 20px;
    padding-left: 40px;
    text-decoration: none;
    
    &:hover {
      background-color: var(--color-turquoise);
      color: var(--color-purple);
    }
  }
}

.c-list {

background-color: var(--color-purple);

list-style-type: none;

margin: 0;

padding: 0;

&__link {

color: var(--color-white);

display: block;

padding: 20px;

padding-left: 40px;

text-decoration: none;

&:hover {

background-color: var(--color-turquoise);

color: var(--color-purple);

}

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:

&::before {
    color: var(--color-purple-light);
    content: attr(data-title);
    display: inline-block;
    text-transform: uppercase;
    padding: 20px 20px 15px 20px;
  }

&::before {

color: var(--color-purple-light);

content: attr(data-title);

display: inline-block;

text-transform: uppercase;

padding: 20px 20px 15px 20px;

}

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!