Verificação HTML: Elemento "option" sem atributo "label" não pode estar vazio.

Sobre este problema HTML

O elemento <option> representa uma escolha dentro de um dropdown <select>, um <datalist>, ou um <optgroup>. De acordo com a especificação HTML, cada opção deve ter um nome — o texto que é exibido ao utilizador. Este nome pode vir de uma de duas fontes: o conteúdo de texto entre as tags de abertura <option> e de fecho </option>, ou o atributo label no elemento. Se nenhum for fornecido, a opção é renderizada como uma entrada vazia no dropdown, o que cria vários problemas.

Do ponto de vista da acessibilidade, os leitores de ecrã dependem do rótulo da opção para anunciar cada escolha ao utilizador. Uma opção vazia e sem rótulo não dá à tecnologia assistiva nada de significativo para ler, tornando o controlo inutilizável para alguns utilizadores. Do ponto de vista da usabilidade, utilizadores com visão veem uma linha vazia no dropdown e não têm ideia do que representa. E do ponto de vista da conformidade com padrões, a especificação HTML exige explicitamente que um <option> sem um atributo label não pode ter conteúdo vazio.

Note que o atributo value é separado do texto de exibição. O value é o que é submetido com o formulário, enquanto o conteúdo do rótulo/texto é o que o utilizador vê. Definir um value não satisfaz o requisito de texto visível.

Como corrigir

Você tem duas opções:

Adicionar conteúdo de texto dentro do elemento <option> (a abordagem mais comum e recomendada).
Adicionar um atributo label ao elemento <option>. Quando presente, o atributo label tem precedência sobre o conteúdo de texto para fins de exibição na maioria dos navegadores.

Se pretende que uma opção sirva como um placeholder (por exemplo, “Escolha um…”), certifique-se de que ainda tem conteúdo de texto visível.

Exemplos

❌ Opção vazia sem um rótulo

Isto desencadeia o erro de validação porque os elementos <option> não têm conteúdo de texto e nenhum atributo label:

<select name="size">
  <option value=""></option>
  <option value="s"></option>
  <option value="m"></option>
  <option value="l"></option>
</select>

✅ Correção: adicionar conteúdo de texto dentro de cada opção

<select name="size">
  <option value="">Escolha um tamanho</option>
  <option value="s">Pequeno</option>
  <option value="m">Médio</option>
  <option value="l">Grande</option>
</select>

✅ Correção: usar o atributo `label`

O atributo label fornece o texto de exibição. O conteúdo do elemento pode então estar vazio ou diferir do rótulo:

<select name="size">
  <option value="" label="Escolha um tamanho"></option>
  <option value="s" label="Pequeno"></option>
  <option value="m" label="Médio"></option>
  <option value="l" label="Grande"></option>
</select>

✅ Misturando ambas as abordagens

Você pode usar conteúdo de texto para algumas opções e o atributo label para outras. Pode até usar ambos no mesmo elemento — nesse caso, o atributo label tipicamente tem precedência para a exibição:

<select name="size">
  <option value="">Escolha um tamanho</option>
  <option value="s">Pequeno</option>
  <option value="m" label="Médio">Médio (M)</option>
  <option value="l" label="Grande">Grande (L)</option>
</select>

❌ Erro comum: assumir que `value` conta como rótulo

Isto ainda é inválido porque value não é exibido ao utilizador:

<select name="color">
  <option value="red"></option>
</select>

✅ Corrigido

<select name="color">
  <option value="red">Vermelho</option>
</select>

Na maioria dos casos, colocar texto legível diretamente dentro das tags <option> é a abordagem mais simples e mais compatível. Reserve o atributo label para situações onde precisa que o texto exibido difira do conteúdo do elemento.