search
Hito que agrupa un formulario de búsqueda. Permite a los usuarios de lectores de pantalla saltar directamente a la búsqueda del sitio. El elemento nativo <search> (HTML 2024) incluye este rol automáticamente; use role="search" en un <form> para mayor compatibilidad con navegadores actuales.
Cuándo utilizarlo
Alrededor del elemento de búsqueda principal del sitio, generalmente un <form> que contiene un campo de texto y un botón de envío. Se recomienda usar el elemento nativo <search> cuando sea posible, ya que incorpora el hito de forma automática. Para navegadores más antiguos, debe aplicarse role="search" al <form> correspondiente.
El propósito del hito es exponer el elemento de búsqueda en el menú de hitos del lector de pantalla, de modo que los usuarios puedan acceder a él directamente. Sin el hito, el formulario de búsqueda es simplemente otro formulario más en la página.
El campo de texto dentro del hito de búsqueda debería usar <input type="search">: esto proporciona la semántica de búsqueda en el campo, el botón de borrado propio de la plataforma y una tecla de retorno «Buscar» en dispositivos móviles.
Cuándo etiquetar
Un único hito de búsqueda no requiere etiqueta. Si la página contiene varias búsquedas (una búsqueda global del sitio en la cabecera y una búsqueda de filtro dentro del contenido de la página), conviene etiquetar cada una: «Búsqueda del sitio», «Filtrar resultados».
Errores frecuentes
- Formulario de búsqueda sin hito. Los usuarios no pueden navegar hasta él mediante la navegación por hitos.
role="search"aplicado al<input>en lugar del<form>o contenedor envolvente. El rol pertenece al contenedor, no al campo.- Varios hitos de búsqueda sin etiquetas.
- Hito de búsqueda que solo incluye el campo de texto pero no el botón de envío. Los usuarios encuentran el campo, pero el botón queda fuera del hito.
- Uso de
role="search"en un campo genérico «buscar por nombre» dentro de una página CRUD — aplicación excesiva; se trata de un filtro, no de una búsqueda del sitio.
Ejemplo
<!-- Preferido (HTML moderno) -->
<search>
<form action="/search">
<label for="q">Buscar</label>
<input id="q" type="search" name="q">
<button type="submit">Ir</button>
</form>
</search>
<!-- Mayor compatibilidad con navegadores actuales -->
<form role="search" action="/search">
<label for="q2">Buscar</label>
<input id="q2" type="search" name="q">
<button type="submit">Ir</button>
</form>