Tester la navigation au clavier dans les composants Oracle JET complexes

Présentation

Ce sera notre premier aperçu de l'onglet Départements dans l'application ACCLearningPath. Le processus d'examen décrit dans le cheminement d'apprentissage précédent de cette série sur l'accessibilité est suivi pour cerner 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.

Conditions requises

Environnement de développement configuré pour créer des applications Oracle JET avec l'interface de ligne de commande JavaScript d'exécution, Node.js et Oracle JET version 13.0 (ou ultérieure) installée
Accès au livre de recettes Oracle JET Developer
Accès au Guide Oracle JET Keyboard and Gesture
Achèvement du tutoriel précédent dans ce cheminement d'apprentissage, Vérifier l'accessibilité de la table et du message des composants Oracle JET

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

Dans la fenêtre de terminal, naviguez jusqu'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, dans lesquels chaque panneau affiche les données des services à l'aide de divers composants Oracle JET.
Naviguez jusqu'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 marqueurs <div> pour identifier la page Services.

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

Localisez 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 <div> et <oj-filmstrip> d'ouverture pour identifier le panneau et fournir une étiquette 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”
      . . . >

Localisez 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 marqueurs <div> et <oj-data-grid> pour identifier le panneau et fournir une étiquette 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 <div> d'ouverture 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 marqueurs <div> et <oj-chart> d'ouverture. Cet en-tête identifie le panneau et sert d'étiquette visuelle 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.

Tâche 2 : Effectuer un test avec clavier uniquement

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

Appuyez sur <Ctrl+L> pour mettre l'accent sur la barre d'adresse.
Appuyez sur <Tab>. La cible se déplace vers le lien de navigation ignoré.
Appuyez sur <Tab>. La cible est déplacée vers john.hancock@oracle.com dans le menu de l'utilisateur en haut à droite de la page.
Appuyez sur <Tab>. La cible passe à Introduction dans le menu de navigation immédiatement sous le menu de l'utilisateur.
Appuyez sur <Tab>. La cible passe à Aperçu dans la barre d'onglets.
Appuyez sur <Tab>. La cible passe à la comptabilité dans la pellicule.
Appuyez sur <right arrow> pour passer à l'entrée suivante, Rechercher, dans la pellicule.
Appuyez sur <left arrow> pour revenir à Comptabilité dans la pellicule.
Appuyez trois fois sur <right arrow>. La cible passe à la dernière entrée de la pellicule, Opérations.
Appuyez sur <Tab>. La cible est déplacée vers 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>. La cible passe à Comptabilité sous la deuxième colonne de la grille de données, Nom.
Appuyez sur <right arrow>. La cible est déplacée vers New York dans la colonne finale de la grille de données, Emplacement.

Notez que le contour de mise au point apparaît autour de la cellule qui contient le nom de la ville.
Appuyez sur <F2>. La structure de mise au point se resserre pour entourer uniquement le texte New York dans la cellule.

Selon la documentation sur le clavier de l'élément <oj-data-grid>, utilisez <F2> pour rendre le contenu de la cellule exploitable. La clé 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>. La structure cible s'élargit pour entourer la cellule qui contient New York dans la troisième colonne.

Selon la documentation sur le clavier de l'élément <oj-data-grid>, utilisez <Esc> pour quitter le mode d'action afin que vous puissiez continuer à naviguer vers d'autres composants.
Appuyez sur <Tab>. La cible se déplace vers la première barre du graphique à barres.

La dernière partie de l'évaluation 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é, entrez 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 régler la cible à 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 bannière. 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 dit : " Onglet Région de navigation. Onglet Introduction sélectionné. 1 de 2."
Appuyez sur <Tab>. JAWS dit : " Onglet Région principale. Onglet Services sélectionné. 4 de 4."
Appuyez sur <Tab> pour déplacer la mise au point vers la bande de film. JAWS dit : "Comptabilité. New York. 3 employés. Affichage de la page 1 de 4."
Appuyez sur <Tab> pour déplacer la cible 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 Emplacement." Après avoir lu les en-têtes de colonne, le lecteur d'écran lit les cellules du corps de données du tableau de gauche à droite. Ensuite, il lit le focus actuel, "Rangée 1. colonne 1. ID : 10."
Appuyez sur <right arrow>. JAWS dit : " Colonne 2. Nom : Comptabilité."
Appuyez sur <right arrow>. JAWS dit : " Colonne 3. Lieu : New York. Contient des contrôles. Vous avez atteint la dernière colonne."
Appuyez sur <Tab>. JAWS déclare : " Data visualization : chart. Graphique. Série : Comptabilité; Groupe : Département; Valeur : USD 3 750,00. Graphique."

Notez que lorsque la mise au point se déplace entre les panneaux, JAWS ne donne aucune indication des en-têtes des panneaux. Il n'y a pas non plus de moyen de faire défiler la pellicule de page en page.
Ouvrez le fichier departments.html dans votre éditeur de code.
- Nom, rôle, valeur du critère de succès 4.1.2 exige qu'une étiquette soit associée à chacun des composants des trois panneaux. Les en-têtes de niveau 4 servent d'étiquettes visibles.
- Étiquette du critère de succès 2.5.3 dans le nom exige que le texte entier de l'en-tête soit inclus dans l'étiquette. Les attributs aria-label ajoutés aux étapes 18 à 23 suivantes intégreront le texte d'en-tête du panneau.

Localisez la balise <oj-film-strip> d'ouverture 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 <oj-data-grid> d'ouverture 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 <oj-chart> d'ouverture 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"
     . . . >

Le changement final implique les commandes de pagination pour la pellicule dans le panneau central.

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

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

Ajoutez le contrôle de pagination et les éléments div environnants entre les marqueurs </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 parlé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.

Étape suivante

Ce tutoriel conclut le module Valider et corriger l'accessibilité de l'application dans ce cheminement d'apprentissage sur l'accessibilité de l'application Web.

Personnaliser les événements de cycle de vie connectés
Valider l'accessibilité des vues principales détaillées dans une application Oracle JET
Vérifier l'accessibilité des tables et des messages des composants Oracle JET
Tester la navigation dans le clavier dans les composants Oracle JET complexes

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

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.

Titre et informations sur les droits d'auteur

Test keyboard navigation in complex Oracle JET components

G40647-01

Oracle et/ou ses sociétés affiliées.