searchbox

Cuándo utilizarlo

Se recomienda usar <input type="search">. Los navegadores muestran una interfaz para borrar el contenido del campo, los teclados en dispositivos móviles activan una tecla de retorno «Buscar», y los lectores de pantalla anuncian el campo como «campo de edición de búsqueda».

role="searchbox" solo aparece en dos casos:

• Un campo de búsqueda personalizado construido sobre un elemento contenteditable (tokens enriquecidos, imágenes pegadas, sintaxis de consulta compleja).
• Cuando se envuelve todo el elemento de búsqueda en un hito <search> o en una región role="search", con el campo de texto dentro aún usando el tipo nativo type="search".

Para búsquedas con autocompletado, debe usarse role="combobox" en el campo de búsqueda y asociarse con un role="listbox" de sugerencias; el propio searchbox no gestiona un elemento emergente.

Errores frecuentes

• role="searchbox" en un botón. El rol es para el campo de entrada, no para el botón con el icono de búsqueda situado junto a él.
• Campo de búsqueda sin nombre accesible. La palabra «Buscar» debe estar en un <label>, aria-label o aria-labelledby, no solo en el atributo placeholder.
• Formulario de búsqueda sin envolver el campo y el botón en un hito <search> o role="search". Los usuarios de lectores de pantalla navegan por hitos y pierden el acceso a la funcionalidad.
• Uso de role="searchbox" para un campo «filtrar esta tabla». Ese campo no es una búsqueda a nivel de sitio; un textbox o combobox simple es más preciso.
• Envío del formulario en cada pulsación de tecla sin debounce — genera anuncios continuos en la tecnología de apoyo.

Ejemplo

<search>
  <form role="search" action="/search">
    <label for="q">Buscar en el sitio</label>
    <input id="q" type="search" name="q">
    <button type="submit">Buscar</button>
  </form>
</search>