Définition de la portée dans axe Expert

Définissez une portée dans l'extension axe Expert lorsque vous souhaitez tester uniquement certaines parties d'une page au lieu de la page entière. Sur de nombreux sites web, il y a des éléments ou des zones "modèle" communs à de nombreuses pages d'un site. Cela peut être utilisé pour tester spécifiquement des 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, les sections d'en-tête, de pied de page ou de navigation). La version 1.1 et les suivantes de l'extension axe Expert ont été conçues et mises en œuvre en utilisant des sélecteurs de feuille de style en cascade (CSS) pour la définition de la portée.

Prise en charge de la version XPath

axe Monitor v6.0 ou plus prend en charge 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 de l'extension axe Expert. Pour plus d'informations, voir Langage de chemin XML (XPath) Version 1.0 - W3C.

Pour éviter la duplication des violations lors de l'analyse de plusieurs pages, la fonction de définition de la portée de l'extension axe Expert vous permet 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é dans la portée. En ayant les définitions de portée définies lors de l'analyse scriptée, cela aura le même effet que l'analyse statique. En d'autres termes, n'inclure que les parties définies de la page dans le script. Ce processus est particulièrement utile lors des tests des définitions de portée qui couvrent les zones de contenu de la page, ce qui élimine les problèmes répétitifs trouvés lors des tests de modèles.

Activer la fonctionnalité de portée sans se connecter à axe Monitor

Utilisez les étapes suivantes pour activer l'affichage de la fonctionnalité de portée sur le panneau des paramètres sans vous connecter à axe Monitor :

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

   

2. L'extension affiche l'onglet Portée vide de l'extension axe Expert lors du premier accès :

   

   Ne vous connectez PAS à axe Monitor. Au lieu de cela, créez un nouveau champ sans projet en utilisant les Descriptions des options et Descriptions des colonnes décrits :

   

Activation de la fonctionnalité de portée lors de la connexion à axe Monitor

Utilisez les étapes suivantes pour activer l'affichage de la fonctionnalité de portée sur le panneau des paramètres lors de la connexion à axe Monitor :

1. Connectez-vous à axe Monitor sur l'onglet des paramètres dans le panneau axe Expert. Pour des détails complets, voir Connectez-vous à axe Monitor.

   After you sign in, the Project selection section appears on the Settings panel.

2. Sélectionnez un projet en utilisant le menu et le bouton Sélectionner un projet sur le panneau des paramètres. Pour des détails complets, voir Sélectionner un projet axe Monitor.

   La fonctionnalité de définitions de portée apparaît sous les sections de sélection de projet et de téléchargement de problèmes sur le panneau des paramètres.

   

Descriptions des options

Une fois activé, vous verrez la section Portée sur le panneau des paramètres de l'extension axe Expert, qui affiche un Analyser la portée groupe d'options radio avec les trois options suivantes disponibles parmi lesquelles choisir :

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

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'information suivantes :

• Nom : Un champ de saisie de texte utilisé pour donner un nom clair et significatif à la définition de la portée (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). Ceux-ci peuvent être utilisés pour regrouper ensemble des définitions de portée connexes afin qu'elles puissent être facilement triées.
• Modèle d'URL : Un champ de saisie de texte utilisé pour spécifier une partie ou des parties d'un site Web qui utilisent un ensemble de modèles différent du segment principal du site (par exemple, une zone commerciale ou de services sécurisés pour les membres), défini par 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 par joker (par exemple, « /products » correspondrait à « /products » ainsi qu'à toute chaîne de texte qui suit).
• Sélecteur(s) 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 général, vous devez connaître le id de l'élément que vous souhaitez évaluer. Par exemple :
  • **/section[@id='content']** identifie une balise section avec un id de "content" : <section id="content">
  • **/div[@id='header-panel']** identifie un div avec un id de "header-panel" : <div id="header-panel">
  • **/div[@id='right-column']** identifie un div avec un id de "right-column" : <div id="right-column">
  • **/html/body/section/div[2]/div[3]** identifie un élément sans id : le troisième div à l'intérieur du deuxième div à l'intérieur de la balise section à l'intérieur du body du html
• + Cadre : Cliquez pour ajouter une nouvelle ligne en dessous qui fournit un champ de saisie de texte que vous pouvez utiliser pour entrer un localisateur de sélecteur CSS sélectionné (les données de région du nœud DOM) si la région est dans un cadre. Le symbole plus devient un moins pour indiquer qu'il est possible de supprimer la ligne après qu'elle a été ajoutée.
• Actions : Dans une ligne vierge, le bouton Enregistrer apparaît dans la colonne Actions, ce qui vous permet d'ajouter votre sélection/saisie en tant que nouvelle ligne de définition de portée. Une fois la ligne ajoutée, les boutons Modifier et Supprimer apparaissent.

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, modèle ou l'ensemble de la page. Ajouter une définition de portée consiste à remplir cinq colonnes d'informations dans le tableau de la section Portée sur le panneau Paramètres dans axe Expert, puis à sélectionner le bouton Enregistrer.

Définitions de Portée et association automatique avec les projets axe Monitor

La section Portée du panneau Settings n'apparaît qu'après qu'une connexion avec axe Monitor a été établie et qu'un projet a été sélectionné. Définir et enregistrer une portée en suivant cette procédure ajoute 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 l'onglet Settings. Chaque fois que vous sélectionnez le projet, cette définition de portée sera automatiquement téléchargée dans l'extension axe Expert depuis axe Monitor.

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

Avant de commencer, il est important de comprendre comment activer la fonctionnalité des définitions de portée et de comprendre l'objectif de chaque option et champ de colonne de tableau.

1. Dans la section Portée du panneau Paramètres, entrez 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').

   La liste déroulante Category se ferme et votre sélection est affichée dans le champ.

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

4. Le cas échéant, sélectionnez + Frame pour provoquer l'affichage d'un nouveau champ Sélecteur CSS vide sur une nouvelle ligne en dessous, puis entrez le sélecteur pour le composant, s'il est contenu dans un cadre.

   

5. Dans le champ CSS Selector(s), entrez le sélecteur que vous avez sélectionné à l'aide de votre outil de choix (par exemple, via right-click > Copy > Copy selector dans les outils de développement Chrome après avoir surligné le code source dans l'outil Elements).

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 Analyze scope au-dessus du tableau, 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 existante en changeant un ou plusieurs des cinq champs d'informations. Sélectionner Edit dans la colonne Actions du tableau de la section Scope sur le panneau Paramètres dans axe Expert vous permet de modifier la portée de ce qui sera ciblé lors de l'analyse de la page chargée sur le panneau Analyser. Cela modifie également ce qui est stocké dans axe Monitor en conséquence.

1. Activez Edit dans la colonne Actions du tableau de la section Scope.

   

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

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

   

Les modifications que vous avez enregistrées sont affichées comme une 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 oui ou non un utilisateur a enregistré la portée de l'analyse actuelle 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 la nouvelle portée. 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 portée pour enlever une ligne de la section Scope sur le 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 retirée du tableau de la section Définition de la portée.