Personalizar os Eventos de Ciclo de Vida Conectados

Introdução

Os aplicativos do Oracle JavaScript Extension Toolkit (JET) contêm um evento de ciclo de vida que é acionado toda vez que uma página ou guia é carregada no browser. A função this.connected() oferece uma oportunidade de personalizar o título da página para ser específico da página ou guia recém-exibida. A função também oferece a oportunidade de escrever uma mensagem personalizada para a região aria-live, o que fará com que um leitor de tela anuncie que a página ou guia foi carregada.

Objetivos

Neste tutorial, você aprenderá a definir um título de página acessível e fornecer a mensagem de carregamento correta para a região aria-live para cada página e guia exibidas no aplicativo ACCLearningPath.

Pré-requisitos

Tarefa 1: Definir as Exigências

De acordo com a Página Titulada do Critério de Sucesso WCAG 2.4.2, cada página de um aplicativo Web precisa ter um título descritivo e exclusivo. O título deve incluir a página, a guia e o nome do aplicativo. Não há nenhum requisito específico para o formato do título, mas o padrão do setor é incluir os nomes das páginas e guias primeiro, seguidos pelo nome do aplicativo. Quando o título é organizado nessa ordem, o leitor de tela fala primeiro as informações mais importantes e restritivas.

Mesmo que o título mude quando uma nova página é carregada, os leitores de tela nem sempre anunciam que a página foi alterada. Especialmente em um aplicativo de página única, como um aplicativo Oracle JET, os carregamentos de página e guia ocorrem sem notificação ao leitor de tela. Para tornar o Oracle JET mais acessível, todos os aplicativos criados usando os modelos iniciais do Oracle JET (versão 8.0.0 ou mais recente da versão) contêm a função accUtils.announce(). A função grava texto em uma região aria-live, que está sempre presente no Modelo de Objeto de Documento (DOM). Os modelos do Oracle JET também incluem uma chamada para o método accUtils.announce() dentro da função de ciclo de vida this.connected. O texto desta chamada indica que a página ou guia foi carregada.

Tarefa 2: Personalizar a Função do Ciclo de Vida this.connected

A função this.connected() em um aplicativo Oracle JET recém-criado é muito concisa.

this.connected = function() {
      accUtils.announce("Dashboard page loaded.", "assertive");
      document.title = "Dashboard";
      // Implement further logic if needed
};

O primeiro parâmetro do método accUtils.announce() é o texto a ser falado. O segundo parâmetro determina se o texto será falado imediatamente ou aguardar até que o leitor de tela termine de falar outros itens em seu buffer.

  1. Navegue até a pasta ACCLearningPath/src/js/viewModels e abra o arquivo intro.js em um editor de código.

  2. Localize e modifique a função this.connected(). Depois, salve e feche o arquivo.

       this.connected = function () {
      accUtils.announce("Introduction page loaded.", "assertive");
      document.title = "Introduction -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  3. Abra o resources.js em um editor e modifique sua função this.connected(). Depois, salve e feche o arquivo.

       this.connected = function () {
      accUtils.announce("Resources page loaded.", "assertive");
      document.title = "Resources -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  4. Abra o overview.js em um editor e modifique sua função this.connected(). Depois, salve e feche o arquivo.

       this.connected = function () {
      accUtils.announce("Overview tab loaded.", "polite");
      document.title = "Introduction : Overview -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  5. Abra o organization.js em um editor e modifique sua função this.connected(). Depois, salve e feche o arquivo.

       this.connected = function () {
      accUtils.announce("Organization tab loaded.", "polite");
      document.title = "Introduction : Organization -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  6. Abra o employees.js em um editor e modifique sua função this.connected(). Depois, salve e feche o arquivo.

       this.connected = function () {
         accUtils.announce("Employees tab loaded.", "polite");
         document.title = "Introduction : Employees  --  Accessibility Learning Path";
         // Implement further logic if needed
   };

  7. Abra o departments.js em um editor e modifique sua função this.connected(). Depois, salve e feche o arquivo.

       this.connected = function () {
         accUtils.announce("Departments tab loaded.", "polite");
         document.title = "Introduction : Departments  -- Accessibility Learning Path";
         // Implement further logic if needed
   };

  8. Inicie seu leitor de tela.

  9. Execute o aplicativo.

       $ ojet serve

    O navegador é aberto na página Introdução do aplicativo, com a guia Visão Geral carregada.

  10. Verifique se o título é "Introdução: Visão Geral – Programação de Estudo de Acessibilidade" e se o leitor de tela diz "Página Introdução carregada" e "Guia Visão Geral carregada".

  11. Clique na guia Organização na barra de guias.

  12. Verifique se o título é "Introdução: Organização - Programação de Estudo de Acessibilidade" e se o leitor de tela diz "Guia Organização carregada".

    Observação: Se o leitor de tela não mencionar o título da página, tente sair com a tecla Tab e voltar para a página do browser.

  13. Verifique o título e o anúncio falado das guias restantes e da página Recursos.

  14. Pare o leitor de tela.

A tarefa inicial de tornar um aplicativo acessível está concluída.

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.