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

Présentation

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 nouvelle page ou à l'onglet affiché. La fonction permet également d'écrire un message personnalisé dans la région aria-live, ce qui amènera un lecteur d'écran à annoncer 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.

Conditions requises

Tâche 1 : Définir les exigences

Selon le critère de succès WCAG 2.4.2 Page titrée, 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, suivi 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é. En particulier dans une application à page unique telle qu'une application Oracle JET, les chargements de pages et d'onglets se produisent sans avis au lecteur d'écran. Afin de 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 aria-live, qui est toujours présente dans le modèle d'objet de document (DOM). 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 nouvelle application Oracle JET 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 deuxième paramètre détermine si le texte sera parlé immédiatement ou si le lecteur d'écran a terminé de parler d'autres éléments dans sa mémoire tampon.

  1. Naviguez jusqu'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(). 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(). 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(). 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(). 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(). 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(). 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 : Aperçu – Parcours d'apprentissage Accessibilité" et que le lecteur d'écran indique "Page d'introduction chargée" et "onglet d'aperçu chargé".

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

  12. Vérifiez que le titre est "Introduction : Organisation – Parcours d'apprentissage Accessibilité" et que le lecteur d'écran indique "Onglet Organisation chargé".

    Note : Si votre lecteur d'écran ne mentionne pas le titre de la page, essayez de taper et de revenir à la page dans votre navigateur.

  13. Vérifiez le titre et l'annonce orale pour les autres onglets et pour la page Ressources.

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

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

Étape suivante

Passez au tutoriel suivant dans ce module.

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

Vous pouvez retourner à la page principale du cheminement d'apprentissage pour l'accessibilité pour accéder à tous les modules sur l'accessibilité.

Ressources d'apprentissage supplémentaires

Explorez d'autres laboratoires sur le site docs.oracle.com/learn ou accédez à plus de contenu d'apprentissage gratuit sur le canal Oracle Learning YouTube. De plus, visitez education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

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