Sobre este problema HTML
Nós de texto diretos dentro de select não são conteúdo permitido. Os navegadores normalmente ignoram ou deformam esse texto, levando a renderização inconsistente e experiências confusas para utilizadores de leitores de ecrã. Também quebra a conformidade, o que pode impactar a manutenibilidade e ferramentas automatizadas. A abordagem correta é manter o texto instrutivo numa label correspondente, ou fornecer um prompt não selecionável usando uma option desativada e selecionada. Rótulos de grupo devem ser fornecidos com elementos optgroup, não texto livre.
Para corrigir, remova qualquer texto em bruto dentro do select. Se precisar de um prompt, adicione uma primeira option com value="" e disabled selected hidden para uma experiência tipo placeholder, ou conte com uma label visível. Certifique-se de que todos os itens selecionáveis estão envolvidos em option, e qualquer agrupamento usa optgroup com o seu atributo label. Sempre associe o select com uma label via for/id para acessibilidade.
Exemplos
Despoleta o erro (nó de texto dentro do select)
<select>
Please select an option:
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Correto: mover instruções para uma label
<label for="flavor">Please select a flavor:</label>
<select id="flavor" name="flavor">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
</select>
Correto: fornecer um prompt não selecionável dentro do select
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="" disabled selected hidden>Select a country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
Correto: usar optgroup para agrupar, não texto livre
<label for="city">City</label>
<select id="city" name="city">
<optgroup label="USA">
<option value="nyc">New York</option>
<option value="la">Los Angeles</option>
</optgroup>
<optgroup label="Canada">
<option value="toronto">Toronto</option>
<option value="vancouver">Vancouver</option>
</optgroup>
</select>
Correto: documento completo (para contexto)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select without stray text</title>
</head>
<body>
<form>
<label for="size">Choose a size:</label>
<select id="size" name="size">
<option value="" disabled selected hidden>Select a size</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
</form>
</body>
</html>
Dicas:
-
Coloque instruções numa
labelou texto envolvente, não dentro doselect. -
Cada escolha deve ser uma
option; useoptgroupcomlabelpara nomear grupos. -
Para placeholders, prefira uma primeira
optiondesativada e selecionada; evite nós de texto em bruto.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.