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

Introdução

Essa será nossa primeira visão da guia Departments do aplicativo ACCLearningPath. O processo de revisão descrito na programação de estudo anterior desta 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 Departments do aplicativo ACCLearningPath.

Pré-requisitos

Um ambiente de desenvolvimento configurado para criar aplicativos Oracle JET com o runtime JavaScript, Node.js e a interface da linha de comando do Oracle JET release 13.0 (ou mais recente) instalada
Acesso ao Oracle JET Developer Cookbook
Acesso ao Oracle JET Keyboard and Gesture Guide
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 browser será aberto na 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, em que cada painel exibe dados de departamento usando vários componentes do Oracle JET.

Descrição da ilustração departments_tab_before.png
Navegue até a pasta ACCLearningPath/src/js/views e abra o arquivo departments.html em um editor de código.

Localize a tag principal <div> 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 um filme.

<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.

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

Tarefa 2: Executar um Teste Somente Teclado

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

Pressione <Ctrl+L> para focar na barra de endereços.
Pressione <Tab>. O foco move-se para o link para ignorar navegação.
Pressione <Tab>. O foco muda para john.hancock@oracle.com no menu do usuário no canto superior direito da página.
Pressione <Tab>. O foco move-se para Introdução no menu de navegação imediatamente abaixo do menu do usuário.
Pressione <Tab>. O foco move-se para Visão Geral na barra de guias.
Pressione <Tab>. O foco muda 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 move-se para a última entrada no filme, Operações.
Pressione <Tab>. O Focus é movido para a primeira célula de corpo de dados na grade de dados, na coluna Id. O valor da célula focada é 10.
Pressione <right arrow>. O foco muda para Contabilidade na segunda coluna da grade de dados, Nome.
Pressione <right arrow>. O Focus muda para Nova York na coluna final da grade de dados, Local.

Observe que a estrutura de tópicos aparece ao redor da célula que contém o nome da cidade.
Pressione <F2>. O esboço do foco restringe-se a colocar apenas o 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 iniciar ações suportadas pelo componente ativo. Nesse caso, a célula contém um link para o Google Maps que você ativará.
Pressione <Enter> para ativar o link Nova Iorque. Uma nova janela do navegador será aberta em uma página do Google Maps de Nova York.
Pressione <Ctrl+F4> para fechar a janela do Google Maps.
Pressione <Esc>. O esboço de foco se alarga para circundar 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 move-se para a primeira barra no gráfico de barras.

A parte final da revisão de acessibilidade é a validação do leitor de tela. As etapas de validação a seguir são baseadas 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, informe y.
Inicie o leitor de tela e reinicie o aplicativo da Web.
```
$ ojet serve
```
Seu aplicativo será aberto no navegador automaticamente; o leitor de tela começará a ler depois que a página for totalmente carregada.
Clique na guia Departamentos na barra de guias. Não use o mouse após esse ponto.
Pressione <Ctrl+L> para definir o foco para a barra de endereços.
Pressione <Tab>. JAWS lê: "Ir para o conteúdo principal. Mesmo link de página."
Pressione <Tab>. JAWS diz: "Região de Banner. Barra de ferramentas. Menu do botão john.hancock@oracle.com. Pressione espaço para ativar o menu e, em seguida, 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 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 a 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. Localização." Depois de ler os cabeçalhos das colunas, o leitor de tela lê as células de corpo de dados da tabela da esquerda para a direita. Em seguida, ele lê 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 fornece nenhuma indicação dos cabeçalhos do painel. Também não há como rolar o filme de página para página.
Abra o arquivo departments.html no editor de código.
- Nome, Função, Valor do Critério de 4.1.2 de Sucesso requer que cada um dos componentes dos três painéis tenha um rótulo associado a ele. Os cabeçalhos level-4 servem como rótulos visíveis.
- O Rótulo do Critério de 2.5.3 de Êxito 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 o 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 circundantes entre as tags </div> e </oj-bind-if> de fechamento.

      </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. O 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 o filme, grade de dados e gráfico e que os controles de paginação estejam presentes abaixo do filme.

Você concluiu o tutorial final na série de programações de estudo de acessibilidade do aplicativo.

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.

Título e Informações de Copyright

Test keyboard navigation in complex Oracle JET components

F34165-02

October 2022