Personnaliser les événements de cycle de vie connectés

Introduction

Les applications Oracle JavaScript Extension Toolkit (JET) contiennent un événement de cycle de vie qui est déclenché chaque fois qu'une page ou un onglet est chargé dans le navigateur. La fonction this.connected() permet de personnaliser le titre de la page pour qu'il soit propre à la page ou à l'onglet que vous venez d'afficher. La fonction permet également d'écrire un message personnalisé dans la région aria-live, ce qui fera en sorte qu'un lecteur d'écran annonce que la page ou l'onglet a été chargé.

Objectifs

Dans ce tutoriel, vous apprendrez à définir un titre de page accessible et à fournir le message de chargement correct à la région aria-live pour chaque page et onglet affichés dans l'application ACCLearningPath.

Prérequis

Tâche 1 : définir les conditions requises

Selon WCAG - Critère de succès 2.4.2 - Titres de page, chaque page d'une application Web doit avoir un titre descriptif et unique. Le titre doit inclure la page, l'onglet et le nom de l'application. Il n'y a pas d'exigence spécifique pour le format du titre, mais la norme de l'industrie est d'inclure les noms de page et d'onglet en premier, suivis du nom de l'application. Lorsque le titre est organisé dans cet ordre, le lecteur d'écran parle d'abord les informations les plus importantes et les plus restrictives.

Même si le titre change lorsqu'une nouvelle page est chargée, les lecteurs d'écran n'annoncent pas toujours que la page a changé. Surtout dans une application à page unique comme une application Oracle JET, les chargements de page et d'onglet se produisent sans notification au lecteur d'écran. Pour rendre Oracle JET plus accessible, toutes les applications créées à l'aide des modèles de démarrage Oracle JET (version 8.0.0 ou ultérieure) contiennent la fonction accUtils.announce(). La fonction écrit du texte dans une région en direct aria, qui est toujours présente dans le modèle DOM (Document Object Model). Les modèles Oracle JET incluent également un appel à la méthode accUtils.announce() dans la fonction de cycle de vie this.connected. Le texte de cet appel indique que la page ou l'onglet a été chargé.

Tâche 2 : personnaliser la fonction de cycle de vie this.connected

La fonction this.connected() d'une application Oracle JET nouvellement créée est très concise.

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

Le premier paramètre de la méthode accUtils.announce() est le texte à prononcer. Le second paramètre détermine si le texte sera prononcé immédiatement ou attend que le lecteur d'écran ait fini de prononcer d'autres éléments dans sa mémoire tampon.

  1. Accédez au dossier ACCLearningPath/src/js/viewModels et ouvrez le fichier intro.js dans un éditeur de code.

  2. Recherchez et modifiez la fonction this.connected(). Ensuite, enregistrez et fermez le fichier.

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

  3. Ouvrez resources.js dans un éditeur et modifiez sa fonction this.connected(). Ensuite, enregistrez et fermez le fichier.

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

  4. Ouvrez overview.js dans un éditeur et modifiez sa fonction this.connected(). Ensuite, enregistrez et fermez le fichier.

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

  5. Ouvrez organization.js dans un éditeur et modifiez sa fonction this.connected(). Ensuite, enregistrez et fermez le fichier.

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

  6. Ouvrez employees.js dans un éditeur et modifiez sa fonction this.connected(). Ensuite, enregistrez et fermez le fichier.

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

  7. Ouvrez departments.js dans un éditeur et modifiez sa fonction this.connected(). Ensuite, enregistrez et fermez le fichier.

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

  8. Démarrez votre lecteur d'écran.

  9. Exécutez l'application.

       $ ojet serve

    Le navigateur s'ouvre sur la page Introduction de l'application, avec l'onglet Aperçu chargé.

  10. Vérifiez que le titre est "Introduction : Overview – Accessibility Learning Path" et que le lecteur d'écran indique "Introduction page chargée" et "Overview tab loading".

  11. Cliquez sur l'onglet Organisation dans la barre d'onglets.

  12. Vérifiez que le titre est "Introduction : Organization – Accessibility Learning Path" et que le lecteur d'écran indique "Organization tab chargés".

    Remarque : si votre lecteur d'écran ne mentionne pas le titre de la page, essayez de faire glisser les onglets vers la page dans votre navigateur.

  13. Vérifiez le titre et l'annonce orale des onglets restants et de la page Ressources.

  14. Arrêtez votre lecteur d'écran.

La tâche initiale de rendre une application accessible est terminée.

Etape suivante

Passez au tutoriel suivant de ce module.

Ce tutoriel fait partie du module Valider et corriger l'accessibilité des applications.

Vous pouvez revenir à la page principale du parcours pédagogique sur l'accessibilité pour accéder à tous les modules sur l'accessibilité.

Ressources de formation supplémentaires

Explorez d'autres ateliers sur le site docs.oracle.com/learn ou accédez à d'autres contenus d'apprentissage gratuits sur le canal Oracle Learning YouTube. En outre, visitez le site education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

Pour obtenir de la documentation sur le produit, consultez Oracle Help Center.