Combobox y autocompletado bien implementados

Un combobox es un campo de entrada asociado a una ventana emergente de sugerencias. Piense en los cuadros de búsqueda que muestran resultados coincidentes a medida que escribe. 🔍

Un combobox tiene un campo de texto donde escribe el usuario y un listbox emergente independiente con las opciones. ARIA conecta ambos para que los lectores de pantalla los relacionen.

Coloque role="combobox" directamente en el campo de texto. Esto indica a las tecnologías de asistencia que escribir aquí mostrará una lista de opciones.

Use aria-controls en el campo de entrada y establézcalo con el id de la ventana emergente. Así vincula el campo con el listbox que abre y cierra.

Cambie aria-expanded a true cuando se muestre la lista y a false cuando se oculte. Los lectores de pantalla anuncian el estado de la ventana emergente a partir de este atributo.

El contenedor de sugerencias recibe role="listbox" y cada sugerencia recibe role="option". Esto proporciona a los usuarios una lista familiar y navegable.

Este es el truco: el foco del teclado nunca abandona el campo de entrada. El usuario sigue escribiendo mientras las teclas de flecha desplazan el resaltado por las opciones.

Haga que aria-activedescendant del campo de entrada apunte al id de la opción resaltada. Así el lector de pantalla lee la opción activa sin mover el foco real.

Flecha abajo y Flecha arriba recorren las opciones, Enter selecciona la activa y Escape cierra la ventana emergente. Estas teclas proceden directamente del APG.

Establezca aria-selected="true" en la opción resaltada y false en las demás. En un combobox de selección única, solo debe haber una opción seleccionada a la vez.

Use aria-autocomplete para describir cómo aparecen las sugerencias: «list» para un menú filtrado o «both» cuando el texto también se completa en línea.

Un combobox es un campo de entrada más un listbox: conéctelos mediante aria-controls y aria-expanded, mantenga el foco en el campo y controle la opción activa con aria-activedescendant. ✅