Criar aplicativos de tela acessíveis

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.
  • Evite usar a propriedade de visibilidade de itens para colocar um elemento em exibição. Se precisar mostrar algo condicionalmente, crie o conteúdo em uma nova tela, navegue até ele e retorne.
  • 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 ao ler de cima para baixo, da esquerda para a direita.

Teclado

Ao testar a acessibilidade do aplicativo, certifique-se de que ele possa ser usado apenas com o teclado, os modos de acessibilidade em iOS e Android e leitores de tela baseados em teclado.

Para navegação por teclado (com ou sem o leitor de tela), verifique se uma ordem lógica é seguida ao usar a tecla TAB para navegar para campos de entrada, definindo cada propriedade TabIndex do controle:

  • Controles Label, Image, Icon, Shape – se eles representarem elementos interativos (ou seja, botões) defina TabIndex como 0; se eles forem elementos decorativos ou texto, defina TabIndex como -1.
  • Evite definir um índice de tabulação maior do que zero.

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.
  • Para imagens, defina AccessibleLabel para 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.

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 Video dá suporte a legendas 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

Consulte também