Dicas de acessibilidade para Cartões Adaptáveis

Agentes do Copilot Studio funcionam bem com leitores de tela no Windows, como o NonVisual Desktop Access (NVDA) e o Job Access with Speech (JAWS). Para otimizar a acessibilidade, considere estas dicas.

Leitores de tela

Para acessibilidade de leitores de tela e navegação por teclado dos Cartões Adaptáveis, veja o que mais importa.

• Inclua sempre a propriedade "label": a propriedade "label" é o que os leitores de tela anunciam quando um usuário foca em um campo de entrada. Sem ela, os leitores de tela podem simplesmente dizer “campo de edição” sem qualquer contexto. Leitores de tela geralmente não leem espaços reservados, e eles desaparecem assim que o usuário começa a digitar. Portanto, evite depender deles para auxiliar na acessibilidade.

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

• Use "inputStyle" e "style" cuidadosamente: evite estilos personalizados que removam indicadores de foco. O anel de foco padrão é o que os usuários que navegam por teclado utilizam para saber onde estão no cartão.

• Use "isRequired" e "errorMessage" para leitores de tela: mesmo para campos opcionais, "errorMessage" clara ajuda os leitores de tela a comunicar o comentário da validação.

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

• Ordem de tabulação lógica: cartões adaptáveis seguem a ordem do DOM (Modelo de Objeto de Documento) para navegação por meio de guias, portanto, estruture a representação JSON do seu cartão na ordem pela qual você deseja que os usuários naveguem pelas guias. Evite usar layouts "ColumnSet" que criam uma ordem lógica visual, mas uma ordem de tabulação confusa para usuários de teclado.

• Botões de ação são acessíveis por teclado por padrão: propriedades como "Action.Submit" e "Action.OpenUrl" são nativamente focalizáveis. Certifique-se de que o título seja descritivo, em vez de algo vago como "Clique aqui", pois leitores de tela leem o título em voz alta.

• Adicione "type": "TextBlock" para exibir instruções: se uma seção de campos opcionais precisar de contexto, defina "type" como "TextBlock" antes desses campos. Leitores de tela leem os campos em sequência, proporcionando aos usuários o contexto necessário antes de chegarem aos campos de entrada.

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

• Evite usar "isVisible": "false" para cenários de acessibilidade: leitores de tela ignoram completamente os elementos ocultos. Se a acessibilidade for prioridade, mantenha os campos opcionais visíveis. Se você precisar ocultá-los, verifique se a alternância tem um rótulo claro e descritivo.

• Dica profissional para testes no Microsoft Teams: devido a diferenças sutis no suporte a Cartões Adaptáveis no Microsoft Teams, recomendamos que você use o Narrador interno do Windows ou o NVDA para validar a ordem de tabulação e que os anúncios funcionem corretamente.

Propriedades específicas do esquema

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

A propriedade "label"

A propriedade "label" é fundamental para leitores de tela. Ao ter uma conexão entre rótulos e entradas, as bibliotecas de renderizadores podem definir as propriedades necessárias para permitir que usuários de tecnologias assistivas, como leitores de tela, interajam corretamente com entradas dentro dos Cartões Adaptáveis.

Saiba mais em Input.Text.

Por que "rótulo" é melhor que "espaço reservado" para acessibilidade?

É recomendável usar a propriedade "label" para marcar parâmetros de entrada de Cartões Adaptáveis, em vez da propriedade "placeholder". É uma maneira simples e concisa de rotular entradas para autores de cartão.

Usar propriedades "TextBlock" como rótulos impede que você imponha proximidade entre entradas e etiquetas. Ao usar a propriedade "label", você garante que ambos os elementos visuais sejam exibidos lado a lado, o que ajuda usuários que dependem de ampliadores de tela.

Saiba mais em Validação de entrada.

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

A propriedade "errorMessage" está disponível para todos os tipos de entrada para especificar a mensagem a ser exibida quando um usuário insere um valor inválido.

Saiba mais em Validação de entrada.

TextBlock com estilo "heading" para estrutura de acessibilidade

Ao usar "style": "heading", aplica-se a estilização padrão de cabeçalho e marca o elemento "TextBlock" como um cabeçalho para acessibilidade.

Saiba mais em TextBlock.

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

A ação "Action.ToggleVisibility" suporta uma propriedade "tooltip" que define texto que aparece quando o usuário passa o mouse sobre a ação. O software de narração lê este texto.

Saiba mais em Action.ToggleVisibility.

Cuidado com "isVisible": "false" para elementos de entrada

Mantenha os elementos de entrada com validação visíveis. Elementos de entrada com validação sob "Action.ToggleVisibility" podem gerar confusão quando parâmetros de entrada ocultos não são válidos.

Saiba mais em Action.ToggleVisibility.

A propriedade "labelPosition" do Input.ChoiceSet

Para "Input.ChoiceSet", a propriedade "labelPosition" determina a posição do rótulo, seja em linha ou acima (padrão).

Saiba mais em Input.ChoiceSet.