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

Introdução

No tutorial Perform Screen-Reader Validation on an Oracle JET App, abordamos vários problemas de acessibilidade na página Employees. Existem várias questões que serão abordadas neste tutorial.

Objetivos

Neste tutorial, você aprenderá a identificar e corrigir os problemas de acessibilidade restantes na página Employees do aplicativo ACCLearningPath.

Pré-requisitos

Tarefa 1: Verificar Estrutura da Página

O primeiro passo na revisão é garantir que todos os cabeçalhos HTML necessários estejam presentes na página.

  1. Navegue até o diretório ACCLearningPath no terminal e execute o aplicativo.

    $ ojet serve

    Seu navegador abrirá a página Introdução do aplicativo com a guia Visão Geral carregada. Clique na guia Employees da barra de guias e inspecione a página Employees.

    Página Funcionários Antes

    A página Funcionários consiste em dois painéis. Os cabeçalhos HTML estão faltando na própria página e em cada painel.

  2. Navegue até a pasta ACCLearningPath/src/js/views e abra o arquivo employees.html em um editor.

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

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

  4. Imediatamente após a tag <div> de abertura, 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>

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

  6. Entre as tags de abertura <div> e <oj-table>, 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"
      . . . >

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

    A tabela agora adere ao Rótulo do Critério de Sucesso WCAG 2.5.3 no Nome e ao Informações e Relacionamentos do Critério de Sucesso WCAG 1.3.1. 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.

  8. 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()]]">

  9. 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()]]">

  10. Salve o arquivo. Seu arquivo deve ter uma aparência semelhante a employees-page-html.txt.

  11. Verifique as alterações aplicadas no aplicativo em execução.

    Página Funcionários Após

Tarefa 2: Executar um Teste Somente de Teclado

Esta seção e a seguinte parte Executar um Teste de Leitor de Tela deste tutorial precisam ser feitas sem o uso de um mouse. Durante este teste, certifique-se de que o ponto de foco esteja sempre claramente identificado e que a ordem das guias seja previsível.

  1. Na Página Funcionários, pressione <Ctrl+L> para definir o foco para a barra de endereços.

  2. Pressione <Tab>. O foco é movido para o link ignorar navegação.

  3. Pressione <Tab>. O foco é movido para john.hancock@oracle.com no menu do usuário no canto superior direito da página.

  4. Pressione <Tab>. O foco é movido para Introdução no menu de navegação principal imediatamente abaixo do menu do usuário.

  5. Pressione <Tab>. O foco é movido para Visão Geral na barra de guias.

  6. Pressione <Tab>. O foco é movido para o primeiro cabeçalho de coluna, Número do Funcionário, na Tabela Funcionários.

  7. Pressione <down arrow> para focar na primeira linha de dados da tabela.

    O formulário Detalhes do Funcionário deve aparecer no painel do lado direito da página.

  8. Pressione <Space> para selecionar a linha e, em seguida, pressione <F2> para mover o foco para o primeiro elemento tabbable, o botão Editar.

  9. Pressione <Space> para ativar o botão Editar. Uma caixa de diálogo Editar Funcionário é aberta e o foco é movido para o campo ID do Funcionário.

  10. Pressione <Tab>. O foco é movido para o campo Nome do funcionário.

  11. Pressione <Tab>. O foco é movido para o campo Título do Cargo.

  12. Pressione <Tab>. O foco é movido para o campo Data de Admissão.

  13. Pressione <Tab>. O foco é movido para o campo Salário.

  14. Pressione <Tab>. O foco é movido para o botão Salvar.

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

    Caixa de Mensagem Antes

    O software de ampliação de tela coloca o foco na Tabela Funcionários e, portanto, a mensagem de confirmação pode ficar fora do visor da lupa.

  16. Navegue até a pasta ACCLearningPath/src/js/viewModels e edite employees.js.

  17. Localize a definição de this.positionObject.

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

  18. Modifique a definição positionObject para que a localização do objeto se baseie na tabela em vez da 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 de teclado para verificar se a localização da mensagem de confirmação foi movida para a tabela.

    Caixa de mensagem após

Tarefa 3: Executar um Teste de Leitor de Tela

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.

  1. Na janela do terminal, saia do aplicativo em execução pressionando <Ctrl+C> e, se solicitado, digite y.

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

  3. Clique na guia Employees da barra de guias. Não use o mouse depois desse ponto.

  4. Pressione <Ctrl+L> para definir o foco para a barra de endereços.

  5. Pressione <Tab>. JAWS lê: "Ignorar para o conteúdo principal. O mesmo link de página."

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

  7. Pressione <Tab>. JAWS diz, "Guia Região de navegação. Guia Introdução selecionada. 1 de 2."

  8. Pressione <Tab>. JAWS diz: "Guia da região principal. Guia Funcionários selecionada. 3 de 4."

  9. Pressione <Tab>. JAWS diz: "Tabela com 6 colunas e mais de 13 linhas. Tabela Employees – Ative uma linha para ver os detalhes dos funcionários. Cabeçalho de coluna 1, Número do Funcionário." O foco é movido para a primeira célula na linha de cabeçalhos de coluna da tabela.

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

  11. Pressione <right arrow>. JAWS diz o número da coluna e o nome de usuário do funcionário.

  12. Pressione <Space>. A linha é selecionada, e JAWS diz: "Espaço. Selecionado."

  13. Pressione <F2> para mover para o primeiro elemento tabátil. JAWS diz: "Botão Editar. Para ativar, pressione Enter."

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

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

  16. Pressione <Enter>. JAWS diz: "Categoria da mensagem: confirmação. Atualizações salvas. As alterações para o funcionário Onegin foram salvas." O nome de usuário do funcionário no seu aplicativo pode ser diferente aqui, por causa das edições feitas em um tutorial anterior.

  17. Pressione <F6> para ler o conteúdo da caixa de mensagem. JAWS diz: "Região complementar de mensagens. Atualizações salvas. Inserindo região de mensagens. Pressione F6 para navegar de volta para o elemento focado anterior."

  18. Pressione <Tab>. JAWS diz: "Botão Fechar. Para ativar, pressione Enter."

  19. Pressione <Enter> para fechar a caixa de mensagem. O foco retorna à tabela e à célula selecionada anterior.

  20. Pare o leitor de tela.

  21. Na janela do terminal, saia do aplicativo pressionando <Ctrl+C> e, se solicitado, digite y.

Isso conclui o terceiro conjunto de correções de acessibilidade.

Próxima Etapa

Prossiga para o próximo tutorial neste módulo.

Este tutorial faz parte do módulo Validar e Corrigir Acessibilidade do Aplicativo.

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.