Tester la navigation au clavier dans les composants Oracle JET complexes

Introduction

Il s'agit de notre premier regard sur l'onglet Départements dans l'application ACCLearningPath. Le processus d'examen décrit dans le parcours d'apprentissage précédent de la présente série sur l'accessibilité est suivi afin de cerner tout problème 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'interface de ligne de commande JavaScript runtime, Node.js et Oracle JET version 13.0 (ou ultérieure) installée
Accès au Guide des développeurs Oracle JET
Accès au Guide du clavier et des gestes Oracle JET
Achèvement du tutoriel précédent dans ce parcours de formation, Vérification de 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, accédez au dossier ACCLearningPath et exécutez l'application.
```
$ ojet serve
```
L'application du navigateur s'ouvre sur la page Introduction et l'onglet Aperçu est chargé.
Cliquez sur l'onglet Departments dans la barre d'onglets et évaluez la structure de la page. La page Services se compose de trois panneaux, chaque panneau affichant les données des services à l'aide de divers composants Oracle JET.
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%;">

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 d'ouverture <div> et <oj-filmstrip> 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 balises <div> et <oj-data-grid> afin d'identifier le panneau et de 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 <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 balises <div> et <oj-chart> d'ouverture. 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.

Tâche 2 : effectuer un test au clavier uniquement

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

Appuyez sur <Ctrl+L> pour activer la barre d'adresse.
Appuyez sur <Tab>. Le focus se déplace vers le lien skip nav.
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 se déplace vers Introduction dans le menu de navigation immédiatement sous le menu utilisateur.
Appuyez sur <Tab>. Le focus se déplace vers Présentation dans la barre d'onglets.
Appuyez sur <Tab>. Le focus est placé sur la comptabilité dans la pellicule.
Appuyez sur <right arrow> pour passer à l'entrée suivante, Recherche, 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, Opérations.
Appuyez sur <Tab>. Le focus se déplace 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>. Le focus se déplace vers Accounting sous la deuxième colonne de la grille de données, Name.
Appuyez sur <right arrow>. Le focus se déplace vers New York dans la colonne finale de la grille de données, Lieu.

Le contour du focus apparaît autour de la cellule qui contient le nom de la ville.
Appuyez sur <F2>. Le contour du focus se resserre pour entourer uniquement le texte New York dans la cellule.

Selon la documentation de l'élément <oj-data-grid> sur le clavier, utilisez <F2> pour rendre le contenu de la cellule exploitable. La clé de fonction <F2> vous permet de lancer les actions prises en charge par le composant actif. Dans ce cas, la cellule contient un lien vers Google Maps que vous activerez.
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 du focus s'élargit pour entourer la cellule qui contient 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 actionnable afin de continuer à naviguer vers d'autres composants.
Appuyez sur <Tab>. Le focus se déplace vers la première barre du graphique à barres.

Le dernier élément de la revue d'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 que la page sera complètement chargée.
Cliquez sur l'onglet Departments 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 indique : "Passer 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 l'espace 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 : Onglet Région principale. Onglet Services sélectionné. 4 sur 4."
Appuyez sur <Tab> pour déplacer le focus vers la bandelette. JAWS dit : " Comptabilité. New York. 3 employés. Affichage de la page 1 sur 4."
Appuyez sur <Tab> pour déplacer le curseur vers la grille de données. JAWS dit : " 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 de données du tableau de gauche à droite. Ensuite, il lit le focus actuel, "Ligne 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 dit : " Visualisation des données : graphique. 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 ne donne aucune indication des en-têtes des panneaux. Il n'y a pas non plus moyen de faire défiler la pellicule d'une page à l'autre.
Ouvrez le fichier departments.html dans votre éditeur de code.
- Le critère de réussite 4.1.2 Nom, rôle, valeur requiert qu'un libellé soit associé à chacun des composants des trois panneaux. Les titres de niveau 4 servent d'étiquettes visibles.
- Etiquette dans le nom du critère de succès 2.5.3 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 incorporeront le texte de l'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 balises fermantes </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 fermantes </div> et </oj-bind-if>.

        </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 bande de film, la grille de données et le graphique et que les contrôles de pagination sont présents sous la bande de film.

Etape suivante

Ce tutoriel conclut le module Valider et corriger l'accessibilité des applications dans ce parcours de formation sur l'accessibilité des applications Web.

Personnaliser les événements de cycle de vie connectés
Valider l'accessibilité des vues maître-détail dans une application Oracle JET
Vérification de l'accessibilité de la table et du message des composants Oracle JET
Tester la navigation au clavier dans les composants complexes d'Oracle JET

Vous pouvez revenir à la page principale du parcours de formation sur l'accessibilité pour accéder à tous les modules sur l'accessibilité, ainsi qu'à d'autres parcours de formation.

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.

Informations relatives au titre et au copyright

Test keyboard navigation in complex Oracle JET components

F58357-02

Oracle et/ou ses affiliés.