Testar a navegação do teclado em componentes complexos do Oracle JET

Introdução

Esta será a nossa primeira olhada na guia Departamentos no aplicativo ACCLearningPath. O processo de revisão descrito na programação de estudo anterior nesta série de acessibilidade é seguido para identificar quaisquer problemas de acessibilidade.

Objetivos

Neste tutorial, você aprenderá a identificar e corrigir os problemas de acessibilidade na guia Departamentos do aplicativo ACCLearningPath.

Pré-requisitos

Um ambiente de desenvolvimento configurado para criar aplicativos Oracle JET com a interface de linha de comando JavaScript runtime, Node.js e Oracle JET release 13.0 (ou posterior) instalada
Acesso ao Guia do Desenvolvedor do Oracle JET
Acesso ao Guia de Gestos e Teclado do Oracle JET
Conclusão do tutorial anterior nesta programação de estudo, Verificar a Acessibilidade da Tabela e da Mensagem de Componentes do Oracle JET

Tarefa 1: Revisar a Estrutura da Página

Na janela do terminal, navegue até a pasta ACCLearningPath e execute o aplicativo.
```
$ ojet serve
```
O aplicativo no navegador abrirá a página Introdução com a guia Visão Geral carregada.
Clique na guia Departamentos na barra de guias e avalie a estrutura da página. A página Departamentos consiste em três painéis, onde cada painel exibe dados de departamento usando vários componentes do Oracle JET.
Navegue até a pasta ACCLearningPath/src/js/views e abra o arquivo departments.html em um editor de código.

Localize a tag <div> principal no arquivo.

<div class="oj-hybrid-padding">
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Insira um cabeçalho h3 entre as duas tags <div> para identificar a página Departamentos.

<div class="oj-hybrid-padding">
   <h3>Departments</h3>
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Localize a tag <div> que define o painel do meio que contém uma filmstrip.

<div class="oj-flex-item fs-container">
   <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
      . . . >

Insira um cabeçalho h4 entre as tags de abertura <div> e <oj-filmstrip> para identificar o painel e fornecer um rótulo visível para o filme.

<div class="oj-flex-item fs-container">
   <h4>Departments Film Strip</h4>
   <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
      . . . >

Localize a tag <div> que forma o painel esquerdo que contém uma grade de dados.

<div class="oj-flex-item">
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Insira um cabeçalho h4 entre as tags <div> e <oj-data-grid> para identificar o painel e fornecer um rótulo visível para a grade de dados.

<div class="oj-flex-item">
   <h4>Departments Data Grid</h4>
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Localize a tag de abertura <div> que forma o terceiro painel que contém um gráfico.

  <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
        . . . >

Insira um cabeçalho h4 entre as tags de abertura <div> e <oj-chart>. Este cabeçalho identifica o painel e serve como um rótulo visual para o gráfico.

  <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <h4>Salaries by Department</h4>
     <oj-chart id="pieChart"
        type="bar"
        data="[[chartDataProvider]]"
        animation-on-display="auto"
        animation-on-data-change="auto"
        . . . >

Salve o arquivo. No navegador, verifique as alterações na guia Departamentos do seu aplicativo.

Tarefa 2: Executar um Teste Somente de Teclado

A segunda parte da revisão de acessibilidade é realizar um teste somente de teclado da guia Departamentos do aplicativo.

Pressione <Ctrl+L> para definir o foco na barra de endereços.
Pressione <Tab>. O foco é movido para o link ignorar navegação.
Pressione <Tab>. O foco é movido para john.hancock@oracle.com no menu do usuário no canto superior direito da página.
Pressione <Tab>. O foco é movido para Introdução no menu de navegação imediatamente abaixo do menu do usuário.
Pressione <Tab>. O foco é movido para Visão Geral na barra de guias.
Pressione <Tab>. O foco é movido para Contabilidade no filme.
Pressione <right arrow> para ir para a próxima entrada, Pesquisa, no filme.
Pressione <left arrow> para voltar para Contabilidade no filme.
Pressione <right arrow> três vezes. O foco é movido para a última entrada no filme, Operações.
Pressione <Tab>. O foco é movido para a primeira célula do corpo de dados na grade de dados, na coluna Id. O valor da célula focada é 10.
Pressione <right arrow>. O foco é movido para Contabilidade na segunda coluna da grade de dados, Nome.
Pressione <right arrow>. O foco é transferido para Nova York na coluna final da grade de dados, Local.

Observe que a estrutura de tópicos do foco aparece ao redor da célula que contém o nome da cidade.
Pressione <F2>. O contorno do foco se restringe apenas ao texto Nova York na célula.

De acordo com a documentação do teclado do elemento <oj-data-grid>, use <F2> para tornar o conteúdo da célula acionável. A chave de função <F2> permite que você inicie ações suportadas pelo componente ativo. Neste caso, a célula contém um link para o Google Maps que você ativará.
Pressione <Enter> para ativar o link Nova York. Uma nova janela do navegador é aberta para uma página do Google Maps em Nova York.
Pressione <Ctrl+F4> para fechar a janela do Google Maps.
Pressione <Esc>. A estrutura de foco se expande para cercar a célula que contém Nova York na terceira coluna.

De acordo com a documentação do teclado do elemento <oj-data-grid>, use <Esc> para sair do modo acionável para que você possa continuar navegando para outros componentes.
Pressione <Tab>. O foco se move para a primeira barra no gráfico de barras.

A última parte da revisão de acessibilidade é a validação do leitor de tela. As etapas de validação a seguir se baseiam no uso do leitor de tela JAWS, mas os resultados serão semelhantes se você estiver usando o leitor de tela NVDA.

Na janela do terminal, saia do aplicativo em execução pressionando <Ctrl+C> e, se solicitado, digite y.
Inicie o leitor de tela e reinicie o aplicativo web.
```
$ ojet serve
```
Seu aplicativo será aberto no seu navegador automaticamente; o leitor de tela começará a ler assim que a página estiver totalmente carregada.
Clique na guia Departamentos na barra de guias. Não use o mouse depois desse ponto.
Pressione <Ctrl+L> para definir o foco para a barra de endereços.
Pressione <Tab>. JAWS lê: "Ignorar para o conteúdo principal. O mesmo link de página."
Pressione <Tab>. JAWS diz: "Região do Banner. Barra de ferramentas. Menu do botão john.hancock@oracle.com. Pressione espaço para ativar o menu e navegue com as teclas de seta."
Pressione <Tab>. JAWS diz, "Guia Região de navegação. Guia Introdução selecionada. 1 de 2."
Pressione <Tab>. JAWS diz: "Guia da região principal. Guia Departamentos selecionada. 4 de 4."
Pressione <Tab> para mover o foco para a faixa de filme. JAWS diz: "Contabilidade. Nova York. 3 funcionários. Exibindo página 1 de 4."
Pressione <Tab> para mover o foco para a grade de dados. JAWS diz: "Esta é uma grade de dados com 4 linhas e 3 colunas. ID. Nome. Local." Depois de ler os cabeçalhos das colunas, o leitor de tela lê as células do corpo de dados da tabela da esquerda para a direita. Em seguida, lê-se o foco atual: "Linha 1. Coluna 1. Id: 10."
Pressione <right arrow>. JAWS diz: "Coluna 2. Nome: Contabilidade."
Pressione <right arrow>. JAWS diz: "Coluna 3. Localização: Nova York. Contém controles. Você atingiu a última coluna."
Pressione <Tab>. JAWS diz, "Visualização de dados: gráfico. Gráfico. Série: Contabilidade; Grupo: Departamento; Valor: USD 3.750,00. Gráfico."

Observe que, à medida que o foco se move entre os painéis, o JAWS não dá nenhuma indicação dos cabeçalhos dos painéis. Também não há como rolar o filme de página em página.
Abra o arquivo departments.html no seu editor de código.
- Nome, Função, Valor do Critério de Sucesso 4.1.2 requer que cada um dos componentes nos três painéis tenha um rótulo associado a ele. Os títulos de nível 4 servem como rótulos visíveis.
- Rótulo do Critério de Sucesso 2.5.3 no Nome requer que todo o texto do cabeçalho seja incluído no rótulo. Os atributos aria-label adicionados nas etapas 18 a 23 a seguir incorporarão o texto do cabeçalho do painel.

Localize a tag <oj-film-strip> de abertura e adicione um atributo aria-label.

  <oj-film-strip id="deptFilmstrip"
     max-items-per-page="1"
     aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
     arrow-visibility="hidden"
     class="demo-stretch-items"
     . . . >

Localize a tag <oj-data-grid> de abertura e adicione um atributo aria-label.

  <oj-data-grid id="datagrid"
     style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
     aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
     data="[[dgDataProvider]]"
     header.column.style="[[getCellWidth]]"
     . . . >

Localize a tag <oj-chart> de abertura e adicione um atributo aria-label.

  <oj-chart id="pieChart"
     type="bar"
     aria-label="Salaries by Department bar chart"
     data="[[chartDataProvider]]"
     animation-on-display="auto"
     animation-on-data-change="auto"
     . . . >

A mudança final envolve os controles de paginação para a tira de filme no painel do meio.

Localize as tags de fechamento </oj-film-strip> e </oj-bind-if>.

        </oj-film-strip>
     </div>
  </div>
  </oj-bind-if>

Adicione o controle de paginação e os elementos div adjacentes entre as tags de fechamento </div> e </oj-bind-if>.

        </oj-film-strip>
     </div>
  </div>
  <div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
     <div class="oj-flex-item">
        <div style="text-align: center;">
        <div style="display: inline-block;margin-top: 4px;">
           <oj-paging-control id="pagingControl"
              aria-controls="deptFilmstrip"
              data="[[pagingModel]]"
              page-size="0"
              page-options='{"type": "dots"}'>
           </oj-paging-control>
        </div>
        </div>
     </div>
  </div>
  </oj-bind-if>

Salve o arquivo. Seu arquivo deve ter uma aparência semelhante a departments-html.txt.
Execute novamente a validação do leitor de tela. Certifique-se de que os rótulos sejam falados para a tira de filme, grade de dados e gráfico e que os controles de paginação estejam presentes abaixo da tira de filme.

Próxima Etapa

Este tutorial conclui o módulo Validar e Corrigir Acessibilidade do Aplicativo nesta programação de estudo sobre a acessibilidade do aplicativo web.

Personalizar os Eventos de Ciclo de Vida Conectados
Validar a Acessibilidade das Views de Detalhes Mestres em um Aplicativo Oracle JET
Verificar a Acessibilidade da Tabela e da Mensagem de Componentes do Oracle JET
Testar Navegação do Teclado em Componentes Complexos do Oracle JET

Você pode retornar à página principal da programação de estudo de acessibilidade para acessar todos os módulos sobre acessibilidade, bem como outras programações de estudo.

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.

Título e Informações de Copyright

Test keyboard navigation in complex Oracle JET components

F58355-02

Oracle e/ou suas empresas afiliadas.