Évaluation rapide

Plutôt que lancer systématiquement 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 l'accessibilité et de la qualité web 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)

  • Le titre de chaque page est composée du titre de son contenu, suivi du nom du site

    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.

  • Le bandeau supérieur et le pied de page doivent être présents sur toutes les pages

    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")

  • Il est possible de revenir à la page d'accueil depuis toutes les pages

    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.

  • Chaque page comporte des liens d'accès rapides vers le contenu principal et le menu

    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.

  • Chaque page affiche un fil d'Ariane représentant la position de la page dans l'arborescence du site

    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.

  • Aucune information n'est véhiculée que par la couleur

    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.

  • Le soulignement est réservé aux hyperliens

    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é.

  • Le contenu reste lisible lorsque la taille de caractères est portée à 200% de la taille par défaut dans le navigateur

    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.

  • Chaque champ de formulaire est associé à son étiquette

    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é.

  • Les champs dont la saisie est obligatoire sont signalés

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

  • L'utilisateur est averti de l'ouverture d'une nouvelle fenêtre

    Cet avertissement doit être présent visuellement (présentation différente, présence d'un pictogramme&ellip;) 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.

  • Le site n'impose pas de mouvements ni de clignotement déclenchés automatiquement, de plus de 5 secondes et ne pouvant pas être contrôlés par l'utilisateur

    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.).

  • Le site ne comporte pas d'éléments déclenchant la lecture de son durant plus de 3 secondes et ne pouvant pas être arrêtés

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

  • Les vidéos sont sous-titrées

    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.

  • Le site est entièrement utilisable au clavier et à la souris

    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 conduit.

  • Le contenu de chaque page est disponible à l'impression sans blocs de navigation

    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.

Code source de la page (4 tests)

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

  • Le code source de chaque page commence par une déclaration d'utilisation d'une DTD dont la syntaxe et la position sont conformes

    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>.

  • Le code source de chaque page définit les zones d'en-têtes, de contenu, de navigation, de pied de page et de recherche

    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="header" sur l'entête du site, role="search" sur le bloc de recherche.

  • La langue principale du document est bien définie

    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.

  • L'attribut alt des images, zones réactives et boutons graphiques est présent

    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".

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

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

  • Le texte et le texte mis en image de taille courante sont disponibles avec un rapport de contraste d'au moins 4,5 avec leur arrière-plan

    Lancer l'extension WCAG Contrast Checker (symbolisé par une roue multicolore. Dans le panneau qui s'ouvre à gauche, s'assurer que c'est bien l'onglet WCAG2 qui est activé.

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

  • La hiérarchie des titres est complète et cohérente

    Lancer l'extension HeadingsMap (symbolisé par le pictogramme &lgt;h>. Dans le panneau qui s'ouvre à gauche, s'assurer que c'est bien l'onglet Headings 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.

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

  • Le bloc Marianne est présent en haut à gauche de toutes les pages

    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.

  • Le pied de page comporte les liens obligatoires des sites publics

    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).

Support mobile (2 tests)

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

  • Le site ne bloque pas le zoom

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

  • La zone de clic est utilisable aux 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.