YuJa EqualGround recherche divers problèmes courants dans vos pages Web et vos documents. Ce guide présente un aperçu de tous les problèmes détectés à l'aide de la plateforme, y compris le nom du problème, sa description et des détails supplémentaires, le cas échéant.
Problèmes d'accessibilité
Remarque : Tous les problèmes énumérés dans les tableaux WCAG, ARIA et Meilleures pratiques peuvent être résolus par YuJa AutoPilot et la remédiation intégrée.
WCAG
| Nom du problème | Description du problème | Résumé de la remédiation |
| Attributs alt manquants sur le contenu non textuel | L'élément img n'a pas de texte de remplacement. | Ajoute un nom accessible. |
| Texte alt manquant pour les boutons image | Cette image sert de bouton, mais elle n'a pas de texte de remplacement; les utilisateurs de lecteurs d'écran ne peuvent donc pas savoir ce que fait le bouton. | Ajoute un nom accessible. |
| Texte de remplacement manquant sur les éléments dotés du rôle img | Cet élément est balisé comme une image (role="img"), mais n'a pas de description. | Ajoute un nom accessible. |
| Rôles de présentation et états masqués sur le contenu décoratif | Cet élément décoratif est annoncé par les lecteurs d'écran même s'il ne transmet aucune information. | Ajoute aria-hidden="true" à <svg>; définit role="presentation" sur <img>/<area>. |
| Attributs title redondants sur les images dont le texte de remplacement est vide | Cette image est marquée comme décorative (texte alt vide), mais elle a quand même une infobulle title; les lecteurs d'écran l'annoncent donc malgré tout. | Sans objet |
| Transcriptions audio manquantes | Ce lecteur audio n'a pas de transcription; les personnes sourdes ou malentendantes ne peuvent donc pas accéder à son contenu. | Ajoute <track> comme élément enfant. |
| Sous-titres manquants dans les vidéos Vimeo intégrées | Cette vidéo Vimeo intégrée n'a pas de sous-titres. | Impossible de modifier les sous-titres des vidéos provenant d'autres plateformes. |
| Sous-titres manquants dans les vidéos YouTube intégrées | Cette vidéo YouTube intégrée n'a pas de sous-titres. | Impossible de modifier les sous-titres des vidéos provenant d'autres plateformes. |
| Sous-titres manquants dans le contenu vidéo | Cette vidéo n'a pas de sous-titres; les personnes sourdes ou malentendantes ne peuvent donc pas la suivre. | Ajoute <track> comme élément enfant. |
| Structure de liste de définitions incorrecte | Cette liste de définitions contient du contenu qui n'est ni un terme ni une description; l'association entre les deux est donc rompue. | Impose une structure valide dans les listes de définitions (<dl>) en enveloppant les enfants directs non valides dans des balises <dd>. |
| Structure de liste incorrecte | Cette liste contient du contenu qui n'est pas un élément de liste; les lecteurs d'écran annoncent donc un nombre d'éléments erroné. | Insère des éléments de liste aux bons endroits pour corriger la structure d'une liste dans les tableaux. |
| Utilisation incorrecte de l'attribut headers par l'utilisation de scope dans les tableaux | Ce tableau utilise de simples cellules de données comme en-têtes; les lecteurs d'écran ne peuvent donc pas relier chaque valeur au bon en-tête. | Ajoute les éléments <th> manquants à <thead> et définit les rôles columnheader sur les en-têtes existants. |
| Utilisation incorrecte de l'attribut scope dans les tableaux | L'attribut scope est utilisé sur une cellule qui n'est pas un en-tête; les lecteurs d'écran ne peuvent donc pas déterminer la structure du tableau. | Définit l'attribut d'un rôle de tableau sur 'col' ou 'row' selon son emplacement. |
| Aria-level manquant sur les rôles de titre | Cet élément joue le rôle d'un titre, mais n'indique pas son niveau; les utilisateurs de lecteurs d'écran ne peuvent donc pas savoir où il se situe dans le plan de la page. | Ajoute un aria-level de 1, 2, 3, 4, 5 ou 6. |
| Fieldset ou groupe manquant pour les champs de même nom | Ces boutons radio ou ces cases à cocher sont regroupés, mais il leur manque une étiquette indiquant aux utilisateurs de lecteurs d'écran ce que représente le groupe. | Sans objet |
| Légende manquante dans un fieldset | Il manque un élément <legend> à l'élément <fieldset>; les lecteurs d'écran ne peuvent donc pas identifier le contexte ou l'étiquette du groupe pour ces champs de formulaire. | Ajoute un élément legend comme premier enfant d'un fieldset. |
| Parent manquant pour les éléments de définition | Ce terme ou cette description ne se trouve pas dans une liste de définitions; les lecteurs d'écran ne peuvent donc pas les associer. | Enveloppe les éléments <dt> ou <dd> orphelins dans un conteneur <dl>. |
| Parent manquant pour les éléments de liste | Cet élément de liste ne se trouve pas dans une liste; les lecteurs d'écran ne l'annoncent donc pas comme faisant partie d'une liste. | Enveloppe les éléments <li> orphelins dans un conteneur <ul> ou <ol>. |
| Les en-têtes de tableau ne contiennent aucune donnée | Les cellules d'en-tête de ce tableau n'ont aucune cellule de données associée; les en-têtes ne décrivent donc rien. | Insère une nouvelle cellule de données renseignée à la bonne position afin que chaque en-tête soit associé à un contenu significatif. |
| Problèmes d'orientation des applications Web mobiles Apple | Cette page se verrouille sur une seule orientation d'écran; les personnes qui fixent leur appareil dans une position donnée ne peuvent donc pas l'utiliser. | Remplace l'orientation Apple par 'any'. |
| Problèmes d'orientation du meta viewport | Les paramètres de viewport de cette page verrouillent l'orientation ou bloquent le zoom; les personnes qui doivent faire pivoter ou agrandir la page ne peuvent donc pas le faire. | Définit l'attribut approprié et sa valeur pour les balises meta viewport. |
| Valeurs d'autocomplétion non valides dans les champs de formulaire | Ce champ de formulaire n'indique pas au navigateur le type d'information qu'il recueille; il ne peut donc pas être rempli automatiquement. | Valide l'attribut autocomplete sur les éléments de formulaire et le réinitialise à 'off' si la valeur n'est pas valide. |
| Attribut autocomplete manquant dans les champs de formulaire | Ce champ de formulaire n'indique pas au navigateur le type d'information qu'il recueille; il ne peut donc pas être rempli automatiquement. | Sans objet |
| Style de lien manquant pour les liens | Ce lien se distingue du texte qui l'entoure uniquement par sa couleur; les personnes qui ne perçoivent pas les différences de couleur ne le remarqueront donc pas. | Impose le style de lien standard en ajoutant un soulignement et un curseur pointer aux balises d'ancrage qui n'en ont pas. |
| Commandes audio manquantes dans les lecteurs audio | Ce contenu audio est lu sans que l'utilisateur puisse le mettre en pause ou l'arrêter. | Ajoute l'attribut controls. |
| Problèmes de faible contraste dans le texte | Ce texte ne se distingue pas assez de son arrière-plan; les personnes malvoyantes risquent donc de ne pas pouvoir le lire. | Remplace la couleur du texte par l'inverse de la couleur d'arrière-plan. |
| Problèmes de contraste renforcé dans le texte | Ce texte ne respecte pas le niveau de contraste renforcé exigé par WCAG AAA. | Remplace la couleur du texte par l'inverse de la couleur d'arrière-plan. |
| Tailles de police absolues dans les paragraphes | La taille du texte de ce paragraphe est fixée en pixels; elle ne s'adapte donc pas lorsque le lecteur augmente la taille du texte de son navigateur. | Définit la taille de police à 1em. |
| Hauteurs de ligne absolues dans les paragraphes | L'interligne de ce paragraphe est fixé en pixels; il n'augmente donc pas lorsque le lecteur agrandit la taille du texte. | Définit la hauteur de ligne à 1.5em. |
| Interligne insuffisant dans les paragraphes | Les lignes de ce paragraphe sont trop rapprochées, ce qui rend le texte difficile à lire pour les personnes dyslexiques ou malvoyantes. | Définit la hauteur de ligne à 1.5em. |
| Alignement justifié du texte dans les paragraphes | Ce paragraphe est justifié, ce qui crée des espaces inégaux entre les mots et rend le texte plus difficile à lire. | Définit l'alignement du texte à gauche. |
| Problèmes de restriction du viewport | Cette page ne s'adapte pas à la largeur de l'écran; les personnes qui utilisent un petit écran ou un zoom élevé doivent donc faire défiler la page latéralement pour la lire. | Définit l'attribut content avec les valeurs appropriées. |
| Commandes à faible contraste | La bordure, l'arrière-plan ou le texte de cette commande de formulaire ne ressort pas assez; les personnes malvoyantes risquent donc de ne pas la voir. | Remplace la couleur du texte par l'inverse de la couleur d'arrière-plan. |
| Espacement des lettres inaccessible | Ce texte empêche les lecteurs d'élargir l'espace entre les lettres, ce dont certaines personnes ont besoin pour lire confortablement. | Définit l'espacement des lettres à 0.12em au moyen d'une déclaration de style en ligne importante. |
| Hauteur de ligne inaccessible | Ce texte empêche les lecteurs d'augmenter l'espace entre les lignes, ce dont certaines personnes ont besoin pour lire confortablement. | Définit line-height à 1.5em. |
| Espacement des mots inaccessible | Ce texte empêche les lecteurs d'élargir l'espace entre les mots, ce dont certaines personnes ont besoin pour lire confortablement. | Définit word-spacing à 0.16em. |
| Régions défilantes inaccessibles | Cette zone défile, mais les utilisateurs du clavier ne peuvent pas y accéder, car elle ne peut pas recevoir le focus. | Définit l'index de tabulation du nœud à 0. |
| Changements de contenu temporisés contrôlés par l'utilisateur | Cette page s'actualise d'elle-même selon une minuterie, ce qui peut interrompre les personnes qui lisent lentement ou qui utilisent un lecteur d'écran. | Définit l'attribut content de la balise meta refresh à 72000. |
| Balises obsolètes dans le contenu | Ce contenu utilise une balise clignotante ou défilante que les navigateurs ne prennent plus en charge et qui peut causer des problèmes aux personnes ayant des troubles de l'attention ou des troubles vestibulaires. | Supprime l'élément obsolète. |
| Mécanisme de contournement manquant | Les utilisateurs du clavier et de lecteurs d'écran doivent parcourir tout l'en-tête avec la touche de tabulation sur chaque page avant d'atteindre le contenu. | Ajoute un lien visible "passer au contenu principal" au début du body et s'assure qu'un élément cible valide existe. |
| Titres de page manquants | Cette page n'a pas de titre; elle s'affiche donc comme "Sans titre" dans les onglets du navigateur, les favoris et les résultats de recherche, et les lecteurs d'écran n'annoncent rien lors de son chargement. | Ajoute un titre provisoire à l'élément html. |
| Ordre de focus incorrect | Le focus du clavier saute d'un endroit à l'autre de cette page au lieu de suivre l'ordre d'affichage à l'écran. | Définit l'index de tabulation du nœud à 0. |
| Problèmes de fonction des liens | Plusieurs liens de cette page ont le même texte mais mènent à des endroits différents; les utilisateurs de lecteurs d'écran ne peuvent donc pas les distinguer. | Met à jour l'attribut href en copiant la destination d'un autre élément ayant le même nom accessible, ou utilise un espace réservé si aucune correspondance n'est trouvée. |
| Titres principaux de la page manquants | Cette page n'a pas de titre principal, ce qui rend difficile pour les utilisateurs de lecteurs d'écran de comprendre rapidement le sujet principal ou de naviguer dans la structure. | Ajoute un élément h1 au body. |
| Titres de section manquants | Cette section n'a pas de titre; les utilisateurs de lecteurs d'écran ne peuvent donc pas savoir ce qu'elle contient ni la sauter. | Insère un titre h2 contenant du texte par défaut comme premier enfant de l'élément. |
| Taille insuffisante des éléments interactifs | Cette commande est trop petite pour qu'on puisse cliquer dessus ou la toucher de façon fiable, ce qui est difficile pour les personnes ayant une dextérité limitée. | Définit la largeur minimale du nœud à 44px et sa hauteur minimale à 44px. |
| Petite taille des cibles tactiles | Cette commande est trop petite pour être touchée avec précision sur un écran tactile, ou elle est trop proche de la commande voisine. | Sans objet |
| Petite taille des cibles tactiles | Cette commande est trop petite pour être touchée avec précision sur un écran tactile, ou elle est trop proche de la commande voisine. | Sans objet |
| Langue déclarée incohérente | Cette page déclare deux langues différentes; les lecteurs d'écran ne peuvent donc pas savoir quelle prononciation utiliser. | Impossible d'obtenir le nœud de référence HTML. |
| Déclaration de langue manquante | Cette page n'indique pas dans quelle langue elle est rédigée; les lecteurs d'écran risquent donc de la lire avec une mauvaise prononciation. | Impossible d'obtenir le nœud de référence HTML. |
| Valeur non valide pour l'attribut lang | La page utilise un code de langue non valide, ce qui amène les lecteurs d'écran à revenir aux paramètres par défaut et à mal prononcer le contenu. | Sans objet |
| Changements de contexte inattendus lors de la prise de focus | Ce formulaire est soumis dès qu'un champ reçoit le focus ou est survolé, ce qui prive l'utilisateur du contrôle. | Sans objet |
| Avertissement des utilisateurs à propos des nouveaux onglets | Ce lien s'ouvre dans un nouvel onglet sans avertissement, ce qui peut désorienter les utilisateurs de lecteurs d'écran et les personnes qui utilisent l'agrandissement d'écran. | Ajoute "(s'ouvre dans un nouvel onglet)" en plus de l'attribut d'origine du nœud. |
| Descriptions d'erreur des champs de saisie en tant qu'éléments atomiques | Lorsque ce message d'erreur est mis à jour, les lecteurs d'écran ne lisent que la partie modifiée; le message perd donc son sens. | Définit la valeur de aria-atomic à 'true'. |
| Nom accessible manquant sur les boutons | Ce bouton n'a ni texte ni étiquette; les utilisateurs de lecteurs d'écran n'entendent donc que le nom générique de l'élément. | Ajoute un aria-label de 'Bouton'. |
| Nom accessible manquant sur input/select/textarea | Ce champ de formulaire n'a pas d'étiquette; les utilisateurs de lecteurs d'écran ne savent donc pas quoi saisir. | Ajoute un nom accessible. |
| Noms accessibles manquants pour <iframe> | Ce cadre intégré n'a pas de titre; les utilisateurs de lecteurs d'écran ne peuvent donc pas savoir ce qu'il contient avant d'y entrer. | Sans objet |
| Descriptions de lien manquantes | Le lien n'a ni texte de lien descriptif ni étiquette accessible, ce qui amène les utilisateurs de lecteurs d'écran à entendre seulement "lien", sans aucune indication de sa destination. | Ajoute un nom accessible. |
| Commandes interactives imbriquées | Une commande cliquable est placée à l'intérieur d'une autre; les lecteurs d'écran et les claviers ne peuvent donc pas les distinguer ni accéder aux deux. | Convertit les liens/boutons en éléments span statiques, supprime les champs de formulaire et retire les attributs interactifs. |
ARIA
| Nom du problème | Description du problème | Résumé de la remédiation |
| Attributs ARIA non valides | Cet élément comporte un attribut ARIA qui n'y est pas autorisé; les technologies d'assistance risquent donc de le décrire de façon incorrecte. | Supprime tous les attributs ARIA d'un élément qui sont non valides ou non pris en charge pour le rôle qui lui est attribué, afin que la sémantique d'accessibilité de l'élément reste valide. |
| Attributs ARIA non valides | Cet élément comporte un attribut ARIA qui n'y est pas autorisé; les technologies d'assistance risquent donc de le décrire de façon incorrecte. | Sans objet |
| Rôles ARIA non valides | L'élément n'a pas de valeur de rôle valide. | Supprime les attributs role non valides des éléments visibles, en essayant de les remplacer par le rôle implicite correct de l'élément ou en supprimant complètement l'attribut afin de rétablir une sémantique valide. |
| Nom accessible manquant pour les propriétés braille | Cet élément a une étiquette braille, mais aucune étiquette textuelle correspondante; il n'existe donc aucune alternative textuelle pour les utilisateurs qui dépendent des technologies d'assistance. | Garantit une utilisation valide de l'ARIA braille en supprimant les attributs propres au braille si leurs équivalents standard requis sont absents. |
| Nom accessible manquant pour les propriétés braille | Cet élément a une étiquette braille, mais aucune étiquette textuelle correspondante; il n'existe donc aucune alternative textuelle pour les utilisateurs qui dépendent des technologies d'assistance. | Garantit une utilisation valide de l'ARIA braille en supprimant les attributs propres au braille si leurs équivalents standard requis sont absents. |
| Attributs ARIA conditionnellement incorrects | Les conditions d'utilisation de l'étiquette ARIA ne sont pas appropriées. Certaines étiquettes ARIA ne peuvent être utilisées sur des éléments que si certaines conditions sont remplies. | Supprime les attributs aria-checked redondants des cases à cocher natives et convertit le rôle d'un tableau en treegrid. |
| Utilisation de rôles ARIA obsolètes | La valeur attribuée à l'attribut role est obsolète et n'est plus valide. | Détecte les rôles ARIA obsolètes et soit les remplace par un équivalent moderne (en associant précisément directory à section), soit supprime l'attribut afin d'assurer la conformité aux normes. |
| Boîtes de dialogue ARIA non valides | La boîte de dialogue n'a pas de nom accessible, ce qui empêche les utilisateurs de lecteurs d'écran d'en identifier facilement l'objet ou de savoir ce qui s'est ouvert. | S'assure que la boîte de dialogue a un nom accessible valide en ajoutant un aria-label dérivé de son contenu textuel, ou une valeur de repli par défaut si aucun attribut d'étiquetage explicite n'existe. |
| Élément body masqué | Toute la page est masquée aux technologies d'assistance, ce qui empêche les utilisateurs d'accéder à son contenu ou à ses fonctionnalités. | Supprime l'attribut aria-hidden. |
| Noms accessibles manquants pour les champs de saisie | Ce champ de saisie n'a pas d'étiquette accessible; les utilisateurs de lecteurs d'écran ne peuvent donc pas déterminer quelle information ils doivent saisir. | Applique une étiquette par défaut "Basculer l'option" si aucune n'existe, ou définit explicitement l'aria-label pour qu'il corresponde au texte existant. |
| Utilisation d'attributs ARIA interdits | L'utilisation de l'attribut ARIA est interdite pour le rôle de l'élément. | Supprime les attributs ARIA strictement interdits pour le rôle d'un élément. |
| Rôles ARIA redondants | Cet élément possède déjà la sémantique fournie par le rôle; le rôle est donc redondant. | Sans objet |
| Attributs ARIA requis manquants | Le rôle de cet élément exige un attribut qui est manquant; les technologies d'assistance ne peuvent donc pas signaler son état. | Ajoute des valeurs d'attribut par défaut pour les attributs non valides. |
| Enfants ARIA requis manquants | Il manque une valeur de rôle enfant pour l'élément. | Ajoute les éléments enfants requis manquants et supprime les enfants non valides. |
| Parent ARIA requis manquant | Il manque une valeur de rôle parent pour l'élément. | Supprime les rôles ARIA incorrects. |
| Utilisation d'une description de rôle ARIA non valide | L'élément doté de l'attribut aria-roledescription exige un rôle pris en charge, explicite ou implicite. | Supprime aria-roledescription des éléments décoratifs ou sans rôle (où il est interdit) et le convertit en aria-label. |
| Utilisation de rôles ARIA abstraits | La valeur de rôle ARIA attribuée n'est pas valide. Il faut vérifier l'orthographe des valeurs de rôle et s'assurer qu'elles correspondent à des valeurs de rôle ARIA existantes. | Supprime tous les attributs role qui contiennent des fautes de frappe, qui ne sont pas pris en charge ou qui correspondent à des rôles "abstraits". |
| Utilisation d'un rôle ARIA non valide | La valeur de rôle ARIA attribuée n'est pas valide. Il faut vérifier l'orthographe des valeurs de rôle et s'assurer qu'elles correspondent à des valeurs de rôle ARIA existantes. | Supprime tous les attributs role qui contiennent des fautes de frappe, qui ne sont pas pris en charge ou qui correspondent à des rôles "abstraits". |
| Utilisation de rôles ARIA non pris en charge | La valeur de rôle ARIA attribuée n'est pas valide. Il faut vérifier l'orthographe des valeurs de rôle et s'assurer qu'elles correspondent à des valeurs de rôle ARIA existantes. | Supprime tous les attributs role qui contiennent des fautes de frappe, qui ne sont pas pris en charge ou qui correspondent à des rôles "abstraits". |
| Noms accessibles manquants pour les champs de saisie | L'élément doté d'un rôle sémantique n'a pas de nom accessible. | Applique une étiquette par défaut "Basculer l'option" si aucune n'existe, ou définit explicitement l'aria-label pour qu'il corresponde au texte existant. |
| Attributs ARIA non valides | Cet attribut n'est pas un véritable attribut ARIA - il est mal orthographié ou n'existe pas, de sorte que les technologies d'assistance l'ignorent. | Supprime tous les attributs ARIA non valides. |
| Valeurs d'attribut ARIA non valides | Cet attribut ARIA de l'élément contient une valeur non valide. | Corrige les valeurs non valides attribuées aux attributs ARIA en les réinitialisant à des valeurs par défaut sûres. |
| Attributs ARIA globaux sur les éléments dotés du rôle de présentation | Cet élément est marqué comme décoratif, mais reste accessible au clavier, ce qui amène les utilisateurs de lecteurs d'écran à rencontrer un élément qui n'est pas annoncé. | Supprime les attributs role explicites qui correspondent exactement au rôle implicite intégré de l'élément. |
| Éléments pouvant recevoir le focus et utilisant le rôle de présentation | Cet élément est marqué comme décoratif, mais reste accessible au clavier, ce qui amène les utilisateurs de lecteurs d'écran à rencontrer un élément qui n'est pas annoncé. | Supprime le rôle si l'élément peut recevoir le focus afin de rétablir sa valeur sémantique, ou en retirant les attributs ARIA globaux en conflit afin de conserver son statut décoratif. |
Meilleures pratiques
| Nom du problème | Description du problème |
| Nom accessible et étiquette visible non concordants | Le texte affiché comme étiquette de l'élément interactif n'apparaît pas dans le nom accessible programmé spécifié dans le HTML, comme ceux fournis par les balises <label> et <aria-label>. |
| Titres vides | Les titres ne contiennent aucune description significative, ce qui peut prêter à confusion lors de la navigation. |
| Niveaux de titre sautés | Certains niveaux de titre ont été sautés dans la page, ce qui rompt la structure logique du contenu. |
| Texte alt répété sur les images | Le texte alt de cette image répète des mots qui figurent déjà juste à côté. |
|
Rôles de repère sur les éléments imbriqués |
Le rôle de repère n'est pas appliqué au bon niveau de la hiérarchie de la page. |
| Éléments <noscript> incorrects | La page comprend des éléments <noscript> qui fournissent du contenu uniquement lorsque JavaScript est désactivé. |
| Titre de niveau un (H1) manquant | La page ne comprend pas de titre de niveau un, qui sert à identifier le sujet principal ou l'objet de la page. |
| Utilisation de balises visuelles sans sens sémantique | La page utilise des balises uniquement visuelles pour mettre le texte en forme au lieu de balises sémantiques. Ces balises ne modifient que l'apparence du texte, mais n'apportent aucun sens aux technologies d'assistance. |
| Régions englobantes manquantes ou mal définies | Ce contenu ne se trouve pas dans un repère, ce qui le rend plus difficile à trouver pour les utilisateurs de lecteurs d'écran qui naviguent par région. |
|
Légendes en double sur les tableaux |
Au moins deux tableaux de cette page partagent la même légende. |
| Régions de repère en double | Cette page comporte plus d'un repère du même type; les utilisateurs de lecteurs d'écran ne peuvent donc pas les distinguer. |
Problèmes de référencement (SEO)
| Nom du problème | Description du problème |
| Balise canonique | Les balises canoniques évitent les problèmes de contenu en double en indiquant aux moteurs de recherche quelle version d'une page est à privilégier. |
| Liens explorables | Les liens dont la destination est manquante, vide ou rompue empêchent les moteurs de recherche de trouver les pages liées. |
| Balises de langue et de région (hreflang) | Les balises hreflang indiquent aux moteurs de recherche la langue et la région auxquelles une page est destinée, afin que la bonne version s'affiche dans les résultats de recherche. |
| Code d'état de la page | Les pages qui renvoient un code d'état d'erreur risquent de ne pas être indexées par les moteurs de recherche. |
| Indexabilité de la page | Les pages dont l'indexation est bloquée (par exemple par une balise ou un en-tête "noindex") ne peuvent pas apparaître dans les résultats de recherche. |
| Texte de lien descriptif | Un texte de lien descriptif aide les moteurs de recherche à comprendre le sujet de la page liée. |
| Méta-description | Les méta-descriptions résument une page et améliorent le taux de clics à partir des résultats de recherche. |
| Longueur de la méta-description | Les méta-descriptions vides ou de plus de 160 caractères risquent d'être tronquées ou ignorées dans les résultats de recherche. |
| Titre de la page | Chaque page a besoin d'un titre. C'est le titre principal affiché dans les résultats de recherche et les onglets du navigateur. |
| Longueur du titre de la page | Les titres de plus de 65 caractères risquent d'être tronqués dans les résultats de recherche. |
| Fichier robots.txt | Un fichier robots.txt non valide peut empêcher les moteurs de recherche d'explorer correctement le site. |
| Balises de partage sur les réseaux sociaux (Open Graph) | Les balises Open Graph contrôlent l'apparence du contenu lorsqu'il est partagé sur les réseaux sociaux. |
| Données structurées | Les données structurées (JSON-LD) aident les moteurs de recherche à classer le contenu et peuvent améliorer l'apparence de la page dans les résultats. |
| Plan de site XML | Un plan de site qui inclut la page aide les moteurs de recherche à explorer efficacement le site. |
| Nombre de liens internes | Plus de 100 liens internes sur une page peuvent diluer la valeur des liens et nuire au classement. |
| Redirections de page | Les pages qui redirigent vers une autre URL ralentissent le chargement et peuvent affaiblir le classement dans les résultats de recherche. |
| Balise viewport mobile | Les balises meta viewport permettent aux pages de s'afficher correctement sur tous les appareils, et la compatibilité avec les mobiles est un facteur de classement. |
| Titre principal (H1) | Chaque page devrait avoir exactement un titre H1 afin que les moteurs de recherche comprennent son sujet principal. |
| Texte alt des images | Le texte alt aide les moteurs de recherche à indexer les images et améliore l'accessibilité. |
Problèmes d'utilisabilité
| Nom du problème | Description du problème |
| Lisibilité | Le contenu est trop complexe ou difficile à comprendre pour le public visé. |
| Fautes d'orthographe | Les fautes d'orthographe nuisent à la crédibilité et au professionnalisme d'un site Web. |
| Liens rompus | Les liens rompus nuisent à l'expérience utilisateur et aux performances SEO. |
| Domaines dangereux | Les liens vers des domaines signalés comme dangereux ou malveillants mettent les visiteurs en danger. |
| Exposition de renseignements personnels | La page expose peut-être par erreur des renseignements personnels sensibles : |
| Numéros d'assurance sociale | La page contient ce qui semble être des numéros d'assurance sociale (NAS). |
| Numéros de téléphone | La page contient des numéros de téléphone. |
| Adresses courriel | La page contient des adresses courriel. |
Problèmes de performance
| Nom du problème | Description du problème |
| Premier affichage de contenu (FCP) | Le temps écoulé entre la navigation et le moment où le navigateur affiche le premier élément de contenu. |
| Plus grand affichage de contenu (LCP) | Le temps écoulé entre la navigation et l'affichage du plus grand élément de contenu visible. |
| Temps de blocage total (TBT) | Le temps total pendant lequel la page ne peut pas répondre aux actions de l'utilisateur, entre le premier affichage de contenu et le délai avant interactivité. |
| Décalage cumulatif de la mise en page (CLS) | L'ampleur des déplacements inattendus du contenu visible pendant le chargement de la page. Plus la valeur est faible, mieux c'est. |
| Délai avant le premier octet (TTFB) | Le temps écoulé entre la navigation et le moment où le navigateur reçoit le premier octet de données du serveur. |
| Indice de vitesse (SI) | La rapidité avec laquelle le contenu de la page se remplit visiblement, mesurée par le temps moyen que mettent les parties visibles de la page à apparaître. |
Problèmes nécessitant un examen manuel
Remarque : Les problèmes indiqués comme nécessitant un examen manuel doivent être vérifiés manuellement par un évaluateur en accessibilité.
| Nom du problème | Description du problème | Énoncé de vérification manuelle |
| Examen manuel requis : WCAG 1.1.1 | Fournissez des alternatives textuelles au contenu non textuel. | Les alternatives textuelles décrivent fidèlement le contenu non textuel. |
| Examen manuel requis : WCAG 1.2.1 | Pour les médias audio seuls préenregistrés et les médias vidéo seuls préenregistrés, les conditions suivantes sont remplies, sauf lorsque l'audio ou la vidéo est une alternative média à un texte et est clairement étiqueté comme (1) un contenu audio seul préenregistré, et (2) qu'il dispose d'une alternative pour les médias temporels présentant des informations équivalentes pour un contenu audio seul préenregistré. | Les alternatives textuelles correspondent correctement au contenu de l'audio ou de la vidéo. |
| Examen manuel requis : WCAG 1.2.2 | Des sous-titres sont fournis pour tout le contenu audio préenregistré dans les médias synchronisés, sauf lorsque le média sert d'alternative à un texte et est clairement étiqueté comme tel. | Les sous-titres correspondent correctement au contenu de la vidéo. |
| Examen manuel requis : WCAG 1.2.3 | Une alternative aux médias temporels ou une audiodescription du contenu vidéo préenregistré est fournie pour les médias synchronisés, sauf lorsque le média sert d'alternative à un texte et est clairement étiqueté comme tel. | Les vidéos comprennent une alternative textuelle; confirmez qu'elle reflète fidèlement le contenu. |
| Examen manuel requis : WCAG 1.2.5 | Une audiodescription est fournie pour tout le contenu vidéo préenregistré dans les médias synchronisés. | Les vidéos comprennent une audiodescription, et celle-ci reflète fidèlement le contenu. |
| Examen manuel requis : WCAG 1.2.6 | Une interprétation en langue des signes est fournie pour tout le contenu audio préenregistré dans les médias synchronisés. | Les contenus audio comprennent une alternative en langue des signes; confirmez qu'elle reflète fidèlement le contenu. |
| Examen manuel requis : WCAG 1.2.7 | Lorsque les pauses dans l'audio de premier plan sont insuffisantes pour permettre aux audiodescriptions de rendre le sens de la vidéo, une audiodescription étendue est fournie pour tout le contenu vidéo préenregistré dans les médias synchronisés. | Les vidéos comprennent des audiodescriptions étendues et reflètent fidèlement leur contenu. |
| Examen manuel requis : WCAG 1.2.8 | Une alternative en texte intégral (comme une transcription) doit être fournie pour tous les médias synchronisés préenregistrés et tous les médias vidéo seuls préenregistrés. Cette alternative devrait inclure tout le contenu visuel et audio dans un format unique et lisible pour les utilisateurs qui ne peuvent pas accéder à la vidéo ou à l'audio. | Les médias préenregistrés comprennent une alternative en texte intégral qui transmet à la fois le contenu visuel et le contenu audio. |
| Examen manuel requis : WCAG 1.3.1 | L'information, la structure et les relations transmises par la présentation peuvent être déterminées par programmation ou sont disponibles sous forme de texte. | La sémantique, les étiquettes et les tableaux de mise en page sont utilisés de façon appropriée. |
| Examen manuel requis : WCAG 1.3.4 | Le contenu ne restreint pas son affichage et son fonctionnement à une seule orientation d'affichage, comme le mode portrait ou paysage, sauf si une orientation d'affichage précise est essentielle. | Toute orientation imposée est essentielle au contenu ou à la fonctionnalité. |
| Examen manuel requis : WCAG 1.3.5 | Dans le contenu mis en œuvre à l'aide de langages de balisage, la fonction des composants d'interface utilisateur et des mécanismes de navigation peut être déterminée par programmation. | Les attributs autocomplete identifient correctement la fonction des champs de saisie. |
| Examen manuel requis : WCAG 1.4.1 | La couleur n'est pas utilisée comme seul moyen visuel de transmettre une information, d'indiquer une action, de solliciter une réponse ou de distinguer un élément visuel. | Sans objet |
| Examen manuel requis : WCAG 1.4.2 | Si un contenu audio d'une page Web est lu automatiquement pendant plus de 3 secondes, un mécanisme permet de le mettre en pause ou de l'arrêter, ou un mécanisme permet de régler le volume audio indépendamment du niveau de volume général du système. | L'audio lu automatiquement peut être mis en pause, arrêté ou mis en sourdine. |
| Examen manuel requis : WCAG 1.4.3 | La présentation visuelle du texte et des images de texte a un rapport de contraste d'au moins 4,5:1, sauf pour le texte de grande taille, qui doit avoir un rapport de contraste d'au moins 3:1. | Le texte respecte les exigences de contraste renforcé selon sa taille. |
| Examen manuel requis : WCAG 1.4.4 | À l'exception des sous-titres et des images de texte, le texte peut être redimensionné sans technologie d'assistance jusqu'à 200 pour cent sans perte de contenu ou de fonctionnalité. | Le contenu reste lisible et fonctionnel avec un zoom de 200 %. |
| Examen manuel requis : WCAG 1.4.5 | Si les technologies utilisées permettent d'obtenir la présentation visuelle, du texte est utilisé pour transmettre l'information plutôt que des images de texte, sauf lorsque l'image de texte peut être personnalisée. | Le texte n'est pas présenté au moyen d'images, sauf si c'est essentiel. |
| Examen manuel requis : WCAG 1.4.6 | La présentation visuelle du texte et des images de texte a un rapport de contraste d'au moins 7:1, sauf pour le texte de grande taille, qui doit avoir un rapport de contraste d'au moins 4,5:1. | Le texte respecte les exigences de contraste renforcé selon sa taille. |
| Examen manuel requis : WCAG 1.4.7 | Pour le contenu audio seul préenregistré comportant de la parole au premier plan, l'audio d'arrière-plan est soit absent, soit suffisamment faible pour ne pas gêner la compréhension de la parole. | L'audio d'arrière-plan ne gêne pas la parole, sauf s'il est intentionnel. |
| Examen manuel requis : WCAG 1.4.8 | Un mécanisme permet de personnaliser la présentation visuelle des blocs de texte, par exemple en modifiant les couleurs de premier plan et d'arrière-plan. | Le style du texte peut être modifié. |
| Examen manuel requis : WCAG 1.4.9 | Les images de texte sont utilisées uniquement à des fins de pure décoration ou lorsqu'une présentation particulière du texte est essentielle à l'information transmise. | Les images de texte sont utilisées uniquement à des fins décoratives ou lorsqu'une présentation visuelle précise est essentielle. |
| Examen manuel requis : WCAG 1.4.10 | Le contenu peut être présenté sans perte d'information ni de fonctionnalité, et sans défilement horizontal, à une largeur équivalente à 320 pixels CSS. | Le contenu reste lisible et fonctionnel avec un zoom de 400 %. |
| Examen manuel requis : WCAG 1.4.11 | La présentation visuelle des composants d'interface utilisateur et des objets graphiques nécessaires pour identifier les états de l'interface doit avoir un rapport de contraste d'au moins 3:1, sauf exemption. | Les composants inactifs ou les présentations graphiques sont exemptés des rapports de contraste des couleurs. |
| Examen manuel requis : WCAG 1.4.12 | Lorsque les utilisateurs remplacent les propriétés d'espacement du texte (comme la hauteur de ligne, l'espacement des lettres, l'espacement des mots ou l'espacement des paragraphes) par des valeurs minimales précisées, le contenu doit rester lisible et fonctionnel, sans perte d'information ni de fonctionnalité. | Le contenu reste lisible et fonctionnel lorsque l'espacement du texte est réglé sur les valeurs minimales. |
| Examen manuel requis : WCAG 2.1.1 | Toutes les fonctionnalités du contenu sont utilisables au moyen d'une interface clavier, sans exiger de délais précis pour chaque frappe, sauf si la saisie par mouvement est essentielle. | Les éléments interactifs sont accessibles au moyen d'une interface clavier. |
| Examen manuel requis : WCAG 2.1.2 | Si le focus peut être placé sur un composant au clavier, il doit aussi pouvoir en être retiré en utilisant uniquement le clavier. Si une méthode de sortie non standard est nécessaire, l'utilisateur doit en être informé. | Les éléments interactifs sont accessibles au moyen d'une interface clavier. |
| Examen manuel requis : WCAG 2.1.3 | Si un raccourci clavier est mis en œuvre à l'aide de caractères imprimables, les utilisateurs doivent pouvoir le désactiver, le reconfigurer ou le limiter aux composants qui ont le focus. | Les éléments interactifs sont accessibles au moyen d'une interface clavier. |
| Examen manuel requis : WCAG 2.2.1 | Pour chaque limite de temps imposée par le contenu, les utilisateurs doivent pouvoir la désactiver, l'ajuster ou la prolonger, sauf si elle est essentielle ou fait partie d'un événement en temps réel. | Les limites de temps peuvent être désactivées, ajustées ou prolongées. |
| Examen manuel requis : WCAG 2.2.2 | Pour le contenu qui bouge, clignote, défile ou se met à jour automatiquement et dure plus de cinq secondes, les utilisateurs doivent pouvoir le mettre en pause, l'arrêter ou le masquer, sauf si cela est essentiel. | Les commandes de tout contenu en mouvement (carrousels, bannières, diaporamas) peuvent recevoir le focus au clavier et peuvent arrêter le mouvement. |
| Examen manuel requis : WCAG 2.2.3` | Sans objet | Sans objet |
| Examen manuel requis : WCAG 2.2.6` | Sans objet | Sans objet |
| Examen manuel requis : WCAG 2.3.1 | Le contenu ne doit pas clignoter plus de trois fois par seconde, sauf si le clignotement est inférieur au seuil connu pour provoquer des crises. | Les animations ne clignotent pas plus de trois fois par seconde ni ne dépassent les seuils d'intensité et de surface du clignotement. |
| Examen manuel requis : WCAG 2.3.2 | Le contenu ne doit pas clignoter plus de trois fois par seconde. | Les animations ne clignotent pas plus de trois fois par seconde. |
| Examen manuel requis : WCAG 2.3.3 | L'animation de mouvement déclenchée par une interaction de l'utilisateur doit pouvoir être désactivée, sauf si l'animation est essentielle à la fonctionnalité. | Les animations déclenchées par une interaction de l'utilisateur peuvent être désactivées. |
| Examen manuel requis : WCAG 2.4.1 | Offrez aux utilisateurs un moyen de contourner les blocs de contenu répétés. | Les liens d'évitement sont présents et fonctionnent comme prévu. |
| Examen manuel requis : WCAG 2.4.2 | Les pages Web doivent avoir des titres descriptifs qui indiquent le sujet ou l'objectif. | Les titres résument fidèlement le contenu de la page. |
| Examen manuel requis : WCAG 2.4.3 | Les composants pouvant recevoir le focus doivent le recevoir dans un ordre qui préserve le sens et l'opérabilité. | L'ordre de focus suit un ordre logique qui préserve le sens et la fonctionnalité. |
| Examen manuel requis : WCAG 2.4.4 | La description du lien n'est pas claire sans contexte supplémentaire, et les liens adjacents ne devraient pas pointer vers la même URL. | Les liens indiquent clairement leur fonction. |
| Examen manuel requis : WCAG 2.4.5 | Offrez au moins deux moyens de repérer chaque page Web, sauf si elle fait partie d'un processus. | Il existe au moins deux méthodes pour repérer chaque page Web. |
| Examen manuel requis : WCAG 2.4.6 | Les titres et les étiquettes doivent décrire le sujet ou l'objectif du contenu auquel ils sont associés. | Les titres et les étiquettes décrivent clairement l'objectif de leur contenu. |
| Examen manuel requis : WCAG 2.4.7 | Un indicateur de focus visible doit être présent pour tout composant d'interface utilisateur utilisable au clavier. | Les composants interactifs ont un focus clavier visible. |
| Examen manuel requis : WCAG 2.4.8 | Des informations sur l'emplacement de l'utilisateur dans un ensemble de pages Web doivent être disponibles pour faciliter l'orientation et la navigation. | L'emplacement des pages est clairement indiqué dans le site Web. |
| Examen manuel requis : WCAG 2.4.9 | La fonction de chaque lien doit pouvoir être identifiée à partir du seul texte du lien, sauf lorsque la fonction du lien serait ambiguë pour la plupart des utilisateurs. | Les liens contiennent suffisamment de contexte ou de description pour remplir leur fonction. |
| Examen manuel requis : WCAG 2.4.10 | Utilisez des titres de section pour organiser le contenu et faciliter la navigation, même si les titres ne sont pas nécessaires à la structure. | Les titres de section sont logiques et distincts. |
| Examen manuel requis : WCAG 2.5.2 | Les fonctionnalités utilisables avec un seul pointeur ne doivent pas se déclencher lors de l'événement d'appui, sauf si c'est essentiel, ou doivent permettre d'annuler ou d'inverser l'action. | Les actions ne se déclenchent pas à l'appui du pointeur, sauf si c'est essentiel. |
| Examen manuel requis : WCAG 2.5.3 | L'étiquette textuelle visible d'un composant d'interface utilisateur doit être incluse dans son nom accessible afin de prendre en charge les technologies d'assistance. | Les étiquettes visibles correspondent aux noms accessibles des composants d'interface. |
| Examen manuel requis : WCAG 2.5.5 | Les éléments cliquables doivent mesurer au moins 44 sur 44 pixels CSS, sauf s'ils répondent à des exceptions, par exemple s'ils sont en ligne ou s'ils ont un espacement suffisant. | Les cibles interactives plus petites sont exemptées de l'exigence de taille. |
| Examen manuel requis : WCAG 2.5.7 | Toutes les fonctionnalités qui utilisent un mouvement de glissement doivent pouvoir être utilisées sans glissement, sauf si c'est essentiel ou si le glissement est contrôlé par l'agent utilisateur. | Les actions de glisser-déposer ont des alternatives, sauf si c'est essentiel. |
| Examen manuel requis : WCAG 2.5.8 | Les cibles cliquables doivent respecter des exigences de taille minimale pour aider les utilisateurs ayant une dextérité limitée. | Les cibles interactives plus petites sont exemptées de l'exigence de taille. |
| Examen manuel requis : WCAG 3.1.1 | La langue humaine par défaut de chaque page Web doit pouvoir être identifiée par programmation afin de prendre en charge les lecteurs d'écran et les autres technologies d'assistance. | Les attributs de langue indiqués sont exacts. |
| Examen manuel requis : WCAG 3.1.2 | Lorsque des parties d'une page utilisent une langue différente de la langue par défaut, le changement doit être identifié par programmation afin de permettre une prononciation et une traduction exactes. | Les changements de langue dans le contenu sont correctement identifiés par des attributs de langue. |
| Examen manuel requis : WCAG 3.2.1 | Lorsqu'un élément reçoit le focus, il ne doit pas provoquer de changement de contexte important, sauf si l'utilisateur s'y attend. | Placer le focus sur des éléments ne provoque pas de changements de contexte inattendus, sauf s'ils sont attendus. |
| Examen manuel requis : WCAG 3.2.2 | Modifier le réglage d'une commande de formulaire ne doit pas provoquer automatiquement un changement de contexte, sauf si l'utilisateur en est averti avant d'interagir avec la commande. | La modification des valeurs d'un formulaire ne provoque pas de changements de contexte inattendus. |
| Examen manuel requis : WCAG 3.2.4 | Les composants ayant la même fonctionnalité dans un ensemble de pages Web sont identifiés de manière cohérente. | Sans objet |
| Examen manuel requis : WCAG 3.3.1 | Si une erreur de saisie est détectée, l'erreur doit être identifiée et décrite à l'utilisateur sous forme de texte. | Les erreurs de saisie sont automatiquement identifiées et décrites. |
| Examen manuel requis : WCAG 3.3.2 | Des étiquettes ou des instructions doivent être fournies lorsqu'une saisie de l'utilisateur est requise, afin que les utilisateurs sachent ce qui est attendu. | Les champs de saisie ou les commandes de formulaire ont des instructions exactes ou un texte indicatif. |
| Examen manuel requis : WCAG 4.1.2 | Les composants d'interface utilisateur doivent exposer par programmation leur nom, leur rôle, leur état et leur valeur afin que les technologies d'assistance puissent les interpréter et interagir avec eux. | Les composants d'interface utilisateur ont des noms, des rôles et des états exacts et accessibles. |
| Examen manuel requis : WCAG 4.1.3 | Les messages d'état doivent être transmis par programmation aux technologies d'assistance sans nécessiter le focus de l'utilisateur. | Les messages d'état sont annoncés aux technologies d'assistance sans déplacer le focus. |