Criar aplicações de tela acessíveis

Artigo
03/15/2023

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.

Inclua, pelo menos, um título em cada ecrã da aplicação. Pode criar títulos definindo a propriedade Função de uma Etiqueta.
Utilize um Botão em vez de uma Etiqueta para texto interativo.
Agrupe conteúdos relacionados em Contentores.
Esteja atento a padrões de design não suportados.

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

Partilhar via