Valider l'accessibilité des vues maître-détail dans une application Oracle JET

Introduction

Dans le tutoriel Test d'une application Oracle JET pour l'accessibilité au clavier uniquement, nous avons abordé plusieurs problèmes d'accessibilité dans l'onglet Organisation. Il reste plusieurs problèmes que nous aborderons dans ce tutoriel

Objectifs

Dans ce tutoriel, vous apprendrez à identifier et à résoudre les problèmes d'accessibilité dans l'onglet Organisation de l'application ACCLearningPath.

Prérequis

Tâche 1 : vérifier la structure de la page

La première étape pour vérifier l'application est de vérifier la structure de la page. Exécutez l'application et assurez-vous que l'onglet Organisation contient les en-têtes HTML nécessaires.

  1. Si l'application n'est pas déjà en cours d'exécution dans votre navigateur, utilisez le terminal pour démarrer l'application à partir du répertoire ACCLearningPath.

    $ ojet serve

  2. Cliquez sur l'onglet Organisation dans la barre d'onglets de la page Introduction.

    Notez dans la capture d'écran que la page Organization comporte deux panneaux. Le panneau de gauche contient l'arborescence ; le panneau de droite donne des instructions pour son utilisation.

    Page Organisation

    Selon les critères de réussite WCAG suivants, vous voulez déterminer si chaque section de la page comporte un en-tête HTML pour l'identifier.

  3. Accédez au dossier ACCLearningPath/src/js/views et ouvrez le fichier organization.html dans un éditeur.

  4. Localisez la balise <div> de niveau supérieur et insérez une balise d'en-tête <h3> après cette balise.

    <div class="oj-hybrid-padding">
   <h3>Organization</h3>

  5. Localisez la balise <div> qui forme le panneau de gauche avec l'arborescence et insérez une balise d'en-tête <h4> après celle-ci.

    <div class="oj-flex-item">
   <h4>Organization Tree View</h4>

  6. Localisez la balise <div> qui forme le panneau droit de la page Organisation et insérez une balise d'en-tête <h4> après celle-ci.

    <div class="oj-flex-item oj-sm-6">
   <h4>Employee Details</h4>

  7. Enregistrez et fermez le fichier. Votre fichier doit ressembler à organization-page1-html.txt.

    Le navigateur actualise la page, en reprenant les modifications apportées à la page Organisation.

  8. Vérifiez que la structure de la page est correcte.

    Page Organisation avec en-têtes HTML corrects

Tâche 2 : effectuer un test au clavier uniquement

  1. Appuyez sur <Ctrl+L> pour activer la barre d'adresse.

  2. Appuyez sur <Tab>. Le focus se déplace vers le lien skip nav.

  3. Appuyez sur <Tab>. Le focus se déplace vers john.hancock@oracle.com dans le menu utilisateur en haut à droite de la page.

  4. Appuyez sur <Tab>. Le focus se déplace vers Introduction dans le menu de navigation juste en dessous du menu utilisateur en haut à droite de la page.

  5. Appuyez sur <Tab>. Le focus se déplace vers Présentation dans la barre d'onglets.

  6. Appuyez sur <Tab>. Le focus se déplace vers l'élément Comptabilité dans l'arborescence du panneau de gauche.

  7. Appuyez deux fois sur <down arrow> dans l'arborescence pour mettre l'accent sur un employé.

  8. Appuyez sur <Enter> pour sélectionner l'employé et affichez le formulaire Détails de l'employé dans le panneau de droite de la page.

  9. Appuyez sur <Tab>. Le focus est placé sur le champ ID d'employé.

  10. Appuyez sur <Tab>. Le focus est placé sur le champ Nom de l'employé.

  11. Appuyez sur <Tab>. Le focus se déplace vers la liste déroulante Titre du travail.

  12. Appuyez sur <Tab>. Le focus se déplace vers le champ Date d'embauche.

  13. Appuyez sur <Tab>. Le focus se déplace vers la zone de sélection numérique Salaire.

  14. Appuyez sur <Tab>. Le focus se déplace vers le champ ID responsable.

  15. Appuyez sur <Tab>. Le focus se déplace vers les boutons radio Jobs.

  16. Appuyez sur <Tab>. Le focus se déplace vers le lien A propos d'Oracle dans le pied de page de la page.

    Si le rectangle de focus est visible tout au long de ce test et si le focus se déplace dans l'ordre attendu, la page Organisation répond au critère d'indicateur de focus.

Tâche 3 : validation d'un lecteur d'écran

La dernière étape du test de l'accessibilité de la page Organisation consiste à effectuer une validation de lecteur d'écran pour s'assurer que le lecteur d'écran parle tout ce qui est nécessaire.

Selon les critères de succès WCAG - Nom, rôle, valeur et Objectif du lien du critère de succès 2.4.4 (en contexte), les éléments principaux à valider sont les suivants :

  1. Dans la fenêtre de terminal, quittez l'application en cours d'exécution en appuyant sur <Ctrl+C> et, si vous y êtes invité, entrez y.

  2. Démarrez votre lecteur d'écran, puis redémarrez votre application Web.

    $ ojet serve

    Votre application s'ouvrira automatiquement dans votre navigateur ; le lecteur d'écran commencera à lire une fois que la page sera complètement chargée.

  3. Sélectionnez l'onglet Organisation dans la barre d'onglets, puis utilisez le clavier uniquement pour les étapes restantes.

  4. Appuyez sur <Ctrl+L> pour activer la barre d'adresse.

  5. Appuyez sur <Tab>. JAWS indique : "Passer au contenu principal. Même lien de page."

  6. Appuyez sur <Tab>. JAWS dit : " Région de bannière. Barre d'outils. Menu du bouton john.hancock@oracle.com. Appuyez sur l'espace pour activer le menu, puis naviguez avec les touches fléchées."

  7. Appuyez sur <Tab>. JAWS indique : onglet Région de navigation. Onglet Introduction sélectionné. 1 sur 2."

  8. Appuyez sur <Tab>. JAWS indique : Onglet Région principale. Onglet Organisation sélectionné. 2 sur 4."

  9. Appuyez sur <Tab>. Le focus se déplace vers la comptabilité, le premier élément de l'arborescence, et JAWS dit : "Recevoir des données pour le noeud : recherche. Comptabilité. Recherche : Jones, Scott, Ford, Adams. Ventes. Aperçu des opérations. Comptabilité clôturée. 1 sur 4. Pour vous déplacer dans des éléments ou pour les développer, utilisez les touches fléchées."

    Notez que le lecteur d'écran ne parlait pas de libellé descriptif pour l'arborescence. Deux corrections sont nécessaires pour fournir un libellé adéquat pour l'arborescence.

  10. Pour corriger le libellé de vue d'arborescence, accédez au dossier ACCLearningPath/src/js/views et ouvrez le fichier organization.html dans un éditeur.

  11. Localisez la balise <oj-tree-view>.

      <oj-tree-view id="treeview"
     data="[[dataProvider]]"
     selection-mode="single"
     . . .

  12. Ajoutez l'attribut aria-label suivant à la balise <oj-tree-view>. L'en-tête HTML h4 sert de libellé visuel pour la vue arborescente.

      <oj-tree-view id="treeview"
     data="[[dataProvider]]"
     selection-mode="single"
     aria-label="Organization Tree View - select an employee to display details."
     . . .

    L'arborescence respecte désormais les champs Libellé du critère de succès WCAG 2.5.3 et Informations et relations du critère de succès WCAG 1.3.1. Pour répondre à ces critères, le libellé visuel et le texte d'instruction doivent être inclus dans le libellé parlé d'un contrôle.

  13. Revenez à la fenêtre du navigateur et répétez les étapes 1 à 7 ci-dessus pour vous concentrer sur l'option Comptabilité dans l'arborescence. JAWS indique : "Organization Tree View - select an employee to display details" (Vue arborescence de l'organisation - sélectionnez un employé pour afficher les détails). Arborescence. Comptabilité clôturée. 1 sur 4. Pour vous déplacer dans des éléments ou pour les développer, utilisez les touches fléchées."

  14. Appuyez sur <right arrow>. Le lecteur d'écran dit : "Extraction des données pour le noeud : comptabilité. Comptabilité ouverte. 1 sur 4. Comptabilité ouverte. Recevoir des données pour le noeud : comptabilisation"

  15. Appuyez sur <right arrow>. Le lecteur d'écran dit : "Niveau 1. Onguine. 1 sur 3. Pour vous déplacer dans des éléments ou pour les développer, utilisez les touches fléchées."

  16. Appuyez sur <down arrow>. Le lecteur d'écran dit : "Clark".

  17. Appuyez sur <Enter> pour sélectionner Clark. Le lecteur d'écran dit : "Clark. 2 sur 3."

  18. Appuyez sur <Tab>. Le lecteur d'écran indique : "Employee Id readonly edit 7,782".

  19. Appuyez sur <Tab>. Le lecteur d'écran dit, "Nom de l'employé modifier Clark. Tapez le texte."

  20. Appuyez sur <Tab>. Le lecteur d'écran dit, "Job Title edit combo. Responsable. Pour définir la valeur, utilisez les touches fléchées ou saisissez la valeur."

  21. Appuyez sur <Tab>. Le lecteur d'écran dit, "Hire Date edit combo", suivi de la date présente dans l'élément, "06/08/1981". Il continue ensuite à lire les informations visibles dans le calendrier et donne des instructions pour la navigation et l'accès aux données.

  22. Appuyez sur <Tab>. Le lecteur d'écran dit : "Salary edit spinbox. 2,450. Entrez un nombre supérieur ou égal à 0. Pour définir la valeur, utilisez les touches fléchées ou saisissez la valeur."

  23. Appuyez sur <Tab>. Le lecteur d'écran indique "Manager Id, read-only edit. 7839"

  24. Appuyez sur <Tab>. Le lecteur d'écran dit : "Bouton radio de comptabilité coché. 1 sur 4."

    Notez que le lecteur d'écran n'a pas annoncé l'étiquette de l'ensemble de boutons radio.

  25. Pour corriger le libellé de l'ensemble de boutons radio, localisez la balise <oj-radioset> dans le fichier organization.html.

      <oj-radioset id="dept-id"
     options="[[depsDataProvider]]"
     value="[[empDetails().deptno]]">
  </oj-radioset>

  26. Ajoutez un attribut label-hint="Departments" à la balise <oj-radioset> afin de fournir un libellé visible et parlé pour l'ensemble de boutons radio.

      <oj-radioset id="dept-id"
     label-hint="Departments"
     options="[[depsDataProvider]]"
     value="[[empDetails().deptno]]">
  </oj-radioset>

  27. Enregistrez et fermez le fichier. Votre fichier doit ressembler à organization-page2-html.txt.

  28. Le navigateur actualise l'application en cours d'exécution pour récupérer les modifications apportées à la page Organisation.

  29. Réexécutez la validation du lecteur d'écran pour vous assurer que les nouvelles étiquettes sont prononcées.

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

  31. Dans la fenêtre de terminal, quittez l'application en appuyant sur <Ctrl+C> et, si vous y êtes invité, entrez y.

Le deuxième ensemble de correctifs d'accessibilité est terminé.

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.