Testar um Aplicativo Oracle JET para Acessibilidade Somente para Teclado

Introdução

Este é o segundo tutorial na programação de estudo Identificar Problemas de Acessibilidade.

As WCAG (Web Content Accessibility Guidelines) 2.2 descrevem muitos dos critérios de sucesso para criar um aplicativo Web acessível. Este tutorial se concentra nos critérios que abordam o uso somente de teclado.

Um aplicativo acessível apenas por teclado pode ser usado com dispositivos de entrada alternativos para pessoas com mobilidade limitada ou incapacidade de manipular um mouse. Quando as pessoas podem usar um teclado, a internet está ao seu alcance.

Objetivos

Neste tutorial, você aprenderá a executar um teste somente de teclado de um aplicativo web.

Pré-requisitos

Tarefa 1: Preparar para Teste de Acessibilidade Somente para Teclado

A inspeção visual fornece uma visão geral da estrutura e da funcionalidade básica de uma página acessível. O teste somente com teclado está no centro do teste manual de acessibilidade; ele dá ao desenvolvedor a oportunidade de interagir com o aplicativo a partir da perspectiva de um usuário com deficiência. O subconjunto de Critérios de Sucesso WCAG 2.2 em torno do qual este tutorial se concentra envolve vários conceitos específicos.

Os critérios de sucesso mencionados no início desta seção abordam indiretamente o conceito de elementos focalizáveis, portanto, alguns termos precisam ser definidos.

Com estes conceitos aplicáveis definidos e explicados, você está preparado para testar o aplicativo inicial.

Observe o texto "Nenhuma Exceção" incluído entre parênteses do Critério de Sucesso 2.1.3. Isso significa que a acessibilidade do teclado é obrigatória.

A Diretriz WCAG 2.1 e o Critério de Sucesso que a segue ressaltam a necessidade absoluta de acessibilidade do teclado. O teclado desempenha um papel fundamental em trazer tecnologia para todos.

Tarefa 2: Verificar a existência de um foco visual

O teste de acessibilidade apenas com teclado depende exclusivamente do indicador de foco. A adesão ao seguinte Critério de Sucesso "Focus Visible" não é negociável. Os usuários desativados não podem navegar em um aplicativo sem um foco ativo ou quando o posicionamento do foco não está claro.

Como você guia através do aplicativo web, deve sempre haver um indicador visível identificando a localização do foco. O indicador é tipicamente um retângulo. Desabilitar o retângulo de foco causa uma falha desse critério.

Os desenvolvedores de aplicativos se orgulham dos aplicativos e programas que escrevem. Seu objetivo é integrar a função com uma experiência visualmente envolvente. Um retângulo de foco geralmente desvia o design; os desenvolvedores, portanto, muitas vezes o ocultam ou desativam e violam o Critério de Sucesso 2.4.7.

Retângulo de Foco 1

Retângulo de Foco 1

Retângulo de Foco 2

Retângulo de Foco 2

Localize o ponto de foco nas duas capturas de tela acima.

A primeira captura de tela, Retângulo de Foco 1, representa uma página com uma indicação correta do foco. O indicador de foco é muito evidente, pois envolve a guia Visão Geral no canto superior esquerdo da página. A segunda captura de tela, Retângulo de Foco 2, não tem qualquer indicação de foco na guia Visão Geral.

Observe o retângulo de foco enquanto navega pelos primeiros componentes focalizáveis na página Introdução.

  1. Se o seu aplicativo ainda não estiver em execução, navegue até a pasta ACCLearningPath e inicie-a.

    $ ojet serve

  2. Quando o aplicativo for aberto no navegador, pressione <Ctrl+L> para definir o foco na barra de endereços e, em seguida, pressione <Tab> para mover o foco para o link para ignorar navegação.

  3. Pressione <Tab> para mover o foco para john.hancock@oracle.com no menu do usuário, no canto superior direito da página.

  4. Pressione <Tab> para mover o foco para Introdução no menu de navegação principal imediatamente abaixo do menu do usuário.

  5. Pressione <down arrow> para mover o foco para Recursos no menu de navegação e pressione <Enter> para carregar a página Recursos.

    A Página Recursos

  6. Pressione <Tab> para mover o foco para o link Site Principal do Oracle JET.

    Observe que não há uma indicação clara da localização do foco. A página Recursos falhou no Critério de Sucesso 2.4.7.

    Nas etapas a seguir, você corrigirá o problema do retângulo de foco ausente para cumprir as normas WCAG.

  7. Navegue até a pasta ACCLearningPath/src/js/views e abra o arquivo resources.html em um editor de código.

  8. Localize o link para o Site Principal do Oracle JET.

    <li><a style="outline-width:0"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

    Altere "outline-width:0" para "outline-width:3" no atributo de estilo.

    <li><a style="outline-width:3"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

  9. Salve e feche resources.html.

    Seu arquivo deve ter uma aparência semelhante a resources-html.txt.

  10. Repita as etapas de 2 a 6 acima para verificar se o retângulo de foco está visível agora.

Tarefa 3: Verificar sequência de guias com significado

A próxima parte do teste somente de teclado envolve a organização de uma página como as guias do usuário através dela.

A ordem do foco pode ser melhor compreendida com uma ilustração. Como as guias do usuário na página, o local de foco não é aleatório. Ele não se move de um lado da página para o outro e volta novamente. Ele se move de uma forma esperada e lógica.

Na tarefa Verificar a Existência de um Foco Visual anterior, você viu como o foco foi movido em uma ordem esperada pelo banner da página; no entanto, a própria página Recursos foi codificada para ilustrar uma ordem de guias mais aleatória.

  1. No aplicativo em execução, pressione <Ctrl+L> para definir o foco na barra de endereços.
  2. Pressione <Tab> para mover o foco para o link ignorar navegação.
  3. Pressione <Tab> para mover o foco para john.hancock@oracle.com no menu do usuário, no canto superior direito da página.
  4. Pressione <Tab> para mover o foco para Introdução no menu de navegação principal.
  5. Pressione <Tab> para mover o foco para o link Site Principal do Oracle JET no corpo da página.

  6. Pressione <Tab>. O foco deve ser movido para o Oracle JET Developer's Guide, mas, em vez disso, deve ser movido para o link Oracle JET Cookbook.

    O link Oracle JET Developer's Guide não está na sequência de guias, o que viola os Critérios de Sucesso 2.4.3.

    As etapas de 7 a 11 descrevem o método necessário para retornar o link Oracle JET Developer's Guide para sua posição correta na sequência de guias. As etapas de 12 a 16 ilustram como confirmar se a correção funcionou.

  7. No seu editor de código, localize o link Oracle JET Developer's Guide no arquivo resources.html.

    <li><a tabindex="-1"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    O atributo tabindex="-1" remove esse link completamente da ordem de tabulação da página.

  8. Modifique o valor do atributo tabindex para 0 para retornar o link ao seu local adequado na sequência de guias da página.

    <li><a tabindex="0"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

  9. Salve e feche o arquivo. A página Recursos no browser é automaticamente atualizada com seu novo conteúdo.

  10. Pressione <Ctrl+L> para definir o foco na barra de endereços.

  11. Pressione <Tab> três vezes para mover o foco para Introdução no menu de navegação.

  12. Pressione <Tab> para mover o foco para o link Site Principal do Oracle JET.

  13. Pressione <Tab> para mover o foco para o link Oracle JET Developer's Guide.

  14. Continue pressionando <Tab> até que o foco seja colocado no link Sobre o Oracle no rodapé da página.

    Depois de navegar por todos os elementos focalizáveis em uma página, inverta o processo. Às vezes, quando a tabulação de turnos para trás através de uma página, o caminho muda inesperadamente, novos elementos aparecem ou alguns elementos desaparecem.

  15. Use <Shift+Tab> para mover de baixo para cima a fim de garantir que a sequência significativa seja verdadeira ao navegar ao contrário pela página.

Tarefa 4: Interagir com Controles

Muitos dos controles usados neste tutorial são controles específicos do Oracle JET. Um recurso do Oracle JET é que seus componentes são projetados com acessibilidade somente teclado já incorporada. Os desenvolvedores que usam o Oracle JET podem copiar componentes diretamente do Livro de Receitas do Oracle JET e colocá-los no local, e o código resultante fica acessível.

Por exemplo, aqui está uma breve lista de teclas comuns para interagir com componentes HTML padrão:

Observação: Para determinados controles, como menus de navegação, barras de guias, grupos de rádio e controles de grupo semelhantes, talvez seja necessário inserir a guia no controle e usar as teclas de seta para navegar dentro dele.

Use o aplicativo inicial em execução para interagir com vários componentes do Oracle JET.

  1. Pressione <Ctrl+L> para definir o foco na barra de endereços.

  2. Pressione <Tab> para mover o foco para o link ignorar navegação.

  3. Pressione <Tab> para mover o foco para john.hancock@oracle.com no menu do usuário, no canto superior direito da página.

    De acordo com a documentação do teclado do elemento <oj-menu-button>, pressionar <Space>, <Enter> ou <down arrow> abre o menu e pressionar <Escape> fecha o menu.

  4. Pressione <Space> para expandir o menu do usuário. O foco passa para Preferências.

  5. Pressione <down arrow> para mover para baixo a lista de itens de menu.

  6. Pressione <Escape> para fechar o menu do usuário.

  7. Pressione <Tab>. O foco é movido para Introdução no menu de navegação principal imediatamente abaixo do menu do usuário.

    Para obter informações adicionais sobre as teclas digitadas específicas para cada componente do Oracle JET, consulte o Oracle JET Keyboard and Gesture Guide.

Tarefa 5: Identificar uma Armadilha de Teclado

O tópico final introduzido no início deste tutorial envolve um conceito conhecido como armadilha do teclado. Uma trap do teclado ocorre quando um usuário não pode afastar o foco de um elemento da página usando <Tab>, <Shift+Tab> ou qualquer uma das teclas de seta.

Uma armadilha de teclado torna a página inteira inutilizável para um usuário somente de teclado. A solução comum para uma armadilha de teclado é reiniciar o aplicativo.

Vamos ser práticos!

Esta seção do tutorial fornece um exemplo detalhado de uma metodologia de teste somente para teclado.

Ao testar a página Organização do aplicativo, verifique se há sempre uma indicação visível da localização do foco e se o foco se move em um padrão previsível.

A página que você vai testar é acessada por meio da guia Organização na página Introdução.

A Página Organização

Use o aplicativo inicial para executar um teste de teclado da página Organização.

  1. Na página Recursos do aplicativo, pressione <Ctrl+L> para definir o foco na barra de endereços.

  2. Pressione <Tab> para mover o foco para o link ignorar navegação.

  3. Pressione <Tab> para mover o foco para john.hancock@oracle.com no menu do usuário, no canto superior direito da página.

  4. Pressione <Tab> para mover o foco para Introdução no menu de navegação principal abaixo do nome do usuário.

    De acordo com a documentação do teclado do elemento <oj-navigation-list>, use as teclas <up arrow> e <down arrow> para navegar pelos itens no menu de navegação principal.

  5. Pressione <Enter> para selecionar Introdução.

  6. Pressione <Tab> e depois <right arrow> para mover o foco para a guia Organização na barra de guias. Pressione <Enter> para carregar a página Organização.

    De acordo com a documentação do teclado do elemento <oj-tab-bar>, utilize as teclas de seta para se mover dentro da barra de guias.

  7. Pressione <Tab> para mover o foco para a exibição em árvore. O foco está no primeiro item focalizável, o nó Contabilidade.

    De acordo com a documentação do teclado do elemento <oj-tree-view>, use as teclas <up arrow> e <down arrow> para navegar entre nós na view em árvore.

  8. Pressione <right arrow> para expandir o nó de grupo Contabilidade na árvore e, em seguida, pressione <left arrow> para recolher o nó de grupo.

  9. Pressione <down arrow> duas vezes para mover o foco para o funcionário JONES no nó de grupo RESEARCH. Depois, pressione <Enter> para selecioná-lo.

    Um formulário aparecerá no lado direito da página com os detalhes do funcionário.

    Guia Organização com Form Detalhes do Funcionário

  10. Pressione <Tab> para mover o foco para o campo ID do funcionário.
  11. Pressione <Tab> para mover o foco para o campo Nome do funcionário.
  12. Pressione <Tab> para mover o foco para o campo Título do Cargo.

  13. Pressione <Tab> para mover o foco para o campo Data de Admissão e exibir uma grade de calendário expandida.

    De acordo com a documentação do teclado do elemento <oj-date-picker>, pressione as teclas de seta para alterar o foco da data na grade do calendário.

  14. Pressione <down arrow> e use as teclas de seta para mover o foco para uma data no seletor de data expandido. Depois, pressione <Enter> para selecionar uma data.

  15. Pressione <Tab> para mover o foco para o campo Salário.

    De acordo com a documentação do teclado do elemento <oj-input-number>, use <up arrow> para aumentar o valor do salário e use <down arrow> para diminuir o valor do salário.

  16. Pressione <Tab> e tente mover o foco para o campo ID do Gerente.

    Você notou que uma vez que o foco foi movido para o campo Salário, pressionar <Tab> ou <Shift+Tab> não moveu o foco para fora do campo? Este campo tem uma armadilha de teclado. Sem uma correção no código, a única maneira de sair da armadilha é atualizar a página.

Tarefa 6: Remover a Armadilha

  1. Navegue até a pasta src/js/views e abra o arquivo organization.html em um editor.

  2. Localize o elemento <oj-input-number> em que id="salary":

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1"
   on-blur="[[setKeyTrap]]">
</oj-input-number>

    Remova o atributo on-blur que causa a trap do teclado.

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1">
</oj-input-number>

  3. Salve o arquivo. Em seguida, repita as etapas na tarefa Identificar uma Armadilha de Teclado anterior para garantir que a armadilha do teclado tenha sido removida.

  4. Ao acessar o campo ID do Gerente, pressione <Tab> para mover o foco para os botões de opção Jobs.

    De acordo com a documentação do teclado do elemento <oj-radioset>, use <up arrow> para selecionar o botão anterior no grupo. Use o <down arrow> para selecionar o botão seguinte no grupo.

  5. Pressione <Tab> para mover o foco para o link Sobre o Oracle na seção de rodapé da página.

  6. Reverta o processo. Pressione <Shift+Tab> para voltar aos botões de opção Jobs. Continue pressionando <Shift+Tab> para voltar pela página para john.hancock@oracle.com no menu do usuário.

Lembre-se de consultar o Oracle JET Keyboard and Gestures Guide caso tenha dúvidas sobre os pressionamentos de tecla necessários para usar ou navegar em um componente do Oracle JET.

A fase de teste somente para teclado foi concluída.

Próxima Etapa

Prossiga para o próximo tutorial neste módulo.

Este tutorial faz parte do módulo Identificar Problemas de Acessibilidade.

Você pode retornar à página principal da programação de estudo de acessibilidade para acessar todos os módulos na acessibilidade.

Mais Recursos de Aprendizado

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal do Oracle Learning YouTube. Além disso, acesse education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.