Mejora de la usabilidad, la accesibilidad y el cumplimiento de ARIA con la navegación por teclado de cuadrícula

(Last updated: April 13, 2023)

A medida que evolucionan las expectativas de los usuarios, las aplicaciones web modernas se han vuelto cada vez más complejas. Definen patrones de interfaz de usuario como el desplazamiento virtualizado del contenido, tablas de datos complejas con celdas editables y diferentes componentes de superposición, solo por nombrar algunos.

Eso no es un problema para los usuarios que aprovechan un mouse o un panel táctil, ya que pueden navegar fácilmente a través de los elementos de la página e interactuar con ellos. Pero para aquellos que usan un teclado, esto puede afectar drásticamente su experiencia de usuario. El número de controles y elementos en la mayoría de las páginas web ha aumentado significativamente, lo que significa que una página web moderna puede contener cientos de tabulaciones.

La pregunta entonces es, ¿cómo mejorar la experiencia de usuario y la accesibilidad web al mismo tiempo para su aplicación Angular?

¿Qué es la accesibilidad del sitio web?

Internet es para todos y la accesibilidad del sitio web es clave. Básicamente, la accesibilidad web (o eAccessibility) es una práctica que, si está bien establecida, hará que cualquier sitio web sea utilizable para todo tipo de visitantes y en cualquier tipo de dispositivo, independientemente de cosas como:

• Conocimientos técnicos del usuario o experiencia previa con la World Wide Web.
• Personas que usan tecnologías de asistencia.
• Velocidad y ancho de banda.
• Uso/No uso del ratón.

Este es un objetivo extremadamente importante a lograr por cualquier aplicación web/sitio web porque cuando se diseñan y desarrollan de la mejor manera posible, más usuarios tienen el mismo acceso a su contenido y funcionalidades.

¿Por qué es importante la accesibilidad del sitio web?

En Infragistics, queremos garantizar una experiencia de usuario óptima, independientemente de si está utilizando un mouse, un panel táctil o simplemente un teclado. Es por eso que hemos creado un nuevo patrón de interfaz de usuario para la navegación con el teclado dentro de una página, llamado Navegación de elementos activos dentro de nuestra cuadrícula Ignite UI for Angular. Este patrón reduce el número de tabulaciones dentro de la interfaz diseñada para igxGrid a solo cinco, y expone un montón de nuevos atajos de teclado para mayor eficiencia.

Cada elemento de tabulación tiene un único punto de entrada y, desde allí, los usuarios pueden navegar fácilmente a diferentes elementos en el contenedor de elementos de Angular Grid correspondiente simplemente usando las teclas de flecha. De este modo, se simplifica la navegación y se mejora la usabilidad del sitio web.

Uno de los mayores diferenciadores de nuestra caja de herramientas Ignite UI es que, a diferencia de otras rejillas del mercado, ponemos a los usuarios finales y su experiencia al frente de todo. Es por eso que garantizamos la paridad de componentes y características en todas las tecnologías principales. Lo que significa que lo que sea que hagas en Angular Grid, se puede hacer y también se puede pasar fácilmente a Ignite UI for Blazor o Web Components. No habrá ninguna diferencia. Entonces, si te preocupas por tus usuarios, Ignite UI es la solución.

¿Qué es el soporte de ARIA?

En resumen, ARIA significaAplicación de Internet Rica Accesibley es un conjunto deatributosque se agregan a suselementos HTML,lo que hace que las aplicaciones web y el contenido webestén disponiblesparatodos losusuarios. Por lo tanto, el soporte de ARIA es la capacidad de las tecnologías, los navegadores, los lectores de pantalla y los kits de herramientas paraadmitir al menos algunas delaspropiedades de ARIA.

Secuencia de tabulaciones de página y aria

Como se describe en la sección Convenciones fundamentales de navegación por teclado de las Prácticas de creación de WAI-ARIA 1.1 del W3C, la secuencia de tabulación debe incluir solo un elemento enfocable de un componente de interfaz de usuario compuesto. Tenemos cinco de estos​componentesde C omposite UIC, por lo tanto, cinco tabulaciones:

• Barra de herramientas/Agrupar por área, si existe.
• Contenedor de fila de encabezado: la primera celda de la fila de encabezado se activará.
• Tbody: la primera igxCell (0,0) del contenedor del cuerpo se activará.
• Pie de página: la primera celda del resumen de columna se activará (si los resúmenes están habilitados).
• Interfaz de usuario del localizador: se activará el menú desplegable Elementos por página.

Al presionar la tecla Tab, el foco se moverá fuera del contenedor actual al siguiente elemento en la secuencia de pestañas. Esto se ilustra con la imagen a continuación con la secuencia de pestañas "Barra de herramientas de cuadrícula" -> "Encabezados de cuadrícula" -> "Contenedor de cuerpo de cuadrícula" -> "Resúmenes" -> "Pie de página - Paginador de cuadrícula".

Cada uno de los cinco contenedores de tabulaciones se puede considerar como una entidad de agrupación independiente, lo que reduce el número de tabulaciones de la página. The Grid tiene una rica estructura DOM junto con muchos contenedores virtualizados, lo que permite un mayor rendimiento. Por lo tanto, tenemos más de un elemento Grid enfocable en la secuencia de pestañas de la página. Esto nos permite tener una navegación separada y enriquecida en todos los contenedores de tabulación.

Nota: Tenga en cuenta que las acciones predeterminadas que se pueden enfocar en el navegador se conservan. No estamos impidiendo el enfoque del elemento HTML que forma parte de ng-templates u otros elementos agregados por separado en la cuadrícula. El navegador se encargará de sus acciones de enfoque de forma predeterminada. No es necesario aplicar directivas enfocables  adicionales.

Active Element Navigation

Refiriéndose a las Convenciones Fundamentales de Navegación por Teclado del W3c, todos los componentes interactivos de la interfaz de usuario deben ser accesibles a través de un teclado. La mejor manera de conseguirlo es incluyéndolos en la secuencia de tabulaciones o haciéndolos accesibles desde un componente que se encuentra en la secuencia de tabulaciones. En el caso de la navegación de la cuadrícula, es posible moverse a través de cada uno de estos contenedores enfocables con las teclas de navegación (teclas de flecha, inicio/fin, ctrl + tecla de acción'). Aquí es donde entra en juego el concepto de navegación de elementos activos​

Aquí, el elemento activo es el primer elemento visible del contenedor enfocado. PERO este elemento no se enfoca. La atención se centra en el contenedor real. El elemento activo le permite navegar por la mayoría de los elementos de la cuadrícula y activar características basadas en el componente compuesto enfocado.

¿En qué se diferencian los elementos enfocados de los elementos seleccionados y activos?

Consideramos el elemento enfocado como un puntero: rastrea la ruta de navegación (secuencia de pestañas de página). Como ya sabemos, tenemos cinco de estos elementos compuestos. El elemento Active se usa para navegar a través de estos contenedores enfocables. Como puede ver en la imagen a continuación, el borde naranja grueso con el fondo de celda gris indica el elemento activo actual para los usuarios visuales.

Los elementos seleccionados son elementos que tienen aria-selected="true". En el caso de igxGrid, aria-selected es aplicable a los tres tipos de elementos de selección: selección de celda, fila y columna (WAI-ARIA).​

Puntos clave de las secciones anteriores:

• Elemento enfocado: seguimiento de la ruta de la secuencia de pestañas de la página: barra de herramientas, encabezado, cuerpo, pie de página y paginador de la cuadrícula.
• Elemento activo: navega dentro de los cinco contenedores enfocables con las teclas de flecha (y teclas especiales como inicio/fin).
• Elemento seleccionado: con aria-selected="true" junto con los estilos de selección de cuadrícula aplicados (selección de celda, fila o columna).

Seguimos las directrices de la Guía de prácticas de creación de WAI-ARIA para obtener recomendaciones específicas sobre el mapeo de claves y comportamientos. Por lo tanto, las funciones que proporciona ARIA Grid también son reconocibles en la cuadrícula Ignite UI for Angular: cuadrícula, fila, celda de cuadrícula, encabezado de fila y encabezado de columna.

Tab Navigation

La cuadrícula sigue la convención de navegación del teclado principal de que las teclas Tab y Mayús + Tab muevan el foco de un componente de la interfaz de usuario a otro. Las teclas de flecha cambian el estado activo dentro de los componentes que incluyen varios elementos.

En comparación con el comportamiento de interacción de pestañas anterior, hemos cambiado lo siguiente:

• No puede usar la tecla de tabulación para navegar entre las celdas de IgxGrid. La navegación ahora se realiza solo con las teclas de flecha.
• Con la tecla de tabulación, solo puede navegar a la siguiente celda editable (solo cuando la celda está en modo de edición). Cuando se alcanza la última celda editable (de la fila), la navegación continuará hasta la celda editable de la siguiente fila. Si se alcanza la última celda editable, la navegación por tabulaciones continuará hasta el siguiente elemento de tabulación enfocable.

Las mejoras de rendimiento y de código que hicimos

Como resultado del nuevo concepto de navegación por teclado, hemos podido optimizar nuestro código e implementar mejoras de rendimiento en el Ignite UI for Angular Grid. Entre ellos se encuentran:

• Se han eliminado los controladores de enfoque de celda y desenfoque.
• También se han eliminado los controladores de separación de ruedas y vistas.
• Servicios de navegación reducidos. Anteriormente teníamos cuatro servicios de navegación para la funcionalidad Grid, HierarchicalGrid, TreeGrid y MRL. Ahora solo tenemos tres. Con la implementación anterior, al desplazarse con contenido virtualizado, cambiábamos el contexto de la celda (el shell real seguía siendo el mismo). Pero había un problema con el navegador que no nos permitía centrarnos en un elemento ya enfocado. Tuvimos que difuminar el enfoque de la celda, cambiar el contexto de la celda y enfocarlo de nuevo. Ahora eso ya no es un problema.
• Mejoras en los dispositivos táctiles. Ahora, si tenemos una celda enfocada en el desplazamiento, desenfocamos la celda antes de separar el manejador de la rueda.
• Aumento del rendimiento a nivel de aplicación con el 'apilamiento de eventos'. Use 'ngZoneEventColescing: true.

Const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule, { ngZoneEnetCoalescing: true }); 

Keyboard Navigation Features Integration

Centrémonos en la integración de las funciones de navegación del teclado. Nuestra cuadrícula de Angular tiene muchas funciones y las hemos considerado todas cuidadosamente para asegurarnos de que funcionen correctamente con los nuevos cambios.

• Header navigation
  • Ahora tenemos un encabezado de columna suave y una navegación de grupo de columnas. Echa un vistazo a esta lista de interacciones de encabezado, que explica cómo activar una determinada función con una combinación de teclas. Demostración en vivo.
• Filtro de estilo Excel y fila de filtrado predeterminada
  • Ctrl + Mayús + L abrirá el filtro de estilo Excel/filtro predeterminado (fila).
• Filtrado avanzado
  • Alt + L opens the advanced filter dialog.
• Sorting
  • Ctrl + Flecha arriba ordena el encabezado de columna activo en orden ASC. Si la columna ya está ordenada en ASC, eliminará la ordenación (tres estados ninguno).
  • Ctrl + Flecha hacia abajo ordena el encabezado de columna activo en orden DSC. Si la columna ya está ordenada en DSC, eliminará la ordenación (tres estados, ninguno).
• Agrupar por
  • Salto + Alt + Flecha a la derecha para agrupar por la columna activa.
  • Mayús + Alt + Flecha izquierda desagrupa la columna activa (elimínela del grupo por criterios).
• Multi-column headers 
  • Alt + left/up arrow key – collapse.
  • Alt + right/down arrow key – expand.
• Column Selection
  • Space key press – select a column.

Nota: Si está utilizando un lector de pantalla, tenga en cuenta que en un clic inicial en el encabezado, enfocamos todo el contenedor del encabezado y el lector de pantalla leerá todos los subtítulos del encabezado. Después de hacer clic en el encabezado, se leerá el título del encabezado + el estado de selección. Ejemplo: nombre de la empresa, encabezado de columna seleccionado.

• Edición de celdas: ahora la navegación por pestañas solo funciona para celdas editables (en modo de edición). En la edición de celdas con navegación por pestañas, si llegamos al final de la cuadrícula, se enviará la última celda. A continuación, la navegación continuará hasta el siguiente elemento de tabulación disponible.
• Filtrado (filtrado de fichas): se ha eliminado la navegación por pestañas para las fichas, por lo que la navegación solo es posible mediante las teclas de flecha. Además:
  • Las fichas son ahora parte del encabezado de la columna.
  • Los chips ya no son elementos enfocables.

• Paginación: accesibilidad más rica al sitio web. Se agregaron descripciones emergentes, etiquetas aria y roles.
• Default Key combination updates:
  • Ctrl + cualquier otra tecla solo funciona en celdas reales, no en un área de fila agrupada. Esto es diferente en comparación con el comportamiento anterior. GroupBy y Master-Detail no funcionan con las teclas de flecha Ctrl+.
  • Ctrl + Flecha derecha/izquierda solo funciona en las celdas comunes, la fila de resumen y los encabezados.
  • Home and End (y Ctrl Home/End) funciona según lo esperado; Aquí no hay cambios.
  • Ahora proporcionamos un estilo visual más completo para las tabulaciones/elemento de encabezado/celdas del cuerpo/resúmenes/paginación/agrupar por/detalle-maestro/MRL/edición de celdas.

Para concluir...

Entendemos la necesidad de innovación continua y que las excelentes funciones son el resultado de una verdadera colaboración.Gracias a los esfuerzos combinados de nuestros desarrolladores, hemoslogrado reducir significativamente la complejidad de la navegación del teclado al usar Ignite UI for Angular Grid (pero también en todas las demás cuadrículas en las principales tecnologías, teniendo encuenta la paridad de características ycomponentes). La interacción general del teclado ahora ha mejorado, es intuitiva de usar, ofrece una mejorusabilidad delsitio web y garantiza el sitio webaccesibilidad.