Aller au contenu principal

Page de Détails du Problème

Qu'est-ce que la Page de Détails du Problème ?​

La page de Détails du Problème affiche toutes les erreurs spécifiques d'un type de problème. Lorsque vous cliquez sur "Voir tout" sur la page Problèmes, vous êtes redirigé ici pour voir tous les détails, toutes les pages affectées et tous les exemples de code.

Comment accéder à cette page ?​

Vous pouvez accéder à cette page de deux manières :

  1. Depuis la page Problèmes : Cliquez sur le bouton "Voir tout" sur une carte de problème
  2. Lien direct : L'URL contient l'ID du groupe de problèmes

Ce que vous trouverez sur la Page de Détails​

La page est organisée en plusieurs sections :

  1. En-tête - Informations sur le problème et lien pour revenir
  2. Filtre de Sélecteur - Pour filtrer les erreurs par sélecteur CSS (PRO uniquement)
  3. Liste des Erreurs - Toutes les erreurs du groupe avec tous les détails
  4. Pagination - Pour naviguer entre les erreurs s'il y en a beaucoup

En-tête de la Page​

Dans l'en-tête de la page, vous voyez :

Lien de Retour​

En haut à gauche, il y a une flèche qui vous permet de revenir à la page principale des Problèmes.

Informations sur le Problème​

  • Titre : Le type de problème (par exemple, "missing_alt_image")
  • Description : La description complète du problème
  • Badge de Sévérité : Badge coloré indiquant s'il s'agit de Critique, Avertissement ou Info
  • Nombre d'Erreurs Uniques : Combien d'erreurs uniques il y a (après déduplication)

Bouton d'Analyse​

Disponible uniquement pour : Plan ENTERPRISE

Le bouton "Analyser" vous permet d'effectuer une nouvelle analyse de toutes les pages qui ont ce problème. Utile pour vérifier si vous avez résolu le problème après avoir apporté des modifications.

Filtre de Sélecteur​

Disponible uniquement pour : Plan PRO ou supérieur

Le filtre de sélecteur vous permet de voir uniquement les erreurs qui ont un sélecteur CSS spécifique.

Comment ça fonctionne​

Le sélecteur CSS est le chemin qui identifie où se trouve l'élément dans le code de la page. Par exemple :

  • #header img - Images dans l'en-tête
  • .menu a - Liens dans le menu
  • form input - Champs de saisie dans les formulaires

Comment utiliser le filtre​

  1. Ouvrez le menu déroulant du filtre
  2. Choisissez un sélecteur dans la liste
  3. La liste se met à jour en affichant uniquement les erreurs avec ce sélecteur
  4. Voyez le nombre de résultats sous le filtre
  5. Cliquez sur "Effacer le filtre" pour voir toutes les erreurs à nouveau

Astuce : Utilisez le filtre lorsque vous voulez vous concentrer sur des erreurs spécifiques dans une partie particulière du site.

Liste des Erreurs​

La liste affiche toutes les erreurs du groupe, une par carte. Les erreurs identiques (même sélecteur et même HTML) ne sont affichées qu'une seule fois pour éviter les doublons.

Carte d'Erreur​

Chaque erreur est affichée dans une carte avec toutes les informations :

En-tête de la Carte :

  • Numéro d'erreur : "Erreur #1", "Erreur #2", etc.
  • Icône de sévérité : Icône colorée basée sur la sévérité
  • Badge de sévérité : Critique, Avertissement ou Info
  • Badge "Exclu" : Si l'erreur a été exclue, vous voyez un badge vert

Informations :

  • URL : Lien vers la page où l'erreur a été trouvée (s'ouvre dans un nouvel onglet)
  • Analyse : Titre de l'analyse d'où provient l'erreur
  • Niveau WCAG : Le niveau WCAG de l'erreur (A ou AA)

Élément :

  • Sélecteur : Le sélecteur CSS qui identifie l'élément
  • HTML : Le code HTML réel de l'élément problématique
  • Vous pouvez faire défiler le HTML s'il est long

Recommandation :

  • Une explication de la façon de corriger cette erreur spécifique
  • Des suggestions pratiques pour la corriger

Pagination​

S'il y a plus de 50 erreurs, vous voyez une barre de pagination en bas de la page.

Comment ça fonctionne​

  • 50 erreurs par page : Chaque page affiche un maximum de 50 erreurs
  • Navigation : Vous pouvez avancer et reculer entre les pages
  • Numéros de page : Vous voyez jusqu'à 5 numéros de page à la fois
  • Compteur : Vous voyez "Affichage de 1-50 sur 150 erreurs uniques"

Comment utiliser la pagination​

  • Bouton "Précédent" : Aller à la page précédente (désactivé si vous êtes sur la première page)
  • Numéros de page : Cliquez sur un numéro pour aller directement à cette page
  • Bouton "Suivant" : Aller à la page suivante (désactivé si vous êtes sur la dernière page)

Astuce : La pagination se réinitialise lorsque vous changez le filtre, vous commencez donc toujours à partir de la première page.

Barre de Progression​

Lorsque vous exécutez une analyse (bouton Analyser), vous voyez une barre de progression fixe en bas de la page.

Ce qu'elle affiche :

  • Titre : "Analyse des pages en cours"
  • Progression : Nombre d'analyses terminées / total (par exemple, "3/10")
  • Barre : Barre visuelle montrant le pourcentage de complétion
  • URL actuelle : Quelle page est actuellement analysée

La barre reste visible jusqu'à ce que toutes les analyses soient terminées.

Déduplication Automatique​

La page supprime automatiquement les erreurs en double. Si la même erreur (même sélecteur et même HTML) apparaît plusieurs fois, elle n'est affichée qu'une seule fois.

Pourquoi c'est utile :

  • Évite de voir la même erreur répétée des centaines de fois
  • Vous permet de vous concentrer sur les erreurs uniques
  • Réduit le nombre d'erreurs à gérer

Comment ça fonctionne :

  • Deux erreurs sont considérées comme identiques si elles ont :
    • Le même sélecteur CSS
    • Le même code HTML
  • Seule la première erreur trouvée est affichée

États de la Page​

Chargement​

Lorsque la page se charge, vous voyez un spinner animé et le message "Chargement...". Attendez que le chargement se termine.

Aucune Erreur​

S'il n'y a pas d'erreurs (ou si le filtre n'affiche pas de résultats), vous voyez un message avec :

  • Icône d'alerte
  • Titre : "Aucune erreur trouvée"
  • Description expliquant pourquoi il n'y a pas d'erreurs
  • Lien pour retourner à la page Problèmes

Erreur de Chargement​

S'il y a une erreur de chargement, la page affiche un message d'erreur. Essayez de recharger la page.

Comment utiliser la Page de Détails​

1. Voir Tous les Détails​

Cette page vous montre tous les détails de chaque erreur :

  • Où elle se trouve exactement (sélecteur)
  • Comment elle apparaît dans le code (HTML)
  • Sur quelle page elle a été trouvée
  • Comment la corriger (recommandation)

2. Utiliser le Filtre pour se Concentrer​

S'il y a beaucoup d'erreurs :

  1. Utilisez le filtre de sélecteur pour voir uniquement des erreurs spécifiques
  2. Corrigez toutes les erreurs avec le même sélecteur ensemble
  3. Supprimez le filtre et passez au groupe suivant

3. Vérifier les Corrections​

Après avoir apporté des modifications :

  1. Cliquez sur "Analyser" pour vérifier si les erreurs ont été résolues
  2. Attendez que l'analyse se termine
  3. Vérifiez si le nombre d'erreurs a diminué

4. Naviguer Entre les Pages​

S'il y a beaucoup d'erreurs :

  1. Utilisez la pagination pour voir toutes les erreurs
  2. Corrigez les erreurs page par page
  3. Retournez à la page Problèmes pour voir la progression globale

Conseils​

Organisation​

  • Commencez par la première page : Les erreurs sont ordonnées, commencez par la première
  • Utilisez le filtre : Si vous savez qu'une erreur se trouve dans une partie spécifique du site, utilisez le filtre de sélecteur
  • Travaillez par groupes : Corrigez toutes les erreurs avec le même sélecteur ensemble

Vérification​

  • Analysez après les corrections : Utilisez le bouton "Analyser" pour vérifier que vos corrections fonctionnent
  • Vérifiez le nombre : Si le nombre d'erreurs uniques diminue, vous progressez
  • Vérifiez plusieurs pages : Si une erreur apparaît sur de nombreuses pages, il pourrait s'agir d'un problème systémique

Détails​

  • Lisez les recommandations : Chaque erreur a une recommandation spécifique sur la façon de la corriger
  • Regardez le HTML : Le HTML vous montre exactement ce qui se trouve dans le code
  • Utilisez le sélecteur : Le sélecteur vous indique où trouver l'élément dans le code

Questions Fréquemment Posées​

Pourquoi vois-je moins d'erreurs ici que sur la page Problèmes ?​

La page de Détails déduplique automatiquement les erreurs identiques. Si la même erreur (même sélecteur et HTML) apparaît sur plusieurs pages, elle n'est affichée qu'une seule fois. Sur la page Problèmes, vous voyez le nombre total, ici vous ne voyez que les erreurs uniques.

Que signifie "Erreurs Uniques" ?​

"Erreurs Uniques" signifie des erreurs qui sont différentes les unes des autres. Si la même erreur apparaît 10 fois, elle est comptée comme 1 erreur unique. Cela vous aide à comprendre combien de types d'erreurs différents vous devez corriger.

Puis-je voir toutes les erreurs sans pagination ?​

Non, la pagination est nécessaire lorsqu'il y a plus de 50 erreurs pour garder la page rapide et gérable. Vous pouvez naviguer entre les pages en utilisant les boutons de pagination.

Le filtre de sélecteur fonctionne-t-il sur toutes les erreurs ?​

Oui, le filtre fonctionne sur toutes les erreurs du groupe, pas seulement sur celles de la page actuelle. Lorsque vous changez le filtre, la pagination se réinitialise et vous commencez à partir de la première page.

Que se passe-t-il si j'exclus une erreur ?​

Si vous excluez une erreur depuis la page principale des Problèmes, ici vous verrez un badge "Exclu" sur l'erreur. L'erreur ne sera plus comptée dans les statistiques.

Combien de temps faut-il pour analyser toutes les pages ?​

Cela dépend du nombre de pages qui ont le problème. La barre de progression vous montre la progression en temps réel. Chaque page est analysée une par une.

Conclusion​

La page de Détails du Problème vous donne une vue complète de toutes les erreurs d'un type spécifique. Utilisez cette page pour voir tous les détails, filtrer pour vous concentrer sur des erreurs spécifiques et vérifier vos corrections avec de nouvelles analyses. C'est l'outil parfait pour corriger systématiquement les problèmes d'accessibilité sur votre site.