Testar um Aplicativo Oracle JET para Acessibilidade: Inspeção Visual

Introdução

As WCAG (Web Content Accessibility Guidelines) 2.2 contêm um conjunto de mais de sessenta critérios de sucesso para criar um aplicativo Web acessível. Nesta programação de estudo, vamos nos concentrar em um subconjunto desses critérios que se concentra principalmente em:

Este tutorial se concentra em onde o teste de um aplicativo começa: a inspeção visual. Este tutorial e os dois que o seguem, Testar um Aplicativo Oracle JET para Acessibilidade Somente para Teclado e Executar Validação de Leitor de Tela em um Aplicativo Oracle JET, irão orientá-lo nas etapas de teste necessárias. Você deve concluir esses três tutoriais de teste antes de continuar a programação de estudo.

O primeiro passo na avaliação de um aplicativo web para acessibilidade é realizar uma revisão visual do aplicativo. Durante a revisão, procure os seguintes itens:

Objetivos

Neste tutorial, você aprenderá a executar um teste de acessibilidade manual de um aplicativo Web, bem como aprenderá como a estrutura do Oracle JavaScript Audit pode ajudar a encontrar problemas de acessibilidade.

Pré-requisitos

Tarefa 1: Preparar o Aplicativo Starter

Estamos usando um aplicativo inicial do Oracle JET 13.0 Nav Drawer nesta programação de estudo.

  1. No local do sistema de arquivos onde você deseja que o aplicativo resida, extraia o arquivo baixado ACCLearningPath.zip em uma pasta ACCLearningPath.

  2. Abra uma janela de terminal e verifique se a versão mais recente da CLI (interface de linha de comando) do Oracle JET está instalada (a versão 13.0 ou posterior é necessária).

    $ ojet --version

    Se a versão mais recente da CLI do Oracle JET for exibida, a instalação estará correta. Caso contrário, reinstale usando o comando npm install para sua plataforma.

    • Para Windows:

       $ npm install -g @oracle/ojet-cli

    • Para sistemas Mac e Linux:

       $ sudo npm install -g @oracle/ojet-cli

      Após a conclusão da instalação, a CLI do Oracle JET mostra um resumo de todas as alterações.

  3. Navegue até o diretório ACCLearningPath e restaure o conjunto de ferramentas do aplicativo Oracle JET.

    $ ojet restore

  4. Execute o aplicativo.

    $ ojet serve

    O conjunto de ferramentas do Oracle JET executa seu aplicativo em um web browser local. O navegador é aberto na página Introdução do aplicativo, com a guia Visão Geral carregada. O aplicativo está pronto para uso.

    Deixe a janela do terminal e o navegador aberto para que seu aplicativo seja atualizado automaticamente com as alterações que você fizer.

Tarefa 2: Auditar o Aplicativo

O Oracle JET Audit Framework (JAF) é um utilitário de linha de comando e uma API de suporte projetada para auditar os arquivos de um aplicativo Oracle JET, com base nas opções de runtime encontradas em um arquivo de configuração. As mensagens de diagnóstico retornadas pela auditoria de um aplicativo derivam de conjuntos de regras incorporados que são específicos da versão da release do JET do aplicativo. No entanto, a estrutura de auditoria é extensível, e os usuários podem estender seus recursos escrevendo regras personalizadas.

As auditorias do Oracle JAF podem ajudar a identificar a acessibilidade e outros problemas em seus aplicativos, embora não encontrem todos os problemas de acessibilidade que abordaremos no aplicativo ACCLearningPath. É por isso que, além de auditar o aplicativo, você deve seguir o procedimento e as etapas descritas nesta programação de estudo Identificar Problemas de Acessibilidade para encontrar e resolver problemas de acessibilidade. Uma auditoria JAF deve ser executada no início de tornar o aplicativo de amostra acessível, a fim de identificar possíveis problemas em seu aplicativo antes de iniciar seu trabalho. Para obter mais informações sobre o Oracle JAF, consulte Usando e Estendendo o Oracle JET Audit Framework.

Faça download do Oracle JAF e use-o no modo CLI para verificar problemas de acessibilidade.

  1. Use o npm para instalar a CLI do Oracle JAF.

    Abra uma janela de terminal e verifique se há versões instaladas do Oracle JAF.

    $ ojaf -v

    Se não estiver instalado ou se a sua versão do JAF não for a versão atual, desinstale as versões mais antigas e instale a versão mais atual.

    $ npm uninstall -g @oracle/oraclejet-audit

    $ npm install -g @oracle/oraclejet-audit

  2. Navegue até o diretório ACCLearningPath do seu aplicativo e use o flag de linha de comando --init para inicializar uma configuração JAF padrão.

    $ ojaf --init

    O conjunto de ferramentas efetua scaffolds do arquivo de configuração JAF padrão oraclejafconfig.json no diretório ACCLearningPath e define as definições de configuração padrão com base no arquivo de configuração do aplicativo JET oraclejetconfig.json, também localizado no diretório raiz do aplicativo.

  3. Abra o oraclejafconfig.json no editor e certifique-se de que o valor da propriedade jetVer esteja correto para a versão do JET que você deseja auditar (por exemplo, 13.0, 13.1 e assim por diante).

    "builtinJetRules": true,
   "jetVer": "13.0",

    Você pode personalizar sua auditoria de aplicativo adicionando ou alterando propriedades do JAF no arquivo oraclejafconfig.json. Uma descrição completa das opções de configuração é encontrada em Sobre as Propriedades do Arquivo de Configuração do Oracle JAF.

  4. Antes de auditar o aplicativo pela primeira vez, você pode confirmar a configuração padrão dos arquivos que o JAF auditará usando o flag de linha de comando --dryrun.

    $ ojaf --dryrun

    Um dryrun não audita o aplicativo, mas confirma os arquivos a serem auditados com base nas definições atuais de configuração do JAF.

    Observação: Você pode obter uma lista completa de flags de linha de comando informando o comando ojaf --help.

  5. Execute uma auditoria do seu aplicativo informando o comando para chamar o utilitário de auditoria JAF.

    $ ojaf

  6. Quando você executa a auditoria, o Oracle JAF pesquisa o diretório oraclejafconfig.json e cria um relatório de auditoria.

    O relatório listará os problemas de quebra de regras encontrados no aplicativo, bem como suas localizações nos arquivos do aplicativo. Além disso, o relatório inclui um resumo dos problemas encontrados e suas severidades, as regras auditadas e os arquivos auditados.

    Relatório de Auditoria JAF

    Na lista de problemas do relatório de auditoria, observe o problema do nível de severidade blocker encontrado no arquivo departments.html: 'aria-label' or 'aria-labelledby' missing on <oj-film-strip>.

    Está faltando uma propriedade aria-label no componente film-strip no aplicativo, o que pode impedir que um leitor de tela acesse a identidade do componente. Este é um dos problemas de acessibilidade que abordaremos em tutoriais posteriores.

Este é o fim da discussão sobre o Oracle JAF nesta programação de estudo. Quando terminar de auditar seu aplicativo, lembre-se de excluir a pasta jaftmp@ e o arquivo oraclejafconfig.json do diretório ACCLearningPath.

Tarefa 3: Revisar a Estrutura da Página

A estrutura da página é o ponto de partida lógico para a inspeção visual de um aplicativo. Os cabeçalhos HTML fornecem uma descrição do conteúdo da página sem se concentrar em detalhes. Os leitores de tela fornecem atalhos para permitir que os usuários se movam rapidamente entre cabeçalhos marcados corretamente.

Use o aplicativo ACCLearningPath para revisar a estrutura da página.

  1. No aplicativo em execução, determine se as seções das páginas são identificadas por cabeçalhos.

    O texto dos cabeçalhos é maior ou com estilo diferente do texto regular na página. Crie cabeçalhos HTML verdadeiros usando tags <h1> por meio de tags <h6>.

  2. Determine se o texto de cada cabeçalho descreve adequadamente o conteúdo associado a ele.

    Examine a guia Visão Geral da página Introdução. O terceiro painel mais à direita tem o cabeçalho Espaçamento de Texto. O conteúdo deste painel diz respeito ao ajuste do espaçamento de texto. Portanto, este cabeçalho é um exemplo de um cabeçalho adequadamente descritivo.

  3. Use a guia Elementos do Chrome DevTools para determinar se os cabeçalhos são verdadeiros cabeçalhos HTML ou texto projetado para se assemelhar a eles.

    • Clique com o botão direito do mouse no cabeçalho A Página de Introdução e selecione Inspecionar no menu de contexto para exibir a estrutura do Modelo de Objeto de Documento (DOM) da página.

      O elemento destacado na árvore DOM, exibido no painel DevTools Elementos, emprega o método correto de criação de um cabeçalho HTML.

       <h4>The Introduction Page</h4>

    • Feche o DevTools e clique com o botão direito do mouse no cabeçalho A Página Recursos e selecione Inspecionar no menu de contexto.

      O elemento destacado nesta árvore DOM é o texto estilizado para se parecer com um cabeçalho HTML.

       <span class="h4Style">The Resources Page</span>

      Um leitor de tela não detectará este código como um título. Os usuários de leitor de tela geralmente navegam em uma página por cabeçalhos, e o texto estilizado para se assemelhar a cabeçalhos é ignorado. Nas etapas a seguir, você corrigirá o cabeçalho codificado incorretamente. Deixe seu aplicativo em execução e o navegador aberto para observar como as alterações a seguir afetam o aplicativo.

  4. Navegue até a pasta ACCLearningPath/src/js/views e abra overview.html no seu editor de código.

  5. Localize a tag <span class="h4Style">.

  6. Substitua a tag <span class="h4Style"> por uma <h4>.

  7. Substitua a tag </span> por uma </h4>.

  8. Salve o arquivo e veja as alterações no seu aplicativo no navegador.

Tarefa 4: Revisar o Título da Página

Uma inspeção visual do aplicativo inclui uma avaliação da eficácia do título da página.

Navegue pelo aplicativo inicial em execução e veja o título de cada página.

  1. Determine se o título da página identifica claramente a página, a guia e o nome do aplicativo.

  2. Determine se o título da página muda à medida que você navega entre as páginas ou entre as guias da página Introdução.

    O título da página deve ser alterado para cada nova página ou guia exibida. Por exemplo, quando a opção Introdução é selecionada no menu principal no canto superior direito da página, o título precisa ler "Introdução" e, quando a opção Recursos é selecionada, o título deve ler "Recursos".

    O título da página Introdução deve incluir a palavra "Introdução" e o nome da guia selecionada no momento. Quando você seleciona uma guia diferente na barra de guias, o título deve ser alterado para refletir a guia recém-selecionada.

    • Introdução - Visão Geral
    • Introdução - Organização
    • Introdução - Funcionários
    • Introdução - Departamentos

    Da mesma forma, o título da página Recursos deve incluir a palavra "Recursos".

    Você observará que o título da página não é alterado quando você navega entre páginas ou guias. Este problema será corrigido em um tutorial posterior.

Quando houver conteúdo repetido, como links de navegação e logotipos no cabeçalho da página de um aplicativo da Web, inclua um link para ignorar navegação. Os padrões do setor sugerem que o link para ignorar navegação deve ser ocultado até que seja acessado por tabulação.

Teste a existência do link para ignorar navegação no aplicativo em execução no navegador.

  1. No aplicativo, pressione <Ctrl+L> para mover o foco para a barra de endereços.

  2. Pressione <Tab> para fazer com que o link ignorar navegação apareça e receba foco.

    Como nenhum link para ignorar a navegação é exibido, o foco vai para o primeiro elemento focalizável na página: john.hancock@oracle.com no menu do usuário no canto superior direito da página. Elementos focalizáveis são definidos com mais detalhes no tutorial Acessibilidade Somente do Teclado.

    Você determinou durante o teste que o aplicativo inicial não tem um link skip nav implementado.

    Há três etapas para adicionar o link ignorar navegação:

    1. Adicione o link ao arquivo index.html.
    2. Adicione uma classe de estilo ao arquivo app.css para ocultar o link para ignorar navegação até ser tabulado nele.
    3. Adicione as âncoras de destino aos arquivos intro.html e resources.html.

Atualizar o arquivo index.html

O arquivo index.html define a estrutura abrangente do aplicativo Web do Oracle JET. O link para ignorar navegação precisa ser colocado nesta página.

  1. Navegue até o diretório ACCLearningPath/src e abra index.html em um editor de código.

  2. Localize a tag <body>.

    <body class="oj-web-applayout-body">
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

  3. Insira um link com seu destino como #main entre a tag <body> e o comentário que a segue.

    <body class="oj-web-applayout-body">
   <a class="hideSkipNav" href="#main">Skip to main content</a>
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

    A classe hideSkipNav fará com que o link fique invisível até que o usuário comece na parte superior da página e pressione <Tab>.

  4. Salve e feche index.html. Seu arquivo deve ter uma aparência semelhante a index-html.txt.

Atualizar o arquivo app.css

Nós referenciamos a classe de estilo hideSkipNav no arquivo index.html. Agora precisamos defini-lo em app.css. Todas as definições de estilo personalizadas estão localizadas neste arquivo.

  1. Navegue até a pasta ACCLearningPath/src/css e edite app.css.

  2. Adicione a classe de estilo e as propriedades .hideSkipNav ao final do arquivo.

    .hideSkipNav { 
   position: absolute;
   left: -1000px; }

.hideSkipNav:focus {
   position: unset;
   left: 0px; }

  3. Salve e feche app.css. Seu arquivo deve ter aparência semelhante a app-css.txt.

Atualizar os Arquivos HTML das Páginas

Como o destino do link para ignorar a navegação deve estar na parte superior do conteúdo principal de cada página, adicione as tags de âncora de destino às páginas Introdução e Recurso.

  1. Navegue até a pasta ACCLearningPath/src/js/views e edite o arquivo intro.html.

  2. Localize a <div> com a classe oj-hybrid-padding.

    <div class="oj-hybrid-padding">
   <div id="mainContainer">

  3. Insira a tag de âncora e o cabeçalho h2 entre as duas tags <div>.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Introduction</h2>
</a>
   <div id="mainContainer">

    O código adicionado fornece não apenas o destino do link para ignorar navegação, mas também um cabeçalho h2 para melhorar a estrutura da página.

  4. Salve e feche intro.html. Seu arquivo deve ter uma aparência semelhante a intro-html.txt.

  5. Abra resources.html no seu editor de código e localize o <div> com a classe oj-hybrid-padding.

    <div class="oj-hybrid-padding">
   <ul>

  6. Insira a tag de âncora e o cabeçalho h2 entre as tags <div> e <ul>.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Resources</h2>
</a>
   <ul>

  7. Salve e feche resources.html. Seu arquivo deve ter aparência semelhante a recursos-html.txt.

  8. No aplicativo em execução, pressione <Ctrl+L> para mover o foco para a barra de endereços.

  9. Pressione <Tab> para fazer com que o link ignorar navegação apareça e receba foco.

  10. Pressione <Enter> para ativar o link para ignorar navegação.

    O foco é então movido para o conteúdo principal da página.

    Depois de testar a funcionalidade do link ignorar navegação, passe para o próximo elemento da inspeção visual.

Tarefa 6: Verificar o Uso de Cor e Posição

Os botões são parte integrante das direções que movem um usuário de uma página ou ação para a próxima. Os desenvolvedores aprimoram a aparência e a funcionalidade de uma página com o uso de botões coloridos. "Pressione o botão verde para continuar" é uma instrução comum. No entanto, sem rotulagem adequada, os usuários com deficiência visual não podem seguir essas instruções e instruções semelhantes.

O painel central da página Visão geral contém uma barra de ferramentas com três botões coloridos, bem como algumas instruções para pressionar botões com base em sua cor e posição. Um usuário cego ou daltônico não consegue distinguir entre os botões porque eles não têm rótulos ou outros recursos distintivos. Este conjunto de botões falha nos Critérios de êxito 1.3.3 e 1.4.1.

Uso de instruções de cor

Cada um dos botões coloridos no painel central deve ter um rótulo de texto associado a ele. As alterações a seguir adicionarão nomes de cores como rótulos aos botões.

  1. Navegue até a pasta ACCLearningPath/src/js/views e edite o arquivo overview.html.

  2. Localize o conjunto de três elementos oj-button.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">
</oj-button>

  3. Modifique os botões no código para criar os identificadores de cor.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">Green
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">Red
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">Purple
</oj-button>

  4. Salve overview.html e verifique se os botões agora têm labels de texto apropriados.

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

Tarefa 7: Verificar Legibilidade

A fase final da inspeção visual é específica para usuários com baixa visão. Determine se ajustar a linha, a palavra e o espaçamento de caracteres ou alterar o nível de zoom da página aumenta ou diminui a legibilidade.

Usaremos a página Visão Geral para ilustrar esses critérios e verificar o espaçamento de texto e ampliar o aplicativo.

Verificar espaçamento e zoom do texto

  1. No aplicativo em execução, examine o painel mais à direita da página, intitulado Espaçamento de Texto. O painel contém duas seções. Compare o texto em ambas as seções para garantir que todo o texto esteja presente.

    A parte superior do painel tem texto com espaçamento normal. A parte inferior contém o mesmo texto com maior espaçamento entre caracteres, palavras e linhas.

    Se nenhum dos caracteres da seção inferior estiver distorcido, cortado ou sobreposto, a página atenderá ao Critério de Sucesso 1.4.12.

  2. Aumentar o nível de zoom do navegador para 200%. Clique no ícone de zoom da lupa na barra de ferramentas e, em seguida, clique no sinal de + para aumentar o zoom.

    Se todo o texto for legível e o texto for encapsulado corretamente dentro de cada painel, a página atenderá ao Critério de Sucesso 1.4.4 com uma ampliação de 200%.

    • Refluxo do Critério de Sucesso 1.4.10 afirma: "O conteúdo pode ser apresentado sem perda de informações ou funcionalidade e sem exigir rolagem em duas dimensões para:
      • Conteúdo de rolagem vertical em uma largura equivalente a 320 pixels em CSS;
      • Conteúdo de rolagem horizontal em uma altura equivalente a 256 pixels em CSS. Exceto para partes do conteúdo que exigem layout bidimensional para uso ou significado.

    A página deve ser reformatada para exigir rolagem em apenas uma direção. Uma página é rolada horizontal ou verticalmente, mas não em ambas as direções. O Critério de Sucesso 1.4.10 facilita a utilização das páginas.

  3. Aumentar o zoom para 400%.

  4. Examine a página quanto à aparência das barras de rolagem. Se aparecerem barras de rolagem horizontais e verticais, a página falhará nesse critério.

A fase de teste inicial está 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.