Sugerencias de accesibilidad para tarjetas adaptables

Los agentes de Copilot Studio funcionan bien con lectores de pantalla en Windows, como Acceso al Escritorio NonVisual (NVDA) y Acceso a trabajo con discurso (JAWS). Para optimizar la accesibilidad, considere estos consejos.

Lectores de pantalla

Para la accesibilidad de las Tarjetas adaptables mediante lectores de pantalla y navegación por teclado, 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 enfoca un campo. Sin él, los lectores de pantalla podrían simplemente decir "campo de edición" sin contexto. Los lectores de pantalla suelen no leer los marcadores de posición, y estos desaparecen cuando el usuario comienza a escribir. Por lo tanto, evite depender de ellos para asegurar la accesibilidad.

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

• Usar "inputStyle" y "style" de manera cuidadosa: evite estilos personalizados que eliminen indicadores de enfoque. El anillo de enfoque predeterminado permite a los usuarios de teclado saber en qué parte de la tarjeta se encuentran.

• Usar "isRequired" y "errorMessage" para los lectores de pantalla: incluso para campos opcionales, un mensaje de error claro ayuda a los lectores de pantalla a transmitir comentarios de validación.

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

• Orden lógico de tabulación: las Tarjetas adaptables siguen el orden del Modelo de Objetos del Documento (DOM) para la navegación mediante la tecla Tab, así que estructure la representación JSON de su tarjeta en el orden en que quiere que los usuarios la recorran. Evite usar diseños de «ColumnSet» que crean un orden visualmente lógico pero un orden de tabulación confuso para los usuarios de teclado.

• Los botones de acción son accesibles mediante teclado por defecto: propiedades como "Action.Submit" y "Action.OpenUrl" son nativamente enfocables. Asegúrese de que su título sea descriptivo y no algo vago como «Haz clic aquí», ya que los lectores de pantalla leen el título en voz alta.

• Agregue "type": "TextBlock" para las instrucciones: si una sección de campos opcionales necesita contexto, ponga "type" como "TextBlock" antes de esos campos. Los lectores de pantalla recorren los campos en secuencia, ofreciendo 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
  }
  

• Evitar «isVisible»: «false» para escenarios de accesibilidad: los lectores de pantalla omiten 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.

• Consejo profesional para pruebas en Microsoft Teams: debido a las ligeras diferencias en el soporte de Tarjetas adaptables en Microsoft Teams, recomendamos que utilices el Narrador de Windows integrado o NVDA para validar el orden de tabulaciones y que los anuncios funcionen como se espera.

Propiedades específicas del esquema

Aquí tiene 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 renderizadores pueden establecer las propiedades necesarias para permitir que los usuarios de tecnologías asistivas, como lectores de pantalla, interactúen correctamente con las entradas dentro de las Tarjetas Adaptativas.

Más información en Input.Text.

¿Por qué la propiedad "label" es preferible a "placeholder" 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 forma simple y concisa de etiquetar campos para los autores de tarjetas.

Usar propiedades "TextBlock" como etiquetas impide garantizar la proximidad entre los campos de entrada y sus etiquetas. Usando la propiedad "etiqueta", puede asegurarse de que ambos elementos visuales se renderizan uno al lado del otro, lo que ayuda a los usuarios que necesitan lupas de pantalla.

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

Usa "errorMessage" para mostrar mensajes de validación

La propiedad "errorMessage" está disponible para todos los tipos de entrada y permite especificar el mensaje que se muestra cuando un usuario ingresa un valor no válido.

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

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

Al usar "style": "heading" se aplica el estilo de encabezado por defecto y se marca el elemento TextBlock como encabezado para accesibilidad.

Más información en TextBlock.

Botones de acción—"tooltip" para narración

La acción «Action.ToggleVisibility» admite la propiedad «tooltip», que define el texto que aparece cuando el usuario pasa el ratón sobre la acción. El software de narración lee este texto.

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

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

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

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

La propiedad "labelPosition" de Input.ChoiceSet

Para « Input.ChoiceSet », la propiedad « labelPosition » determine la posición de la etiqueta, ya sea en línea o arriba (por defecto).

Más información en Input.ChoiceSet.