Skip to main content
ƚnase a nosotros en TDX, San Francisco o en Salesforce+ del 5 al 6 de marzo en la conferencia de desarrolladores para la era del agente de la IA. Regƭstrese ahora.

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:

  1. 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.
  2. 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. 

La navegaciĆ³n de Reportes con Reciente resaltado y un botĆ³n etiquetado Mostrar mĆ”s.

Cuando un usuario hace clic en Mostrar mƔs, tiene algunas opciones para alertarlo acerca del nuevo contenido que se introdujo.

  1. 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ā€.
  2. 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.
  3. 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 navegaciĆ³n de Reportes con Reciente resaltado u un botĆ³n etiquetado Mostrar menos con varias opciones indicadas debajo.

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. 

BotĆ³n Modificar con enfoque.

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantarƭa saber mƔs sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

MĆ”s informaciĆ³n Continuar a Compartir comentarios