Sugerencias de accesibilidad para tarjetas adaptables

Los agentes de Copilot Studio funcionan bien con lectores de pantalla en Windows, como Acceso No Visual al Escritorio (NVDA) y Acceso a trabajo con discurso (JAWS). Para optimizar la accesibilidad, tenga en cuenta estas sugerencias.

Lectores de pantalla

Para el lector de pantalla y la accesibilidad de navegación mediante teclado de Tarjetas Adaptativas, esto es lo que más importa.

• Incluya siempre la propiedad "label": la propiedad "label" es lo que los lectores de pantalla anuncian cuando un usuario se centra en una entrada. Sin él, los lectores de pantalla podrían simplemente decir "editar campo" sin contexto. Los lectores de pantalla a menudo no leen marcadores de posición y desaparecen una vez que el usuario empieza a escribir. Por lo tanto, evite confiar en ellos para ayudar con la accesibilidad.

  {
    "type": "Input.Text",
    "id": "middleName",
    "label": "Middle name (optional)",
    "placeholder": "Enter your middle name"
  }
  

• Use "inputStyle" y "style" con prudencia: evite estilos personalizados que eliminen los indicadores de enfoque. El anillo de enfoque predeterminado es de lo que dependen los usuarios del teclado para saber dónde están en la tarjeta.

• Utiliza "isRequired" y "errorMessage" para los lectores de pantalla: incluso para campos opcionales, un "errorMessage" claro ayuda a los lectores de pantalla a comunicar la retroalimentación de validación.

  {
    "type": "Input.Text",
    "id": "middleName",
    "label": "Middle name (optional)",
    "isRequired": false,
    "errorMessage": "Please enter a valid middle name"
  }
  

• Orden de tabulación lógico: las tarjetas adaptativas siguen el orden del modelo de objetos de documento (DOM) para la navegación con la tecla de tabulación, por lo que estructura la representación JSON de su tarjeta en el orden que desea que los usuarios sigan al navegar con la tecla de tabulación. Evite utilizar diseños "ColumnSet" que establezcan un orden visual lógico, pero generen un orden de tabulación confuso para los usuarios que usan el teclado.

• Los botones de acción son accesibles con el teclado de forma predeterminada: las propiedades como "Action.Submit" y "Action.OpenUrl" se pueden centrar de forma nativa. Asegúrese de que el título sea descriptivo en lugar de algo impreciso como "Haga clic aquí" porque los lectores de pantalla leen el título en voz alta.

• Agregue "type": "TextBlock" para obtener instrucciones: si una sección de campos opcionales necesita contexto, establezca "type" como "TextBlock" antes de esos campos. Los lectores de pantalla leen campos en secuencia, lo que proporciona a los usuarios el contexto que necesitan antes de llegar a las entradas.

  {
    "type": "TextBlock",
    "text": "The following fields are optional. You can skip them if not applicable.",
    "wrap": true
  }
  

• Evite "isVisible": "false" para escenarios de accesibilidad: los lectores de pantalla omiten completamente los elementos ocultos. Si la accesibilidad es la prioridad, mantenga visibles los campos opcionales. Si debe ocultarlos, asegúrese de que el botón de alternancia tiene una etiqueta clara y descriptiva.

• Sugerencia para pruebas en Microsoft Teams: debido a pequeñas diferencias en la compatibilidad de Microsoft Teams con tarjetas adaptables, se recomienda usar el Narrador de Windows integrado o NVDA para validar el orden de tabulación y que los anuncios funcionan según lo previsto.

Propiedades de esquema específicas

Estas son algunas propiedades específicas en el esquema de tarjetas adaptables que pueden ayudar a mejorar la accesibilidad.

La propiedad "label"

La propiedad "label" es fundamental para los lectores de pantalla. Al tener una conexión entre etiquetas y entradas, las bibliotecas de representador pueden establecer las propiedades necesarias para permitir que los usuarios de tecnologías de asistencia, como lectores de pantalla, interactúen correctamente con entradas dentro de tarjetas adaptables.

Más información en Input.Text.

¿Por qué "etiqueta" es mejor que "marcador de posición" para la accesibilidad?

Se recomienda usar la propiedad "label" para etiquetar parámetros de entrada de tarjetas adaptables, en lugar de la propiedad "marcador de posición". Es una manera sencilla y concisa para etiquetar datos de entrada para los creadores de tarjetas.

El uso de propiedades "TextBlock" como etiquetas impide que se aplique la proximidad entre las entradas y las etiquetas. Usando la propiedad "label", puede asegurarse de que ambos elementos visuales se representan uno al lado del otro, lo que ayuda a los usuarios que necesitan ampliaciones de pantalla.

Obtenga más información en Validación de entrada.

Usar "errorMessage" para los comentarios de validación

La propiedad "errorMessage" está disponible para todos los tipos de entrada para especificar el mensaje que se va a mostrar cuando un usuario escribe un valor que no es válido.

Obtenga más información en Validación de entrada.

TextBlock con "style": "heading" para la estructura de accesibilidad

El uso de "style": "heading" aplica el estilo de encabezado predeterminado y marca el elemento TextBlock como encabezado de accesibilidad.

Obtenga más información en Elemento TextBlock.

Botones de acción: "tooltips" para la narración

La acción "Action.ToggleVisibility" admite una propiedad "tooltip" que define el texto que aparece cuando el usuario mantiene el mouse sobre la acción. El software de narración lee este texto.

Obtenga más información en Action.ToggleVisibility.

Precaución con "isVisible": "false" para los elementos de entrada

Mantenga visibles los elementos de entrada con validación. Los elementos de entrada con validación en "Action.ToggleVisibility" pueden generar confusión cuando los parámetros de entrada ocultos no son válidos.

Obtenga más información en Action.ToggleVisibility.

La propiedad "labelPosition" para Input.ChoiceSet

Para "Input.ChoiceSet", la propiedad "labelPosition" determina la posición de la etiqueta, ya sea en línea o superior (valor predeterminado).

Obtenga más información en Input.ChoiceSet.