Searchbar

El Buscador es el campo para encontrar contenidos, trámites o servicios dentro de un sitio. Puede ir en el header, en la cabecera de un listado o dentro de un overlay de búsqueda con resultados sugeridos.

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando el sitio tiene suficiente contenido como para que la persona prefiera escribir lo que busca antes que navegar por menús: portales de trámites y beneficios, catálogos de servicios o listados largos (oficinas, documentos, solicitudes). Usa el tipo Con botón en cabeceras de listado, y el overlay cuando la búsqueda se abre desde un atajo o ícono y conviene mostrar sugerencias.

Buenas prácticas

Recomendado: Ubica el buscador global arriba a la derecha

Cuando el buscador recorre todo el sitio, va en el header y en la misma posición en cada página: es el primer lugar donde las personas lo buscan.

Recomendado: Comunica en el placeholder qué se puede buscar

Empieza con “Buscar” y nombra el contenido, en pocas palabras: “Buscar beneficios”. Un “Buscar” solo no dice qué va a encontrar la persona.

Recomendado: Sugiere solo lo más relevante y ofrece ver todos los resultados

Si puedes, muestra sugerencias mientras la persona escribe: pocas, las más relevantes y con el texto que coincide destacado. Cierra la lista con la opción de ver todos los resultados del término buscado. Usa el Command search overlay.

Recomendado: Conserva la consulta tras buscar

En la página de resultados, deja el término buscado en el campo, con una X para limpiarlo. Así la persona puede corregir o afinar sin volver a escribir.

Recomendado: Tolera errores de escritura y sugiere la corrección

Si la persona escribe “subcidio”, muestra los resultados de “subsidio” y avísalo. Deja la opción de buscar exactamente lo que escribió, por si no era un error.

Recomendado: Pon el foco en el buscador cuando buscar es la tarea principal

Si la página existe para buscar, como un buscador de trámites, deja el foco en el campo al cargar: la persona escribe sin hacer clic. No lo hagas donde buscar es secundario, porque desorienta a quien usa lector de pantalla.

Malas prácticas

No recomendado: No lo uses como reemplazo de un Text field para ingresar datos

Si el trámite pide un dato de la persona (RUT, número de folio), usa un Text field con label y validación.

No recomendado: No pongas varios buscadores en la misma pantalla

Varios campos de búsqueda compiten entre sí y no dejan claro cuál busca en todo el sitio y cuál solo en la sección.

Recomendaciones de accesibilidad

Dale un nombre accesible al campo
En el tipo ícono no hay label visible: usa aria-label="Buscar" (o más específico, como “Buscar trámites”) en el input. En el tipo con botón, asocia el label al input con for/id.

Envuelve la búsqueda en un landmark de búsqueda
Usa <form role="search"> alrededor del campo, como en el tipo con botón y en el overlay, para que los lectores de pantalla puedan saltar directo al buscador.

Usa type="search"
El input de tipo búsqueda activa el teclado adecuado en móvil y comunica el propósito del campo a las tecnologías de asistencia.

Oculta la lupa decorativa
El ícono de lupa va con aria-hidden="true": el nombre del campo ya describe su función.

Aplica el patrón combobox en el overlay
El input lleva role="combobox", aria-expanded, aria-controls y aria-autocomplete="list"; los resultados son un listbox con option, y el resultado resaltado se comunica con aria-activedescendant sin sacar el foco del campo.

Nombra el overlay y su botón de cierre
El <dialog> necesita aria-label (p. ej. “Buscar en ChileAtiende”) y el botón de ícono de cierre un aria-label="Cerrar búsqueda". Al cerrar, devuelve el foco al elemento que abrió la búsqueda.

Anuncia la cantidad de resultados
Cuando los resultados cambien, informa el total (“3 resultados”) en un texto visible o en una región aria-live, para que se sepa si la búsqueda encontró algo.