Combobox y autocomplete accesible

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

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Elementos imprescindibles para un combobox utilizable.

Atributos base

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

Opción activa

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

Teclas críticas

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

Estado vacío

Anuncia claramente “sin resultados” cuando no hay coincidencias.

Confirmación

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

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.

Combobox básico

<label for="city">Ciudad</label>
<input id="city" role="combobox" aria-expanded="false" aria-controls="city-list" aria-autocomplete="list" />
<ul id="city-list" role="listbox" hidden>
  <li id="city-1" role="option">Madrid</li>
</ul>

1 Claves teóricas 2 Aplicación en proyectos reales 3 Patrón de código

🧪 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

Enlaces útiles

W3C WAI Fundamentals MDN Accessibility WCAG 2.1 Quick Reference ARIA Authoring Practices Guide

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Test de Accesibilidad Web

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 15

Tabs y accordion accesibles

Lección 17

Validación y errores accesibles

›