Comentários

Organizar controles em aplicativos de tela acessíveis

  • Artigo
  • 2 minutos para o fim da leitura

Os controles em um aplicativo devem ser organizados para ajudar usuários de leitores de tela a navegar sequencialmente. Uma ordem lógica também reduz a confusão para os usuários do teclado e os ajuda a serem mais produtivos.

Nome de tela significativo

Quando uma tela for carregada, os leitores de tela dirão o nome dela. Escolha um nome significativo para orientar os usuários.

Você pode alterar o nome da tela na árvore de controles ou no painel de propriedades no Power Apps Studio. Selecione a tela e, em seguida, selecione Selecionar o ícone de caneta para editar o nome. para renomear a tela.

Os nomes das telas podem ser alterados na árvore de controles ou no painel de propriedades, conforme destacado na imagem.

O primeiro elemento em uma tela é o nome dela. Ele está visualmente oculto e acessível apenas para usuários de leitores de tela.

Quando uma nova tela é carregada, o Power Apps focaliza o nome da tela. Se você usar SetFocus imediatamente quando a tela for carregada, o nome da tela não será lido. Considere criar um título visível e torná-lo uma região dinâmica para anunciar a mudança de contexto.

Ordem de controle lógico

Os usuários de leitores de tela podem navegar pelo conteúdo sequencialmente. A ordem é determinada pela posição dos controles, começando de cima para baixo e da esquerda para a direita. O tamanho do controle não importa, apenas as propriedades X e Y.

Neste exemplo, A aparece primeiro na sequência, pois está mais próximo do topo. B e C têm a mesma posição vertical, mas como B está mais próximo da esquerda, ele aparece antes de C. D aparece por último, pois está mais longe do topo.

Como o posicionamento afeta a ordem dos 4 controles.

Observação

  • No modo de visualização, ao editar um aplicativo, a ordem de controle não é atualizada por motivos de desempenho. A ordem estará correta quando o aplicativo for publicado e executado.
  • A ordem de controle não é a mesma mostrada na exibição em árvore de controles no Power Apps Studio. A exibição em árvore classifica controles de acordo com a data em que foram adicionados ao aplicativo. Isso não afeta a ordem de controles quando o aplicativo é executado.

Controles agrupados

A ordem padrão é adequada para conteúdo isolado, mas não para conteúdo agrupado. Considere dois blocos lado a lado, desenhados com controles de Retângulo. Cada bloco tem um título. Abaixo do título estão dois botões empilhados verticalmente: A e B para o primeiro bloco, C e D para o outro.

Exemplo de prática incorreta: controles organizados em uma estrutura simples.

O ordem padrão é de cima para baixo, da esquerda para a direita. Portanto, a ordem de controles é:

  1. Retângulo à esquerda
  2. Retângulo à direita
  3. Título à esquerda
  4. Título à direita
  5. A
  6. C
  7. B
  8. D

Esta estrutura não indica que A e B estão juntos e, da mesma forma, que C e D estão juntos.

Use Contêineres para agrupar conteúdo relacionado. Todos os controles em um Contêiner aparecerão juntos em sequência. Dentro de um contêiner, os controles são ordenados com a mesma regra: de cima para baixo, da esquerda para a direita.

Ao substituir os Retângulos do exemplo anterior por Contêineres, a ordem de controle agora é lógica para usuários de leitores de tela:

  1. Contêiner à esquerda
  2. Título à esquerda
  3. A
  4. B
  5. Contêiner à direita
  6. Título à direita
  7. C
  8. D

Exemplo de prática recomendada: controles organizados em uma estrutura hierárquica usando Contêineres.

Todos os controles em um Cartão de formulário e Galeria são agrupados automaticamente; então, você não precisa usar um Contêiner. No entanto, se houver subgrupos, você ainda deverá usar Contêineres para eles.

Neste exemplo, uma linha de Galeria tem uma miniatura e dois trechos de texto à esquerda. À direita estão dois botões. De forma visual e lógica, os dois conjuntos de controles devem ser agrupados. Isso garante que os usuários de leitores de tela encontrarão o grupo esquerdo antes do direito.

Exemplo de prática recomendada: os controles relacionados em uma galeria são agrupados em Contêineres.

Ordem lógica de navegação do teclado

TabIndex especifica como os controles podem ser alcançados pelos usuários do teclado. TabIndex deve ser 0 ou -1. Com uma ordem lógica de controle, conforme descrito acima, há poucos motivos para que TabIndex seja maior que 0.

A ordem de navegação do teclado deve seguir o fluxo visual dos controles. Se a ordem de navegação for inesperada, primeiro verifique se a estrutura do aplicativo é lógica.

Observação

A ordem de navegação do teclado não é a mesma que a ordem de controle. TabIndex afeta apenas a navegação da tecla Tab. Isso não altera a maneira como os usuários de leitores de tela navegam em um aplicativo de forma linear. Alguns usuários de leitores de tela nem usam teclados.

Para cenários raros em que a ordem de navegação do teclado deve ser diferente da ordem de controle, você pode personalizar TabIndex.

Próximas etapas

Cores acessíveis no Power Apps

Consulte também