Vérifier l'accessibilité des tables et des messages des composants Oracle JET

Présentation

Dans le tutoriel Exécuter la validation de la lecture d'écran sur une application Oracle JET, nous avons traité 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 dans la page Employés 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, Valider l'accessibilité des vues principales détaillées dans une application Oracle JET

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

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

Naviguez jusqu'au répertoire ACCLearningPath dans le terminal et exécutez l'application.
```
$ ojet serve
```
Votre navigateur s'ouvrira à la page Introduction de l'application avec l'onglet Aperçu chargé. Cliquez sur l'onglet Employés dans la barre d'onglets et inspectez la page Employés.

La page Employés comprend deux volets. Les en-têtes HTML sont manquants dans la page elle-même et dans chaque panneau.
Naviguez jusqu'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>

Immédiatement après l'ouverture de la balise <div>, 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 une table.

   
<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 d'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"
      . . . >
   
```
Le tableau adhère désormais à la fois à l'étiquette du critère de succès WCAG 2.5.3 dans le nom et à l'information et aux relations du critère de succès WCAG 1.3.1. Pour répondre à ces critères, l'étiquette visuelle et le texte d'instruction du panneau de droite doivent être inclus dans l'étiquette parlée d'un contrôle.

Localisez la balise <div> d'ouverture qui définit le panneau droit 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 marqueurs <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 avec clavier uniquement

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

Dans la page Employés, appuyez sur <Ctrl+L> pour définir la cible 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 principal 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 à l'en-tête de la première colonne, Numéro d'employé, dans la table Employés.
Appuyez sur <down arrow> pour mettre l'accent sur la première rangée de données de la table.

L'écran Employee Details (Détails de l'employé) doit apparaître dans le panneau situé à droite de la page.
Appuyez sur <Space> pour sélectionner la rangée, puis sur <F2> pour déplacer la cible vers le premier élément tabulaire, le bouton Modifier.
Appuyez sur <Space> pour activer le bouton Modifier. Une boîte de dialogue Modifier l'employé s'ouvre et se concentre sur le champ ID employé.
Appuyez sur <Tab>. La cible est déplacée vers le champ Nom de l'employé.
Appuyez sur <Tab>. La cible est déplacée vers le champ Titre d'emploi.
Appuyez sur <Tab>. La cible est déplacée vers le champ Date d'embauche.
Appuyez sur <Tab>. La cible est déplacée vers le champ Salaire.
Appuyez sur <Tab>. La cible est déplacée vers le bouton Enregistrer.
Appuyez sur <Space> pour activer le bouton Enregistrer et fermer la boîte de dialogue. La cible retourne à la première rangée de données sélectionnée de la table Employés.

Notez la zone de message dans le coin supérieur gauche de la page. La boîte de message confirme 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'asseoir en dehors de la fenêtre de la loupe.
Naviguez jusqu'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 au clavier uniquement pour vérifier que l'emplacement du message de confirmation a été déplacé vers la table.

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 Employés 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 Employés sélectionné. 3 sur 4."
Appuyez sur <Tab>. JAWS indique : "Table avec 6 colonnes et plus de 13 rangées. Table Employés - Activer une rangée pour voir les détails de l'employé. En-tête de colonne 1, Numéro d'employé." La cible se déplace vers la première cellule de la rangée des en-têtes de colonne de table.
Appuyez sur <down arrow>. JAWS dit : " Rangée 1 : 7839. Non sélectionné. Colonne 1, Numéro d'employé : 7839." La cible se trouve dans la première ligne de données de la table.
Appuyez sur <right arrow>. JAWS indique le numéro de colonne et le nom d'utilisateur de l'employé.
Appuyez sur <Space>. La ligne est sélectionnée, et JAWS dit : "Espace. sélectionnées."
Appuyez sur <F2> pour passer au premier élément tabbable. JAWS dit : " Bouton Modifier. Pour activer, appuyez sur Entrée."
Appuyez sur <Enter>. JAWS dit : " Modifier l'employé. Modifier un employé. ID employé 7 839…" Le lecteur d'écran ouvre la boîte de dialogue Modifier l'employé et continue la lecture jusqu'à ce qu'une touche soit enfoncée.
Appuyez cinq fois sur <Tab> pour passer des champs modifiables et en lecture seule au bouton Enregistrer. JAWS dit : "Enregistrer le bouton. Pour activer, appuyez sur Entrée."
Appuyez sur <Enter>. JAWS dit : " Catégorie de message : confirmation. Mises à jour enregistrées. Les modifications pour l'employé Onegin ont été enregistrées. " Le nom d'utilisateur de l'employé dans votre application peut varier ici, en raison des modifications apportées dans un tutoriel précédent.
Appuyez sur <F6> pour lire le contenu de la zone de message. JAWS dit, "Messages région complémentaire. Mises à jour enregistrées. Entrée de la région des messages. Appuyez sur F6 pour retourner à l'élément ciblé précédent."
Appuyez sur <Tab>. JAWS dit : " Bouton Fermer. Pour activer, appuyez sur Entrée."
Appuyez sur <Enter> pour fermer la zone de message. La cible retourne à la table 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.

Ceci complète le troisième jeu de correctifs d'accessibilité.

Étape suivante

Passez au tutoriel suivant dans 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 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é.

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

Verify the accessibility of Oracle JET components table and message

G40642-01

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