Cet exemple illustre les problèmes que Clair peut détecter et les recommandations associées.
Page d’exemple. Ce rapport est produit par le même moteur HTML que l’analyse réelle, sur une page de démonstration. Les illustrations sont fournies pour repérer les images, pas reconnues par le moteur. Les contrastes calculés, le clavier et le contenu ajouté par JavaScript restent non testés.
Éléments signalés12dans 5 familles
Critiques9À examiner en priorité
Importants0À vérifier dans le contexte
À améliorer3À vérifier dans le contexte
Les actions à mener
Chaque obstacle, expliqué simplement.
5 famille(s) affichée(s).
HTML reçu · CritiquesImages sans alternative textuelle4 élément(s) à examiner.4éléments+
Pourquoi est-ce important ?
L’information portée par une image doit être disponible sans la voir.
Règle image-altRéférence WCAG : 1.1.1 A
Élément 1 sur 4Image 1Ligne 3 du HTML reçu
Ce qui a été constaté
Aucune alternative textuelle détectée pour cette image dans le code reçu.
Pourquoi cela compte
Une personne utilisant un lecteur d’écran peut ne pas recevoir l’information portée par ce visuel. Une image purement décorative doit au contraire pouvoir être ignorée.
Que faire maintenant ?
Vérifiez le rôle de cette image dans la page.
Préparez son texte alternatif, ou confirmez qu’elle est décorative.
Appliquez le changement dans votre site, puis relancez le contrôle.
Comment vérifier ?
Vérifiez que le texte transmet la même information dans ce contexte. Clair peut contrôler la présence de l’alternative, pas la justesse de sa description.
Détails développeur et code
Recommandation technique
Décrivez l’information utile dans alt. Utilisez alt="" uniquement si cette image est décorative dans son contexte. Le contenu du visuel n’a pas été analysé.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
Élément 2 sur 4Image 2Ligne 3 du HTML reçu
Ce qui a été constaté
Aucune alternative textuelle détectée pour cette image dans le code reçu.
Pourquoi cela compte
Une personne utilisant un lecteur d’écran peut ne pas recevoir l’information portée par ce visuel. Une image purement décorative doit au contraire pouvoir être ignorée.
Que faire maintenant ?
Vérifiez le rôle de cette image dans la page.
Préparez son texte alternatif, ou confirmez qu’elle est décorative.
Appliquez le changement dans votre site, puis relancez le contrôle.
Comment vérifier ?
Vérifiez que le texte transmet la même information dans ce contexte. Clair peut contrôler la présence de l’alternative, pas la justesse de sa description.
Détails développeur et code
Recommandation technique
Décrivez l’information utile dans alt. Utilisez alt="" uniquement si cette image est décorative dans son contexte. Le contenu du visuel n’a pas été analysé.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
Élément 3 sur 4Image 3Ligne 3 du HTML reçu
Ce qui a été constaté
Aucune alternative textuelle détectée pour cette image dans le code reçu.
Pourquoi cela compte
Une personne utilisant un lecteur d’écran peut ne pas recevoir l’information portée par ce visuel. Une image purement décorative doit au contraire pouvoir être ignorée.
Que faire maintenant ?
Vérifiez le rôle de cette image dans la page.
Préparez son texte alternatif, ou confirmez qu’elle est décorative.
Appliquez le changement dans votre site, puis relancez le contrôle.
Comment vérifier ?
Vérifiez que le texte transmet la même information dans ce contexte. Clair peut contrôler la présence de l’alternative, pas la justesse de sa description.
Détails développeur et code
Recommandation technique
Décrivez l’information utile dans alt. Utilisez alt="" uniquement si cette image est décorative dans son contexte. Le contenu du visuel n’a pas été analysé.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
Élément 4 sur 4Image 4Ligne 3 du HTML reçu
Ce qui a été constaté
Aucune alternative textuelle détectée pour cette image dans le code reçu.
Pourquoi cela compte
Une personne utilisant un lecteur d’écran peut ne pas recevoir l’information portée par ce visuel. Une image purement décorative doit au contraire pouvoir être ignorée.
Que faire maintenant ?
Vérifiez le rôle de cette image dans la page.
Préparez son texte alternatif, ou confirmez qu’elle est décorative.
Appliquez le changement dans votre site, puis relancez le contrôle.
Comment vérifier ?
Vérifiez que le texte transmet la même information dans ce contexte. Clair peut contrôler la présence de l’alternative, pas la justesse de sa description.
Détails développeur et code
Recommandation technique
Décrivez l’information utile dans alt. Utilisez alt="" uniquement si cette image est décorative dans son contexte. Le contenu du visuel n’a pas été analysé.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
À vérifier. Vérifiez l’élément et la correction dans leur contexte avant publication.
HTML reçu · CritiquesChamps sans libellé détectable2 élément(s) à examiner.2éléments+
Pourquoi est-ce important ?
Un champ doit annoncer l’information attendue.
Règle form-labelRéférence WCAG : 1.3.1 A, 3.3.2 A, 4.1.2 A
Élément 1 sur 2TéléphoneLigne 6 du HTML reçuRepère dans le HTML reçu, pas une capture de la page.
Ce qui a été constaté
Aucun libellé associé à ce champ n’a été détecté dans le HTML reçu.
Pourquoi cela compte
Un champ doit annoncer l’information attendue.
Que faire maintenant ?
Repérez le champ dans le formulaire et identifiez l’information attendue.
Dans votre éditeur, ajoutez un libellé visible. Faites vérifier son association au champ dans le code ; un texte indicatif dans le champ ne suffit pas.
Conservez les contraintes et les messages d’aide existants.
Comment vérifier ?
Dans la page affichée, vérifiez que le libellé reste visible pendant la saisie. Avec un lecteur d’écran, contrôlez le nom annoncé en arrivant sur le champ. Relancez ensuite Clair.
Détails développeur et code
Recommandation technique
Ajoutez un libellé visible associé à ce champ : label contenant le champ, ou label for associé à son id unique.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
Élément 2 sur 2Champ 2Ligne 6 du HTML reçuRepère dans le HTML reçu, pas une capture de la page.
Ce qui a été constaté
Aucun libellé associé à ce champ n’a été détecté dans le HTML reçu.
Pourquoi cela compte
Un champ doit annoncer l’information attendue.
Que faire maintenant ?
Repérez le champ dans le formulaire et identifiez l’information attendue.
Dans votre éditeur, ajoutez un libellé visible. Faites vérifier son association au champ dans le code ; un texte indicatif dans le champ ne suffit pas.
Conservez les contraintes et les messages d’aide existants.
Comment vérifier ?
Dans la page affichée, vérifiez que le libellé reste visible pendant la saisie. Avec un lecteur d’écran, contrôlez le nom annoncé en arrivant sur le champ. Relancez ensuite Clair.
Détails développeur et code
Recommandation technique
Ajoutez un libellé visible associé à ce champ : label contenant le champ, ou label for associé à son id unique.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
À vérifier. Vérifiez l’élément et la correction dans leur contexte avant publication.
HTML reçu · CritiquesBoutons sans nom détectable3 élément(s) à examiner.3éléments+
Pourquoi est-ce important ?
Le nom du bouton explique son action.
Règle button-nameRéférence WCAG : 4.1.2 A
Élément 1 sur 3Bouton 1Ligne 7 du HTML reçuRepère dans le HTML reçu, pas une capture de la page.
Ce qui a été constaté
Aucun nom accessible n’a été détecté pour ce bouton dans le HTML reçu.
Pourquoi cela compte
Le nom du bouton explique son action.
Que faire maintenant ?
Retrouvez le bouton dans la page et vérifiez son action réelle.
Donnez-lui un intitulé qui décrit cette action. Pour une icône seule, faites ajouter un nom accessible par la personne qui gère le code.
Préservez le fonctionnement du bouton ; Clair ne peut pas deviner son action.
Comment vérifier ?
Au clavier, vérifiez que le bouton peut être atteint et activé. Avec un lecteur d’écran, contrôlez que son nom décrit bien l’action. Ces interactions ne sont pas testées par Clair.
Détails développeur et code
Recommandation technique
Donnez à ce bouton un texte qui décrit son action. Pour une icône seule, fournissez un nom accessible adapté.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
Élément 2 sur 3Bouton 2Ligne 7 du HTML reçuRepère dans le HTML reçu, pas une capture de la page.
Ce qui a été constaté
Aucun nom accessible n’a été détecté pour ce bouton dans le HTML reçu.
Pourquoi cela compte
Le nom du bouton explique son action.
Que faire maintenant ?
Retrouvez le bouton dans la page et vérifiez son action réelle.
Donnez-lui un intitulé qui décrit cette action. Pour une icône seule, faites ajouter un nom accessible par la personne qui gère le code.
Préservez le fonctionnement du bouton ; Clair ne peut pas deviner son action.
Comment vérifier ?
Au clavier, vérifiez que le bouton peut être atteint et activé. Avec un lecteur d’écran, contrôlez que son nom décrit bien l’action. Ces interactions ne sont pas testées par Clair.
Détails développeur et code
Recommandation technique
Donnez à ce bouton un texte qui décrit son action. Pour une icône seule, fournissez un nom accessible adapté.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
Élément 3 sur 3Bouton 3Ligne 7 du HTML reçuRepère dans le HTML reçu, pas une capture de la page.
Ce qui a été constaté
Aucun nom accessible n’a été détecté pour ce bouton dans le HTML reçu.
Pourquoi cela compte
Le nom du bouton explique son action.
Que faire maintenant ?
Retrouvez le bouton dans la page et vérifiez son action réelle.
Donnez-lui un intitulé qui décrit cette action. Pour une icône seule, faites ajouter un nom accessible par la personne qui gère le code.
Préservez le fonctionnement du bouton ; Clair ne peut pas deviner son action.
Comment vérifier ?
Au clavier, vérifiez que le bouton peut être atteint et activé. Avec un lecteur d’écran, contrôlez que son nom décrit bien l’action. Ces interactions ne sont pas testées par Clair.
Détails développeur et code
Recommandation technique
Donnez à ce bouton un texte qui décrit son action. Pour une icône seule, fournissez un nom accessible adapté.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
À vérifier. Vérifiez l’élément et la correction dans leur contexte avant publication.
Vérification humaine · À améliorerLiens à préciser selon leur contexte1 élément(s) à examiner.1élément+
Pourquoi est-ce important ?
Un intitulé générique peut être insuffisant selon le contexte associé.
Règle link-purposeRéférence WCAG : 2.4.4 A
Élément 1 sur 1En savoir plusLigne 5 du HTML reçuRepère dans le HTML reçu, pas une capture de la page.
Ce qui a été constaté
Ce lien utilise un intitulé générique. Son contexte doit être examiné avant de décider de le modifier.
Pourquoi cela compte
Un intitulé générique peut être insuffisant selon le contexte associé.
Que faire maintenant ?
Lisez le lien avec son paragraphe ou son contexte associé.
Si sa destination reste ambiguë, précisez l’intitulé dans votre éditeur.
Ne changez pas sa destination. Un intitulé générique compréhensible dans son contexte ne nécessite pas forcément une correction.
Comment vérifier ?
Vérifiez que la destination peut être comprise à partir du lien et de son contexte associé. La disparition du signalement ne suffit pas à valider cette compréhension.
Détails développeur et code
Recommandation technique
Vérifiez le paragraphe associé et précisez la destination si elle ne peut pas être comprise. Un intitulé générique n’est pas automatiquement une non-conformité.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
À vérifier. Vérifiez l’élément et la correction dans leur contexte avant publication.
Vérification humaine · À améliorerHiérarchie des titres à examiner2 élément(s) à examiner.2éléments+
Pourquoi est-ce important ?
Une structure de titres logique facilite la navigation.
Règle heading-orderBonne pratique · à examiner dans le contexte
Élément 1 sur 2Mobilier de salonLigne 2 du HTML reçuRepère dans le HTML reçu, pas une capture de la page.
Ce qui a été constaté
Un saut de niveau de titre a été repéré dans la source. Ce signal ne prouve pas à lui seul une non-conformité.
Pourquoi cela compte
Une structure de titres logique facilite la navigation.
Que faire maintenant ?
Repérez les titres qui précèdent et suivent cet élément.
Vérifiez les relations entre sections et sous-sections ; ne choisissez pas un niveau uniquement pour la taille du texte.
Si la structure est incohérente, ajustez le niveau dans votre éditeur, puis conservez la présentation avec les styles.
Comment vérifier ?
Parcourez la liste des titres avec un lecteur d’écran et vérifiez que l’organisation est compréhensible. Contrôlez aussi la présentation après le changement.
Détails développeur et code
Recommandation technique
Vérifiez la relation entre les sections avant de changer les niveaux de titres. Un niveau sauté est un signal de vérification, pas une preuve de non-conformité.
Aucun code corrigé n’est inventé : appliquez la piste ci-dessus selon le contexte réel.
Élément 2 sur 2Conseils d’entretienLigne 4 du HTML reçuRepère dans le HTML reçu, pas une capture de la page.
Ce qui a été constaté
Un saut de niveau de titre a été repéré dans la source. Ce signal ne prouve pas à lui seul une non-conformité.
Pourquoi cela compte
Une structure de titres logique facilite la navigation.
Que faire maintenant ?
Repérez les titres qui précèdent et suivent cet élément.
Vérifiez les relations entre sections et sous-sections ; ne choisissez pas un niveau uniquement pour la taille du texte.
Si la structure est incohérente, ajustez le niveau dans votre éditeur, puis conservez la présentation avec les styles.
Comment vérifier ?
Parcourez la liste des titres avec un lecteur d’écran et vérifiez que l’organisation est compréhensible. Contrôlez aussi la présentation après le changement.
Détails développeur et code
Recommandation technique
Vérifiez la relation entre les sections avant de changer les niveaux de titres. Un niveau sauté est un signal de vérification, pas une preuve de non-conformité.
