# Melhor forma para listas com caption?

> Listas HTML com caption e label para melhor acessibilidade. Técnicas semânticas avançadas para descrições e legendas em listas. Melhore HTML!

URL: https://dpw.dev/css/listas-com-caption-label/  
Publicado em: 2020-04-27  
Categoria: css  
Tags: interface  
Autor: Tárcio Zemel

[Vídeo no YouTube](https://www.youtube.com/watch?v=P2AMoDAepTc)

**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:

```html
<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>
```

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">
```

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:

```scss
: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:

```scss
.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](/css/o-basico-de-sass/).

Agora, a cereja do bolo:

```javascript
&::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()](https://developer.mozilla.org/pt-BR/docs/Web/CSS/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.

<figure>

![](/images/blog/listas-com-caption-label/listas-com-caption-label-resultado-final.webp)

<figcaption>

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

</figcaption>

</figure>

Confira o resultado final ao vivo:

[Exemplo no CodePen](https://codepen.io/anon/pen/YzyVwLj)

## 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!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml