Validación HTML: Valor incorrecto "search" para el atributo "role" en el elemento "input".

Acerca de este problema HTML

El rol ARIA search es un rol de referencia, lo que significa que identifica una sección grande y navegable de una página — específicamente, la región que contiene la funcionalidad de búsqueda. Los roles de referencia ayudan a las tecnologías de asistencia (como lectores de pantalla) a identificar rápidamente y saltar a las secciones principales de un documento. Debido a que las referencias describen secciones de una página, pertenecen a elementos contenedores que abarcan todas las partes de la interfaz de búsqueda (la etiqueta, el campo de entrada, el botón de envío, etc.), no en un solo elemento <input>.

Cuando colocas role="search" en un <input>, el validador lo rechaza porque el rol search no coincide con la semántica de un control de entrada. Un <input> representa un solo widget interactivo, no una región de página. La forma válida de indicar que un campo de entrada es para consultas de búsqueda es usar <input type="search">, lo que proporciona a los navegadores y tecnologías de asistencia el significado semántico correcto para ese control específico.

Mientras tanto, si quieres marcar un formulario de búsqueda completo como una referencia de búsqueda, aplica role="search" al elemento <form> que envuelve los controles de búsqueda. En HTML moderno, también puedes usar el elemento <search>, que tiene el rol de referencia search implícito sin necesidad de ningún atributo ARIA.

Cómo solucionarlo

Elimina role="search" del elemento <input>.
Cambia el type de la entrada a "search" — esto le dice a los navegadores y tecnologías de asistencia que el campo es para consultas de búsqueda.
Aplica role="search" al <form> contenedor, o usa el elemento HTML <search> como contenedor.

Ejemplos

❌ Incorrecto: `role="search"` en un `<input>`

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

Esto desencadena el error de validación porque search no es un rol válido para <input>.

✅ Correcto: `type="search"` en la entrada, `role="search"` en el formulario

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

Aquí, role="search" está colocado correctamente en el elemento <form>, creando una referencia de búsqueda. El <input type="search"> transmite la semántica correcta para el propio campo de entrada.

✅ Correcto: usando el 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>

El elemento <search> tiene el rol ARIA implícito de search, así que no se necesita ningún atributo role explícito ni en el contenedor ni en el formulario. Este es el enfoque más semántico en navegadores que lo soportan.

✅ Correcto: entrada de búsqueda independiente sin una referencia

Si simplemente necesitas una entrada con estilo de búsqueda sin marcar una región de referencia completa, solo usa type="search":

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

Esto le da a la entrada la semántica correcta y permite a los navegadores proporcionar características de UI específicas de búsqueda (como un botón de limpiar) sin requerir un rol de referencia.