Sugestões de acessibilidade para Cartões Adaptativos

Os agentes do Copilot Studio funcionam bem com leitores de ecrã no Windows, como o NonVisual Desktop Access (NVDA) e o Job Access with Speech (JAWS). Para otimizar a acessibilidade, considere estas sugestões.

Leitores de ecrã

No que diz respeito à acessibilidade dos Cartões Adaptativos para leitores de ecrã e navegação com o teclado, estes são os aspetos essenciais.

• Inclua sempre a propriedade "label": a propriedade "label" é o que os leitores de ecrã anunciam quando o utilizador coloca o foco numa entrada. Sem isso, os leitores de ecrã podem simplesmente dizer "editar campo" sem qualquer contexto. Os leitores de ecrã geralmente não leem os marcadores de posição, e estes desaparecem assim que o utilizador começa a escrever. Por isso, evite depender deles para ajudar na acessibilidade.

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

• Utilize "inputStyle" e "style" com cuidado: Evite estilos personalizados que removam indicadores de foco. O anel de foco predefinido é o que os utilizadores de teclado utilizam para saber onde estão no cartão.

• Utilize "isRequired" e "errorMessage" para os leitores: Mesmo para campos opcionais, uma "errorMessage" clara ajuda os leitores de ecrã a comunicar comentários de validação.

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

• Ordem lógica de tabulação: os Cartões Adaptativos seguem a ordem do Document Object Model (DOM) para a navegação por tabulação, por isso estruture a representação JSON do seu cartão pela ordem em que pretende que os utilizadores naveguem utilizando a tecla de tabulação. Evite utilizar esquemas "ColumnSet" que criam uma ordem visual lógica, mas uma ordem de tabulação confusa para os utilizadores que utilizam o teclado.

• Os botões de ação são acessíveis através do teclado por predefinição: Propriedades como "Action.Submit" e "Action.OpenUrl" são focalizáveis de forma nativa. Certifique-se de que o seu título é descritivo, em vez de algo vago como "Clique aqui", uma vez que os leitores de ecrã leem o título em voz alta.

• Adicionar "type": "TextBlock" para instruções: se uma secção de campos opcionais precisar de contexto, defina "type" como "TextBlock" antes desses campos. Os leitores de ecrã leem os campos em sequência, fornecendo aos utilizadores o contexto necessário antes de acederem às entradas.

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

• Evitar "isVisible": "false" em cenários de acessibilidade: os leitores de ecrã ignoram completamente os elementos ocultos. Se a acessibilidade for a prioridade, mantenha os campos opcionais visíveis. Se tiver de os ocultar, assegure-se de que o comutador tem uma etiqueta clara e descritiva.

• Sugestão profissional para testes no Microsoft Teams: devido a pequenas diferenças no suporte do Microsoft Teams para Cartões Adaptativos, recomendamos que utilize o Windows Narrator ou NVDA pré-instalado para validar a ordem de tabulação e garantir que os anúncios funcionem como esperado.

Propriedades específicas do esquema

Aqui estão algumas propriedades específicas no esquema dos Cartões Adaptativos que podem ajudar a melhorar a acessibilidade.

A propriedade "label"

A propriedade "etiqueta" é fundamental para leitores de ecrã. Ao ter uma ligação entre etiquetas e entradas, as bibliotecas de compositores podem definir as propriedades necessárias para permitir que utilizadores de tecnologias assistivas, como os leitores de ecrã, interajam corretamente com entradas dentro dos Cartões Adaptativos.

Saiba mais em Input.Text.

Porque é que "etiqueta" é melhor do que "marcador de posição" em termos de acessibilidade?

Recomendamos utilizar a propriedade "label" para identificar os parâmetros de entrada dos Cartões Adaptativos, em vez da propriedade "placeholder". É uma forma simples e concisa de etiquetar entradas para autores de cartões.

A utilização de propriedades "TextBlock" como etiquetas impede que se assegure a proximidade entre as entradas e as etiquetas. Ao utilizar a propriedade "label", pode garantir que ambos os elementos visuais são compostos lado a lado, o que ajuda os utilizadores que precisam de lupas do ecrã.

Saiba mais em Validação de entrada.

Utilize "errorMessage" para comentários de validação

A propriedade "errorMessage" está disponível para todos os tipos de entrada e pode ser utilizada para definir a mensagem apresentada quando o utilizador introduz um valor inválido.

Saiba mais em Validação de entrada.

TextBlock com "estilo": "título" para estrutura de acessibilidade

A utilização de "style": "heading" aplica o estilo de título predefinido e marca o elemento TextBlock como um título para acessibilidade.

Saiba mais em TextBlock.

Botões de ação — "tooltip" para narração

A ação "Action.ToggleVisibility" suporta uma propriedade de "descrição" que define o texto que é apresentado quando o utilizador faz pairar o rato sobre a ação. O software de narração lê este texto.

Saiba mais em Action.ToggleVisibility.

Tenha cuidado ao utilizar "isVisible": "false" para elementos de entrada

Mantenha os elementos de entrada com validação visíveis. Os elementos de entrada com validação sob "Action.ToggleVisibility" podem provocar confusão se os parâmetros de entrada ocultos forem inválidos.

Saiba mais em Action.ToggleVisibility.

A propriedade "labelPosition" para Input.ChoiceSet

Para "Input.ChoiceSet", a propriedade "labelPosition" determina a posição da etiqueta, quer em linha, quer acima (predefinição).

Saiba mais em Input.ChoiceSet.