Checklist rapide

Avant de lancer un audit complet, il est intéressant qu’un chef de produit ou de projet puisse réaliser lui-même une évaluation rapide de la qualité au regard de la checklist Pidila d’un site ou d’une livraison de pages pour s’en faire une première idée.

Cette page liste ces tests et indique comment les réaliser.

Dans le cadre de l’évaluation rapide d'un site, nous recommandons d’effectuer ces tests sur trois pages : la page d’accueil, une page comportant un formulaire, une page de contenu.

Page affichée (16 tests)

  • Il s'agit du titre de la fenêtre ou de l'onglet ouvert du navigateur. Vérifier que ce titre est bien constitué de deux parties, la première reprenant le titre de la page, la seconde le nom du site. En parcourant d'autres pages du site, vérifier qu'à chaque fois le titre est pertinent et unique.

  • Parcourir quelques pages du site en vérifiant que l'entête et le pied de page y sont présents et constants.

    Cette règle s'applique aussi aux pages d'erreur. Pour le vérifier, ajouter un caractère quelconque à la fin de l'url, ce qui devrait aboutir sur une page d'erreur 404 ("cette page n'existe pas")

  • Un lien de retour à l'accueil est présent sur toutes les pages. De préférence, ce lien se retrouve à deux endroits au moins : sur l'entête du site et en premier item du fil d'Ariane.

  • Ces liens sont au tout début de la page. Ils sont de préférence visibles en permanence mais peuvent éventuellement ne s'afficher qu'au cours de la navigation au clavier. Rafraîchir la page puis actionner la touche de tabulation pour les faire apparaître.

  • Généralement, le fil d'Ariane s'affiche juste au-dessus du contenu de la page. Il permet de remonter l'arborescence d'où elle est issue.

  • Il n'y a pas d'éléments qui ne seraient compréhensibles qu'en fonction de leur couleur (par exemple pas de portion de texte telle que « cliquez sur le bouton rouge »).

    Les liens sont visibles autrement que par une couleur distincte : de fait, on vérifie lors de ce test que les liens sont soulignés.

  • Par convention, le soulignement identifie un lien. On s'assure donc qu'il n'est utilisé que pour les liens pour ne pas créer d'ambiguïté.

  • Pour effectuer ce test, choisir d'abord dans le menu Affichage du navigateur l'item Zoom texte seulement.

    Pour augmenter la taille des caractères, effectuer la combinaison de touches ctrl + + six fois. Les anomalies le plus souvent rencontrées sont la disparition de texte blanc qui était sur un fond de couleur non extensible ou la page « coupée » à droite.

  • Sur une page du site présentant un formulaire, cliquer sur les intitulés (labels) des champs et s'assurer que le curseur vient bien se positionner alors dans le champ concerné.

  • Une mention est présente pour les champs dont la saisie est obligatoire, soit explicitement, soit par le biais d'une indication (souvent un astérisque) dont l'explication est donnée au début du formulaire. Note : la seule présence d'un astérisque et/ou une coloration différente ne sont pas suffisantes.

  • Cet avertissement doit être présent visuellement (présentation différente, présence d'un pictogramme…) et textuellement : généralement, au survol du lien apparaît une étiquette rappelant le texte du lien + la mention « nouvelle fenêtre ». Si ça n'apparaît pas au survol c'est peut-être dans un texte caché visuellement mais présent dans le code source.

  • On vérifie qu'il n'y a pas d'animations se déclenchant systématiquement et n'offrant pas de possibilité de les interrompre (publicités tournantes, carousels, vidéos etc.).

    A noter : si le RGAA fixe une limite de temps pour les animations déclenchées automatiquement, les autres référentiels, eux (Charte internet de l'Etat, Bonnes pratiques Opquast) bannissent tout déclenchement automatique.

  • Idem que ci-dessus, cette fois pour les sons et avec une durée maximale de 3 secondes.

  • L'exception est accordée pour les diffusions en direct.

    Les profils techniques peuvent s'assurer au passage que le lecteur est pilotable au clavier.

  • Rafraîchir la page. S'assurer qu'on peut naviguer de lien en lien (ou bouton) à l'aide de la touche tabulation. Lorsque le focus est posé sur un lien ou un bouton la touche d'espacement active ledit lien ou bouton. Les boutons sont également activables grâce à la touche Return.

    Lors du test, on utilisera aussi la combinaison de touches maj + tab pour vérifier qu'on peut naviguer à reculons.

    Additionnellement, on s'assure que le focus est visible, c'est-à-dire qu'on distingue bien où la tabulation nous a conduits.

  • Dans le menu du navigateur, choisir l'aperçu avant impression. S'assurer que les éléments inutiles dans une version papier ont bien disparu et qu'il n'existe pas de gros aplats de couleur.

À réaliser avec des extensions pour le navigateur (2 tests)

Extensions pour Firefox à installer : WCAG Contrast Checker ; HeadingsMap.

  • Lancer l'extension WCAG Contrast Checker (symbolisé par une roue multicolore).

    Les croix rouges indiquent les contrastes non conformes, les coches vertes indiquent les contrastes conformes.

  • Lancer l'extension HeadingsMap (symbolisé par le pictogramme <h/>. Dans le panneau qui s'ouvre à gauche, s'assurer que c'est bien l'onglet Headers Structure qui est activé (et non HTML5 Outline).

    Vérifier qu'il y a au moins un titre de niveau 1 et que l'arbre des titres est logique et cohérent.

Code source de la page (5 tests)

Pour afficher le code d'une page, utilisez la combinaison de touches ctrl + u (Windows), cmd + u (MacOS).

  • Une déclaration correcte facilitera le travail des aides techniques. Pour réaliser ce test, vérifier que la première ligne comporte bien <!doctype html>.

  • Pour réaliser ce test, vérifier qu'il existe bien un role="main" sur le contenu principal de la page, role="nav" sur le menu principal, role="banner" sur l'entête du site, role="content-info" sur le pied de page, role="search" sur le bloc de recherche.

  • Pour réaliser ce test, vérifier qu'il existe bien un attribut lang="fr" (ou en si c'est en anglais, it en italien, etc.) dans la balise <html> située au début du document, juste après la balise doctype ci-dessus évoquée.

  • Si des images porteuses de sens sont présentes, elles doivent être accompagnées d'un texte de remplacement. Ce texte sera lu par les aides techniques. Le texte alternatif doit être pertinent c'est-à-dire transmettre les intentions de l'image et non leur description factuelle.

    À noter : si l'image est purement décorative, l'attribut alt doit être présent et vide.

    Passation du test : dans le code source, rechercher <img et vérifier que chacune de ces balises comporte un attribut alt="ici le texte alternatif".

  • Utiliser le validateur du w3c. Il existe trois méthodes :

    • Coller l'URL de la page dans le champ Address puis cliquer sur Check.
    • Télécharger le fichier HTML depuis son ordinateur à l'aide du champ Address puis cliquer sur Check.
    • Coller le code HTML dans le champ puis cliquer sur Check.

Spécificités des sites gouvernementaux (2 tests)

  • Un bloc identifie les sites de la sphère gouvernementale. Il est composé de la Marianne, du nom de l'entité (ministère) sous ce logo et du titre du site. Rien n'est placé à sa gauche et rien au-dessus sauf éventuellement pour orienter vers des sections importantes (par exemple Particuliers et Professionnels).

    L'exception est accordée pour les éventuels liens d'accès rapides vers les zones principales de la page.

  • Sur tous les sites publics, le pied de page comporte des liens vers : une page de contact, Plan du site, Mentions légales, Page Accessibilité, Aide aux usagers, Recueil de l'avis des utilisateurs, Répertoire des informations publiques ou data.gouv.fr, Horaires et plans d'accès (si la page existe) et démarches en ligne (si la page existe).

    Les sites gouvernementaux doivent également proposer des liens de pied de page vers legifrance.gouv.fr, service-public.fr, gouvernement.fr, france.fr.

Support mobile (2 tests)

S'il est possible d'afficher le site sur un mobile, on peut procéder à quelques tests simples.

  • On peut zoomer le contenu de la page à l'aide des doigts.

  • Les zones cliquables, notamment quand elles sont proches les unes des autres, sont suffisamment grandes pour permettre de les actionner facilement et sans risquer d'activer un lien en croyant en activer un autre.

  • Le site est "responsive" c'est-à-dire que l'affichage s'adapte au support, sans perte d'informations et sans tronquer les contenus ni provoquer d'ascenseurs à la fois horizontal et vertical. Des cas particuliers sont admis comme - par exemple - les tableaux complexes.

Suivez notre actualité !

DesignGouv, c’est aussi des événements, des rencontres et des discussions pour faire vivre la culture design au sein des administrations. Rejoignez-nous !

Je m’inscris à la newsletter

Sur Twitter : @design_gouv