Dicas de acessibilidade para cartões adaptáveis

Os agentes do Copilot Studio funcionam bem com leitores de tela no Windows, como o NVDA (Acesso à Área de Trabalho Não Visual) e o Acesso ao Trabalho com Fala (JAWS). Para otimizar a acessibilidade, considere essas dicas.

Leitores de tela

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

• Sempre inclua a propriedade "label": a propriedade "label" é o que os leitores de tela anunciam quando um usuário se concentra em uma entrada. Sem ele, os leitores de tela podem apenas dizer "editar campo" sem contexto. Os leitores de tela, geralmente, não leem marcadores de posição, e eles desaparecem quando o usuário começa a digitar. Portanto, evite confiar neles para ajudar 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 é aquilo em que os usuários de teclado confiam para saber onde estão no cartão.

• Use "isRequired" e "errorMessage" para leitores de tela: mesmo para campos opcionais, uma mensagem de erro clara ajuda os leitores de tela a comunicar aos usuários o feedback de 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 visualmente lógica, mas uma ordem de tabulação confusa para usuários de teclado.

• Os 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. Verifique se o título é descritivo em vez de algo vago como "Clique aqui" porque os leitores de tela leem o título em voz alta.

• Adicione "type": "TextBlock" para obter instruções: se uma seção de campos opcionais precisar de contexto, defina "type" como "TextBlock" antes desses campos. Os leitores de tela leem campos em sequência, dando aos usuários o contexto necessário antes de acessar as entradas.

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

• Evite "isVisible": "false" para cenários de acessibilidade: leitores de tela ignoram totalmente os elementos ocultos. Se a acessibilidade for a 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 de esquema específicas

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" é essencial para leitores de tela. Ao ter uma conexão entre rótulos e entradas, as bibliotecas de renderizador podem definir as propriedades necessárias para permitir que os usuários de tecnologias adaptativas, como leitores de tela, interajam corretamente com entradas dentro de 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 "espaço reservado". É uma maneira simples e concisa de rotular entradas para autores de cartão.

O uso de propriedades "TextBlock" como rótulos impede que você impona a proximidade entre entradas e rótulos. Ao usar a propriedade "label", você pode garantir que ambos os elementos visuais sejam renderizados lado a lado, o que ajuda os usuários que precisam de ampliadores de tela.

Saiba mais na validação de entrada.

Usar "errorMessage" para retorno de validação

A propriedade "errorMessage" está disponível para todos os tipos de entrada especificarem a mensagem a ser mostrada quando um usuário insere um valor que não é válido.

Saiba mais na validação de entrada.

TextBlock com estilo "heading" para estrutura de acessibilidade

Usando "style": "heading" aplica o estilo de título padrão 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" dá suporte a uma propriedade "tooltip" que define o 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 a validação visível. Elementos de entrada com validação em "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" para Input.ChoiceSet

Para "Input.ChoiceSet", a propriedade "labelPosition" determina a posição da etiqueta, em linha ou, como padrão, acima.

Saiba mais em Input.ChoiceSet.