Comprender la navegaciĆ³n accesible
Objetivos de aprendizaje
DespuƩs de completar esta unidad, podrƔ:
- Enumerar estrategias para proporcionar a los usuarios informaciĆ³n de navegaciĆ³n y acciĆ³n.
- Explicar a importancia de la gestiĆ³n del enfoque en el desarrollo de aplicaciones web.
IntroducciĆ³n
Los usuarios deben siempre saber dĆ³nde estĆ”n en una aplicaciĆ³n y quĆ© acciones pueden llevar a cabo despuĆ©s. Proporcione a los usuarios informaciĆ³n de navegaciĆ³n y acciĆ³n:
- Utilizando elementos de navegaciĆ³n coherentes.
- Aplicando anidado y orden de encabezado apropiados.
- Etiquetando regiones de punto de referencia.
- Utilizando un orden de ficha lĆ³gica que coincide con el orden de lectura (en idiomas de izquierda a derecha, izquierda a derecha, de arriba a abajo; en idiomas de derecha a izquierda, derecha a izquierda).
- Utilizando indicadores de enfoque visibles para todos los elementos interactivos.
Cambios de contexto
Cuando se trata de cambios de contexto, considere las siguientes reglas generales:
- Los usuarios deben esperar un cambio en el contexto, ya sea porque lo solicitaron, o de lo contrario se les explicĆ³ que se aproxima un cambio.
- Cuando sucede el cambio, los usuarios deben saber dĆ³nde estĆ”n en una pĆ”gina.
Considere el botĆ³n Mostrar mĆ”s en la imagen de una navegaciĆ³n de Reporte o Carpetas a continuaciĆ³n.
Cuando un usuario hace clic en Mostrar mƔs, tiene algunas opciones para alertarlo acerca del nuevo contenido que se introdujo.
- Puede enfocar el primer elemento del nuevo contenido. ĀæEs esta la mejor opciĆ³n? Posiblemente, pero los botones leen, āMostrar mĆ”sā,no āLlevarme a mĆ”sā.
- Puede utilizar una regiĆ³n
aria-live
para anunciar a lectores de pantalla que se agregaron mĆ”s elementos de navegaciĆ³n a la pĆ”gina. - Puede cambiar el texto del botĆ³n para leer, āMostrar menosā. Esta es la mejor opciĆ³n porque el Ć©xito del usuario estĆ” implicado en el nuevo texto del botĆ³n: āPuedo mostrar menos,pero ahora se estĆ” mostrando mĆ”s.ā
La pregunta para el usuario de un lector de pantalla ahora es, āĀæDĆ³nde estĆ” el āmĆ”sā que se introdujo?ā Colocando el nuevo contenido delante del usuario, encontrar la respuesta a esta pregunta es simple.
En algunos casos de uso, mover el enfoque de un usuario o utilizar una regiĆ³n aria-live
es apropiado. Conocer quĆ© tĆ©cnica utilizar en una situaciĆ³n concreta se reduce a comprender las expectativas del usuario.
Por ejemplo, imagine un botĆ³n Modificar que inicia un modal.
Una vez iniciado, el botĆ³n Modificar se ocultarĆ” por el modal, de modo que no tiene sentido mantener el enfoque en el botĆ³n. En este ejemplo, movemos el enfoque al modal en si. Como regla general, nunca debe mover el enfoque de un usuario a menos que el usuario haya actuado de forma explĆcita. En este caso, cuando el usuario hace clic en Modificar, el enfoque debe moverse naturalmente al contexto de modificaciĆ³n.
Es tambiĆ©n importante mover el enfoque de forma lĆ³gica cuando el usuario realiza una acciĆ³n en algo y ese algo desaparece. Continuando con este ejemplo, ĀædĆ³nde debe ir el enfoque del usuario cuando el modal estĆ” cerrado? El enfoque debe ir a algo, y no solo la parte superior de la pĆ”gina. Una opciĆ³n lĆ³gica,en este caso, es volver al botĆ³n Modificar que iniciĆ³ el modal inicialmente.
PodrĆ” obtener mĆ”s informaciĆ³n acerca de los cambios de contexto, incluidas las regiones aria-live, en la secciĆ³n Recursos que aparece a continuaciĆ³n.
GestiĆ³n de enfoque
La gestiĆ³n apropiada del enfoque es uno de los factores clave del desarrollo de aplicaciones web accesibles. En general, los usuarios pueden mover el enfoque a travĆ©s de una pĆ”gina pulsando TabulaciĆ³n para avanzar y bajar en la pĆ”gina, y MayĆŗs+TabulaciĆ³n para retroceder y hacer una copia de seguridad de la pĆ”gina. Esto se aplica a elementos HTML que reciben el enfoque de forma nativa, como delimitadores, botones y controles de formulario.
Los componentes complejos, como cuadrĆculas interactivas, menĆŗs,cuadros combinados y conjuntos de fichas se navegan con las teclas de flecha. La programaciĆ³n de estas interacciones avanzadas es parte del compromiso que toma con usuarios cuando utiliza atributos de funciĆ³n de ARIA.
Platiquemos acerca de cĆ³mo gestionar el enfoque cuando cambia el contexto de un usuario. ĀæQuĆ© debe sucede en el enfoque de un usuario cuando:
- Navega a una nueva pƔgina?
- Abre o cierra un diƔlogo de modal?
- Elimina un registro?
- Realizar una operaciĆ³n de arrastrar y soltar?
Las respuestas a estas preguntas y mucho mƔs estƔn en las Directrices de enfoque global de SLDS.
MƔs allƔ de estas directrices, considere lo siguiente:
- Los usuarios con cierta discapacidad, incluyendo usuarios invidentes, navegan normalmente hacia delante y hacia abajo en la pĆ”gina cuando interactĆŗan con una aplicaciĆ³n. Si su diseƱo introduce nuevo contenido en la pĆ”gina, asegĆŗrese de que se agrega el nuevo contenido frente al elemento que desencadenĆ³ el cambio. Por ejemplo, cuando el usuario hace clic en un botĆ³n que introduce un formulario en lĆnea en la pĆ”gina, el formulario debe estar despuĆ©s del botĆ³n en el orden de DOM. Los usuarios esperan encontrar el formulario conforme avanzan, hacia abajo en la pĆ”gina,no cuando retroceden.
- No robe el enfoque en la inicializaciĆ³n de componentes, a menos que sea parte de la especificaciĆ³n del componente. Se supone que un diĆ”logo de modal, por ejemplo, robe el enfoque cuando se inicialice.
- No cree una trampa de enfoque. Permita a los usuarios salir de sus componentes. A menos, de nuevo, que sea parte del comportamiento previsto del componente, como con un modal.
- Gestione la carga infinita con cuidado. No fuerce los usuarios solo de teclado a cargar y navegar por todas unas noticias en tiempo real, toda una lista o toda una tabla con el fin de llegar a contenido en el otro lado. Por ejemplo, nuestras noticias en tiempo real de Chatter tienen todas un vĆnculo āOmitir estas noticias en tiempo realā al inicio de las noticias en tiempo real.
A continuaciĆ³n, echaremos un vistazo a la redacciĆ³n de componentes accesibles.
Recursos
Ayuda de Salesforce: Directrices de enfoque global de Lightning Design System
TĆ©cnicas W3C para WCAG 2.0: ARIA19: Uso de ARIA role=alert o regiones Live para identificar errores