Personalizar os Eventos de Ciclo de Vida Conectados

Introdução

Os aplicativos 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() fornece uma oportunidade para 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 de cada página e guia exibida no aplicativo ACCLearningPath.

Pré-requisitos

Tarefa 1: Definir os Requisitos

De acordo com a WCAG Success Criterion 2.4.2 Page Titled, 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 de página e guia primeiro, seguido pelo nome do aplicativo. Quando o título é organizado nesta ordem, o leitor de tela fala primeiro as informações mais importantes e restritivas.

Embora o título seja alterado 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áginas e guias ocorrem sem notificação ao leitor de tela. Em um esforço 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) contêm a função accUtils.announce(). A função grava texto em uma região aria-live, que está sempre presente no DOM (Document Object Model). 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 nesta chamada indica que a página ou a guia foi carregada.

Tarefa 2: Personalizar a Função de 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 no 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(). Em seguida, salvar e fechar o arquivo.

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

  3. Abra resources.js em um editor e modifique sua função this.connected(). Em seguida, salvar e fechar o arquivo.

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

  4. Abra overview.js em um editor e modifique sua função this.connected(). Em seguida, salvar e fechar 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 organization.js em um editor e modifique sua função this.connected(). Em seguida, salvar e fechar 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 employees.js em um editor e modifique sua função this.connected(). Em seguida, salvar e fechar 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 departments.js em um editor e modifique sua função this.connected(). Em seguida, salvar e fechar 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 o 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 de 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 e voltar para a página no navegador.

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

  14. Interrompa o leitor de tela.

A tarefa inicial de tornar um aplicativo acessível está concluída. O próximo tutorial dentro dessa programação de estudo é Validar a Acessibilidade das Views de Detalhes Mestres.

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.