Compartir a través de

Organizar controles en aplicaciones de lienzo accesibles

  • Artículo

Los controles de una aplicación deben estar organizados para ayudar a los usuarios del lector de pantalla a recorrerlos secuencialmente. Un orden lógico también reduce la confusión para los usuarios del teclado y les ayuda a ser más productivos.

Nombre de pantalla significativo

Cuando se carga una pantalla, los lectores de pantalla dirán su nombre. Elija un nombre significativo para orientar a los usuarios.

Puede cambiar el nombre de la pantalla en el árbol de controles o el panel de propiedades en Power Apps Studio. Seleccione la pantalla y, a continuación seleccione Seleccionar el icono de lápiz para editar el nombre. para cambiar el nombre de la pantalla.

Los nombres de pantalla se pueden cambiar desde el árbol de controles o el panel de propiedades, como se resalta en la imagen.

El primer elemento de una pantalla es su nombre. Está oculto visualmente y solo pueden acceder a él los usuarios del lector de pantalla.

Cuando se carga una pantalla nueva, Power Apps enfoca el nombre de la pantalla. Si utiliza SetFocus inmediatamente al cargar la pantalla, no se leerá el nombre de la pantalla. Considere la posibilidad de crear un título visible y convertirlo en una región activa para anunciar el cambio de contexto.

Orden de controles lógico

Los usuarios del lector de pantalla pueden recorrer el contenido secuencialmente. El orden está determinado por la posición de los controles, comenzando de arriba a abajo, y de izquierda a derecha. El tamaño del control no importa, solo importan los valores de sus propiedades X e Y.

En este ejemplo, A aparece primero en la secuencia, ya que está más cerca de la parte superior. B y C tienen la misma posición vertical, pero como B está más cerca de la izquierda y, por tanto, aparece antes que C. En último lugar aparece D, ya que está más lejos de la parte superior.

Cómo afecta el posicionamiento al orden de 4 controles.

Nota

  • En el modo de Vista previa, al editar una aplicación el orden de los controles no se actualiza por razones de rendimiento. El orden será correcto cuando se publique y ejecute la aplicación.
  • El orden de controles no es el mismo que se muestra en la vista de árbol de controles en Power Apps Studio. La vista de árbol ordena los controles según el momento en que se agregaron a la aplicación. No afecta el orden de los controles cuando se ejecuta la aplicación.
  • Cuando el valor de un control X o Y se establece en una expresión, el orden de control no se actualiza cuando cambia el resultado de la expresión. El orden se calcula y se fija cuando se guarda la aplicación, utilizando el estado inicial de la aplicación para evaluar las expresiones.
    • Si está cambiando su posición porque otros controles están ocultos o mostrados, puede usar contenedores de diseño automático para administrar X e Y para usted.
    • También puede colocar todos los controles de forma lógica independientemente de los valores de expresión. Por ejemplo, si el control A siempre debe estar debajo del control B y B puede estar oculto a veces, establezca Y de A en If(B.Visible, B.Y + B.Height, B.Y + 1). La suma de 1 asegura que A esté siempre debajo de B, incluso si B está oculto.

Controles agrupados

El orden predeterminado es adecuado para contenido aislado, pero no para contenido agrupado. Considere dos iconos, lado a lado, dibujados con controles de Rectángulo. Cada icono tiene un título. Debajo del título hay dos botones apilados verticalmente: A y B para el primer icono, y C y D para el segundo.

Ejemplo de procedimiento incorrecto: controles organizados en una estructura plana.

El orden predeterminado va de arriba abajo y de izquierda a derecha. Por lo tanto, el orden de los controles es:

  1. Rectángulo izquierdo
  2. Rectángulo derecho
  3. Título izquierdo
  4. Título derecho
  5. A
  6. C
  7. B
  8. D

Esta estructura no refleja que A y B están juntos y, de manera similar, que C y D están juntos.

Use Contenedores para agrupar contenido relacionado. Todos los controles de un Contenedor aparecerán juntos en una secuencia. Dentro de un contenedor, los controles se ordenan con la misma regla: de arriba a abajo, y de izquierda a derecha.

Si se reemplazan los Rectángulos del ejemplo anterior con los Contenedores, el orden de los controles pasa a ser lógico para los usuarios del lector de pantalla:

  1. Contenedor izquierdo
  2. Título izquierdo
  3. A
  4. B
  5. Contenedor derecho
  6. Título derecho
  7. C
  8. D

Ejemplo de procedimiento recomendado: controles organizados en una estructura jerárquica mediante contenedores.

Todos los controles de una Tarjeta de formulario y una Galería se agrupan automáticamente, por lo que no es necesario utilizar un Contenedor. Sin embargo, si hubiera subgrupos, deberá usar Contenedores para ellos.

En este ejemplo, una fila de Galería tiene una miniatura y dos fragmentos de texto a la izquierda. A la derecha hay dos botones. Desde una perspectiva visual y lógica, hay que agrupar los dos conjuntos de controles. Esto garantiza que los usuarios del lector de pantalla encontrarán el grupo de la izquierda antes que el de la derecha.

Ejemplo de procedimiento recomendado: los controles relacionados en una galería se agrupan dentro de Contenedores.

Orden lógico de navegación del teclado

TabIndex especifica cómo los usuarios de teclado pueden acceder a los controles. TabIndex debe ser 0 o -1. Con un orden lógico de los controles como el descrito arriba, hay pocas razones para asignar a TabIndex un valor mayor que 0.

El orden de navegación del teclado debe seguir el flujo visual de los controles. Si el orden de navegación es inesperado, debe comprobar primero si la estructura de la aplicación es lógica.

Nota

El orden de navegación del teclado no es el mismo que el orden de los controles. TabIndex solo afecta a la navegación con la tecla Tabulador. No cambia la forma en que los usuarios del lector de pantalla recorren linealmente una aplicación. Algunos usuarios del lector de pantalla ni siquiera usan teclado.

Evite los índices de pestañas personalizados

Los índices de pestañas personalizados son aquellos que son mayores que cero. Casi siempre son un signo de mal diseño. Hay mejores alternativas, como crear una estructura de aplicación adecuada o usar SetFocus para cambiar de enfoque.

Evite el uso de índices de pestañas personalizados por las siguientes razones.

Accesibilidad

Es un problema grave de accesibilidad tener índices de pestañas personalizados. Pantalla Lector Los usuarios navegan por una aplicación usando su estructura lógica. Los índices de pestañas personalizados ignoran esa estructura. Desde la pantalla Lector los usuarios también pueden navegar usando la tecla Tab, se confundirán cuando obtengan un orden diferente de otros métodos de navegación.

Facilidad de uso

Los usuarios pueden confundirse cuando parece que se omiten algunos elementos. Pueden desorientarse cuando el foco se mueve en un orden impredecible. Esto es aún más problemático para los usuarios con discapacidades cognitivas.

Mantenimiento

Los creadores de aplicaciones tienen que actualizar manualmente el TabIndex de múltiples controles cada vez que se inserta uno nuevo. Es fácil perderse una actualización o hacer un pedido incorrecto.

Rendimiento

Para admitir índices de pestañas personalizados, el sistema Power Apps tiene que examinar todos los controles en la página y calcular el orden apropiado. Este cálculo es un proceso intensivo. Controles de contenedores como Galería tienen reglas complicadas sobre cómo TabIndex funciona para controles de niños. El sistema mapea el TabIndex deseado del creador de la aplicación a un valor diferente para obedecer estas reglas. Por eso, incluso si TabIndex se establece en cero para todos los controles, el tabindex HTML real será un número positivo.

Integración con otros componentes

Los índices de pestañas personalizados solo funcionan con controles integrados. Controles que no están integrados en el sistema de índice de pestañas de Power Apps tendrá un orden de navegación inesperado. Esto puede ser un problema para componentes del código. Los desarrolladores de estos componentes deben realizar un seguimiento de los elementos interactivos y establecer un índice de pestañas en ellos. Es posible que utilicen bibliotecas de terceros, que es posible que ni siquiera proporcionen una forma de personalizar los índices de las pestañas. Por otro lado, cuando todos los índices de pestañas son 0 o -1, no hay necesidad de involucrar el sistema de índice de pestañas de Power Apps. Cualquier componente de terceros incrustado en la aplicación obtendrá automáticamente la secuencia de pestañas correcta.

En la otra dirección, cuando las aplicaciones de lienzo están incrustadas en otra página web, los índices de pestañas personalizados no funcionan. Por ejemplo, en las páginas personalizadas. Power Apps no puede controlar los elementos fuera de la aplicación de lienzo, por lo que el orden general de navegación de pestañas será ilógico.

Índice de tabulación simplificado (vista previa)

Para asegurarse de que los índices de las pestañas sean 0 o -1, habilite la función de la aplicación Índice de pestañas simplificado de Ajustes > Próximas funciones.

Habilitación de la función de aplicación de índice de pestañas simplificado.

Importante

  • Esta es una característica en versión preliminar.
  • Las vistas previas de características no se han diseñado para un uso de producción y pueden tener una funcionalidad restringida. Estas características están disponibles antes del lanzamiento oficial para que los clientes puedan tener un acceso anticipado y proporcionar comentarios.

Cuando esta característica está habilitada, todos los valores de TabIndex mayores que cero serán tratados como cero. Esto también deshabilita el sistema de índice de pestañas de Power Apps para que pueda integrarse mejor con otros componentes, como se describe anteriormente.

Solución alternativa para la secuencia de pestañas personalizada

Para situaciones excepcionales en las que el orden de navegación del teclado debería ser diferente del orden visual, puede colocar los controles de contenedor cuidadosamente para tener el mismo efecto.

En el siguiente ejemplo, el botón A está encima del botón B. El orden natural de navegación por pestañas es A, luego B.

Dos botones con el mismo TabIndex, apilados verticalmente.

Para invertir el orden de navegación de pestañas, coloque B en un control Contenedor. Establezca el valor Y del Contenedor para que esté por encima de A. La estructura de la aplicación ahora tiene el Contenedor (y B) antes de A. Por lo tanto, el orden de navegación de pestañas es B, luego A.

B se pone en un recipiente que aparece antes que A.

Con esta técnica, los usuarios de la pantalla Lector también encontrarán B antes que A cuando naveguen sin la tecla Tab.

Pasos siguientes

Colores accesibles en Power Apps

Consulte también