Vérification de l'accessibilité de la table et du message des composants Oracle JET

Introduction

Dans le tutoriel Exécuter la validation de lecteur d'écran sur une application Oracle JET, nous avons abordé plusieurs problèmes d'accessibilité dans la page Employés. Il reste plusieurs questions que nous aborderons dans ce tutoriel.

Objectifs

Dans ce tutoriel, vous apprendrez à identifier et à résoudre les problèmes d'accessibilité restants sur la page Employés 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, Validation de l'accessibilité des vues maître-détail dans une application Oracle JET

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

La première étape de la révision consiste à s'assurer que tous les en-têtes HTML nécessaires sont présents sur la page.

Accédez au répertoire ACCLearningPath dans le terminal et exécutez l'application.
```
$ ojet serve
```
Votre navigateur s'ouvre sur la page Introduction de l'application et l'onglet Aperçu est chargé. Cliquez sur l'onglet Salariés dans la barre d'onglets et consultez la page Salariés.

La page Salariés se compose de deux panneaux. Les en-têtes HTML sont absents de la page elle-même et de chaque panneau.
Accédez au dossier ACCLearningPath/src/js/views et ouvrez le fichier employees.html dans un éditeur.

Localisez la première balise <div> d'ouverture dans le fichier.

<div class="oj-hybrid-padding">
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

Juste après la balise <div> d'ouverture, insérez un en-tête h3 pour identifier la page Employés.

<div class="oj-hybrid-padding">
   <h3>Employees</h3>
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

Localisez la balise <div> d'ouverture qui forme le panneau de gauche contenant un tableau.

   
<div class="oj-flex-item">
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

Entre les balises <div> et <oj-table> d'ouverture, insérez un en-tête h4 pour étiqueter correctement ce panneau.

   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

Modifiez l'attribut aria-label de l'élément <oj-table> pour inclure à la fois le texte de l'en-tête et le texte d'instruction affiché dans le deuxième panneau.
```
   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table - Activate a row to see employee details"
      . . . >
   
```
La table respecte désormais les critères de succès WCAG - Critère de succès 2.5.3 - Libellé dans le nom et WCAG - Critère de succès 1.3.1 - Informations et relations. Pour répondre à ces critères, le libellé visuel et le texte d'instruction du panneau de droite doivent être inclus dans le libellé parlé d'un contrôle.

Localisez la balise d'ouverture <div> qui définit le panneau de droite de la page Employés qui contiendra les détails de l'employé.

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <oj-bind-if test="[[!activeRow()]]">

Entre les balises <div> et <oj-bind-if>, insérez un en-tête h4 sous la règle horizontale qui identifiera ce panneau.

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <h4>Employee Details</h4>
   <oj-bind-if test="[[!activeRow()]]">

Enregistrez le fichier. Votre fichier doit ressembler à employees-page-html.txt.
Vérifiez les modifications appliquées dans l'application en cours d'exécution.

Tâche 2 : effectuer un test au clavier uniquement

Cette section et la partie Exécuter un test de lecteur d'écran suivante de ce tutoriel doivent être effectuées sans utiliser de souris. Au cours de ce test, assurez-vous que le point focal est toujours clairement identifié et que l'ordre des tabulations est prévisible.

Dans la page Employés, 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 principal 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 l'en-tête de la première colonne, Matricule de l'employé, dans la table Employés.
Appuyez sur <down arrow> pour mettre l'accent sur la première ligne de données de la table.

Le formulaire Détails de l'employé doit apparaître dans le panneau à droite de la page.
Appuyez sur <Space> pour sélectionner la ligne, puis sur <F2> pour déplacer le curseur vers le premier élément tabbable, le bouton Modifier.
Appuyez sur <Space> pour activer le bouton Edit. Une boîte de dialogue Modifier l'employé s'ouvre et le focus est placé sur le champ ID de l'employé.
Appuyez sur <Tab>. Le focus est placé sur le champ Nom de l'employé.
Appuyez sur <Tab>. Le focus se déplace vers le champ Titre du travail.
Appuyez sur <Tab>. Le focus se déplace vers le champ Date d'embauche.
Appuyez sur <Tab>. Le focus se déplace vers le champ Salaire.
Appuyez sur <Tab>. Le focus se déplace vers le bouton Enregistrer.
Appuyez sur <Space> pour activer le bouton Save et fermer la boîte de dialogue. Le focus revient à la première ligne de données sélectionnée de la table Salariés.

Notez la zone de message dans le coin supérieur gauche de la page. Le message indique que les mises à jour ont été enregistrées.

Le logiciel de grossissement d'écran met l'accent sur la table Employés, de sorte que le message de confirmation peut s'afficher en dehors de la fenêtre d'affichage de la loupe.
Accédez au dossier ACCLearningPath/src/js/viewModels et modifiez employees.js.

Localisez la définition de this.positionObject.

  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "window",
  };

Modifiez la définition positionObject de sorte que l'emplacement de l'objet soit basé sur la table plutôt que sur la fenêtre.
```
  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "#table",
  };
```
Enregistrez le fichier. Répétez ensuite les étapes 1 à 15 du test du clavier uniquement pour vérifier que l'emplacement du message de confirmation a été déplacé vers la table.

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 Employees 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 : "Passer au contenu principale. 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 Employés sélectionné. 3 sur 4."
Appuyez sur <Tab>. JAWS dit : "Table avec 6 colonnes et plus de 13 lignes. Table Salariés - Activer une ligne pour afficher les détails du salarié. En-tête de colonne 1, matricule employé. Le focus se déplace vers la première cellule de la ligne des en-têtes de colonne de tableau.
Appuyez sur <down arrow>. JAWS dit : "Ligne 1:7839. Non sélectionné. Colonne 1, Matricule de l'employé : 7839." Le focus se trouve sur la première ligne de données du tableau.
Appuyez sur <right arrow>. JAWS indique le numéro de colonne et le nom utilisateur de l'employé.
Appuyez sur <Space>. La ligne est sélectionnée et JAWS dit : "Espace. Sélectionné."
Appuyez sur <F2> pour passer au premier élément tabbable. JAWS dit : " Bouton Modifier. Appuyez sur Entrée pour activer."
Appuyez sur <Enter>. JAWS dit : "Modifier un employé. Modifier l'employé. ID d'employé 7 839…" Le lecteur d'écran ouvre la boîte de dialogue Modifier l'employé et poursuit la lecture jusqu'à ce qu'une touche soit enfoncée.
Appuyez sur <Tab> cinq fois pour déplacer les champs modifiables et en lecture seule vers le bouton Enregistrer. JAWS dit : "Bouton Enregistrer. Appuyez sur Entrée pour activer."
Appuyez sur <Enter>. JAWS dit : " Catégorie de message : confirmation. Mises à jour enregistrées. Les modifications apportées à l'employé Onegin ont été sauvegardées." Le nom d'utilisateur de l'employé dans votre application peut être différent ici, en raison des modifications apportées dans un tutoriel antérieur.
Appuyez sur <F6> pour lire le contenu de la boîte de message. JAWS dit : " La région complémentaire des messages. Mises à jour enregistrées. Saisie de la région des messages. Appuyez sur F6 pour revenir à l'élément sélectionné précédent.
Appuyez sur <Tab>. JAWS dit : "Fermez le bouton. Appuyez sur Entrée pour activer."
Appuyez sur <Enter> pour fermer la zone de message. Le focus revient au tableau et à la cellule sélectionnée précédente.
Arrêtez votre lecteur d'écran.
Dans la fenêtre de terminal, quittez l'application en appuyant sur <Ctrl+C> et, si vous y êtes invité, entrez y.

Cela complète le troisième ensemble de correctifs d'accessibilité.

Etape suivante

Passez au tutoriel suivant de ce module.

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

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 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.

Informations relatives au titre et au copyright

Verify the accessibility of Oracle JET components table and message

F58369-02

Oracle et/ou ses affiliés.