Verificar a Acessibilidade da Tabela e da Mensagem de Componentes do Oracle JET

Introdução

No tutorial Executar Validação do Leitor de Tela em um Aplicativo Oracle JET, abordamos vários problemas de acessibilidade na página Funcionários. Há vários problemas que permanecerão que abordaremos neste tutorial.

Objetivos

Neste tutorial, você aprenderá a identificar e corrigir os problemas de acessibilidade restantes na página Funcionários 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, Validar a Acessibilidade das Views de Detalhes Mestres em um Aplicativo Oracle JET

Tarefa 1: Verificar Estrutura da Página

A primeira etapa da revisão é garantir que todos os cabeçalhos HTML necessários estejam presentes na página.

Navegue até o diretório ACCLearningPath no terminal e execute o aplicativo.
```
$ ojet serve
```
Seu navegador será aberto na página Introdução do aplicativo com a guia Visão Geral carregada. Clique na aba Funcionários na barra de abas e inspecione a página Funcionários.

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

A página Funcionários consiste em dois painéis. Os cabeçalhos HTML estão ausentes na própria página e em cada painel.
Navegue até a pasta ACCLearningPath/src/js/views e abra o arquivo employees.html em um editor.

Localize a primeira tag de abertura <div> no arquivo.

<div class="oj-hybrid-padding">
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

Imediatamente após a tag de abertura <div>, insira um cabeçalho h3 para identificar a página Funcionários.

<div class="oj-hybrid-padding">
   <h3>Employees</h3>
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

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

   
<div class="oj-flex-item">
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

Entre as tags <div> e <oj-table> de abertura, insira um cabeçalho h4 para rotular corretamente este painel.

   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

Edite o atributo aria-label do elemento <oj-table> para incluir o texto do cabeçalho e o texto instrucional exibido no segundo painel.
```
   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table - Activate a row to see employee details"
      . . . >
   
```
Agora, a tabela adere ao WCAG - Critério de Sucesso 2.5.3 - Label no Nome e ao WCAG - Critério de Sucesso 1.3.1 - Informações e Relacionamentos. Para atender a esses critérios, tanto o rótulo visual quanto o texto instrucional do painel direito devem ser incluídos no rótulo falado de um controle.

Localize a tag de abertura <div> que define o painel direito da página Funcionários que conterá os detalhes do funcionário.

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <oj-bind-if test="[[!activeRow()]]">

Entre as tags <div> e <oj-bind-if>, insira um cabeçalho h4 abaixo da regra horizontal que identificará esse painel.

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <h4>Employee Details</h4>
   <oj-bind-if test="[[!activeRow()]]">

Salve o arquivo. Seu arquivo deve ser semelhante a employees-page-html.txt.
Verifique as alterações aplicadas no aplicativo em execução.

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

Tarefa 2: Executar um Teste Somente Teclado

Esta seção e a seguinte parte Executar um Teste de Leitura de Tela deste tutorial precisam ser feitas sem o uso de um mouse. Durante esse teste, verifique se o ponto de foco está sempre claramente identificado e se a ordem das guias é previsível.

Na Página Funcionários, pressione <Ctrl+L> para definir o foco para a 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 principal 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 o primeiro cabeçalho de coluna, Número do Funcionário, na Tabela EMPLOYEES.
Pressione <down arrow> para colocar o foco na primeira linha de dados da tabela.

O formulário Detalhes do Funcionário deve aparecer no painel do lado direito da página.
Pressione <Space> para selecionar a linha e, em seguida, pressione <F2> para mover o foco para o primeiro elemento tabuável, o botão Editar.
Pressione <Space> para ativar o botão Editar. Uma caixa de diálogo Editar Funcionário é aberta e o foco muda para o campo ID do Funcionário.
Pressione <Tab>. O foco muda para o campo Nome do Funcionário.
Pressione <Tab>. O foco muda para o campo Título do Cargo.
Pressione <Tab>. O foco muda para o campo Data de Admissão.
Pressione <Tab>. O foco move-se para o campo Salário.
Pressione <Tab>. O foco move-se para o botão Salvar.
Pressione <Space> para ativar o botão Salvar e fechar a caixa de diálogo. O foco retorna para a primeira linha de dados selecionada da Tabela EMPLOYEES.

Observe a caixa de mensagem no canto superior esquerdo da página. A caixa de mensagem fornece a confirmação de que as atualizações foram salvas.

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

O software de ampliação de tela coloca o foco na Tabela Employees e, portanto, a mensagem de confirmação pode ficar fora da janela de visualização do ampliador.
Navegue até a pasta ACCLearningPath/src/js/viewModels e edite employees.js.

Localize a definição de this.positionObject.

this.positionObject = {
   my: { vertical: "top", horizontal: "start" },
   at: { vertical: "top", horizontal: "start" },
   of: "window",
};

Modifique a definição positionObject para que a localização do objeto se baseie na tabela, e não na janela.
```
this.positionObject = {
   my: { vertical: "top", horizontal: "start" },
   at: { vertical: "top", horizontal: "start" },
   of: "#table",
};
```
Salve o arquivo. Em seguida, repita as etapas de 1 a 15 do teste somente do teclado para verificar se o local da mensagem de confirmação foi movido para a tabela.

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

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 Funcionários 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 Funcionários selecionada. 3 de 4."
Pressione <Tab>. JAWS diz: "Tabela com 6 colunas e mais de 13 linhas. Tabela Employees (Funcionários) - Ative uma linha para ver os detalhes do funcionário. Cabeçalho da coluna 1, Número do Funcionário." O foco move-se para a primeira célula na linha de cabeçalhos de coluna da tabela.
Pressione <down arrow>. JAWS diz: "Linha 1: 7839. Desmarcado. Coluna 1, Número do Funcionário: 7839." O foco está na primeira linha de dados da tabela.
Pressione <right arrow>. JAWS diz o número da coluna e o nome do usuário do funcionário.
Pressione <Space>. A linha é selecionada e o JAWS diz: "Espaço. Selecionado."
Pressione <F2> para ir para o primeiro elemento tabável. JAWS diz: "Botão Editar. Para ativar, pressione Enter."
Pressione <Enter>. JAWS diz: "Edite o funcionário. Edite o funcionário. Id do Funcionário 7.839..." O leitor de tela abre a caixa de diálogo Editar Funcionário e continuará lendo até que uma tecla seja pressionada.
Pressione <Tab> cinco vezes para passar pelos campos editáveis e somente leitura para o botão Salvar. JAWS diz: "Botão Salvar. Para ativar, pressione Enter."
Pressione <Enter>. JAWS diz: "Categoria da mensagem: confirmação. Atualizações salvas. As alterações do funcionário Onegin foram salvas." O nome de usuário do funcionário no seu aplicativo pode diferir aqui devido a edições feitas em um tutorial anterior.
Pressione <F6> para ler o conteúdo da caixa de mensagem. JAWS diz: "Região complementar de mensagens. Atualizações salvas. Informando a região de mensagens. Pressione F6 para navegar de volta ao elemento focado anteriormente."
Pressione <Tab>. JAWS diz: "Botão Fechar. Para ativar, pressione Enter."
Pressione <Enter> para fechar a caixa de mensagem. O foco retorna à tabela e à célula selecionada anteriormente.
Pare o leitor de tela.
Na janela do terminal, saia do aplicativo pressionando <Ctrl+C> e, se solicitado, informe y.

Isso conclui o terceiro conjunto de correções de acessibilidade. O tutorial final desta programação de estudo é Testar Navegação do Teclado em Componentes Complexos do 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.

Título e Informações de Copyright

Verify the accessibility of Oracle JET components table and message

F34164-02

October 2022