Test d'une application Oracle JET pour l'accessibilité : inspection visuelle

Introduction

La directives d'accessibilité des contenus Web (WCAG) 2.2 contient un ensemble de plus de soixante critères de réussite pour la création d'une application Web accessible. Dans ce parcours d'apprentissage, nous allons nous concentrer sur un sous-ensemble de ces critères qui se concentrent principalement sur :

Ce tutoriel se concentre sur l'endroit où les tests d'une application commencent : l'inspection visuelle. Ce tutoriel et les deux qui suivent, Test d'une application Oracle JET pour l'accessibilité au clavier uniquement et Exécution de la validation du lecteur d'écran sur une application Oracle JET, vous guideront tout au long des étapes de test nécessaires. Vous devez suivre ces trois tutoriels de test dans l'ordre avant de poursuivre le parcours de formation.

La première étape dans l'évaluation d'une application web pour l'accessibilité est d'effectuer une revue visuelle de l'application. Pendant la révision, recherchez les éléments suivants :

Objectifs

Dans ce tutoriel, vous apprendrez à effectuer un test d'accessibilité manuel d'une application Web, ainsi que la structure d'audit Oracle JavaScript peut vous aider à trouver les problèmes d'accessibilité.

Prérequis

Tâche 1 : préparer l'application Starter

Nous utilisons une application de démarrage Oracle JET 13.0 Nav Drawer dans ce parcours pédagogique.

  1. A l'emplacement de votre système de fichiers où vous souhaitez que l'application réside, extrayez le fichier ACCLearningPath.zip téléchargé dans un dossier ACCLearningPath.

  2. Ouvrez une fenêtre de terminal et vérifiez que la dernière version de l'interface de ligne de commande (CLI) d'Oracle JET est installée (la version 13.0 ou ultérieure est requise).

    $ ojet --version

    Si la dernière version de la CLI d'Oracle JET s'affiche, l'installation est correcte. Dans le cas contraire, réinstallez la plate-forme à l'aide de la commande npm install.

    • Pour Windows :

       $ npm install -g @oracle/ojet-cli

    • Pour les systèmes Mac et Linux :

       $ sudo npm install -g @oracle/ojet-cli

      Une fois l'installation terminée, la CLI d'Oracle JET affiche un récapitulatif de toutes les modifications.

  3. Accédez au répertoire ACCLearningPath et restaurez les outils d'application Oracle JET.

    $ ojet restore

  4. Exécutez l'application.

    $ ojet serve

    L'outil Oracle JET exécute votre application dans un navigateur Web local. Le navigateur s'ouvre sur la page Introduction de l'application et l'onglet Aperçu est chargé. L'application est prête à être utilisée.

    Laissez la fenêtre de terminal et le navigateur ouverts pour que votre application se mette automatiquement à jour avec toutes les modifications que vous apportez.

Tâche 2 : auditer l'application

Oracle JET Audit Framework (JAF) est un utilitaire de ligne de commande qui prend en charge l'API conçue pour auditer les fichiers d'une application Oracle JET, en fonction des options d'exécution détectées dans un fichier de configuration. Les messages de diagnostic renvoyés par l'audit d'une application proviennent de jeux de règles intégrés spécifiques à la version JET de l'application. Toutefois, la structure d'audit est extensible et les utilisateurs peuvent étendre ses capacités en écrivant des règles personnalisées.

Les audits JAF Oracle peuvent aider à identifier l'accessibilité et d'autres problèmes dans vos applications, bien qu'ils ne trouvent pas tous les problèmes d'accessibilité que nous allons résoudre dans l'application ACCLearningPath. C'est pourquoi, en plus de l'audit de l'application, vous devez suivre la procédure et les étapes décrites dans ce parcours de formation Identifier les problèmes d'accessibilité pour trouver et résoudre les problèmes d'accessibilité. Un audit JAF doit être exécuté au début de la mise à disposition de l'exemple d'application, afin d'identifier les problèmes potentiels dans votre application avant de commencer votre travail. Pour plus d'informations sur Oracle JAF, reportez-vous à Utilisation et extension de la structure d'audit Oracle JET.

Téléchargez et utilisez Oracle JAF en mode CLI pour rechercher les problèmes d'accessibilité.

  1. Utilisez npm pour installer l'interface de ligne de commande Oracle JAF.

    Ouvrez une fenêtre de terminal et recherchez les versions installées d'Oracle JAF.

    $ ojaf -v

    S'il n'est pas installé ou si votre version de JAF n'est pas la version actuelle, désinstallez les anciennes versions et installez la version la plus récente.

    $ npm uninstall -g @oracle/oraclejet-audit

    $ npm install -g @oracle/oraclejet-audit

  2. Accédez au répertoire ACCLearningPath de votre application et utilisez l'indicateur de ligne de commande --init pour initialiser une configuration JAF par défaut.

    $ ojaf --init

    L'outil conserve le fichier de configuration JAF par défaut oraclejafconfig.json dans le répertoire ACCLearningPath et définit les paramètres de configuration par défaut basés sur le fichier de configuration de l'application JET oraclejetconfig.json, également situé dans le répertoire racine de l'application.

  3. Ouvrez oraclejafconfig.json dans votre éditeur et assurez-vous que la valeur de la propriété jetVer est correcte pour la version de JET sur laquelle effectuer l'audit (par exemple, 13.0, 13.1, etc.).

    "builtinJetRules": true,
   "jetVer": "13.0",

    Vous pouvez personnaliser l'audit de votre application en ajoutant ou en modifiant les propriétés JAF dans le fichier oraclejafconfig.json. Vous trouverez une description complète des options de configuration dans A propos des propriétés du fichier de configuration Oracle JAF.

  4. Avant d'auditer l'application pour la première fois, vous pouvez confirmer la configuration par défaut des fichiers que JAF va auditer à l'aide de l'indicateur de ligne de commande --dryrun.

    $ ojaf --dryrun

    Une simulation n'audit pas l'application mais confirme les fichiers à auditer en fonction des paramètres de configuration JAF actuels.

    Remarque : vous pouvez obtenir la liste complète des indicateurs de ligne de commande en saisissant la commande ojaf --help.

  5. Effectuez un audit de votre application en entrant la commande permettant d'appeler l'utilitaire d'audit JAF.

    $ ojaf

  6. Lorsque vous exécutez l'audit, Oracle JAF recherche oraclejafconfig.json dans le répertoire et crée un rapport d'audit.

    Le rapport répertorie les problèmes de rupture de règle trouvés dans l'application, ainsi que leur emplacement dans les fichiers de l'application. En outre, le rapport comprend un résumé des problèmes détectés et de leur gravité, des règles auditées et des fichiers audités.

    Rapport d'audit JAF

    Dans la liste des problèmes du rapport d'audit, notez le problème de niveau de gravité blocker trouvé dans le fichier departments.html : 'aria-label' or 'aria-labelledby' missing on <oj-film-strip>.

    Une propriété aria-label est manquante dans le composant pellicule-bande dans l'application, ce qui peut empêcher un lecteur d'écran d'accéder à l'identité du composant. C'est l'un des problèmes d'accessibilité que nous aborderons dans des tutoriels ultérieurs.

Il s'agit de la fin de la discussion sur Oracle JAF dans ce parcours pédagogique. Lorsque vous avez terminé d'auditer votre application, n'oubliez pas de supprimer le dossier jaftmp@ et le fichier oraclejafconfig.json du répertoire ACCLearningPath.

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

La structure de page est le point de départ logique de l'inspection visuelle d'une application. Les en-têtes HTML fournissent un aperçu du contenu de la page sans se concentrer sur des détails spécifiques. Les lecteurs d'écran fournissent des raccourcis permettant aux utilisateurs de se déplacer rapidement entre les en-têtes correctement balisés.

Utilisez l'application ACCLearningPath pour vérifier la structure de la page.

  1. Dans l'application en cours d'exécution, déterminez si les sections des pages sont identifiées par des en-têtes.

    Le texte des en-têtes est plus grand ou a un style différent du texte standard de la page. Créez des en-têtes HTML vrais à l'aide des balises <h1> à <h6>.

  2. Déterminez si le texte de chaque en-tête décrit correctement le contenu qui lui est associé.

    Examinez l'onglet Overview de la page Introduction. Le troisième panneau, le plus à droite, comporte l'en-tête Espacement de texte. Le contenu de ce panneau concerne l'ajustement de l'espacement du texte. Par conséquent, cette position est un exemple de position suffisamment descriptive.

  3. Utilisez l'onglet Éléments de Chrome DevTools pour déterminer si les en-têtes sont de vrais en-têtes HTML ou du texte conçu pour les ressembler.

    • Cliquez avec le bouton droit de la souris sur l'en-tête Page Introduction et sélectionnez Inspecter dans le menu contextuel pour afficher la structure DOM (Document Object Model) de la page.

      L'élément en surbrillance dans l'arborescence DOM, affiché dans le panneau DevTools Eléments, utilise la méthode appropriée pour créer un en-tête HTML.

       <h4>The Introduction Page</h4>

    • Fermez DevTools, puis cliquez avec le bouton droit de la souris sur l'en-tête Page Ressources et sélectionnez Inspecter dans le menu contextuel.

      L'élément en surbrillance dans cette arborescence DOM est un texte dont le style ressemble à un en-tête HTML.

       <span class="h4Style">The Resources Page</span>

      Un lecteur d'écran ne détectera pas ce code comme en-tête. Les utilisateurs du lecteur d'écran naviguent souvent sur une page par en-tête, et le texte dont le style ressemble à celui des en-têtes est ignoré. Dans les étapes suivantes, vous allez corriger l'en-tête mal codé. Laissez votre application en cours d'exécution et votre navigateur ouvert pour observer comment les modifications suivantes affectent l'application.

  4. Accédez au dossier ACCLearningPath/src/js/views et ouvrez overview.html dans l'éditeur de code.

  5. Localisez la balise <span class="h4Style">.

  6. Remplacez la balise <span class="h4Style"> par une balise <h4>.

  7. Remplacez la balise </span> par une balise </h4>.

  8. Enregistrez le fichier et affichez les modifications apportées à votre application dans le navigateur.

Tâche 4 : vérifier le titre de la page

Une inspection visuelle de l'application comprend une évaluation de l'efficacité du titre de la page.

Parcourez l'application de démarrage en cours d'exécution et examinez le titre de chaque page.

  1. Déterminez si le titre de la page identifie clairement la page, l'onglet et le nom de l'application.

  2. Déterminez si le titre de la page change lorsque vous naviguez entre les pages ou entre les onglets de la page Introduction.

    Le titre de la page doit changer pour chaque nouvelle page ou onglet affiché. Par exemple, lorsque Introduction est sélectionné dans le menu principal en haut à droite de la page, le titre doit être "Introduction" et lorsque Ressources est sélectionné, le titre doit être "Ressources".

    Le titre de la page Introduction doit inclure à la fois le mot "Introduction" et le nom de l'onglet sélectionné. Lorsque vous sélectionnez un autre onglet dans la barre d'onglets, le titre doit changer pour refléter le nouvel onglet sélectionné.

    • Présentation
    • Introduction - Organisation
    • Introduction - Employés
    • Introduction - Services

    De même, le titre de la page Ressources doit inclure le mot "Ressources".

    Vous remarquerez que le titre de la page ne change pas lorsque vous naviguez entre les pages ou les onglets. Ce problème sera résolu dans un tutoriel ultérieur.

Lorsqu'il y a des contenus répétés tels que des liens de navigation et des logos dans l'en-tête de page d'une application Web, incluez un lien de navigation de saut. Les normes du secteur suggèrent que le lien de navigation de saut doit être masqué jusqu'à ce qu'il soit accessible par tabulation.

Testez l'existence du lien skip nav dans l'application exécutée dans le navigateur.

  1. Dans l'application, appuyez sur <Ctrl+L> pour déplacer le focus vers la barre d'adresse.

  2. Appuyez sur <Tab> pour faire apparaître le lien de saut de navigation et recevoir le focus.

    Comme aucun lien de navigation de saut n'apparaît, le focus est placé sur le premier élément pouvant être sélectionné sur la page : john.hancock@oracle.com dans le menu utilisateur en haut à droite de la page. Les éléments pouvant être sélectionnés sont définis plus en détail dans le tutoriel Accessibilité au clavier uniquement.

    Vous avez déterminé au cours du test que l'application de démarrage n'a pas de lien de navigation de saut implémenté.

    Pour ajouter le lien skip nav, procédez comme suit :

    1. Ajoutez le lien au fichier index.html.
    2. Ajoutez une classe de style au fichier app.css pour masquer le lien Ignorer la navigation jusqu'à ce qu'il fasse l'objet d'un tabulation.
    3. Ajoutez les ancres cible aux fichiers intro.html et resources.html.

Mettre à jour le fichier index.html

Le fichier index.html définit la structure globale de l'application Web Oracle JET. Le lien Ignorer la navigation doit être placé sur cette page.

  1. Accédez au répertoire ACCLearningPath/src et ouvrez index.html dans un éditeur de code.

  2. Localisez la balise <body>.

    <body class="oj-web-applayout-body">
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

  3. Insérez un lien avec sa cible en tant que #main entre la balise <body> et le commentaire qui la suit.

    <body class="oj-web-applayout-body">
   <a class="hideSkipNav" href="#main">Skip to main content</a>
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

    La classe hideSkipNav rendra le lien invisible jusqu'à ce que l'utilisateur commence en haut de la page et appuie sur <Tab>.

  4. Enregistrez et fermez index.html. Votre fichier doit ressembler à index-html.txt.

Mettre à jour le fichier app.css

Nous avons référencé la classe de style hideSkipNav dans le fichier index.html. Nous devons maintenant le définir dans app.css. Toutes les définitions de style personnalisées se trouvent dans ce fichier.

  1. Accédez au dossier ACCLearningPath/src/css et modifiez app.css.

  2. Ajoutez la classe et les propriétés de style .hideSkipNav à la fin du fichier.

    .hideSkipNav { 
   position: absolute;
   left: -1000px; }

.hideSkipNav:focus {
   position: unset;
   left: 0px; }

  3. Enregistrez et fermez app.css. Votre fichier doit ressembler à app-css.txt.

Mettre à jour les fichiers HTML des pages

Comme la cible du lien skip nav doit se trouver en haut du contenu principal de chaque page, ajoutez les balises d'ancrage cible aux pages Introduction et Ressource.

  1. Accédez au dossier ACCLearningPath/src/js/views et modifiez le fichier intro.html.

  2. Localisez <div> avec la classe oj-hybrid-padding.

    <div class="oj-hybrid-padding">
   <div id="mainContainer">

  3. Insérez la balise d'ancrage et l'en-tête h2 entre les deux balises <div>.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Introduction</h2>
</a>
   <div id="mainContainer">

    Le code ajouté fournit non seulement la cible du lien de navigation de saut, mais également un en-tête h2 pour améliorer la structure des pages.

  4. Enregistrez et fermez intro.html. Votre fichier doit ressembler à intro-html.txt.

  5. Ouvrez resources.html dans l'éditeur de code et localisez <div> avec la classe oj-hybrid-padding.

    <div class="oj-hybrid-padding">
   <ul>

  6. Insérez la balise d'ancrage et l'en-tête h2 entre les balises <div> et <ul>.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Resources</h2>
</a>
   <ul>

  7. Enregistrez et fermez resources.html. Votre fichier doit ressembler à resources-html.txt.

  8. Dans l'application en cours d'exécution, appuyez sur <Ctrl+L> pour déplacer le focus vers la barre d'adresse.

  9. Appuyez sur <Tab> pour que le lien Ignorer la navigation apparaisse et reçoive le focus.

  10. Appuyez sur <Enter> pour activer le lien Ignorer la navigation.

    Le focus se déplace ensuite vers le contenu principal de la page.

    Une fois que vous avez testé la fonctionnalité du lien de navigation de saut, passez à l'élément suivant de l'inspection visuelle.

Tâche 6 : vérifier l'utilisation de la couleur et de la position

Les boutons font partie intégrante des directions qui font passer un utilisateur d'une page ou d'une action à l'autre. Les développeurs améliorent l'apparence et la fonctionnalité d'une page à l'aide de boutons colorés. "Appuyez sur le bouton vert pour continuer" est une instruction courante. Pourtant, sans étiquetage approprié, les utilisateurs malvoyants ne peuvent pas suivre ces instructions et des instructions similaires.

Le panneau central de la page Aperçu contient une barre d'outils avec trois boutons de couleur, ainsi que quelques instructions pour appuyer sur les boutons en fonction de leur couleur et de leur position. Un utilisateur aveugle ou daltonien ne peut pas distinguer les boutons car ils n'ont pas d'étiquettes ou d'autres caractéristiques distinctives. Ce jeu de boutons échoue aux critères de succès 1.3.3 et 1.4.1.

Utilisation des instructions de couleur

Un libellé de texte doit être associé à chacun des boutons colorés du panneau central. Les modifications suivantes ajouteront des noms de couleur en tant que libellés aux boutons.

  1. Accédez au dossier ACCLearningPath/src/js/views et modifiez le fichier overview.html.

  2. Localisez l'ensemble de trois éléments oj-button.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">
</oj-button>

  3. Modifiez les boutons du code pour créer les identificateurs de couleur.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">Green
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">Red
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">Purple
</oj-button>

  4. Enregistrez overview.html et vérifiez que les boutons ont désormais les libellés de texte appropriés.

    Votre fichier doit se présenter comme suit : overview-html.txt.

Tâche 7 : vérifier la lisibilité

La phase finale de l'inspection visuelle est spécifique aux utilisateurs à faible vision. Déterminez si l'ajustement de l'espacement des lignes, des mots et des caractères ou la modification du niveau de zoom de la page augmente ou diminue la lisibilité.

Nous allons utiliser la page Aperçu pour illustrer ces critères et vérifier l'espacement du texte et zoomer sur l'application.

Vérifier l'espacement et le zoom du texte

  1. Dans l'application en cours d'exécution, examinez le panneau le plus à droite de la page, intitulé Espacement de texte. Le panneau contient deux sections. Comparez le texte dans les deux sections pour vous assurer que tout le texte est présent.

    La partie supérieure du panneau contient du texte avec un espacement normal. La partie inférieure contient le même texte avec un espacement de caractères, de mots et de lignes accru.

    Si aucun des caractères de la section inférieure n'est déformé, coupé ou chevauché, la page répond au critère de succès 1.4.12.

  2. Augmentez le niveau de zoom du navigateur à 200%. Cliquez sur l'icône de zoom en loupe dans la barre d'outils, puis cliquez sur le signe + pour augmenter le zoom.

    Si tout le texte est lisible et s'encapsule correctement à l'intérieur de chaque panneau, alors la page répond au critère de succès 1.4.4 avec un grossissement de 200%.

    • Le critère de réussite 1.4.10 Reflow indique : " Le contenu peut être présenté sans perte d'informations ni de fonctionnalités, et sans nécessiter de défilement dans deux dimensions pour :
      • Contenu de défilement vertical d'une largeur équivalente à 320 pixels CSS ;
      • Contenu défilant horizontal d'une hauteur équivalente à 256 pixels CSS. Sauf pour les parties du contenu qui nécessitent une mise en page bidimensionnelle pour l'utilisation ou la signification.

    La page doit être reformatée pour exiger un défilement dans une seule direction. Une page est défilée horizontalement ou verticalement, mais pas dans les deux sens. Le critère de succès 1.4.10 facilite l'utilisation des pages.

  3. Augmentez le zoom à 400 %.

  4. Examinez la page pour connaître l'apparence des barres de défilement. Si des barres de défilement horizontales et verticales s'affichent, ce critère ne s'applique pas à la page.

La phase de test initiale 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.