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

Introdução

O WCAG (Web Content Accessibility Guidelines) 2.1 contém um conjunto de mais de sessenta critérios de sucesso para a criação de um aplicativo web acessível. Nesta programação de estudo, focaremos em um subconjunto desses critérios que se concentra principalmente em:

Este tutorial se concentra no início do teste de um aplicativo: a inspeção visual. Este tutorial e os dois que o seguem, Test an Oracle JET App for Keyboard-Only Accessibility e Perform Screen-Reader Validation on an Oracle JET App, orientarão você pelas 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 acessibilidade de um aplicativo web é realizar uma revisão visual do aplicativo. Durante a revisão, procure os seguintes itens:

Objetivos

Neste tutorial, você vai aprender a executar um teste manual de acessibilidade 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 Inicial

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

  1. No local do seu sistema de arquivos onde você deseja que o aplicativo resida, extraia o ACCLearningPath.zip baixado para 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

      Depois que a instalação for concluída, a CLI do Oracle JET mostrará um resumo de todas as alterações.

  3. Navegue até o diretório ACCLearningPath e restaure as 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 ser usado.

    Deixe a janela do terminal e o navegador abertos para que seu aplicativo seja atualizado automaticamente com todas 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 projetado para auditar os arquivos de um aplicativo Oracle JET, com base nas opções de runtime que ele encontra 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 ampliar seus recursos gravando 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 de Identificar Problemas de Acessibilidade para encontrar e tratar problemas de acessibilidade. Uma auditoria JAF deve ser executada no início de tornar o aplicativo de amostra acessível, para 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 no modo CLI e use-o para verificar os problemas de acessibilidade.

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

    Abra uma janela de terminal e verifique as versões instaladas do Oracle JAF.

    $ ojaf -v

    Se não estiver instalado ou se sua versão do JAF não for a release 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 da linha de comando --init para inicializar uma configuração JAF padrão.

    $ ojaf --init

    O conjunto de ferramentas fornece o 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 oraclejafconfig.json no seu 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 a auditoria do seu aplicativo adicionando ou modificando 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

    Uma execução não faz auditoria do aplicativo, mas confirma os arquivos a serem auditados com base nas definições de configuração atuais do JAF.

    Observação: você pode obter uma lista completa de sinalizadores de linha de comando digitando 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 para oraclejafconfig.json e cria um relatório de auditoria.

    O relatório listará os problemas de quebra de regras encontrados no aplicativo, bem como seus locais 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

    Descrição da ilustração jaf-report.png

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

    Uma propriedade aria-label não foi encontrada no componente de faixa de filme 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 do 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. Cabeçalhos HTML fornecem um resumo do conteúdo da página sem focar em detalhes. Os leitores de tela fornecem atalhos para permitir que os usuários se movam rapidamente entre os 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 tem um estilo diferente do texto regular na página. Crie cabeçalhos HTML verdadeiros usando as tags <h1> a <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 do texto. Por conseguinte, este título é um exemplo de um título suficientemente 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 DOM (Document Object Model) 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 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 é um texto com estilo para se parecer com um cabeçalho HTML.

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

      Um leitor de tela não detectará esse código como um título. Os usuários do leitor de tela costumam navegar em uma página por cabeçalhos, e o texto com estilo semelhante 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 editor de código.

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

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

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

  8. Salve o arquivo e visualize as alterações feitas 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 examine 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 será alterado à 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 Introdução é selecionado no menu principal no canto superior direito da página, o título precisa ler "Introdução" e, quando Recursos é selecionado, 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 da 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 as 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 web, inclua um link para ignorar navegação. Os padrões do setor sugerem que o link para ignorar a navegação deve ser ocultado até ser acessado por tabulação.

Teste a existência do link para ignorar navegação no aplicativo executado no browser.

  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 para ignorar navegação apareça e receba foco.

    Como nenhum link para ignorar 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 em mais detalhes no tutorial Acessibilidade Somente por Teclado.

    Você determinou durante o teste que o aplicativo inicial não tem um link para ignorar navegação implementado.

    Há três etapas para adicionar o link para 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é tabular para ele.
    3. Adicione as âncoras de destino aos arquivos intro.html e resources.html.

Atualize o Arquivo index.html

O arquivo index.html define a estrutura abrangente do aplicativo Web 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 o 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 inicie na parte superior da página e pressione <Tab>.

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

Atualize o Arquivo app.css

Referenciamos a classe de estilo hideSkipNav no arquivo index.html. Agora precisamos defini-la 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 .hideSkipNav e as propriedades ao final do arquivo.

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

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

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

Atualizar os Arquivos HTML das Páginas

Como o destino do link para ignorar 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 <div> com a classe oj-hybrid-padding.

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

  3. Insira a tag de âncora e o título 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. O arquivo deve ter uma aparência semelhante a intro-html.txt.

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

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

  6. Insira a tag de âncora e o título 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. O arquivo deve ter uma aparência semelhante a resources-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 para ignorar navegação apareça e receba foco.

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

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

    Depois de testar a funcionalidade do link para ignorar navegação, vá 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 outra. 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 a rotulagem adequada, os usuários com deficiência visual não podem seguir estas 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 suas cores e posições. Um usuário cego ou cego não consegue distinguir entre os botões porque eles não têm rótulos ou outros recursos de distinção. Este conjunto de botões falha nos Critérios de Sucesso 1.3.3 e 1.4.1.

Uso de Instruções de Cor

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

Cada botão colorido 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 rótulos de texto apropriados.

    O 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 o ajuste do espaçamento de linha, palavra e caractere ou a alteração do 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 o zoom no aplicativo.

Verificar espaçamento e zoom de texto

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

  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 um aumento de caractere, palavra e espaçamento de linha.

    Se nenhum dos caracteres da seção inferior estiver distorcido, recortado 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 de lupa na barra de ferramentas e, em seguida, clique no sinal + para aumentar o zoom.

    Se todo o texto for legível e o texto for inserido corretamente dentro de cada painel, a página atenderá ao Critério de Sucesso 1.4.4 com aumento 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 CSS;
      • Conteúdo de rolagem horizontal em altura equivalente a 256 pixels em CSS. Exceto por 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 horizontalmente ou verticalmente, mas não em ambas as direções. O Critério de Sucesso 1.4.10 facilita o uso das páginas.

  3. Aumente o zoom para 400%.

  4. Examine a página para ver a aparência das barras de rolagem. Se as barras de rolagem horizontal e vertical aparecerem, a página não atenderá a esse critério.

A fase de teste inicial foi concluída. O próximo tutorial dentro dessa programação de estudo é Testar um Aplicativo Oracle JET para Acessibilidade Somente por Teclado.

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.