Test d'une application Oracle JET pour l'accessibilité au clavier uniquement

Introduction

Il s'agit du deuxième tutoriel du parcours de formation Identifier les problèmes d'accessibilité.

La directives d'accessibilité des contenus Web (WCAG) 2.2 décrit de nombreux critères de réussite pour la création d'une application Web accessible. Ce tutoriel se concentre sur les critères qui traitent de l'utilisation du clavier uniquement.

Une application accessible au clavier uniquement peut être utilisée avec d'autres périphériques d'entrée pour les personnes à mobilité réduite ou incapables de manipuler une souris. Quand les gens peuvent utiliser un clavier, Internet est à portée de main.

Objectifs

Dans ce tutoriel, vous apprendrez à effectuer un test au clavier d'une application Web uniquement.

Prérequis

Tâche 1 : préparation aux tests d'accessibilité au clavier uniquement

L'inspection visuelle fournit un aperçu de la structure et des fonctionnalités de base d'une page accessible. Les tests au clavier sont au centre des tests d'accessibilité manuels ; ils permettent au développeur d'interagir avec l'application du point de vue d'un utilisateur handicapé. Le sous-ensemble des critères de réussite WCAG 2.2 autour desquels ce tutoriel se concentre implique plusieurs concepts spécifiques.

Les critères de réussite mentionnés au début de cette section abordent indirectement le concept d'éléments focalisables, de sorte qu'il faut définir quelques termes.

Une fois ces concepts applicables définis et expliqués, vous êtes prêt à tester l'application de démarrage.

Notez le texte "Aucune exception" entre parenthèses du critère de succès 2.1.3. Cela signifie que l'accessibilité au clavier est obligatoire.

La ligne directrice 2.1 du WCAG et le critère de succès qui suit soulignent le besoin absolu d'accessibilité au clavier. Le clavier joue un rôle central dans l'apport de la technologie à tous.

Tâche 2 : vérifier l'existence d'un focus visuel

Les tests d'accessibilité au clavier uniquement reposent uniquement sur l'indicateur central. Le respect du critère de succès "Focus Visible" suivant n'est pas négociable. Les utilisateurs désactivés ne peuvent pas naviguer dans une application sans focus actif ou lorsque le placement du focus n'est pas clair.

Lorsque vous utilisez l'application Web sous forme de tabulation, il doit toujours y avoir un indicateur visible identifiant l'emplacement du focus. L'indicateur est généralement un rectangle. La désactivation du rectangle de mise au point entraîne l'échec de ce critère.

Les développeurs d'applications sont fiers des applications et des programmes qu'ils écrivent. Leur objectif est d'intégrer la fonction à une expérience visuellement attrayante. Un rectangle de mise au point nuit souvent à la conception ; les développeurs le cachent souvent ou le désactivent et violent le critère de succès 2.4.7.

Rectangle de focalisation 1

Rectangle de focalisation 1

Focus Rectangle 2

Focus Rectangle 2

Repérez le point d'attention dans les deux captures d'écran ci-dessus.

La première capture d'écran, Focus Rectangle 1, représente une page avec une indication correcte du focus. L'indicateur de mise au point est très évident car il entoure l'onglet Aperçu en haut à gauche de la page. La deuxième capture d'écran, Focus Rectangle 2, ne contient aucune indication de mise au point autour de l'onglet Overview.

Surveillez le rectangle de mise au point lorsque vous parcourez les premiers composants pouvant être mis au point sur la page Introduction.

  1. Si votre application n'est pas déjà en cours d'exécution, accédez au dossier ACCLearningPath et démarrez-la.

    $ ojet serve

  2. Lorsque l'application s'ouvre dans votre navigateur, appuyez sur <Ctrl+L> pour mettre en surbrillance la barre d'adresse, puis appuyez sur <Tab> pour déplacer le focus vers le lien de navigation de saut.

  3. Appuyez sur <Tab> pour déplacer le curseur vers john.hancock@oracle.com dans le menu utilisateur, en haut à droite de la page.

  4. Appuyez sur <Tab> pour déplacer le curseur vers Introduction dans le menu de navigation principal immédiatement sous le menu utilisateur.

  5. Appuyez sur <down arrow> pour déplacer le curseur vers Ressources dans le menu de navigation et appuyez sur <Enter> pour charger la page Ressources.

    Page Ressources

  6. Appuyez sur <Tab> pour déplacer le curseur vers le lien Site principal Oracle JET.

    Notez qu'il n'y a pas d'indication claire de l'emplacement du focus. La page Ressources échoue au critère de succès 2.4.7.

    Dans les étapes suivantes, vous corrigerez le problème du rectangle de mise au point absent afin de respecter les normes WCAG.

  7. Accédez au dossier ACCLearningPath/src/js/views et ouvrez le fichier resources.html dans un éditeur de code.

  8. Localisez le lien du site principal Oracle JET.

    <li><a style="outline-width:0"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

    Remplacez "outline-width:0" par "outline-width:3" dans l'attribut de style.

    <li><a style="outline-width:3"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

  9. Enregistrez et fermez resources.html.

    Votre fichier doit ressembler à resources-html.txt.

  10. Répétez les étapes 2 à 6 ci-dessus pour vérifier que le rectangle de mise au point est maintenant visible.

Tâche 3 : vérifier une séquence d'onglets significatifs

La prochaine étape du test au clavier implique l'organisation d'une page en tant qu'onglets utilisateur.

L'ordre de mise au point peut être mieux compris avec une illustration. Lorsque l'utilisateur parcourt la page, l'emplacement du focus n'est pas aléatoire. Il ne se déplace pas d'un côté de la page à l'autre et à nouveau. Il se déplace de manière logique et attendue.

Dans la tâche précédente Vérifier l'existence d'un focus visuel, vous avez vu comment le focus se déplaçait dans un ordre attendu dans la bannière de la page. Cependant, la page Ressources elle-même a été codée pour illustrer un ordre d'onglets plus aléatoire.

  1. Dans l'application en cours d'exécution, appuyez sur <Ctrl+L> pour activer la barre d'adresse.
  2. Appuyez sur <Tab> pour déplacer le focus vers le lien Skip nav.
  3. Appuyez sur <Tab> pour déplacer le curseur vers john.hancock@oracle.com dans le menu utilisateur, en haut à droite de la page.
  4. Appuyez sur <Tab> pour déplacer le curseur vers Introduction dans le menu de navigation principal.
  5. Appuyez sur <Tab> pour déplacer le curseur vers le lien Site principal Oracle JET dans le corps de la page.

  6. Appuyez sur <Tab>. Focus doit passer au Guide du développeur Oracle JET, mais plutôt au lien Oracle JET Cookbook.

    Le lien Guide du développeur Oracle JET n'est pas dans la séquence d'onglets, ce qui enfreint les critères de succès 2.4.3.

    Les étapes 7 à 11 décrivent la méthode nécessaire pour renvoyer le lien Oracle JET Developer's Guide à sa position correcte dans la séquence d'onglets. Les étapes 12 à 16 illustrent comment confirmer que le correctif a fonctionné.

  7. Dans votre éditeur de code, localisez le lien Oracle JET Developer's Guide dans le fichier resources.html.

    <li><a tabindex="-1"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    L'attribut tabindex="-1" retire complètement ce lien de l'ordre des onglets de la page.

  8. Modifiez la valeur de l'attribut tabindex sur 0 pour que le lien reprenne sa place dans la séquence d'onglets de la page.

    <li><a tabindex="0"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

  9. Enregistrez et fermez le fichier. La page Ressources du navigateur est automatiquement actualisée avec son nouveau contenu.

  10. Appuyez sur <Ctrl+L> pour activer la barre d'adresse.

  11. Appuyez trois fois sur <Tab> pour déplacer le curseur vers Introduction dans le menu de navigation.

  12. Appuyez sur <Tab> pour déplacer le curseur vers le lien Site principal Oracle JET.

  13. Appuyez sur <Tab> pour accéder au lien Oracle JET Developer's Guide.

  14. Continuez à appuyer sur <Tab> jusqu'à ce que le focus se place sur le lien A propos d'Oracle dans le pied de page.

    Une fois que vous avez parcouru tous les éléments pouvant être sélectionnés sur une page, annulez le traitement. Parfois, lorsque vous effectuez un décalage vers l'arrière dans une page, le chemin change de manière inattendue, de nouveaux éléments apparaissent ou certains éléments disparaissent.

  15. Utilisez <Shift+Tab> pour vous déplacer de bas en haut afin de vous assurer que la séquence significative est vraie lors de la navigation inversée dans la page.

Tâche 4 : Interagir avec les contrôles

La plupart des contrôles utilisés dans ce tutoriel sont des contrôles propres à Oracle JET. Une caractéristique d'Oracle JET est que ses composants sont conçus avec une accessibilité au clavier uniquement déjà intégrée. Les développeurs qui utilisent Oracle JET peuvent copier des composants directement à partir du livre de recettes Oracle JET et les mettre en place, et le code obtenu est accessible.

Par exemple, voici une brève liste des frappes courantes pour interagir avec les composants HTML standard :

Remarque : pour certains contrôles, tels que les menus de navigation, les barres d'onglets, les groupes d'options et les contrôles de groupe similaires, vous devrez peut-être ouvrir un onglet dans le contrôle, puis utiliser les touches fléchées pour y naviguer.

Utilisez l'application de démarrage en cours d'exécution pour interagir avec plusieurs composants Oracle JET.

  1. Appuyez sur <Ctrl+L> pour activer la barre d'adresse.

  2. Appuyez sur <Tab> pour déplacer le focus vers le lien Skip nav.

  3. Appuyez sur <Tab> pour déplacer le curseur vers john.hancock@oracle.com dans le menu utilisateur, en haut à droite de la page.

    Selon la documentation du clavier de l'élément <oj-menu-button>, appuyez sur <Space>, <Enter> ou <down arrow> pour ouvrir le menu et appuyez sur <Escape> pour fermer le menu.

  4. Appuyez sur la touche <Space> pour développer le menu utilisateur. Le focus se déplace vers les préférences.

  5. Appuyez sur <down arrow> pour descendre dans la liste des éléments de menu.

  6. Appuyez sur <Escape> pour fermer le menu utilisateur.

  7. Appuyez sur <Tab>. Le focus se déplace vers Introduction dans le menu de navigation principal immédiatement sous le menu utilisateur.

    Pour plus d'informations sur les touches spécifiques de chaque composant Oracle JET, reportez-vous au Guide du clavier et de la gestuelle Oracle JET.

Tâche 5 : identifier un déroutement de clavier

Le dernier sujet présenté au début de ce tutoriel implique un concept connu sous le nom de piège à clavier. Une interruption de clavier se produit lorsqu'un utilisateur ne peut pas éloigner le focus d'un élément de la page à l'aide de <Tab>, <Shift+Tab> ou de l'une des touches fléchées.

Une interruption de clavier rend la page entière inutilisable pour un utilisateur de type clavier uniquement. La solution courante pour un piège à clavier est de redémarrer l'application.

Passons à la pratique !

Cette section du tutoriel fournit un exemple détaillé de méthodologie de test au clavier uniquement.

Lorsque vous testez la page Organisation de l'application, vérifiez qu'il y a toujours une indication visible de l'emplacement du focus et que le focus se déplace selon un schéma prévisible.

La page que vous allez tester est accessible via l'onglet Organisation de la page Introduction.

Page Organisation

Utilisez l'application de démarrage pour effectuer un test au clavier de la page Organisation.

  1. Dans la page Ressources de l'application, appuyez sur <Ctrl+L> pour activer la barre d'adresse.

  2. Appuyez sur <Tab> pour déplacer le focus vers le lien Skip nav.

  3. Appuyez sur <Tab> pour déplacer le curseur vers john.hancock@oracle.com dans le menu utilisateur, en haut à droite de la page.

  4. Appuyez sur <Tab> pour déplacer le curseur vers Introduction dans le menu de navigation principal sous le nom d'utilisateur.

    Selon la documentation de l'élément <oj-navigation-list> sur le clavier, utilisez les touches <up arrow> et <down arrow> pour naviguer dans les éléments du menu de navigation principal.

  5. Appuyez sur <Enter> pour sélectionner Introduction.

  6. Appuyez sur <Tab>, puis sur <right arrow> pour accéder à l'onglet Organisation dans la barre d'onglets. Appuyez sur <Enter> pour charger la page Organisation.

    Selon la documentation de l'élément <oj-tab-bar> sur le clavier, utilisez les touches fléchées pour vous déplacer dans la barre d'onglets.

  7. Appuyez sur <Tab> pour déplacer le curseur vers l'arborescence. Le focus se place sur le premier élément pouvant être sélectionné, le noeud Comptabilité.

    Selon la documentation de l'élément <oj-tree-view> sur le clavier, utilisez les touches <up arrow> et <down arrow> pour naviguer entre les noeuds dans l'arborescence.

  8. Appuyez sur <right arrow> pour développer le noeud de groupe Accounting dans l'arborescence, puis appuyez sur <left arrow> pour réduire le noeud de groupe.

  9. Appuyez deux fois sur <down arrow> pour déplacer le curseur vers l'employé JONES dans le noeud de groupe RESEARCH. Ensuite, appuyez sur <Enter> pour le sélectionner.

    Un formulaire apparaîtra sur le côté droit de la page avec les détails de l'employé.

    Onglet Organisation avec panneau Détails de l'employé

  10. Appuyez sur <Tab> pour déplacer le curseur vers le champ ID d'employé.
  11. Appuyez sur <Tab> pour déplacer le curseur vers le champ Nom de l'employé.
  12. Appuyez sur <Tab> pour déplacer le curseur vers le champ Titre du travail.

  13. Appuyez sur <Tab> pour déplacer le curseur vers le champ Date d'embauche et afficher une grille de calendrier développée.

    Selon la documentation du clavier de l'élément <oj-date-picker>, appuyez sur les touches fléchées pour modifier le focus de la date dans la grille de calendrier.

  14. Appuyez sur <down arrow>, puis utilisez les touches fléchées pour déplacer le curseur vers une date dans le sélecteur de date développé. Appuyez ensuite sur <Enter> pour sélectionner une date.

  15. Appuyez sur <Tab> pour déplacer le curseur vers le champ Salaire.

    Selon la documentation au clavier de l'élément <oj-input-number>, utilisez <up arrow> pour augmenter la valeur du salaire et utilisez <down arrow> pour diminuer la valeur du salaire.

  16. Appuyez sur <Tab> et essayez de déplacer le curseur vers le champ Manager ID.

    Avez-vous remarqué qu'une fois le focus déplacé dans le champ Salaire, appuyer sur <Tab> ou <Shift+Tab> n'a pas déplacé le focus hors du champ ? Ce champ comporte une interruption de clavier. Sans correction du code, la seule façon de quitter le déroutement est d'actualiser la page.

Tâche 6 : supprimer le déroutement

  1. Accédez au dossier src/js/views et ouvrez le fichier organization.html dans un éditeur.

  2. Localisez l'élément <oj-input-number> où id="salary" :

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1"
   on-blur="[[setKeyTrap]]">
</oj-input-number>

    Supprimez l'attribut on-blur qui provoque l'interruption du clavier.

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1">
</oj-input-number>

  3. Enregistrez le fichier. Répétez ensuite les étapes de la tâche Identify a Keyboard Trap précédente pour vous assurer que le déroutement du clavier a été supprimé.

  4. Lorsque vous atteignez le champ Manager Id, appuyez sur <Tab> pour déplacer le curseur vers les boutons radio Jobs.

    Selon la documentation du clavier de l'élément <oj-radioset>, utilisez <up arrow> pour sélectionner le bouton précédent dans le groupe. Utilisez <down arrow> pour sélectionner le bouton suivant dans le groupe.

  5. Appuyez sur <Tab> pour déplacer le curseur vers le lien A propos d'Oracle dans la section de pied de page de la page.

  6. Inversez le processus. Appuyez sur <Shift+Tab> pour revenir aux boutons radio Jobs. Continuez à appuyer sur <Shift+Tab> pour revenir à la page john.hancock@oracle.com dans le menu utilisateur.

N'oubliez pas de consulter le Guide du clavier et des gestes Oracle JET si vous avez des questions concernant les frappes nécessaires pour utiliser ou naviguer dans un composant Oracle JET.

La phase de test du clavier uniquement est terminée.

Etape suivante

Passez au tutoriel suivant de ce module.

Ce tutoriel fait partie du module Identifier les problèmes d'accessibilité.

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.