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

Présentation

Il s'agit du deuxième tutoriel du cheminement d'apprentissage Identifier les problèmes d'accessibilité.

Les directives d'accessibilité du contenu Web (WCAG) 2.2 décrivent 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 uniquement au clavier 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. Lorsque les gens peuvent utiliser un clavier, Internet est à leur portée.

Objectifs

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

Conditions requises

Tâche 1 : Préparer les tests d'accessibilité au clavier uniquement

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

Les critères de succès mentionnés au début de cette section traitent indirectement du concept d'éléments focalisables, il faut donc 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 "No Exception" entre parenthèses du critère de succès 2.1.3. Cela signifie que l'accessibilité du clavier est obligatoire.

La directive WCAG 2.1 et le critère de succès qui suit soulignent le besoin absolu d'accessibilité du clavier. Le clavier joue un rôle central en apportant la technologie à tout le monde.

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

Les tests d'accessibilité au clavier uniquement reposent uniquement sur l'indicateur de mise au point. 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 positionnement du focus n'est pas clair.

Lorsque vous utilisez l'application Web, il doit toujours y avoir un indicateur visible identifiant l'emplacement de mise au point. L'indicateur est typiquement 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 engageante. Un rectangle de mise au point nuit souvent à la conception; les développeurs le cachent ou le désactivent donc souvent et enfreignent le critère de succès 2.4.7.

Rectangle de focalisation 1

Rectangle de focalisation 1

Rectangle de focalisation 2

Rectangle de focalisation 2

Localisez le point de mise au point 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 de la cible. 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 dans l'onglet Overview (Aperçu).

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

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

    $ ojet serve

  2. Lorsque l'application s'ouvre dans votre navigateur, appuyez sur <Ctrl+L> pour définir la mise au point sur la barre d'adresse, puis appuyez sur <Tab> pour déplacer la mise au point vers le lien Ignorer la navigation.

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

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

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

    Page Ressources

  6. Appuyez sur <Tab> pour vous concentrer sur le lien Site principal Oracle JET.

    Notez qu'il n'y a aucune indication claire de l'emplacement de mise au point. La page Ressources échoue avec le critère de succès 2.4.7.

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

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

  8. Localisez le lien du site principal d'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 significative

La partie suivante 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. Comme l'utilisateur navigue dans la page, l'emplacement de mise au point 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 attendue et logique.

Dans la tâche Vérifier l'existence d'une cible visuelle précédente, vous avez vu comment la cible a été déplacée dans un ordre prévu à travers 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 mettre l'accent sur la barre d'adresse.
  2. Appuyez sur <Tab> pour déplacer la cible vers le lien Ignorer la navigation.
  3. Appuyez sur <Tab> pour déplacer la cible vers john.hancock@oracle.com dans le menu de l'utilisateur, en haut à droite de la page.
  4. Appuyez sur <Tab> pour déplacer la cible vers Introduction dans le menu de navigation principal.
  5. Appuyez sur <Tab> pour déplacer la cible vers le lien Site principal Oracle JET dans le corps de la page.

  6. Appuyez sur <Tab>. Vous devez vous concentrer sur Oracle JET Developer's Guide, mais plutôt sur le lien Oracle JET Cookbook.

    Le lien Oracle JET Developer's Guide ne se trouve pas dans la séquence d'onglets, ce qui viole les critères de réussite 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 à 0 pour retourner le lien à sa place appropriée 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 le fichier et fermez-le. La page Ressources du navigateur est automatiquement actualisée avec son nouveau contenu.

  10. Appuyez sur <Ctrl+L> pour mettre l'accent sur la barre d'adresse.

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

  12. Appuyez sur <Tab> pour vous concentrer sur le lien Site principal Oracle JET.

  13. Appuyez sur <Tab> pour vous concentrer sur le lien Oracle JET Developer's Guide.

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

    Une fois que vous avez parcouru tous les éléments pouvant être ciblés d'une page, inversez le traitement. Parfois, lorsque l'on glisse vers l'arrière à travers 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 inverse 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 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 de touches courantes pour interagir avec les composants HTML standard :

Note : Pour certains contrôles tels que les menus de navigation, les barres d'onglets, les groupes radio et les contrôles de groupe similaires, vous devrez peut-être tabuler 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 mettre l'accent sur la barre d'adresse.

  2. Appuyez sur <Tab> pour déplacer la cible vers le lien Ignorer la navigation.

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

    Selon la documentation sur le clavier de l'élément <oj-menu-button>, la pression sur <Space>, <Enter> ou <down arrow> ouvre le menu et la pression sur <Escape> ferme le menu.

  4. Appuyez sur <Space> pour développer le menu utilisateur. La cible est déplacée vers les préférences.

  5. Appuyez sur <down arrow> pour déplacer vers le bas la liste des éléments de menu.

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

  7. Appuyez sur <Tab>. La cible passe à Introduction dans le menu de navigation principal immédiatement sous le menu de l'utilisateur.

    Pour plus d'informations sur les frappes spécifiques à chaque composant Oracle JET, voir Oracle JET Keyboard and Gesture Guide.

Tâche 5 : Identifier un piège à clavier

Le dernier sujet présenté au début de ce tutoriel implique un concept connu sous le nom de piège à clavier. Un piège à 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.

Un piège à clavier rend toute la page inutilisable pour un utilisateur disposant uniquement d'un clavier. La solution courante pour un piège à clavier est de redémarrer l'application.

Mettons-nous en pratique!

Cette section du didacticiel donne un exemple détaillé d'une 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 de mise au point et que la mise au point se déplace selon un modèle prévisible.

La page que vous allez tester est accessible via l'onglet Organization (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 mettre l'accent sur la barre d'adresse.

  2. Appuyez sur <Tab> pour déplacer la cible vers le lien Ignorer la navigation.

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

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

    Selon la documentation sur le clavier de l'élément <oj-navigation-list>, utilisez les clés <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 déplacer la cible vers l'onglet Organisation de la barre d'onglets. Appuyez sur <Enter> pour charger la page Organisation.

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

  7. Appuyez sur <Tab> pour déplacer le focus vers la vue arborescente. La cible se trouve sur le premier élément pouvant être ciblé, le noeud Comptabilité.

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

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

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

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

    Onglet Organisation avec écran Détails sur l'employé

  10. Appuyez sur <Tab> pour déplacer la cible vers le champ ID employé.
  11. Appuyez sur <Tab> pour déplacer la cible vers le champ Nom de l'employé.
  12. Appuyez sur <Tab> pour déplacer la cible vers le champ Titre d'emploi.

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

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

  14. Appuyez sur <down arrow>, puis utilisez les touches fléchées pour déplacer le focus 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 la cible vers le champ Salaire.

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

  16. Appuyez sur <Tab> et tentez de déplacer la cible vers le champ ID gestionnaire.

    Avez-vous remarqué qu'une fois que la cible a été déplacée dans le champ Salaire, appuyer sur <Tab> ou <Shift+Tab> n'a pas déplacé la cible hors du champ? Ce champ comporte un piège à clavier. Sans correction du code, la seule façon de sortir du piège est d'actualiser la page.

Tâche 6 : Supprimer le piège

  1. Naviguez jusqu'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 Identifier un piège à clavier précédente pour vous assurer que le piège à clavier a été supprimé.

  4. Lorsque vous atteignez le champ ID gestionnaire, appuyez sur <Tab> pour déplacer la cible vers les boutons radio Travaux.

    Selon la documentation sur le 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 la cible vers le lien À propos d'Oracle dans la section de pied de page de la page.

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

N'oubliez pas de consulter le Oracle JET Keyboard and Gestures Guide si vous avez des questions concernant les touches nécessaires pour utiliser ou naviguer dans un composant Oracle JET.

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

Étape suivante

Passez au tutoriel suivant dans ce module.

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

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.