Verificação HTML: O elemento "textarea" não deve aparecer como descendente do elemento "a".

Sobre este problema HTML

O elemento <a> é classificado como conteúdo interativo, e a especificação HTML afirma explicitamente que o conteúdo interativo não deve ser aninhado dentro de outro conteúdo interativo. Um <textarea> é um controlo de formulário que aceita entrada do utilizador—clicar, focar, escrever e selecionar texto dentro dele. Quando está envolvido numa ligação, o navegador enfrenta um conflito: deve um clique focar o textarea ou seguir a ligação? Diferentes navegadores podem resolver isto de forma diferente, levando a um comportamento inconsistente.

Para além da inconsistência do navegador, este aninhamento cria problemas sérios de acessibilidade. Leitores de ecrã e outras tecnologias de apoio dependem de uma estrutura de documento clara e previsível. Quando um controlo de formulário está enterrado dentro de uma ligação, os papéis e modelos de interação sobrepõem-se, tornando confuso ou mesmo impossível para utilizadores que dependem de navegação por teclado ou leitores de ecrã interagir adequadamente com qualquer um dos elementos.

A correção depende do que você está tentando alcançar. Se o <textarea> e a ligação são logicamente separados, simplesmente mova-os para serem irmãos em vez de aninhar um dentro do outro. Se precisar que apareçam visualmente agrupados, use um <div> envolvente ou outro elemento contentor não-interativo.

Exemplos

❌ Inválido: `<textarea>` dentro de um elemento `<a>`

<a href="/comments">
  <textarea name="comment" rows="4" cols="40"></textarea>
</a>

Isto desencadeia o erro de validação porque o <textarea> é um descendente do elemento <a>.

✅ Válido: `<textarea>` e `<a>` como irmãos

<div>
  <textarea name="comment" rows="4" cols="40"></textarea>
  <a href="/comments">Ver todos os comentários</a>
</div>

Aqui, ambos os elementos vivem lado a lado dentro de um <div> neutro, evitando qualquer conflito de aninhamento.

✅ Válido: `<textarea>` dentro de um `<form>` com uma ligação separada

<form action="/submit-comment" method="post">
  <label for="comment">O seu comentário:</label>
  <textarea id="comment" name="comment" rows="4" cols="40"></textarea>
  <button type="submit">Submeter</button>
</form>
<a href="/comments">Ver todos os comentários</a>

Esta é a abordagem semanticamente mais correta quando o textarea faz parte de um formulário—mantenha os controlos de formulário num <form> e coloque quaisquer ligações de navegação fora dele.

Outros elementos interativos a observar

A mesma regra aplica-se a outro conteúdo interativo dentro de elementos <a>. Você também não pode aninhar <button>, <input>, <select>, <details>, ou outro <a> dentro de uma ligação. Se o validador reportar um erro semelhante para qualquer um destes elementos, a correção segue o mesmo princípio: mova o elemento interativo para fora da âncora.