Combobox y autocomplete accesible

Patrón avanzado para autocompletado con teclado, lista de opciones y estado anunciado correctamente.

Combobox no es un input con lista cualquiera: es un patrón con reglas concretas de teclado y estado.

Cuando se implementa mal, el usuario no sabe qué opción está activa ni cómo confirmar selección.

El reto principal es sincronizar input, lista, opción activa y feedback.

Aquí trabajamos base robusta para componentes de búsqueda y selección.

  • Elementos imprescindibles para un combobox utilizable.
  • Cómo construir un combobox reusable y mantenible en frontend moderno.
  • Implementa primero flujo de teclado y anuncio de estado; luego optimiza filtros y rendimiento.
  • Diseña estados explícitos: cerrado, abierto, cargando, sin resultados, seleccionado.
  • Asegura consistencia en desktop y móvil, especialmente al abrir/cerrar teclado virtual.

Claves teóricas

Elementos imprescindibles para un combobox utilizable.

Aplicación en proyectos reales

Cómo construir un combobox reusable y mantenible en frontend moderno.

Implementa primero flujo de teclado y anuncio de estado; luego optimiza filtros y rendimiento.

Diseña estados explícitos: cerrado, abierto, cargando, sin resultados, seleccionado.

Asegura consistencia en desktop y móvil, especialmente al abrir/cerrar teclado virtual.

  • Evita reimplementar combobox desde cero sin necesidad real.
  • Incluye pruebas de teclado en Storybook o suite de componentes.
  • Controla cambios asíncronos para no desincronizar opción activa.
  • Define contratos claros de valor/etiqueta al integrar con APIs.

Patrón de código

Estructura mínima de combobox con asociación a listbox.

Accesibilidad Web
16

Combobox y autocomplete accesible

Patrón avanzado para autocompletado con teclado, lista de opciones y estado anunciado correctamente.

Código del tema: combobox autocomplete

📘 Teoría

Claves teóricas

Elementos imprescindibles para un combobox utilizable.

1

Atributos base

Input con rol combobox, `aria-expanded` y referencia a `listbox`.

2

Opción activa

Usa `aria-activedescendant` para indicar qué opción está enfocada virtualmente.

3

Teclas críticas

Flechas para navegar, Enter para seleccionar, Escape para cerrar.

4

Estado vacío

Anuncia claramente “sin resultados” cuando no hay coincidencias.

5

Confirmación

Al seleccionar, actualiza input y comunica resultado sin ambigüedad.

6

Error típico

Mostrar lista visual sin relación semántica entre input y opciones.

Aplicación en proyectos reales

Cómo construir un combobox reusable y mantenible en frontend moderno.

Implementa primero flujo de teclado y anuncio de estado; luego optimiza filtros y rendimiento.

Diseña estados explícitos: cerrado, abierto, cargando, sin resultados, seleccionado.

Asegura consistencia en desktop y móvil, especialmente al abrir/cerrar teclado virtual.

  • Evita reimplementar combobox desde cero sin necesidad real.
  • Incluye pruebas de teclado en Storybook o suite de componentes.
  • Controla cambios asíncronos para no desincronizar opción activa.
  • Define contratos claros de valor/etiqueta al integrar con APIs.

Patrón de código

Estructura mínima de combobox con asociación a listbox.

🧪 Aprende probando

Ejemplo Demo guiada Abre una lista de opciones y selecciona con teclado.

🏁 Retos

Reto Reto práctico Añade estado sin resultados y anúncialo.

🧰 Recursos

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com