Accesibilidad para widgets de autocompletado

El patrón de combobox de WAI-ARIA define un conjunto específico de roles y propiedades para los widgets de autocompletado. Un combobox es un elemento de entrada asociado a una ventana emergente listbox. El patrón garantiza que los lectores de pantalla anuncien correctamente el comportamiento interactivo, las opciones disponibles y la selección actual a los usuarios que no pueden ver la interfaz visual.

Envuelva el campo de entrada en un div con role="combobox". Esto indica a las tecnologías de asistencia que el campo de entrada tiene asociada una lista emergente. Establezca aria-expanded={isOpen} en este contenedor para indicar a los lectores de pantalla si la lista de sugerencias está visible u oculta.

El propio elemento de entrada debe tener: aria-autocomplete="list" (la ventana emergente contiene una lista de sugerencias), aria-haspopup="listbox" (al hacer clic o escribir se abre un listbox), aria-expanded={isOpen} y aria-controls="suggestion-list-id", que apunte al id del elemento de la lista desplegable.

aria-activedescendant en el campo de entrada apunta al id de la opción resaltada actualmente. Cuando selectedIndex es 0, establezca aria-activedescendant="option-0". Los lectores de pantalla usan este atributo para anunciar qué elemento está activo sin mover el foco real del campo de entrada. Cuando no haya ningún elemento seleccionado, quite el atributo o establézcalo en una cadena vacía.

El elemento contenedor de la lista desplegable debe tener role="listbox" y un id único que coincida con el aria-controls del campo de entrada. Este rol indica en el árbol de accesibilidad que el elemento es una lista de opciones seleccionables. El listbox recibe el foco indirectamente mediante aria-activedescendant en el campo de entrada.

Cada elemento de sugerencia debe tener role="option" y un id único, como option-0, option-1, etc. Añada aria-selected={index === selectedIndex} para indicar qué elemento está resaltado actualmente. Los lectores de pantalla anuncian tanto el contenido de la opción como si está seleccionada cuando el usuario navega con las teclas de flecha.

Cuando el usuario presiona ArrowDown y aria-activedescendant se actualiza a option-1, VoiceOver anuncia algo como "hooks de React, 2 de 5". El lector de pantalla lee automáticamente el texto de la opción y su posición en la lista a partir del marcado ARIA. No se necesitan regiones activas adicionales para la navegación con el teclado.

Realice pruebas con VoiceOver en macOS (Cmd+F5 para activarlo o desactivarlo) y con NVDA en Windows (descarga gratuita). Vaya al campo de entrada y empiece a escribir. Compruebe que el lector de pantalla anuncie el rol de combobox, la cantidad de resultados encontrados y cada opción mientras se desplaza por ellas con las teclas de flecha. Compare el comportamiento con los ejemplos de WAI-ARIA Authoring Practices Guide.

Cuando las sugerencias se carguen de forma asíncrona, añada un div oculto visualmente con aria-live="polite" y aria-atomic="true". Actualice su contenido de texto cuando termine la carga: "5 resultados encontrados" o "No se encontraron resultados". El lector de pantalla anuncia este mensaje después de terminar el mensaje actual, de modo que mantiene informados a los usuarios sin interrumpirlos.

La WAI-ARIA Authoring Practices Guide (APG), disponible en w3.org/WAI/ARIA/apg, contiene una página específica sobre el patrón de combobox, con ejemplos de código funcionales y especificaciones detalladas sobre la interacción con el teclado. Consulte siempre la APG al implementar widgets interactivos como autocompletados, diálogos o pestañas para garantizar el cumplimiento de todos los requisitos de accesibilidad.

Proporcione un aria-label en el campo de entrada si no existe un elemento de etiqueta visible: aria-label="Search suggestions". No dependa únicamente de placeholder para las etiquetas: los marcadores de posición desaparecen cuando el usuario escribe y no todos los lectores de pantalla los anuncian de forma uniforme. Un elemento label visible con htmlFor siempre es la mejor opción.

¿Cuál es el propósito del atributo aria-activedescendant en un campo de entrada de autocompletado?

Use role="combobox" en el contenedor, aria-autocomplete="list" en el campo de entrada, además de aria-expanded, aria-controls y aria-activedescendant, para vincular el campo de entrada con la lista de sugerencias. Cada opción necesita role="option", un id único y aria-selected. Añada una región aria-live para anunciar la cantidad de resultados asíncronos.