Criar aplicações de tela acessíveis

  • Artigo

Uma aplicação de tela acessível permitirá aos utilizadores com problemas de visão, audição e outras dificuldades utilizar a aplicação sem problemas. Para além de ser um requisito para muitos governos e organizações, seguir as diretrizes abaixo aumenta a capacidade de utilização para todos os utilizadores, independentemente das respetivas capacidades.

Utilize o Verificador de Acessibilidade para o ajudar a avaliar potenciais problemas de acessibilidade na sua aplicação.

Esquema e cor

Um design descomplicado e o bom senso ajudam as aplicações a serem mais acessíveis para todos os utilizadores. Quando estiver a realizar uma personalização aprofundada das aplicações, tenha em conta as sugestões seguintes. Os temas do Power Apps foram concebidos para cumprir os padrões de acessibilidade.

  • Confirme que todos os elementos são claramente visíveis e que o texto tem um tamanho suficiente. Todo o conteúdo tem de ser facilmente legível e compreensível a olho nu.
  • Certifique-se de que os elementos de entrada estão identificados no ecrã. A propriedade AccessibleLabel define o que o leitor de ecrã vai anunciar.
  • Se personalizar as cores, confirme que o rácio de contraste do texto para fundo é de 4,5:1 ou superior. As ferramentas de software que ajudam neste processo estão prontamente disponíveis.
  • Confirme que o esquema segue um fluxo lógico quando é lido de cima para baixo e da esquerda para a direita.
  • Crie uma aplicação responsiva para que os utilizadores de visão reduzida possam ampliar e utilizá-la sem se deslocarem para frente e para trás.

Teclado

Quando testar a acessibilidade da aplicação, certifique-se de que a aplicação só pode ser utilizada por teclado, com ou sem leitor de ecrãs.

A tecla Tab deve navegar para elementos interativos por uma ordem lógica. Pode criar esta aplicação com uma estrutura lógica de aplicação e definindo cada propriedade de controlo TabIndex em conformidade.

  • Controlos Etiqueta, Imagem, Ícone, Forma: defina o TabIndex como 0 se for para serem interativos. Caso contrário, defina o TabIndex como -1.
  • Não defina o TabIndex maior que zero.
  • Certifique-se de que a aplicação Índice de separador simplificado está ativada.

Leitores de ecrã

Foram verificados se os seguintes leitores de ecrã funcionam com o Power Apps:

  • JAWS: Microsoft Edge
  • Narrador: Microsoft Edge
  • NVDA: Google Chrome, Firefox
  • TalkBack: Google Chrome, Power Apps Mobile
  • VoiceOver: Power Apps móvel, Safari (macOS, iOS, iPadOS)

Para garantir uma experiência satisfatória com o leitor de ecrã, recomenda-se que:

  • Confirme que todos os controlos de entrada têm a propriedade AccessibleLabel definida.
  • Para imagens, defina AccessibleLabel para uma descrição adequada.
    • Se uma imagem não for utilizada como um botão ou uma ligação (ou seja, o ícone existe apenas para fins decorativos) e não se destinar a ser lida pelo leitor de ecrã, confirme que a AccessibleLabel está vazia ou não foi definida.
    • Se uma imagem ou um ícone for utilizado como um botão, defina TabIndex como 0 e AccessibleLabel para a descrição da ligação.

Tipo e estrutura de controlo

A utilização dos controlos certos e o respetivo agrupamento ajudará os utilizadores de leitor de ecrã a compreender a estrutura da aplicação.

Multimédia

Confirme que todos os vídeos estão legendados e que existe uma transcrição de todas as gravações de áudio disponível para o utilizador. O controlo Vídeo suporta legendas ocultas no formato WebVTT através da propriedade ClosedCaptionsUrl.

Com o leitor de ecrã ativado, o Temporizador não anuncia o texto do botão, mas sim quanto tempo passou. Os anúncios não podem ser desligados, mesmo que o temporizador esteja oculto com opacidade baixa.

Trabalhar com assinaturas

Se tiver um campo de assinatura que utiliza o controlo PenInput, tem de ativar um método alternativo de entrada de assinatura. A forma recomendada é mostrar um controlo TextInput em que um utilizador pode introduzir o respetivo nome. Confirme que as instruções de assinatura são colocadas na propriedade AccessibleLabel e que o controlo é colocado junto à Introdução a caneta – à direita ou imediatamente abaixo.

Passos seguintes

Estrutura de aplicação acessível

Consulte também