Utiliser Axe Expert avec la Technologie d'Assistance

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data
warning

L'extension axe Expert est officiellement retirée. En savoir plus sur cette page Remplacement d'axe Expert. Ces pages seront supprimées en juillet 2024. Envoyez un email à helpdesk@deque.com pour toute question ou préoccupation.

Deque Systems, Inc. considère NVDA/Windows comme la principale plateforme pour les utilisateurs de lecteurs d'écran de l'extension axe Expert. Nous recommandons d'utiliser NVDA ou JAWS sur Windows, et VoiceOver sur Mac.

Avant de commencer :

Veuillez consulter axe Expert Extension pour Chrome VPAT.pdf pour examiner le rapport de conformité d'accessibilité volontaire du produit de Deque pour l'extension axe Expert.

Utiliser l'extension axe Expert pour Google Chrome avec NVDA

Référence des raccourcis clavier de Chrome DevTools :

Avant de commencer : Google a récemment mis à jour le guide d'utilisateur DevTools du navigateur Chrome et les supports de référence Web. Pour les raccourcis clavier généralement applicables à l'utilisation de l'extension axe Expert dans Google Chrome, voir Référence des raccourcis clavier - Développeurs Google Chrome DevTools.

Les instructions suivantes expliquent généralement comment utiliser l'extension axe Expert dans Google Chrome avec des lecteurs d'écran sous Windows, y compris NVDA. Des instructions sont fournies pour installer, lancer, naviguer dans l'interface utilisateur, ajuster les paramètres, effectuer une analyse d'accessibilité et exporter les résultats. Cette documentation n'pas inclut pas d'instructions pour travailler avec la fonctionnalité SimulAT ou Scripting de l'extension axe Expert dans NVDA, ni le niveau de détail inclus dans le reste de ce guide utilisateur. La documentation incluse ici sert uniquement de guide de démarrage rapide pour les utilisateurs du logiciel de lecteur d'écran NVDA.

Dans ce sujet :

Installer l'extension axe Expert

L'installation de l'extension axe Expert dans les DevTools de Google Chrome est légèrement différente de l'installation de l'extension axe Expert de Deque pour Mozilla Firefox, qui a un processus d'installation différent pour les utilisateurs d'axe Monitor (qui utilisent un lien d'installation depuis l'application) par rapport aux utilisateurs de l'extension axe Expert (qui téléchargent d'abord un fichier .xpi depuis un dépôt).

Important

Les instructions suivantes sont fournies uniquement à titre exemple pour vous donner une idée du processus d'installation. Les étapes spécifiques du processus peuvent différer selon vos exigences uniques de sécurité et de type/version de navigateur. Par exemple, selon votre organisation, vous pourriez être amené à charger une extension décompressé avec le mode Développeur activé. Consultez votre direction pour obtenir des instructions d'installation spécifiques. La meilleure pratique recommandée par Deque est que tous les clients travaillent avec leur Deque Engagement Manager ou le service d'assistance Deque pour obtenir la version appropriée et les fichiers d'installation correctement licenciés.

Depuis la page d'extension du Chrome Web Store

La manière la plus facile d'installer l'extension axe Expert est via un lien direct vers la page d'extension Google Chrome dans le Chrome Web Store. Si vous avez déjà installé une extension de navigateur Google Chrome auparavant, le processus est le même. Cependant, l'extension axe Expert n'est généralement pas recherchable dans le Chrome Web Store, donc un lien direct est requis :

Lien vers axe Expert dans le Chrome Store.

Pour obtenir des instructions complètes d'installation en utilisant le lien fourni, consultez le sujet Télécharger et installer dans la section Première utilisation de ce guide.

À partir d'un lien d'installation

Le fichier d'installation compressé .crx peut être accessible directement à partir d'un lien dans le menu de la barre latérale droite de l'axe Monitor, vous permettant d'initier le processus d'installation directement depuis le navigateur Google Chrome.

Pour installer l'extension axe Expert à partir d'un lien d'installation (axe Monitor) :

  1. Naviguez jusqu'à la section Liens rapides de l'écran d'accueil dans axe Monitor en utilisant le navigateur Chrome.
  2. Sélectionnez Télécharger axe Expert Extension 3.5.

Lorsque vous sélectionnez le lien d'installation de l'extension axe Expert, un message s'affiche vous demandant si vous souhaitez installer l'extension axe Expert.

  1. Appuyez sur Tab pour accéder et sélectionner le bouton Charger l'extension décompressée... (ou appuyez sur Alt_I).

À partir d'un fichier CRX

L'extension Google Chrome emballée est proposée en tant que fichier compressé avec l'extension de fichier .crx et offre une clé privée pour que vous n'ayez jamais à vous soucier de mettre à jour manuellement l'extension, car cela est géré automatiquement.

Pour installer l'extension axe Expert à partir d'un fichier .crx (axe Expert Extension) :

  1. Contactez votre Deque Engagement Manager ou le service de soutien Deque pour obtenir le fichier d'installation CRX requis.
  2. Naviguez jusqu'au fichier .crx téléchargé sur votre ordinateur.
  3. Appuyez sur Enter.

Vérifier l'installation

L'installation ne devrait prendre que quelques secondes. Une fois l'installation terminée, un message sera diffusé indiquant que l'extension axe Expert a été installée avec succès. Vous pouvez toujours vérifier le succès de l'installation en essayant d'ouvrir l'extension axe Expert dans les DevTools de Google Chrome. Pour plus d'informations, voir Ouvrir l'extension axe Expert. Les étapes suivantes vous guident à travers la vérification de l'installation via la navigation vers l'entrée de l'extension axe Expert sur la page des extensions de Google Chrome.

  1. Dans le champ d'adresse (emplacement) de Google Chrome, tapez chrome://extensions/ et appuyez sur Entrée.

  2. Appuyez sur TAB trois fois pour accéder à la liste des extensions installées de Google Chrome.

  3. Appuyez sur la touche Down Arrow pour localiser l'élément de liste de l'extension axe Expert.

    Les extensions Google Chrome s'affichent par ordre croissant et de la plus récemment installée, donc cela devrait être le premier élément de la liste.

  4. Écoutez les options "désactiver, supprimer". Lorsque vous entendez ces options annoncées après axe Expert, cela signifie que l'extension a été installée avec succès.

Ouvrir l'extension axe Expert dans Google Chrome

L'extension axe Expert est installée dans la barre d'onglets des DevTools de Chrome.

  1. Appuyez et maintenez Ctrl+Shift+I pour lancer les DevTools de Chrome.
  2. Appuyez et maintenez Ctrl\_\] jusqu'à ce que vous entendiez "axe Expert."

Lorsqu'elle est installée pour la première fois, et qu'aucune autre extension n'existe qui s'intègre avec les outils de développement de Google Chrome, l'onglet axe Expert se trouvera sur le côté droit de la barre d'onglets de la boîte à outils.

  1. Appuyez sur Entrée pour activer l'onglet axe Expert dans la fenêtre des DevTools.

L'extension axe Expert est maintenant active dans la fenêtre DevTools de Google Chrome et prête à l'emploi.

Comprendre et naviguer dans l'interface utilisateur de l'extension axe Expert

Sélection du panneau du menu principal

Dans le volet gauche de l'extension axe Expert, quel que soit le panneau actuellement sélectionné, vous avez un menu déroulant principal qui fournit des liens vers chacun des cinq principaux panneaux de l'extension axe Expert.

  1. Vérifiez l'activation de l'onglet axe Expert en appuyant sur la touche Tab pour déplacer le focus sur le menu principal, qui se lit comme "Navigation Globale".

    Le cadre est annoncé comme cadre "data/index".

    Onglet par défaut : Le volet Analyser est actif par défaut lorsque l'extension axe Expert est lancée. Utilisez l'onglet Analyser pour effectuer une analyse d'accessibilité ; il est probable que ce soit l'onglet que vous utiliserez 99,5 % du temps. Utilisez le menu Options de l'extension axe Expert pour sélectionner Settings et Sign in to axe Monitor.

  2. Déplacez le focus vers le menu principal de navigation globale de l'extension axe Expert et appuyez sur Entrée.

    Le menu principal de l'extension axe Expert s'ouvre et affiche cinq choix de panneau :

  3. Appuyez sur les touches down arrow et up arrow pour naviguer dans les éléments du menu principal de l'extension axe Expert. Appuyez sur Enter pour sélectionner un élément de menu.

Le menu se referme, le lecteur d'écran annonce "bouton réduit", suivi du nom de l'élément de menu sélectionné.

Accédez à des contrôles et des liens supplémentaires spécifiques au panneau vers des panneaux associés et des fonctionnalités connexes sur d'autres panneaux pour le panneau sélectionné via le menu déroulant du bouton à points de suspension verticaux dans la barre supérieure du panneau de contenu droit dans le panneau Analyser. Ce menu déroulant est parfois informellement appelé un "menu à trois points".

Utilisez le menu contextuel du panneau Analyser :
  • Tab à partir du bouton Analyze sur le panneau Analyze pour déplacer le focus vers un menu contextuel annoncé comme le main landmark Analyze google menu button collapsed.
  • Appuyez sur Enter pour afficher les éléments du menu contextuel Analyser.
  • Arrow down ou vers le haut pour surligner un élément de menu et appuyez sur Enter pour sélectionner l'élément de menu actuellement surligné.

Chaque panneau dans l'extension axe Expert est composé de deux à trois sous-panneaux d'information. Les sous-panneaux contiennent également des sections d'information identifiées avec des en-têtes.

Passer d'un panneau à un autre

  • En mode navigation, appuyez sur la flèche vers le haut ou vers le bas pour sélectionner le panneau que vous souhaitez activer et appuyez sur Entrée.
  • En mode formulaire, tabulez vers le volet actif, puis utilisez les touches fléchées (flèche droite ou flèche gauche) pour passer à d'autres volets (pas besoin de valider avec Entrée).

Pour forcer NVDA à revenir en mode navigation, appuyez sur la touche NVDA et la barre d'espace après avoir travaillé en mode formulaire.

Disposition du clavier et mode formulaire

Disposition du clavier NVDA : Appuyez sur la touche Échap ou sur la touche NVDA et la barre d'espace pour quitter le mode formulaire dans NVDA. La touche NVDA est la touche insert, à moins que vous ne changiez pour Caps Lock, ce que vous pouvez faire dans le menu de configuration NVDA.

Sélectionner un ensemble de règles

Vous pouvez ajuster l'option d'ensemble de règles dans le panneau Règles. Le panneau Règles contient des cases à cocher avec la légende Ensemble de règles, dans lesquelles trois ensembles de règles peuvent être trouvés. Les règles WCAG 2.0 AA sont actives par défaut. Utiliser un ensemble de règles autre que le WCAG 2.0 AA par défaut implique de faire des ajustements optionnels sur l'onglet Règles.

Vous pouvez effectuer une analyse hors ligne en utilisant l'un des ensembles de règles standard de l'extension axe Expert sans vous connecter à un serveur axe Monitor, ou vous pouvez utiliser votre propre ensemble de règles personnalisé.

Standard par défaut : Si vous utilisez l'extension axe Expert telle quelle, vous effectuerez une analyse WCAG 2.1 AA en utilisant l'ensemble de règles par défaut WCAG 2.1 AA.

Sélectionner un ensemble de règles :

  1. Appuyez sur R dans NVDA.

La case à cocher du niveau AA de WCAG 2.1 est cochée par défaut. C'est un ensemble de règles standard qui est livré avec l'extension axe Expert. L'ensemble de règles par défaut est utilisé jusqu'à ce que vous demandiez à l'extension axe Expert d'en utiliser un autre. Vous ne pouvez pas supprimer les ensembles de règles livrés avec l'extension axe Expert.

  1. Sélectionnez un ensemble de règles via la case à cocher associée.

Aucune confirmation supplémentaire n'est nécessaire.

Paramètres : connexion au serveur, sélection de projet et portée

La première chose que vous remarquerez dans le panneau Paramètres est un ensemble de champs de formulaire qui vous permettent de connecter l'extension axe Expert à un serveur axe Monitor. Après vous être connecté à axe Monitor, un menu de sélection de projet avec bouton s'affiche. Deux nouvelles sections s'affichent lorsque vous sélectionnez un projet : Téléchargez les problèmes et Portée.

Vous pouvez vouloir vous connecter à votre serveur axe Monitor et sélectionner un projet pour permettre le téléchargement et le chargement des résultats d'analyse. Si l'extension axe Expert n'est pas connectée à un serveur axe Monitor, le menu déroulant est annoncé comme "hors ligne aucun projet" ou "cliquable hors ligne aucun projet cliquable", et la fonctionnalité de sélection de projet est annoncée comme "indisponible". Pour des détails complets, voir Se connecter à axe Monitor et Sélectionner un projet axe Monitor respectivement.

Avant d'utiliser le panneau d'analyse pour analyser une page web, vous pouvez vouloir ajuster les options dans la section Portée du panneau Paramètres pour affiner ce qui sera ciblé ou ignoré. Pour des détails complets, voir Définitions de portée.

Options d'enregistrement d'événements

Le panneau Options d'enregistrement de script, accessible via le lien Options dans l'onglet Scripts, contient une section appelée Événements à capturer avec des cases à cocher pour configurer quels événements enregistrer ou ignorer lors de l'enregistrement de scripts. Pour plus d'informations, voir Sélectionner les événements à capturer.

Analyser une page pour détecter les violations des règles d'accessibilité

  1. Ouvrez la page que vous souhaitez tester dans Chrome.

  2. Ouvrez les Chrome DevTools (Ctrl_Shift_I) et sélectionnez l'onglet axe Expert.

    Consultez Ouvrir l'extension axe Expert pour plus d'informations.

  3. Localisez le bouton ANALYZE ou le lien Exécuter à nouveau si vous réanalysez une page dans le volet Analyser de l'extension axe Expert (peu importe lequel vous sélectionnez, ils accomplissent la même fonction).

  4. Le bouton Analyser.

Le libellé du bouton Analyser change pour afficher l'analyse en cours.

Vous savez que l'analyse est terminée lorsque vous pouvez vous écarter du bouton Analyser en utilisant les flèches ou la touche Tab.

Quand aucune violation d'accessibilité n'est trouvée

Si aucune violation d'accessibilité n'est trouvée, la ligne après le bouton de téléchargement indique : Félicitations ! Aucune violation d'accessibilité trouvée. Vous devez maintenant effectuer des tests manuels en utilisant des technologies d'assistance comme NVDA, VoiceOver et JAWS.

Travailler avec les résultats d'analyse

Bouton d'exportation et nombre de violations : Si une ou plusieurs erreurs ont été découvertes, utilisez l'option de lien numéro cinq, Export, dans le menu du panneau Analyze pour exporter les résultats vers un fichier CSV.

Liens Download et Upload : Le menu du panneau Analyze inclut aussi des éléments de téléchargement... et de chargement... Ces éléments sont annoncés comme "désactivés" lorsqu'ils ne sont pas connectés à un serveur axe Monitor. Pour plus d'informations, voir Télécharger les résultats d'analyse et Télécharger un script.

Analyser les résultats de l'extension axe Expert de deux manières :

  • Exporter les résultats vers un programme de feuille de calcul pour une analyse plus approfondie.
  • Vérifier les résultats dans le panneau Analyser.

Exporter les résultats

Si vous avez besoin de travailler avec les résultats d'analyse dans un programme de feuille de calcul tel que Microsoft Excel, permettant de trier et de manipuler les données, sélectionnez Export dans le menu Analyze de l'extension axe Expert pour télécharger un fichier de valeurs séparées par des virgules (CSV). Travailler avec les résultats exportés est particulièrement utile pour les utilisateurs de lecteurs d'écran pour une navigation facile entre les violations quand les résultats incluent plusieurs violations de plusieurs règles.

Exporter les résultats vers un fichier CSV :

  1. Sélectionnez Export dans le menu déroulant spécifique au panneau Analyze.

Une boîte de dialogue Enregistrer le fichier typique s'affiche.

  1. Sélectionnez un dossier pratique, fournissez un nom descriptif pour le fichier, sélectionnez Save.

    Assurez-vous que le dossier souhaité est sélectionné en shift+tabbing vers l'arborescence du dossier la première fois que vous ouvrez la boîte de dialogue Enregistrer le fichier en utilisant le lien Exporter. L'extension axe Expert sauvegarde les résultats exportés dans l'emplacement de téléchargement par défaut configuré dans les paramètres de votre navigateur Chrome. Une fois qu'un dossier est sélectionné, l'extension axe Expert garde votre sélection pour de futurs exports.

Examiner les résultats d'analyse dans l'extension axe Expert

Tous les résultats d'analyse de l'extension axe Expert sont affichés sous le titre Violations trouvées. C'est généralement le seul titre dans le panneau Analyze, donc utiliser h devrait vous y amener directement.

Réviser les violations des règles :

  • Appuyez sur la flèche vers le haut deux fois pour voir la ligne où le nombre de violations trouvées est signalé.

    L'extension axe Expert affiche une liste ordonnée de tests qui ont identifié des violations, ainsi que le nombre de violations pour chaque règle. Les noms des règles dans la liste sont des liens, qui, lorsqu'ils sont affichés, montrent une liste de toutes les violations pour cette règle.

    Une liste typique de violations pourrait ressembler à ceci :

liste de x éléments

  1. Lien : Les éléments doivent avoir un contraste de couleur suffisant x violations (où x est le nombre de violations).
  2. Lien : La valeur de l'attribut ID doit être unique violations...

Approfondir les violations individuelles :

  • Sélectionnez le lien de règle dans la liste.

Lorsqu'un lien de règle est sélectionné, vous verrez un panneau affichant la première violation pour la règle.

Aperçu du panneau des violations des résultats d'analyse

Cette section décrit les informations séquentielles affichées lorsque vous descendez avec les flèches dans une violation de règle individuelle.

  • Afficher une violation individuelle : Commencez par la liste des règles qui ont produit des violations (voir la section précédente pour une description et un exemple de l'apparence de la liste).

  • Navigation et impact des violations multiples

  • Bouton précédent : À la fin de la liste, vous verrez un bouton appelé précédent. Le bouton précédent est désactivé lorsque vous voyez la première violation de règle.

  • Nombre total de violations : Descendre depuis le bouton Précédent pour voir une ligne indiquant : « violation 1 de X » où X est le nombre total de violations spécifiques à la règle active.

  • Impact : descendre encore depuis la ligne Nombre total de violations affiche les informations d'impact liées à la violation. La ligne d'impact contient la notation d'impact : mineur, modéré, sérieux ou critique.

  • Next bouton : Un bouton suivant s'affiche après les informations d'impact. Le bouton suivant est annoncé comme désactivé si vous consultez la dernière violation d'une règle spécifique.

  • Description : Descendre depuis le bouton suivant affiche une description d'une ligne de la règle violée avec un lien Plus d'infos. Par exemple, cette ligne indiquera « S'assure que le contraste entre les couleurs du premier plan et de l'arrière-plan respecte les seuils du rapport de contraste WCAG 2 AA » lorsqu'une violation de la règle de contraste des couleurs est enregistrée.

  • More info lien : Sélectionnez Plus d’infos pour consulter le contenu de Deque University qui offre plus de contexte et d'informations de fond sur la règle violée en plus des détails sur comment la corriger.

  • Applicable Ruleset (Standard) and Success Criteria : Une liste de deux éléments suit le lien Plus d'infos. Le premier élément liste l'ensemble de règles actives utilisé lors de l'analyse de l'extension axe Expert. WCAG 2.0 AA est l'ensemble de règles de l'extension axe Expert, noté comme « wcag2aa ». Le second élément spécifie le critère de succès pour la règle active (par exemple, wcag143 pour le critère de succès 1.4.3 de WCAG 2.0 - contraste des couleurs).

  • Inspect and Highlight links : Le lien Inspecter met en évidence l'élément en infraction dans DevTools. Le deuxième lien, Surligner, met visuellement en évidence l'élément de la page web dans la fenêtre principale du navigateur Chrome.

  • Section Navigation : Plusieurs titres h2 supplémentaires représentent des sections de contenu au sein d'une violation :

  • Target : Cible identifie un chemin de sélecteur CSS vers l'élément HTML en infraction.

  • HTML : affiche un extrait de balisage HTML incluant l'élément en infraction.

  • Summary : Le résumé contient un sous-section corriger l’un des points suivants suivi d'une liste de correctifs suggérés. La mise en page précise et le libellé d'un correctif suggéré dépendent de la violation spécifique. La liste des correctifs suggérés est une information essentielle dans tout rapport ou analyse, car elle aide souvent à identifier l'erreur exacte et fournit souvent la solution la plus simple.

Notes de navigation pour plusieurs violations

Utilisez les boutons Previous et Next

Utilisez les boutons previous et next pour passer à la violation précédente/suivante si l'analyse a enregistré plusieurs violations de règles. La ligne mise à jour « violation x de y » est annoncée automatiquement par la plupart des lecteurs d'écran lors de la sélection des boutons previous ou next. Par exemple, si le panneau affiche actuellement la violation une sur dix et que vous sélectionnez le bouton next, NVDA annonce automatiquement « violation deux sur dix ». Les boutons next et previous offrent le seul moyen de naviguer vers une violation de règle particulière.

Pour accéder à la violation huit sur dix pour la règle x, cliquez sur la règle x puis cliquez sur next sept fois.

À propos de la dernière violation

Cliquer sur next lorsque la dernière violation d'une règle donnée est actuellement affichée n'affiche pas automatiquement la première violation de la règle suivante. En effet, le bouton next est désactivé lorsque la dernière violation de la règle est affichée. Revenez à la liste des règles et sélectionnez la règle suivante pour inspection.

Passez en revue toutes les violations d'accessibilité pour toutes les règles. Exportez le rapport au format CSV pour examiner rapidement toutes les violations de règles en un seul endroit.

Utiliser des règles personnalisées

Le panneau Rules est la quatrième sélection du menu principal. Si vous avez écrit un fichier JSON de règles personnalisées pour que l’extension axe Expert les scanne, utilisez le panneau Rules pour ajouter votre ensemble de règles. Une fois ajouté au panneau Rules, vous pouvez sélectionner votre ensemble de règles à partir de l'onglet Rules. Le panneau Custom Ruleset contient deux champs de formulaire et un bouton : Name for Custom Rules, Enter JSON et SAVE ET USE RULESET.

Ajouter des règles personnalisées

  1. Spécifiez un nom pour votre ensemble de règles personnalisées dans le champ (Nom pour les règles personnalisées et entrer JSON).

Assurez-vous que le nom ne contient que des lettres ou des chiffres (aucun espace, tiret ou autre symbole n'est autorisé dans le nom de l'ensemble de règles).

  1. Saisissez ou collez vos règles JSON dans le champ Enter JSON.

  2. Sélectionnez SAVE ET USE RULESET.

Le panneau Rules affiche un message de succès ou d'erreur si vous avez spécifié un nom invalide ou utilisé un JSON invalide. Vous pouvez voir le nom de votre ensemble de règles dans la section Ensembles de règles personnalisées du menu latéral gauche sur le panneau Règles. Supprimez un ensemble de règles personnalisées en cochant la case correspondante, puis en sélectionnant Supprimer l'ensemble de règles.

Is this page helpful?

Help us improve this page

Still need help?