Portée dans axe Expert

Définissez une portée dans axe Expert Extension lorsque vous souhaitez tester uniquement certaines parties d'une page au lieu de la page entière. Sur de nombreux sites Web, il existe des éléments ou des zones « modèles » qui sont communs à de nombreuses pages d'un site. Cela peut être utilisé pour tester spécifiquement les composants de modèle communs ou pour les ignorer afin de se concentrer sur le contenu qui ne fait pas partie des composants communs (par exemple, l'en-tête, le pied de page ou les sections de navigation). Les versions 1.1 et ultérieures de l'extension axe Expert ont été conçues et implémentées à l'aide de sélecteurs de feuilles de style en cascade (CSS) dans le but de définir la portée.

Prise en charge des versions XPath

Axe Monitor v6.0 ou version ultérieure prend en charge à la fois les technologies de sélecteur CSS et XPath, car auparavant, la version 1.0 de XPath était prise en charge par la version 1.0 d'axe Expert Extension. Pour plus d'informations, voir XML Path Language (XPath) Version 1.0 - W3C.

Pour éviter la duplication des violations lors de l'analyse de plusieurs pages, la fonctionnalité de définition de portée d'axe Expert Extension vous offre un moyen de limiter ce qui est analysé à une ou plusieurs sections spécifiques d'une page, tout en ignorant le contenu commun et répété qui n'est pas sélectionné comme partie de la portée. En définissant les définitions de portée lors de l'analyse scriptée, cela aura le même effet que l'analyse statique. En d’autres termes, il s’agit d’inclure uniquement les parties définies de la page dans le script. Ce processus est particulièrement utile lorsque vous testez uniquement les définitions de portée qui couvrent les zones de contenu de la page, ce qui élimine les problèmes répétitifs rencontrés lors des tests de modèles.

Activation de la fonctionnalité Scope sans connexion à axe Monitor

Suivez les étapes suivantes pour activer l'affichage de la fonctionnalité Scope sur le panneau Paramètres sans vous connecter à axe Monitor :

1. Sélectionnez Scope dans le menu déroulant de l'extension Axe Expert pour accéder à l'onglet Paramètres  :

   

2. L'extension affiche l'onglet Axe Expert Extension Scope vide lors du premier accès :

   

   NE VOUS CONNECTEZ PAS à axe Monitor. Créez plutôt une nouvelle étendue sans projet en utilisant les Descriptions d'options et les Descriptions de colonnes décrites :

   L'onglet d'étendue de l'extension axe Expert avec les propriétés d'option et de colonne affichées pour une seule étendue.(https://media.dequeuniversity.com/product-docs/axe-expert-extension/3.5/en/images/scope-no-comply2.png)

Activation de la fonctionnalité Scope lors de la connexion à axe Monitor

Suivez les étapes suivantes pour activer l’affichage de la fonctionnalité Scope sur le panneau Paramètres lorsque vous êtes connecté à axe Monitor :

1. connectez-vous à axe Monitor dans l'onglet Paramètres du panneau Expert d'axe. Pour plus de détails, voir Connectez-vous à axe Monitor.

   Une fois connecté, la section Sélection de projet apparaît dans le panneau Paramètres.

2. Sélectionnez un projet en utilisant le menu Sélectionner un projet et le bouton du panneau Paramètres. Pour plus de détails, voir Sélectionner un projet axe Monitor.

   La fonctionnalité Définitions de portée apparaît sous les sections de sélection de projet et de téléchargement de problème dans le panneau Paramètres.

   

Descriptions des options

Une fois activée, vous verrez la section Portée sur le panneau Paramètres dans axe Expert Extension, qui affiche un groupe d'options de boutons radio Analyser la portée avec les trois options disponibles suivantes parmi lesquelles sélectionner :

• Page entière : sélectionnez cette option pour affiner la portée définie lors de l'exécution d'une analyse sur le panneau Analyse sur la page entière chargée dans le navigateur.
• Contenu uniquement : sélectionnez cette option pour affiner la portée lors de l'exécution d'une analyse sur le panneau Analyser sur uniquement les éléments de contenu ne faisant pas partie des modèles définis dans le tableau Définitions de portée ci-dessous.
• Modèle uniquement : sélectionnez cette option pour affiner l'analyse effectuée sur le panneau Analyser à _ tout sauf aux définitions de contenu_ sur la page testée chargée.

Descriptions des colonnes

Sous la section Analyser les options de portée, vous verrez la section du tableau des définitions de portée, qui affiche un tableau avec les six colonnes d'informations suivantes :

• Nom : champ de saisie de texte utilisé pour donner à la définition de portée un nom clair et significatif (par exemple, « En-tête »).
• Catégorie : un champ de menu déroulant utilisé pour spécifier le type de portée. Les options incluent « Modèle 1-4 » (page entière) et « Contenu 1-4 » (corps de la page). Ils peuvent être utilisés pour regrouper des définitions de portée associées afin qu'elles puissent être facilement triées.
• Modèle d'URL : champ de saisie de texte utilisé pour spécifier une ou plusieurs parties d'un site Web qui utilisent un ensemble de modèles différent de la partie principale du site (par exemple, une zone commerciale ou une zone de services aux membres sécurisés), défini avec une chaîne de texte qui apparaît immédiatement après le nom de domaine dans l'adresse de la page pour un modèle qui utilise une correspondance de caractères génériques (par exemple, « /products » correspondrait à « /products » ainsi qu'à toute chaîne de texte qui le suit).
• Sélecteurs CSS : un champ de saisie de texte utilisé pour spécifier le localisateur du contenu à cibler (par exemple, /html/body pour le corps du document, ou html pour spécifier la page entière). En règle générale, vous devez connaître le id de l'élément que vous souhaitez évaluer. Par exemple :
  • **/section[@id='content']** identifies a section tag with an id of "content": <section id="content">
  • **/div[@id='header-panel']** identifies a div with an id of "header-panel": <div id="header-panel">
  • **/div[@id='right-column']** identifies a div with an id of "right-column": <div id="right-column">
  • **/html/body/section/div[2]/div[3]** identifies an item without an id: the third div inside the second div inside the section tag inside the body of the html
• + Frame : cliquez pour ajouter une nouvelle ligne ci-dessous qui fournit un champ de saisie de texte que vous pouvez utiliser pour saisir un localisateur de sélecteur CSS sélectionné (les données de la région du nœud du DOM) si la région se trouve dans un cadre. Le symbole plus devient un moins pour indiquer qu'il est possible de supprimer la ligne après l'avoir ajoutée.
• Actions : dans une ligne vide, le bouton Enregistrer apparaît dans la colonne Actions, ce qui vous permet d'ajouter votre sélection/vos entrées en tant que nouvelle ligne de définition de portée. Une fois qu'une ligne a été ajoutée, apparaissent les boutons Modifier et Supprimer .

Ajouter une définition de portée

Suivez cette procédure à chaque fois que vous souhaitez limiter ou restreindre la partie de la page que vous analysez à un sélecteur CSS ou à un modèle d'URL catégorisé par contenu, gabarit ou page entière. L'ajout d'une définition de portée consiste à renseigner cinq colonnes d'informations dans le tableau de la section Portée du panneau Paramètres dans axe Expert, puis à sélectionner le bouton Enregistrer.

Définitions de portée et auto-association avec les projets axe Monitor

La section Portée du Settings panneau n'apparaît qu'après qu'une connexion avec axe Monitor a été établie et qu'un projet a été sélectionné. La définition et l'enregistrement d'une portée en suivant cette procédure ajoutent la définition de portée au projet sélectionné dans axe Monitor afin que lorsque vous sélectionnez à nouveau le projet dans l'extension axe Expert, les définitions de portée existantes se chargent automatiquement sur Settings l'onglet. Chaque fois que vous sélectionnez le projet, cette définition de portée sera automatiquement téléchargée dans axe Expert Extension depuis axe Monitor.

Les définitions de portée ajoutées affinent l'analyse effectuée sur le panneau d'Analyse dans Axe Expert Extension sur les zones de la page chargée qui correspondent à la portée.

Avant de commencer, il est important que vous compreniez comment activer la fonctionnalité de définition de portée et que vous compreniez le but de chaque option et de chaque champ de colonne de table.

1. Dans la section Portée du panneau Paramètres, saisissez un texte significatif dans la colonne Name (par exemple, 'Header').

2. Dans la colonne Category , accédez aux options du menu déroulant, puis sélectionnez un élément dans la liste (par exemple, 'Template 1').

   Category La liste déroulante se ferme et votre sélection est renseignée dans l'affichage du champ.

3. Dans le champ URL pattern , saisissez la chaîne de texte après le nom de domaine, si vous le souhaitez (par exemple, '/html/head').

4. En option, sélectionnez + Frame pour afficher un nouveau champ de sélecteur CSS vide sur une nouvelle ligne ci-dessous, puis entrez le sélecteur du composant, s'il est contenu dans un cadre.

   

5. Dans le CSS Selector(s) champ, saisissez le sélecteur que vous avez sélectionné à l'aide de l'outil de votre choix (par exemple, via right-click > Copy > Copy selector dans Chrome DevTools après avoir mis en surbrillance le code source dans l' Elements outil).

6. Dans la colonne Actions, sélectionnez Save.

   

La portée que vous avez ajoutée apparaît comme une nouvelle ligne dans le tableau et la colonne Actions affiche des boutons qui vous permettent de la modifier ou de la supprimer. De plus, une nouvelle ligne vide apparaît sous votre ligne de portée enregistrée, ce qui vous permet de spécifier et d'enregistrer une autre, etc.

Vous pouvez maintenant sélectionner l'option souhaitée dans la section au-dessus du tableau Analyze scope , puis effectuer une analyse sur la page chargée définie par la portée que vous avez spécifiée.

Modifier une définition de portée

Modifiez une définition de portée lorsque vous souhaitez modifier une définition de portée existante en modifiant un ou plusieurs des cinq champs d'information. Dans la Edit colonne du Actions tableau de section sur le panneau Paramètres dans axe Expert, sélectionner Scope vous permet de modifier la portée de ce qui sera ciblé lors de l'exécution d'une analyse de la page chargée sur le panneau Analyser. Cela modifie également ce qui est stocké dans axe Monitor en conséquence.

1. Dans la Edit colonne du Actions tableau de section, activer Scope .

   

   Les champs deviennent modifiables dans chaque colonne, et la colonne affiche un Actions bouton et un Save autre bouton. Cancel

2. Apportez les modifications souhaitées à un ou plusieurs champs de colonne, puis activez le bouton Save dans la Actions colonne.

   

Les modifications que vous avez enregistrées sont affichées sous forme de ligne en lecture seule dans le tableau et sont automatiquement synchronisées avec axe Monitor.

Nouveauté de l'extension de navigateur Attest v2.8 : le bouton ANALYZE AGAIN est désactivé lorsque la portée de l'analyse n'est pas enregistrée.

Il est trop facile d’oublier si un utilisateur a enregistré ou non la portée de l’analyse en cours avant de cliquer sur ANALYZE AGAIN.

Pour résoudre ce problème, nous avons déplacé le bouton Save à côté des boutons ANALYZE AGAIN et Back . Le bouton ANALYZE AGAIN est désactivé et le bouton Save est activé lorsqu'un utilisateur écrit une nouvelle ligne de portée. Le bouton ANALYZE AGAIN est réactivé et le bouton Save désactivé lorsque l'utilisateur enregistre le nouveau scope. Ces deux boutons ne seront jamais activés en même temps dans l'extension axe Expert.

Supprimer une définition de portée

Supprimez une définition de scope pour supprimer une ligne de la table de section sur le Scope panneau Settings . Cette action supprime également la définition de portée d'axe Monitor.

Dans la colonne Actions , dans la ligne de la définition de portée existante que vous souhaitez supprimer, sélectionnez Delete.

La ligne est supprimée de la table de la section Définitions de portée.