Testando a acessibilidade do seu aplicativo (HTML)

Este tópico descreve o procedimento de teste que deve ser seguido para garantir que um aplicativo da Windows Store em JavaScript seja acessível.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interação do usuário: entrada por toque e muito mais.

Procurando a versão para C#/VB/C++/XAML deste tópico? Veja Testando a acessibilidade do seu aplicativo (XAML).

Executar as ferramentas de teste de acessibilidade

O Software Development Kit do Microsoft do Windows (SDK do Windows) inclui ferramentas de teste de acessibilidade, denominadas Inspect e UI Accessibility Checker (AccChecker), que ajudam a verificar a acessibilidade do seu aplicativo. Para os desenvolvedores de aplicativos da Windows Store em JavaScript, a inspeção é útil para verificar as propriedades de acessibilidade que você define na sua marcação (nome, função, valor, estado, AriaRole para a Automação da Interface do Usuário da Microsoft, AriaProperties para a Automação da Interface do Usuário) e para verificar a estrutura da árvore de Automação da Interface do Usuário. O AccChecker ajuda a verificar a implementação de ARIA (Aplicativos Avançados para Internet para Acessibilidade) de sua marcação HTML.

Se você pretende declarar seu aplicativo como acessível na Windows Store, solucione todos os erros de prioridade 1 relatados pelo AccChecker com as verificações de ARIA via Web habilitadas. Solucionar problemas de acessibilidade significa corrigi-los no código ou, em casos raros, reconhecer que eles não são adequados para o seu aplicativo e suprimi-los.

Você pode iniciar as ferramentas de teste de acessibilidade a partir do prompt de comando do Microsoft Visual Studio ou da pasta de ferramentas do SDK do Windows (<install_dir>\Program Files\Windows Kits\<version>\bin\<architecture>.

Testar a acessibilidade do teclado

A melhor maneira de testar a acessibilidade de seu teclado é desconectar o mouse ou usar o teclado virtual se você usa um dispositivo tablet. Teste a navegação da acessibilidade de teclado usando a tecla Tab. Você deverá ser capaz de alternar entre todos os elementos interativos da interface do usuário usando a tecla Tab. Para elementos compostos da interface do usuário, verifique se é possível navegar entre os subelementos usando as teclas de seta. Finalmente, certifique-se de que é possível invocar todos os elementos interativos da interface do usuário com o teclado, geralmente usando Enter ou a tecla de espaço.

Verificar o contraste do texto visível

Use as ferramentas e os métodos recomendados pelo World Wide Web Consortium (W3C) para verificar se a taxa de contraste do texto visível é de pelo menos 4.5:1. As exceções incluem elementos da interface do usuário inativos, logotipos e texto decorativo que não transmita informações e possa ser rearranjado sem alterar o significado.

Verificar se o aplicativo está em alto contraste

Use o aplicativo com um tema de alto contraste ativo para verificar se todos os elementos da interface do usuário são exibidos corretamente. Todo o texto deve ser legível e todas as imagens devem ser nítidas. Se necessário, forneça versões separadas para serem usadas quando um tema de alto contraste estiver ativo.

Verificar o aplicativo com "Aumentar tudo na tela"

Verifique se seu aplicativo pode ser usado quando Aumentar o tamanho de todos os itens da tela está ativado na área Facilidade de Acesso de Configurações do PC do Windows 8. Confira se todos os controles estão acessíveis, se todo o texto está visível e se não há elementos da interface do usuário sobrepostos. Se você encontrar qualquer problema, siga as diretrizes para dimensionamento do layout e forneça recursos adicionais para diferentes fatores de escala. Para saber mais, veja Diretrizes para colocação em escala e Testando o layout do seu aplicativo.

Verifique os cenários do aplicativo principal usando o Narrator.

Use o Narrador para testar a experiência de leitura da tela do seu aplicativo.

Siga estas etapas para testar seu aplicativo usando o Narrador com um mouse e um teclado:

  1. Inicie o Narrador pressionando a tecla de logotipo do Windows + Enter.
  2. Navegue pelo aplicativo com o teclado usando a tecla Tab, as teclas direcionais e Caps Lock + teclas direcionais.
  3. Durante a navegação, ouça o Narrador enquanto ele lê os elementos da interface do usuário e verifique o seguinte:
    • Para cada controle, verifique se o Narrador lê todo o conteúdo visível. Verifique também se o Narrador lê o nome de cada controle, seu estado (marcado, selecionado e assim por diante) e o tipo do controle (botão, caixa de seleção, item de lista e assim por diante).
    • Para cada tabela, verifique se o Narrador lê corretamente o nome da tabela, sua descrição (se disponível) e os títulos de linhas e colunas.
    • Para cada região dinâmica, verifique se o Narrador anuncia mudanças de região dinâmica conforme especificado na marcação HTML através de atributos aria-live, atributos aria-atomic e assim por diante.
    • Se o elemento for interativo, verifique se é possível usar o Narrador para invocar a sua ação pressionando a tecla Caps Lock + Barra de espaço.
  4. Pressione Caps Lock + Enter para pesquisar o aplicativo e verificar se todos os controles aparecem na lista de pesquisa e se os nomes desses controles estão localizados e são legíveis.
  5. Desligue seu monitor e tente realizar os cenários do aplicativo principal usando apenas o teclado e o Narrador. Para ver a lista completa de comandos e atalhos do Narrador, pressione Caps Lock + F1.

Use estas etapas para testar seu aplicativo usando o modo de toque do Narrador:

Observação  O Narrador entra automaticamente no modo de toque em dispositivos que oferecem suporte para mais de 4 contatos. O Narrador não oferece suporte para cenários com vários monitores ou digitalizadores de toque múltiplo na tela principal.

  1. Familiarize-se com a interface do usuário e explore o layout.
    • Navegue pela interface do usuário usando gestos simples de movimento com o dedo. Use movimentos para a esquerda ou direita para se mover entre itens e movimentos para cima e para baixo para mudar a categoria de itens navegados. As categorias incluem todos os itens, links, tabelas, cabeçalhos e assim por diante. A navegação com gestos simples de movimento com o dedo é semelhante à navegação com Caps Lock + Seta.
    • Use gestos de tabulação para navegar através de elementos focalizáveis. Um gesto de passar três dedos para a direita ou esquerda equivale a navegar com Tab e Shift + Tab.
    • Investigue a interface do usuário espacialmente com um único dedo. Arraste um único dedo para cima e para baixo, ou para a esquerda ou direita, para que o Narrador leia os itens sob esse dedo. Você pode usar o mouse como alternativa, pois ele usa a mesma lógica de teste por pressionamento que o gesto de arrastar um único dedo.
    • Leia a janela inteira e todo o seu conteúdo com um gesto de passar três dedos para cima. Isso equivale a usar Caps Lock + W.

    Se houver um elemento importante da interface do usuário que você não consegue acessar, talvez exista um bug de acessibilidade.

  2. Interaja com um controle para testar suas ações principais e secundárias, bem como seu comportamento de rolagem.

    Ações principais incluem ativar um botão, inserir um sinal de intercalação de texto e definir o foco no controle. Ações secundárias incluem selecionar um item de lista ou expandir um botão que oferece várias opções.

    • Para testar uma ação principal: toque duas vezes ou pressione com um dedo e toque com o outro.
    • Para testar uma ação secundária: toque três vezes ou pressione com um dedo e toque duas vezes com o outro.
    • Para testar o comportamento de rolagem: use gestões de passar dois dedos para rolar na direção desejada.

    Alguns controles fornecem ações adicionais. Para exibir a lista completa, basta um único toque com quatro dedos.

    Se um controle responder ao mouse ou teclado, mas não responder a uma interação de toque principal ou secundária, talvez ele precise implementar padrões de controle da Automação da Interface do Usuário adicionais.

Tópicos relacionados

Tornando seu aplicativo acessível

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.