5.3: Cajas de sugerencias
- Page ID
- 152624
Un cuadro de sugerencias (también conocido como cuadro combinado o cuadro de autocompletar) es un tipo de menú de selección que ayuda a los usuarios a ingresar una elección correcta. Por lo general, se componen de un campo de entrada de texto y una lista de opciones basada en un número de caracteres ingresados en el campo de texto. En el ejemplo que aquí se proporciona, al ingresar algunos caracteres, aparece una lista de países que contienen esos caracteres.
Debido a que el campo de entrada de texto es un campo de entrada de texto de formulario estándar, será accesible por defecto. No se requiere codificación adicional para que sea accesible. Lo que más necesita atención es la lista de opciones, que necesita anunciarse cuando aparece y necesita ser navegable por teclado.
Funciones, estados y propiedades de WAI-ARIA utilizados en un cuadro de sugerencias
- role='región'
- aria-live='polite'
- aria-describedby=' [id de instrucciones div] '
El siguiente JSFiddle presenta un típico buzón de sugerencias. Revise el marcado JavaScript y HTML, y pruebe el cuadro de sugerencias que se presenta en la pestaña Resultado con ChromeVox para comprender cómo funciona sin agregar ninguna característica de accesibilidad. Puedes trabajar en el propio JSFiddle haciendo clic en “Editar en JSFiddle”, copiando el código de Accesibilidad/Wai-Aria que se describe a continuación para corregir la accesibilidad del buzón de sugerencias, antes de completar la Actividad 5, en la página que sigue.
Defina algunas instrucciones para que quede claro habrá sugerencias que aparecerán cuando se ingrese texto en el campo de entrada de texto.
Cuando el cuadro de sugerencias reciba foco, genere las instrucciones para ello agregando la función notify () a la función onFocus () para producir una región en vivo con el texto de instrucción. Este texto de instrucción se lee automáticamente cuando un lector de pantalla encuentra el campo de texto del cuadro de sugerencias.
Dentro de la función init (), cree un <div>para usar como región en vivo, agregando aria-live="polite” para anunciar las instrucciones de uso de la lista definidas anteriormente cuando el campo de texto recibe foco. Además, dale un role="region” para que se pueda encontrar en la lista de hitos.
Proporcione instrucciones adicionales cuando se complete el cuadro de sugerencias, agregando a la función getSugeritions ().
Adición de operabilidad del teclado
Las mejores prácticas de WAI-ARIA definen todas las funciones recomendadas del teclado del cuadro de sugerencias, que se enumeran En nuestro ejemplo, solo se incluyen los eventos de teclado requeridos.
Interacción con el teclado del cuadro
Cuando el foco está en el cuadro de texto:
- Flecha abajo: Si la ventana emergente está disponible, mueve el foco hacia la ventana emergente:
- Si el comportamiento de autocompletar seleccionó automáticamente una sugerencia antes de presionar la flecha hacia abajo, se enfocará en la sugerencia después de la sugerencia seleccionada automáticamente.
- De lo contrario, los lugares se enfocan en el primer elemento enfocable en la ventana emergente.
- Flecha arriba (opcional): Si la ventana emergente está disponible, coloca el foco en el último elemento enfocable en la ventana emergente.
- Esc: Descarta el popup si es visible. Opcionalmente, borra el cuadro de texto.
- Entrar: Si se selecciona automáticamente una sugerencia de autocompletar, acepta la sugerencia ya sea colocando el cursor de entrada al final del valor aceptado en el cuadro de texto o realizando una acción predeterminada sobre el valor. Por ejemplo, en una aplicación de mensajería, la acción predeterminada puede ser agregar el valor aceptado a una lista de destinatarios de mensajes y luego borrar el cuadro de texto para que el usuario pueda agregar otro destinatario.
- Caracteres imprimibles: Escriba caracteres en el cuadro de texto. Tenga en cuenta que algunas implementaciones pueden considerar ciertos caracteres como inválidos y evitar su entrada.
- Teclas estándar de edición de texto de una sola línea apropiadas para la plataforma del dispositivo (ver nota a continuación).
- Alt+Flecha abajo (Opcional): Si la ventana emergente está disponible pero no se muestra, muestra la ventana emergente sin mover el foco.
- Alt+Flecha arriba (Opcional): Si se muestra la ventana emergente:
- Si la ventana emergente contiene foco, devuelve el foco al cuadro de texto.
- Cierra la ventana emergente.
Nota: Teclas estándar de edición de texto de una sola línea apropiadas para la plataforma del dispositivo:
- incluye teclas para entrada, movimiento del cursor, selección y manipulación de texto.
- Las asignaciones de teclas estándar para las funciones de edición dependen del sistema operativo del dispositivo.
- El enfoque más robusto para proporcionar funciones de edición de texto es confiar en navegadores, que los suministran para entradas HTML con texto tipo y para elementos con el atributo HTML
contenteditable. - IMPORTANTE: Asegúrese de que JavaScript no interfiera con las funciones de edición de texto proporcionadas por el navegador al capturar eventos clave para las claves utilizadas para realizarlos.
Fuente: W3C WAI-ARIA 1.1 Mejores Prácticas
El esfuerzo más significativo para hacer accesible el buzón de sugerencias es agregar operabilidad del teclado. En nuestro caso, agregaremos la operabilidad de Flecha Arriba y Abajo al cuadro de lista. Cree un interruptor que capture el evento de pulsación de teclas. Si es una Flecha Abajo, selecciona el siguiente elemento abajo en la lista. Si es una Flecha Arriba, selecciona el elemento anterior. Si es alguna clave de carácter, ingrese el valor en el campo de texto. Agregue esto a la función onKeyUp (), mientras integra la funcionalidad existente en la función en el valor predeterminado para la sentencia switch.
Buzón de sugerencias accesible en acción
Mira el siguiente video para ver cómo ChromeVox interactúa con un buzón de sugerencias. Cuando el buzón de sugerencias recibe foco, se leen las instrucciones. Cuando se escribe la segunda letra en el campo de texto, a continuación aparece una lista de sugerencias. Se proporcionan instrucciones adicionales sobre cómo hacer una selección de la lista. Las teclas de flecha se utilizan para navegar por las sugerencias, y la tecla Enter se utiliza para seleccionar una de ellas. Apunta a que el buzón de sugerencias que actualices en la Actividad 5 de la siguiente página opere y anuncie como el del video.
Video: Caja de Sugerir Accesible
Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/wafd/?p=330