Navegación por teclado en widgets compuestos: tabindex itinerante, teclas de flecha y Escape

Qué es

La guía de interfaz de teclado de la APG describe la convención compartida por las plataformas de escritorio: Tab y Shift+Tab mueven el foco de un componente de interfaz al siguiente, mientras que otras teclas, principalmente las de flecha, mueven el foco dentro de un componente que contiene varios elementos enfocables. Un grupo de radio es el ejemplo nativo: un botón de radio está en la secuencia de Tab, las flechas se mueven entre opciones, Tab sale del grupo. Los widgets compuestos personalizados (listas de pestañas, barras de herramientas, menús, cuadrículas, árboles, listas de selección) deberían comportarse igual, de modo que una barra de herramientas de veinte elementos cueste una pulsación de Tab, no veinte.

La guía nombra dos estrategias de implementación. Con un tabindex itinerante, exactamente un elemento tiene tabindex="0" y todos los demás tabindex="-1"; los manejadores de teclas de flecha mueven el foco del DOM al siguiente elemento e intercambian los valores, de modo que volver al componente más tarde aterriza en el último elemento usado. Con aria-activedescendant, el foco del DOM permanece en el contenedor y el atributo señala el elemento que está «virtualmente» enfocado, lo cual conviene a los combobox, donde el foco debe permanecer en el campo de texto.

Por qué importa

Los usuarios que no pueden usar un dispositivo señalador dependen de estas convenciones para predecir qué hará una tecla. WCAG 2.1.2 (Sin trampa de teclado, nivel A) exige que el foco movido a un componente con el teclado pueda moverse fuera de nuevo con el teclado únicamente, y que cualquier salida que necesite más que las teclas de flecha o Tab sin modificar u otros métodos estándar se le explique al usuario.

Cómo aplicarlo

• Dar a cada widget compuesto una sola parada de Tab y moverse dentro de él con las teclas de flecha; los patrones individuales de la APG añaden Inicio y Fin y, para listas de selección, menús y árboles, navegación por primer carácter. Seguir el patrón del widget: una lista de pestañas horizontal usa Izquierda/Derecha, un menú vertical Arriba/Abajo, una cuadrícula las cuatro.
• Escape cierra las superficies transitorias: el patrón de diálogo de la APG lista Escape como la tecla que cierra el diálogo, y los patrones de botón de menú y combobox lo usan para cerrar sus popups. Cerrar también cuando el foco abandona la superficie.
• Enter y Espacio activan; la guía aconseja no vincular teclas modificadoras con Tab, Enter, Espacio o Escape, que pertenecen a la plataforma.
• Mantener el indicador visual de foco moviéndose junto con el índice itinerante; un foco virtual mediante aria-activedescendant necesita su propio resaltado.
• Decidir si la selección sigue al foco (las teclas de flecha seleccionan de inmediato, como en los grupos de radio nativos) o es independiente (Espacio selecciona); la guía trata cuándo conviene cada una.

Trampas

Poner tabindex="0" en cada elemento hace que Tab recorra todo el widget. Eliminar del DOM el elemento con tabindex="0" (una pestaña borrada) no deja ninguna parada de Tab en absoluto. Los manejadores que llaman a preventDefault() en cada tecla se tragan los atajos del navegador. Los editores incrustados que capturan Tab deben ofrecer la salida documentada.