Criar aplicativos de tela acessíveis

Artigo
03/15/2023

Um aplicativo de tela acessível permitirá que os usuários com deficiências visuais, auditivas e outras possam usar o aplicativo com êxito. Além de ser um requisito para muitos governos e organizações, seguir as diretrizes abaixo aumenta a facilidade de uso para todos os usuários, independentemente das suas habilidades.

Use o Verificador de Acessibilidade para ajudar a examinar possíveis problemas de acessibilidade em seu aplicativo.

Layout e cores

O senso comum e designs descomplicados ajudam a tornar os aplicativos mais acessíveis a todos os usuários. Ao realizar personalizações avançadas dos aplicativos, considere as sugestões abaixo. Os temas do Power Apps foram criados para atender aos padrões de acessibilidade.

Verifique se todos os elementos estão claramente visíveis e se o tamanho do texto é adequado. Todo o conteúdo deve ser lido e entendido com facilidade a olho nu.
Verifique se os elementos de entrada estão rotulados na tela. A propriedade AccessibleLabel define o que o leitor de tela anunciará.
Para personalizar cores, garanta que a taxa de contraste do texto com o plano de fundo seja de 4.5:1 ou superior. As ferramentas de software que ajudam nesse processo estão disponíveis.
Verifique se o layout segue um fluxo lógico na leitura de cima para baixo e da esquerda para a direita.
Crie um aplicativo responsivo para que usuários com visão subnormal possam ampliar e usá-lo sem rolar a tela para frente e para trás.

Teclado

Ao testar a acessibilidade do aplicativo, verifique se ele pode ser usado apenas pelo teclado, com ou sem um leitor de tela.

A tecla Tab deve navegar até elementos interativos em ordem lógica. Você pode criar isso com uma estrutura lógica de aplicativo e definindo a propriedade TabIndex de cada controle de acordo.

Controles Rótulo, Imagem, Ícone e Forma: defina TabIndex como 0 se eles tiverem de ser interativos. Caso contrário, defina TabIndex como -1.
Não defina TabIndex com um valor maior que zero.
Verifique se a configuração do aplicativo Índice de tabulação simplificado está habilitada.

Leitores de tela

Confirmamos que os seguintes leitores de tela funcionam com o Power Apps:

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

Para garantir uma experiência satisfatória com o leitor de tela, é recomendável:

Verifique se todos os controles de entrada têm a propriedade AccessibleLabel definida.
No caso de imagens, defina AccessibleLabel com uma descrição apropriada.
- Se uma imagem não for usada como botão ou link (ou seja, o ícone tiver função apenas decorativa) e não dever ser lida pelo leitor de tela, verifique se o AccessibleLabel está vazio ou não definido.
- Se uma imagem ou ícone for usado como botão, defina TabIndex como 0 e AccessibleLabel como a descrição do link.

Tipo e estrutura de controle

Usar os controles certos e agrupá-los ajudará os usuários de leitores de tela a entender a estrutura do aplicativo.

Inclua pelo menos um título em cada tela do aplicativo. Você pode criar títulos definindo a propriedade Função de um Rótulo.
Use um Botão em vez de um Rótulo para texto interativo.
Conteúdo relacionado ao grupo em Contêineres.
Esteja ciente de padrões de design sem suporte.

Multimídia

Verifique se todos os vídeos têm legenda e se uma transcrição de todas as gravações de áudio está disponível para o usuário. O controle Vídeo dá suporte a legendas ocultas no formato WebVTT por meio da propriedade ClosedCaptionsUrl.

Com o leitor de tela habilitado, o Temporizador não anuncia o botão de texto, mas sim quanto tempo passou. Os anúncios não podem ser desativados, mesmo que o temporizador seja ocultado com baixa opacidade.

Trabalhar com assinaturas

Se você tiver um campo de assinatura que use o controle PenInput, precisará habilitar um método alternativo de entrada de assinatura. A maneira recomendada é mostrar um controle TextInput em que o usuário possa digitar seu nome. Verifique se as instruções de assinatura estão presentes na propriedade AccessibleLabel e se o controle está presente na entrada à caneta – à direita ou logo abaixo.

Próximas etapas

Estrutura de aplicativo acessível

Compartilhar via