# Como usar a tag HTML label para melhorar seu site

Com a tag `label` em HTML, você melhora a usabilidade do seu site e oferece mais acessibilidade. A tag `label` pode ser usada, entre outras coisas, para campos de entrada, caixas de seleção e botões de opção, e funciona com atributos globais, atributos de evento, bem como `for` e `form`.

## Para que serve a tag `label` em HTML

Para melhorar a clareza e a [acessibilidade do site](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/acessibilidade-do-site/), a tag HTML `label` desempenha um papel fundamental. Ela é usada em formulários para fornecer descrições claras para elementos como **campos de entrada, botões de opção e caixas de seleção**.

Isso é especialmente importante para dois casos de uso:

- Ela facilita a navegação no site para visitantes que têm dificuldade em interagir com pequenas áreas clicáveis. Como a **área clicável é maior**, os elementos do formulário ficam mais fáceis de selecionar e usar.
- Para usuários que dependem de um leitor de tela, a tag HTML `label` garante que os rótulos de formulários sejam lidos em voz alta corretamente. **Isso melhora a usabilidade** para todos os visitantes do seu site.

## Relevância da tag `label` nas WCAG

Os formulários em HTML não devem ser apenas visualmente fáceis de entender, mas também cumprir os padrões atuais de [acessibilidade digital](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/acessibilidade-digital/). As [WCAG](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/wcag-diretrizes-para-acessibilidade-em-sites/) (Web Content Accessibility Guidelines) 2.2 exigem, por exemplo, que todos os campos de entrada sejam rotulados ou fornecidos com instruções claras (Critério de Sucesso 3.3.2 “Rótulos ou Instruções”). Isso garante que pessoas com deficiências cognitivas ou visuais entendam qual entrada é esperada.

Além disso, o Critério de Sucesso 2.5.3 das WCAG, “Rótulo no Nome” (“Label in Name”), garante que o rótulo visível também seja incluído no código do programa como um nome acessível. Isso é importante para usuários que dependem de tecnologias assistivas ou de controle por voz.

Nota No Brasil, os requisitos de acessibilidade digital têm base principalmente no [Estatuto da Pessoa com Deficiência (Lei nº 13.146/2015)](https://www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm "Página do sitedo Governo Federal da Lei Brasileira de Inclusão da Pessoa com Deficiência") e em normas específicas para o governo digital, como o Decreto nº 9.756/2019, que regulamenta o padrão gov.br. De acordo com essa legislação, sites, serviços e formulários on-line devem ser desenvolvidos de forma acessível e utilizável por pessoas com deficiência. Na prática, **as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) são usadas como principal referência técnica** para avaliar se o conteúdo digital atende aos requisitos legais de acessibilidade no país

## Como a tag HTML label é usada?

A tag `label` em HTML pode ser usada de duas formas diferentes. Ambos os métodos garantem que tecnologias assistivas, como leitores de tela, associem corretamente o rótulo ao respectivo controle do formulário e permitem que os usuários cliquem no rótulo para focar o campo de entrada correspondente.

### Associação explícita (com `for` e `id`)

No método explícito, você **separa o rótulo e o campo do formulário no HTML**, mas os vincula usando o atributo `for` com o valor de `id` do campo de entrada. Essa opção oferece o melhor suporte de navegadores e tecnologias assistivas. Por esse motivo, ela geralmente é recomendada como uma boa prática.

```html
<p>
    <input type="checkbox" name="read" id="read" value="yes" />
    <label for="read">Eu li os termos e condições</label>
</p>
```

É importante que o valor do atributo `for` corresponda exatamente ao atributo `id` do campo de entrada.

### Associação implícita (input dentro da `label`)

Como alternativa, você pode colocar o campo de entrada dentro do elemento `<label>`. Nesse caso, a associação é criada automaticamente, sem a necessidade de definir `for` e `id`. Essa opção também é um HTML válido, mas não é compatível com todos os dispositivos.

```html
<p>
    <label>
        <input type="checkbox" name="read" value="yes" />
         Eu li os termos e condições
    </label>
</p>
```

## Quais elementos são associados à tag HTML `label`?

Para permitir acesso acessível à sua página para usuários com leitores de tela, por exemplo, você deve rotular os seguintes elementos em HTML, em especial, com um **HTML label** (a **tag label em HTML**):

- **Campos de entrada**: `<input type=”text” />`, `<input type=”password” />`, `<textarea>`
- **Caixas de seleção**: `<input type=”checkbox” />`
- **Botões de opção**: `<input type=”radio” />`
- **Listas suspensas**: `<select>`
- **Campos de upload:** `<input type=”file” />`

## Quais atributos a tag `label` em HTML suporta?

A tag `label` oferece suporte a todos os atributos HTML globais, bem como a todos os atributos de eventos. Além disso, os seguintes atributos podem ser associados ao HTML label:

- `for`: o atributo `for` especifica o ID do elemento de entrada ao qual o label deve ser associado. O valor de `for` deve corresponder exatamente ao valor do atributo `id` de outro controle de formulário no mesmo documento.
- `form`: o atributo `form` pode ser útil em layouts complexos nos quais um label e o controle de formulário associado não estão localizados dentro do mesmo elemento de formulário. Na maioria dos formulários acessíveis, porém, ele não é necessário. A associação recomendada é feita usando `for` / `id` ou aninhando o input dentro do `label`. O atributo `form` não faz parte dos atributos padrão normalmente usados com a tag `label` na especificação HTML.

```html
<form id="participant">
    <label for="first-name">Nome</label>
    <input name="first-name" id="first-name" maxlength="25">
    <label for="last-name">Sobrenome</label>
    <input name="last-name" id="last-name" maxlength="30">
    <button>Confirmar dados</button>
</form>
```


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-label/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-label/) for AI/LLM consumption.