Testar um Aplicativo Oracle JET para Acessibilidade Somente do Teclado

Introdução

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

A WCAG (Web Content Accessibility Guidelines) 2.1 descreve muitos dos critérios de sucesso para criar um aplicativo Web acessível. Este tutorial se concentra naqueles critérios que tratam do 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 alcance deles.

Objetivos

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

Pré-requisitos

Tarefa 1: Preparar para o Teste de Acessibilidade Somente do 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 de teclado está no centro do teste manual de acessibilidade; ele dá ao desenvolvedor a oportunidade de interagir com o aplicativo da perspectiva de um usuário desativado. O subconjunto de WCAG 2.1 Success Criteria em torno do qual este tutorial se concentra envolve vários conceitos específicos.

Como os critérios de sucesso mencionados no início desta seção abordam indiretamente o conceito de elementos focalizáveis, é necessário definir alguns termos.

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

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

A Diretriz 2.1 da WCAG e o Critério de Sucesso que a segue enfatizam a necessidade absoluta de acessibilidade de 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 Critério de Sucesso "Foco Visível" a seguir 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.

À medida que você passa o aplicativo da Web, sempre deve haver um indicador visível que identifique a localização do foco. Normalmente, o indicador é um retângulo. A desativação do retângulo de foco causa uma falha desse critério.

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

Retângulo de Foco 1

Retângulo de Foco 1

Descrição da ilustração focus_rec1.png

Retângulo de Foco 2

Retângulo de Foco 2

Descrição da ilustração focus_rec2.png

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 de foco. O indicador de foco é muito evidente, pois envolve a guia Visão Geral na parte superior esquerda da página. A segunda captura de tela, Retângulo de Foco 2, não tem nenhuma 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 abrir em seu browser, pressione <Ctrl+L> para definir o foco na barra de endereços e, em seguida, pressione <Tab> para mover o foco para o link de navegação para ignorar.

  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

    Descrição da ilustração resources_page.png

  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. Falha na página Recursos - Critério de Sucesso 2.4.7.

    Nas etapas a seguir, você corrigirá o problema do retângulo de foco ausente para atender às 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 do 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.

    O 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 uma Sequência de Guias Significativa

A próxima peça para o teste somente de teclado envolve a organização de uma página conforme o usuário a guia.

A ordem de foco pode ser melhor compreendida com uma ilustração. À medida que o usuário percorre a 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 forma esperada e lógica.

Na tarefa anterior Verificar a Existência de um Foco Visual, você viu como o foco foi movido em uma ordem esperada pelo banner da página; no entanto, a página Recursos foi codificada para ilustrar uma ordem de tabulação 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 de navegação para ignorar.

  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 Focus deve passar para o Oracle JET Developer's Guide, mas passar para o link Oracle JET Cookbook.

    O link Oracle JET Developer's Guide não está na sequência de guias, 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 que a correção funcionou.

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

    <li><a tabindex="-1"
   href="https://docs.oracle.com/en/middleware/developer-tools/jet/13/books.html"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    O atributo tabindex="-1" retira esse link completamente da ordem de guias da página.

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

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

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

  10. Pressione <Ctrl+L> para focar 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 apareça no link Sobre a Oracle no rodapé da página.

    Depois de navegar por todos os elementos focalizáveis em uma página, reverta o processo. Às vezes, ao passar o cursor para trás em uma página, o caminho muda inesperadamente, novos elementos são exibidos ou alguns elementos desaparecem.

  15. Use <Shift+Tab> para mover-se em uma ordem de baixo para cima para garantir que a sequência significativa seja verdadeira durante a navegação inversa na 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 de teclado já incorporada. Os desenvolvedores que usam o Oracle JET podem copiar componentes diretamente do Oracle JET Cookbook e soltá-los no local, e o código resultante está acessível.

Por exemplo, aqui está uma breve lista de pressionamentos de tecla 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 colocar 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 focar na barra de endereços.

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

  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 muda para Preferências.

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

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

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

    Para obter informações adicionais sobre os pressionamentos de tecla específicos 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 armadilha do teclado ocorre quando um usuário não pode mover o foco de um elemento na página usando <Tab>, <Shift+Tab> ou qualquer uma das teclas de seta.

Uma captura de teclado torna inutilizável a página inteira para um usuário que só tem 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ê testará é acessada por meio da guia Organização da página Introdução.

A Página da Organização

Descrição da ilustração org_page.png

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 de navegação para ignorar.

  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, em seguida, <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>, use 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 termina no primeiro item focá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 os nós na exibição em árvore.

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

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

    Um formulário será exibido no lado direito da página com detalhes do funcionário.

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

    Descrição da ilustração org_page_form.png

  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, em seguida, use as teclas de seta para mover o foco para uma data no seletor de data expandido. Então 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 movido o foco para o campo Salário, pressionar <Tab> ou <Shift+Tab> não moveu o foco para fora do campo? Este campo tem uma armadilha do teclado. Sem uma correção no código, a única maneira de sair do trap é 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 interceptação 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 anterior Identificar uma Trap do Teclado para garantir que a interceptação 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 <down arrow> para selecionar o botão Próximo no grupo.

  5. Pressione <Tab> para mover o foco para o link Sobre a 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 se você tiver dúvidas sobre os pressionamentos de tecla necessários para usar ou navegar dentro de um componente do Oracle JET.

A fase de teste somente do teclado foi concluída. Prossiga para o tutorial final nesta programação de estudo, Executar Validação do Leitor de Tela em um Aplicativo Oracle JET.

Mais Recursos de Aprendizagem

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

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