Verificação HTML: Valor inválido "search" para o atributo "role" no elemento "input".

Sobre este problema HTML

O role ARIA search é um role de marco, o que significa que identifica uma secção grande e navegável de uma página — especificamente, a região que contém a funcionalidade de pesquisa. Os roles de marco ajudam as tecnologias assistivas (como leitores de ecrã) a identificar rapidamente e saltar para secções principais de um documento. Como os marcos descrevem secções de uma página, eles pertencem a elementos de contentor que abrangem todas as partes da interface de pesquisa (a etiqueta, o campo de entrada, o botão de submissão, etc.), não num único elemento <input>.

Quando você coloca role="search" num <input>, o validador rejeita-o porque o role search não coincide com a semântica de um controlo de entrada. Um <input> representa um único widget interativo, não uma região da página. A forma válida de indicar que um campo de entrada é para consultas de pesquisa é usar <input type="search">, que fornece aos navegadores e tecnologias assistivas o significado semântico correto para esse controlo específico.

Entretanto, se você quiser marcar um formulário de pesquisa inteiro como um marco de pesquisa, aplique role="search" ao elemento <form> que envolve os controlos de pesquisa. Em HTML moderno, você também pode usar o elemento <search>, que tem o role de marco search implícito sem necessitar de qualquer atributo ARIA.

Como corrigir

Remova role="search" do elemento <input>.
Altere o type da entrada para "search" — isto informa os navegadores e tecnologias assistivas que o campo é para consultas de pesquisa.
Aplique role="search" ao <form> envolvente, ou use o elemento HTML <search> como contentor.

Exemplos

❌ Incorreto: `role="search"` num `<input>`

<form>
  <label for="query">Search</label>
  <input role="search" id="query" name="q">
  <button type="submit">Go</button>
</form>

Isto desencadeia o erro de validação porque search não é um role válido para <input>.

✅ Correto: `type="search"` na entrada, `role="search"` no formulário

<form role="search">
  <label for="query">Search this site</label>
  <input type="search" id="query" name="q">
  <button type="submit">Go</button>
</form>

Aqui, role="search" está corretamente colocado no elemento <form>, criando um marco de pesquisa. O <input type="search"> transmite a semântica correta para o próprio campo de entrada.

✅ Correto: Usar o elemento `<search>` (HTML moderno)

<search>
  <form>
    <label for="query">Search this site</label>
    <input type="search" id="query" name="q">
    <button type="submit">Go</button>
  </form>
</search>

O elemento <search> tem o role ARIA implícito de search, por isso não é necessário nenhum atributo role explícito nem no contentor nem no formulário. Esta é a abordagem mais semântica em navegadores que o suportam.

✅ Correto: Entrada de pesquisa autónoma sem um marco

Se você simplesmente precisar de uma entrada com estilo de pesquisa sem marcar uma região de marco completa, use apenas type="search":

<label for="filter">Filter results</label>
<input type="search" id="filter" name="filter">

Isto fornece à entrada a semântica correta e permite aos navegadores fornecer funcionalidades de UI específicas para pesquisa (como um botão de limpeza) sem necessitar de um role de marco.