Tester la navigation au clavier dans les composants complexes d'Oracle JET

Introduction

Ce sera notre premier aperçu de l'onglet Services dans l'application ACCLearningPath. Le processus de révision décrit dans le parcours de formation précédent de cette série d'accessibilité est suivi pour identifier les problèmes d'accessibilité.

Objectifs

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

Prérequis

Environnement de développement configuré pour créer des applications Oracle JET avec l'exécution JavaScript, Node.js et l'interface de ligne de commande Oracle JET version 13.0 (ou ultérieure) installée
Accès au cookbook Oracle JET Developer
Accès au guide du clavier et de la gestuelle Oracle JET
Fin du tutoriel précédent dans ce parcours pédagogique, Verify the Accessibility of Oracle JET Components Table and Message

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

Dans la fenêtre de terminal, accédez au dossier ACCLearningPath et exécutez l'application.
```
$ ojet serve
```
L'application du navigateur s'ouvrira sur la page Introduction avec l'onglet Aperçu chargé.
Cliquez sur l'onglet Services dans la barre d'onglets et évaluez la structure de la page. La page Services se compose de trois panneaux, chacun affichant les données relatives aux services à l'aide de différents composants Oracle JET.

Description de l'image departments_tab_before.png
Accédez au dossier ACCLearningPath/src/js/views et ouvrez le fichier departments.html dans un éditeur de code.

Localisez la balise <div> principale dans le fichier.

<div class="oj-hybrid-padding">
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Insérez un en-tête h3 entre les deux balises <div> pour identifier la page Services.

<div class="oj-hybrid-padding">
   <h3>Departments</h3>
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Repérez la balise <div> qui définit le panneau central contenant une pellicule.

<div class="oj-flex-item fs-container">
   <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
      . . . >

Insérez un en-tête h4 entre les balises d'ouverture <div> et <oj-filmstrip> pour identifier le panneau et fournir un libellé visible pour la pellicule.

<div class="oj-flex-item fs-container">
   <h4>Departments Film Strip</h4>
   <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
      . . . >

Repérez la balise <div> qui forme le panneau de gauche contenant une grille de données.

<div class="oj-flex-item">
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Insérez un en-tête h4 entre les balises <div> et <oj-data-grid> pour identifier le panneau et fournir un libellé visible pour la grille de données.

<div class="oj-flex-item">
   <h4>Departments Data Grid</h4>
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Localisez la balise d'ouverture <div> qui forme le troisième panneau contenant un graphique.

<div class="oj-flex-item oj-sm-margin-4x-horizontal">
   <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
      . . . >

Insérez un en-tête h4 entre les balises d'ouverture <div> et <oj-chart>. Cet en-tête identifie le panneau et sert de libellé visuel pour le graphique.

<div class="oj-flex-item oj-sm-margin-4x-horizontal">
   <h4>Salaries by Department</h4>
   <oj-chart id="pieChart"
      type="bar"
      data="[[chartDataProvider]]"
      animation-on-display="auto"
      animation-on-data-change="auto"
      . . . >

Enregistrez le fichier. Dans le navigateur, vérifiez les modifications apportées à l'onglet Services de votre application.

Description de l'image departments_tab_after.png

Tâche 2 : effectuer un test avec clavier uniquement

La deuxième partie de l'examen d'accessibilité consiste à effectuer un test au clavier uniquement de l'onglet Services de l'application.

Appuyez sur <Ctrl+L> pour mettre le focus sur la barre d'adresse.
Appuyez sur <Tab>. Le focus se déplace vers le lien de navigation Ignorer.
Appuyez sur <Tab>. Le focus se déplace vers john.hancock@oracle.com dans le menu utilisateur en haut à droite de la page.
Appuyez sur <Tab>. Le focus passe à Introduction dans le menu de navigation situé immédiatement sous le menu utilisateur.
Appuyez sur <Tab>. Le focus passe à Aperçu dans la barre d'onglets.
Appuyez sur <Tab>. Le focus passe à Comptabilité dans la pellicule.
Appuyez sur <right arrow> pour passer à l'entrée suivante, Research, dans la pellicule.
Appuyez sur <left arrow> pour revenir à Comptabilité dans la pellicule.
Appuyez trois fois sur <right arrow>. Le focus passe à la dernière entrée de la pellicule, Operations.
Appuyez sur <Tab>. Le focus passe à la première cellule du corps de données dans la grille de données, sous la colonne Id. La valeur de la cellule focalisée est 10.
Appuyez sur <right arrow>. Le focus passe à Comptabilité sous la deuxième colonne de la grille de données, Nom.
Appuyez sur <right arrow>. Le focus passe à New York dans la dernière colonne de la grille de données, Emplacement.

Notez que le contour principal apparaît autour de la cellule contenant le nom de la ville.
Appuyez sur <F2>. Le plan d'action se resserre pour entourer uniquement le texte New York dans la cellule.

Selon la documentation du clavier de l'élément <oj-data-grid>, utilisez <F2> pour rendre le contenu de la cellule exploitable. La touche de fonction <F2> vous permet de lancer des actions prises en charge par le composant actif. Dans ce cas, la cellule contient un lien vers Google Maps que vous allez activer.
Appuyez sur <Enter> pour activer le lien New York. Une nouvelle fenêtre de navigateur s'ouvre sur une page Google Maps de New York.
Appuyez sur <Ctrl+F4> pour fermer la fenêtre Google Maps.
Appuyez sur <Esc>. Le contour principal s'élargit pour entourer la cellule contenant New York dans la troisième colonne.

Selon la documentation du clavier de l'élément <oj-data-grid>, utilisez <Esc> pour quitter le mode interactif afin de pouvoir continuer à naviguer vers d'autres composants.
Appuyez sur <Tab>. Le focus passe à la première barre du graphique à barres.

La dernière partie de la révision de l'accessibilité est la validation du lecteur d'écran. Les étapes de validation suivantes sont basées sur l'utilisation du lecteur d'écran JAWS, mais les résultats seront similaires si vous utilisez le lecteur d'écran NVDA.

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é, saisissez y.
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 la page entièrement chargée.
Cliquez sur l'onglet Services dans la barre d'onglets. N'utilisez pas la souris après ce point.
Appuyez sur <Ctrl+L> pour activer la barre d'adresse.
Appuyez sur <Tab>. JAWS lit : " Passez au contenu principal. Même lien de page."
Appuyez sur <Tab>. JAWS dit : " Région de Banner. Barre d'outils. Menu du bouton john.hancock@oracle.com. Appuyez sur la barre d'espacement pour activer le menu, puis naviguez avec les touches fléchées."
Appuyez sur <Tab>. JAWS indique : "Onglet Région de navigation. Onglet Introduction sélectionné. 1 sur 2."
Appuyez sur <Tab>. JAWS indique "Main region tab". Onglet Services sélectionné. 4 sur 4."
Appuyez sur <Tab> pour déplacer le focus vers la bande de film. JAWS dit : "Comptabilité. New York. 3 employés. Affichage de la page 1 sur 4."
Appuyez sur <Tab> pour déplacer le focus vers la grille de données. JAWS indique : "Il s'agit d'une grille de données avec 4 lignes et 3 colonnes. ID. Nom Lieu." Après avoir lu les en-têtes de colonne, le lecteur d'écran lit les cellules du corps de données de la table de gauche à droite. Puis il lit le focus actuel, "Row 1. Colonne 1. ID : 10."
Appuyez sur <right arrow>. JAWS dit : "Colonne 2. Name : Accounting."
Appuyez sur <right arrow>. JAWS dit : "Colonne 3. Lieu : New York. Contient des commandes. Vous avez atteint la dernière colonne. "
Appuyez sur <Tab>. JAWS dit : " Data visualization : chart. Graphique. Série : Comptabilité ; Groupe : Département ; Valeur : 3 750,00 USD. Graphique."

Notez que lorsque le focus se déplace entre les panneaux, JAWS n'indique aucun en-tête de panneau. Il n'est pas non plus possible de faire défiler la pellicule d'une page à l'autre.
Ouvrez le fichier departments.html dans l'éditeur de code.
- Nom, rôle, valeur du critère de réussite 4.1.2 exige que chacun des composants des trois panneaux soit associé à une étiquette. Les en-têtes level-4 servent de libellés visibles.
- Libellé du critère de réussite 2.5.3 dans le nom exige que le texte entier de l'en-tête soit inclus dans le libellé. Les attributs aria-label ajoutés aux étapes 18 à 23 suivantes incorporent le texte d'en-tête pour le panneau.

Localisez la balise d'ouverture <oj-film-strip> et ajoutez un attribut aria-label.

<oj-film-strip id="deptFilmstrip"
   max-items-per-page="1"
   aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
   arrow-visibility="hidden"
   class="demo-stretch-items"
   . . . >

Localisez la balise d'ouverture <oj-data-grid> et ajoutez un attribut aria-label.

<oj-data-grid id="datagrid"
   style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
   aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
   data="[[dgDataProvider]]"
   header.column.style="[[getCellWidth]]"
   . . . >

Localisez la balise d'ouverture <oj-chart> et ajoutez un attribut aria-label.

<oj-chart id="pieChart"
   type="bar"
   aria-label="Salaries by Department bar chart"
   data="[[chartDataProvider]]"
   animation-on-display="auto"
   animation-on-data-change="auto"
   . . . >

La modification finale implique les contrôles de pagination de la pellicule dans le panneau central.

Localisez les balises de fermeture </oj-film-strip> et </oj-bind-if>.

      </oj-film-strip>
   </div>
</div>
</oj-bind-if>

Ajoutez le contrôle de pagination et les éléments div environnants entre les balises </div> et </oj-bind-if> de fermeture.

      </oj-film-strip>
   </div>
</div>
<div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
   <div class="oj-flex-item">
      <div style="text-align: center;">
      <div style="display: inline-block;margin-top: 4px;">
         <oj-paging-control id="pagingControl"
            aria-controls="deptFilmstrip"
            data="[[pagingModel]]"
            page-size="0"
            page-options='{"type": "dots"}'>
         </oj-paging-control>
      </div>
      </div>
   </div>
</div>
</oj-bind-if>

Enregistrez le fichier. Votre fichier doit ressembler à departments-html.txt.
Réexécutez la validation du lecteur d'écran. Assurez-vous que les étiquettes sont prononcées pour la pellicule, la grille de données et le graphique et que les contrôles de pagination sont présents sous la pellicule.

Vous avez terminé le tutoriel final dans la série de parcours de formation sur l'accessibilité de l'application.

Ressources de formation supplémentaires

Explorez d'autres ateliers sur docs.oracle.com/learn ou accédez à davantage de contenu de formation gratuit sur le canal Oracle Learning YouTube. En outre, accédez à education.oracle.com/learning-explorer pour devenir explorateur Oracle Learning.

Pour consulter la documentation du produit, consultez Oracle Help Center.

Informations relatives au titre et au copyright

Test keyboard navigation in complex Oracle JET components

F34165-02

October 2022