Sélectionner des éléments
Plusieurs fonctionnalités de axe DevTools vous demandent de pointer vers des éléments spécifiques sur la page. Vous pouvez sélectionner des éléments avec votre souris en cliquant dessus sur la page, ou avec votre clavier et la technologie d'assistance en utilisant le « Sélecteur d’Élément ». Les deux méthodes peuvent être utilisées de manière interchangeable dans la même étape.
- Où vous sélectionnez les éléments
- Sélection avec une souris
- Sélection avec le Sélecteur d'Élément
- Naviguer entre les éléments en surbrillance
- Supprimer une sélection
Où vous sélectionnez les éléments
| Fonctionnalité | Ce que vous sélectionnez |
|---|---|
| Analyse partielle de page | Un élément auquel l'analyse est limitée |
| Soulever des problèmes manuels | Un élément contre lequel le problème est soulevé, plus un nombre quelconque d'éléments connexes |
| Tests guidés intelligents | Dépend de la question. Certaines questions demandent un seul élément (par exemple, une table ou le déclencheur d'un modal), d'autres demandent un nombre quelconque d'éléments (par exemple, des en-têtes ou les tabulations non déjà mises en surbrillance) |
Lorsqu'une étape n'accepte qu'un seul élément, vous ne pouvez pas en sélectionner un autre tant que vous n'avez pas retiré la sélection actuelle.
Sélection avec une souris
La sélection par souris est contrôlée par l'interrupteur « Sélection Souris », qui indique si elle est actuellement « ACTIVÉE » ou « DÉSACTIVÉE ». Dans la plupart des étapes, la sélection par souris est activée automatiquement.
Quand la sélection par souris est activée :
- Survolez la page. L'élément sous votre pointeur est encadré.
- Cliquez sur l'élément encadré pour le sélectionner. L'élément reste surligné sur la page, et le Sélecteur d’Élément s'élargit pour le montrer.
Les clics sont capturés par axe DevTools pendant que la sélection par souris est activée, donc les liens et les boutons de la page ne seront pas activés. Pour interagir normalement avec la page (par exemple, pour ouvrir un modal avant de le sélectionner), désactivez l'interrupteur « Sélection Souris », puis réactivez-le lorsque vous êtes prêt à sélectionner.
Dans quelques étapes des Tests Guidés Intelligents, comme la sélection d'un modal après son lancement, la sélection par souris commence désactivée, vous permettant ainsi d'interagir d'abord avec la page. Activez l'interrupteur « Sélection Souris » lorsque vous êtes prêt à sélectionner.
Sélection avec le Sélecteur d'Élément
Le Sélecteur d’Élément est un moyen accessible au clavier et compatible avec les lecteurs d'écran pour sélectionner des éléments sans une souris. Il apparaît en bas du panneau, sous le titre « Sélecteur d’Élément », et affiche le DOM de la page sous forme d'arborescence expansible. Chaque élément montre le nom de son balise ainsi que ses attributs id, class, et role, s'ils sont présents.
Dans la plupart des fonctionnalités, le Sélecteur d’Élément commence replié. Activez le bouton « Voir le sélecteur d'élément » à côté du titre pour l'étendre.
Navigation au clavier
| Touche | Action |
|---|---|
| Flèche bas | Déplacer vers l'élément visible suivant |
| Flèche haut | Déplacer vers l'élément visible précédent |
| Flèche droite | Développer un élément replié, ou passer à son premier enfant s'il est déjà développé |
| Flèche gauche | Replier un élément développé, ou passer à son parent s'il est déjà replié |
| Espace | Sélectionner l'élément focalisé, ou le désélectionner s'il est déjà sélectionné |
Lorsque vous parcourez l'arborescence, l'élément focalisé est mis en surbrillance sur la page et fait défiler vers lui, afin que vous puissiez confirmer que vous êtes sur le bon élément avant de le sélectionner.
Vous pouvez également utiliser les boutons sous l'arborescence :
- « Sélectionner » sélectionne l'élément focalisé
- « Supprimer » retire l'élément focalisé de votre sélection
Cliquer sur un élément dans l'arborescence le développe ou le replie ; cela ne le sélectionne pas. Pour sélectionner un élément dans l'arborescence avec une souris, cliquez sur l'élément puis cliquez sur « Sélectionner ».
Prise en charge des lecteurs d'écran
Quand un élément de l'arborescence reçoit le focus, les lecteurs d'écran annoncent les détails concernant l'élément, comme son nom accessible et son rôle calculé. Les éléments annoncent également « Sélectionné » lorsqu'ils font partie de votre sélection, et « En surbrillance » (avec leur position, par exemple « En surbrillance 2 sur 5 ») quand axe DevTools les a mis en surbrillance.
Pour la liste complète des propriétés et attributs de l'élément focalisé, activez son bouton « Plus d'infos ».
Naviguer entre les éléments en surbrillance
Dans certaines étapes, axe DevTools met en surbrillance des éléments sur la page pour que vous puissiez les examiner, comme les titres ou les points de tabulation trouvés lors d'un Test Guidé Intelligent, ou les problèmes mis en surbrillance lors de la levée d'un problème manuel. Au lieu de naviguer dans l'arborescence pour trouver chacun d'eux, vous pouvez sauter directement entre eux.
Lorsqu'il y a deux éléments en surbrillance ou plus, utilisez les boutons « Sauter au surlignage précédent » et « Sauter au surlignage suivant » dans le Sélecteur d’Élément. Lorsqu'un élément en surbrillance est focalisé, un compteur (par exemple, « 2 / 5 ») montre sa position parmi tous les éléments en surbrillance.
Vous pouvez également utiliser des raccourcis clavier lorsque le focus est n'importe où dans le Sélecteur d’Élément, y compris sur un élément dans l'arborescence :
| Raccourci | Action |
|---|---|
| Alt+Maj+N (Option+Maj+N sur macOS) | Passer à l'élément en surbrillance suivant |
| Alt+Maj+P (Option+Maj+P sur macOS) | Passer à l'élément en surbrillance précédent |
Le saut boucle, donc si l'on dépasse le dernier élément en surbrillance, on revient au premier, et vice versa. S'il n'y a qu'un seul élément en surbrillance et que vous vous en êtes éloigné, l'un ou l'autre des raccourcis vous y ramène.
Supprimer une sélection
Pour supprimer un élément sélectionné, procédez de l'une des manières suivantes :
- Dans le Sélecteur d'éléments, sélectionnez l'élément et appuyez sur Espace ou activez « Supprimer »
- Activez le bouton de suppression (poubelle) à côté de l'élément dans la liste des éléments sélectionnés
- Dans les Tests guidés intelligents, activez « Supprimer toutes les sélections » pour effacer toutes les sélections à l'étape actuelle
Lors de la création d'un problème manuel, le premier élément que vous sélectionnez est l'« Élément sélectionné » contre lequel le problème est soulevé, et chaque élément après cela est listé sous « Éléments liés ».