Diagnostic flash

Le diagnostic flash permet d’estimer de manière partielle la qualité, l’accessibilité et le design d’un site ou d’une démarche en ligne d’une administration publique, sans avoir d’expertise particulière et en n’y consacrant que peu de temps.

Le diagnostic flash se fait sur une ou plusieurs pages. Plus cet échantillon de page est représentatif, meilleur est le diagnostic.
Deux solutions sont proposées :

  • Imprimer cette page qui devient une checklist et tient sur une feuille A4 recto verso.
  • Saisir le résultat dans le tableur (ods - 43Ko) qui délivre une note.

Navigation & utilisation

  • 1

    Pourquoi ?

    Depuis fin 2016, le trafic internet mobile a officiellement dépassé celui du trafic internet fixe dans le monde. De ce fait, il est indispensable de développer des services en ligne dont l’affichage s’adapte selon la taille de l’écran utilisé. La conception de sites web adaptatifs (responsive web design en anglais) contribue à :

    • une audience supérieure ;
    • une rapidité d’accès à l’information, quel que soit l’endroit où se trouve l’utilisateur ;
    • une interactivité avec des fonctionnalités enrichies (mode tactile, capteurs, etc.) ;
    • une amélioration du référencement.

    Comment contrôler ?

    Sur l’échantillon, tester les différents formats d’écran avec un smartphone ou en modifiant la taille de la fenêtre sur ordinateur.

  • 2

    Pourquoi ?

    Les usagers, les personnes de son entourage qui sont susceptibles de l’aider, les médiateurs numériques, les guichets administratifs, etc. ont besoin d’avoir de la visibilité sur les sites et les démarches administratives (cadre juridique, délais, pièces justificatives nécessaires, traitement des dossiers, etc.) et sur les différentes modalités pour les accomplir (en ligne, avec un formulaire, au guichet, par téléphone, etc.).

    Cette transparence renforce la confiance de l’usager dans l’administration et lui permettra d’anticiper certaines décisions de sa vie quotidienne (départ à l’étranger, obtention d’une aide financière, autorisation pour démarrer une activité, etc.).

    Comment contrôler ?

    Contrôler qu’il existe une page dédiée à la présentation du site et, le cas échéant, des démarches en ligne. Cette page est accessible sans authentification. Pour les démarches, l’usager est notamment informé à l’avance du déroulement, des pièces nécessaires et des temps de traitement.

  • 3

    Pourquoi ?

    Dans sa navigation, il est indispensable que l’utilisateur puisse se repérer : il doit savoir où il est, d’où il vient et où trouver l’information dont il a besoin. Les risques d’abandon en cours de processus et d’erreurs de saisie sont ainsi limités.

    Comment contrôler ?

    Sur les démarches, contrôler que :

    • Les différentes étapes de la démarche en ligne sont visibles à tout moment et que l’usager est informé de l’étape à laquelle il est ;
    • L’usager peut revenir à une étape précédente et modifier sa saisie ;
    • Les données sont automatiquement sauvegardées au changement de page ou par un bouton d’enregistrement explicite et visible à tout moment ;
    • Le dernier écran présenté à l’usager avant transmission de sa demande est un récapitulatif des informations saisies et prêtes à être communiquées à l’administration.
  • 4

    Pourquoi ?

    La navigation au clavier est un des critères centraux de l’accessibilité numérique. De nombreux utilisateurs, souffrant de handicap ou non, naviguent sans souris, avec les touches de leur clavier.

    De plus, les dispositifs qui ne reposent pas sur la souris doivent être pris en compte ; notamment, les contenus et l’utilisation des services doivent être accessibles aux utilisateurs d’aides techniques (lecteurs d’écran par exemple) qui n’utilisent que le clavier ou un périphérique plus spécifique reposant sur les mêmes mécanismes que le clavier.

    Comment contrôler ?

    Sur l’échantillon, contrôler que :

    • Chaque page comporte des liens d’accès rapides vers le contenu principal, le menu et le moteur de recherche s’il existe : 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) ;
    • La navigation et l’utilisation peuvent s’effectuer entièrement au clavier dans un ordre prévisible ;
    • Le focus clavier (qui permet à l’usager de savoir sur quel élément interactif il se trouve) est clairement visible.
  • 5

    Pourquoi ?

    Les usagers doivent pouvoir s’orienter dans un site et notamment revenir à la page d’accueil depuis n’importe quelle page, par exemple s’ils n’ont pas trouvé ce qu’ils cherchent ou s’ils veulent chercher autre chose.

    Il arrive également qu’un lien ou qu’un résultat fournit par un moteur de recherche dirige directement vers une page interne du site - auquel cas l’usager a besoin de savoir où il se trouve et éventuellement de revenir à l’accueil.

    Enfin, les pages d’erreur font partie du site et ne doivent pas interrompre la navigation de l’usager : elles doivent également permettre un retour à la page d’accueil.

    Comment contrôler ?

    Sur l’échantillon, contrôler que :

    • Il est possible de revenir à la page d’accueil depuis toutes les pages, par exemple via le fil d’Ariane ou le bandeau d’entête.
    • Chaque page affiche un fil d’Ariane représentant la position de la page dans l’arborescence du site. Sauf cas particulier, le fil d’Ariane doit se trouver immédiatement avant le contenu principal.
    • La page d’erreur 404 permet la reprise de la navigation : pour tester, taper une extension inexistante de l’URL après "/" (par exemple design.numerique.gouv.fr/voilàvoilà).
  • 6

    Pourquoi ?

    L’impression des contenus doit se faire sous une forme appropriée au support, avec des contenus pertinents et une bonne lisibilité. Rationaliser l’utilisation des espaces et des couleurs permet d’économiser les ressources.

    Comment contrôler ?

    Dans le menu du navigateur, choisir l’aperçu avant impression et contrôler que :

    • Les éléments inutiles dans une version papier ont bien disparu (notamment les menus ou autre bloc de navigation)
    • Il n’existe pas de gros aplats de couleur.

Langage & interface

  • 7

    Pourquoi ?

    Les produits et services numériques sont souvent conçus sans prendre le temps de comprendre l’audience qu’ils servent, notamment les personnes en situation de handicap soit 12 millions de personnes en France. Depuis 2005, tous les sites publics doivent être accessibles et ainsi permettre à tous les usagers un égal accès à leurs droits. En France, le taux d’accessibilité d’un site est calculé en auditant ce site sur la base des critères du Référentiel général d’amélioration de l’accessibilité (RGAA).

    Comment contrôler ?

  • 8

    Pourquoi ?

    Une information véhiculée uniquement par la couleur nuit au confort de navigation (par exemple si les liens sont en bleu foncé dans du texte en noir) et exclu de fait les usagers malvoyants. À titre d’exemple, 8% des hommes et 0,5% des femmes sont atteints de daltonisme.

    Comment contrôler ?

    Sur l’échantillon, contrôler qu’aucun élément n’est compréhensible qu’en fonction de sa couleur (par exemple pas de texte telle que « la saisie des champs en rouge doit être corrigée »). Les liens sont visibles autrement que par une couleur distincte et sont soulignés.

  • 9

    Pourquoi ?

    Les alternatives textuelles permettent par exemple aux personnes aveugles d’accéder aux contenus via un lecteur d’écran ou un clavier Braille.

    Comment contrôler ?

    Sur l’échantillon, contrôler que :

    • Les vidéos sont sous-titrées et proposent une transcription et que les fichiers audio ont une transcription en alternative; le lien vers la transcription doit être adjacent au contenu vidéo ou audio ;
    • Les images porteuses d’informations - c’est-à-dire les images qui ne sont pas purement décoratives - ont une alternative textuelle : dans le code source, rechercher img et vérifier que chacune de ces balises comporte un attribut alt="ici le texte alternatif"(À noter : si l’image est purement décorative, l’attribut alt doit être présent et vide alt="") ;
    • Dans le cas d’images complexes ou d’infographies, la transcription textuelle doit être adjacente et l’attribut alt doit être présent et vide alt="".

    La transcription textuelle et le texte alternatif doivent être pertinents c’est-à-dire transmettre les informations contenues dans l’image et non leur description factuelle.

  • 10

    Pourquoi ?

    Il est indispensable que, dans le code-source, la langue du site soit bien définie pour que les aides techniques et plus particulièrement les synthèses vocales prononcent correctement le texte lu.

    Comment contrôler ?

    Contrôler 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 code-source, juste en dessous de la balise <!DOCTYPE html>

    Le code source s’affiche en faisant un clic-droit sur la page et en sélectionnant « Examiner l’élément », « Inspecter » ou « Code source de la page »."

  • 11

    Pourquoi ?

    Les services de l’administration et les métiers techniques ont leurs propres codes, leurs sigles, voire leur jargon ; or les démarches en ligne s’adressent à des publics divers et pour certaines au grand public. Il est donc essentiel de faire relire les contenus par des personnes extérieures et de se référer à une charte éditoriale pour gérer la qualité des contenus. Un vocabulaire simple et précis mettra l’usager en confiance.

    Comment contrôler ?

    Sur l’échantillon, avec des personnes extérieures aux services, répondre aux questions suivantes :

    • Le langage utilisé est-il suffisamment clair ? Les phrases sont-elles simples à comprendre ?
    • Reste-t-il des termes techniques non expliqués ? Sont-ils indispensables ?
    • Les questions posées sont-elles logiques, justifiées et compréhensibles ?
    • Reste-t-il des pages techniques en anglais avec des termes informatiques (par exemple, la page « Erreur 404 » en tapant après l’URL "/iofjzfoizjfeajofiz" ) ?
    • Les messages d’erreur ou de confirmation sont-ils écrits en français ? Sont-ils suffisamment clairs et précis ?
    • Les sigles sont-ils développés la première fois qu’ils sont utilisés sur chaque page (éventuellement via une infobulle ou via un renvoi à un glossaire)?
  • 12

    Pourquoi ?

    Les usagers nécessitant de grossir les caractères pour accéder au contenu d’un site ou d’une démarche ne doivent pas être ralentis ou bloqués par du texte disparaissant car hors du cadre ou caché, ou bien difficilement lisible car superposé à d’autres éléments.

    Comment contrôler ?

    Sur l’échantillon, contrôler que le contenu reste clair 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.
    • Augmenter la taille des caractères, en effectuant la combinaison de touches ctrl + + six fois.

Présentation de l’information

  • 13

    Pourquoi ?

    Le titre de la page s’affiche dans l’onglet du navigateur.

    Il permet l’identification des contenus de la page dans l’onglet, dans les favoris, dans la fenêtre du navigateur ou encore par les lecteurs d’écran.

    Un titre pertinent améliore le référencement et la présentation dans les moteurs de recherche.

    Comment contrôler ?

    Sur l’échantillon, contrôler que :

    • Le titre de chaque page est composée du titre de son contenu, suivi du nom du site ;
    • Le titre est pertinent et unique ;
    • Sur une page de résultat de recherche, le titre est "Résultat de la page de recherche de xxx page 1 - nom du site" ;
    • Sur une page de confirmation d’action, le titre indique le résultat de l’action (suivi du nom du site).
  • 14

    Pourquoi ?

    La marque de l’État doit être mise en œuvre, en application du principe selon lequel "Là où l’État est présent, agit, finance, sa présence doit être clairement identifiée".

    L’application de la marque de l’État permet l’homogénéité et la continuité dans la navigation, avec une identification permanente du service en ligne visité : l’usager peut alors naviguer en toute confiance et distinguer clairement les services proposés par l’État des prestations payantes et des arnaques en ligne.

    Comment contrôler ?

    Sur l’échantillon et sur la base de www.gouvernement.fr/marque-Etat, contrôler :

  • 15

    Pourquoi ?

    Afin de permettre une bonne lisibilité des contenus et de limiter la charge mentale lors de la consultation, le ratio de contraste entre le texte - y compris du texte sous forme d’image - et son arrière-plan doit être d’au moins 4,5:1.

    Pour les textes en gras ou agrandis (taille restituée supérieure ou égale à 24px, équivalent à de l’Arial 18), ce ratio doit être d’au moins 3:1.

    Dans le cas de graphiques, le contraste entre chaque élément (courbe, bâton, part de camembert, etc.) doit être également suffisant.

    Comment contrôler ?

    Sur l’échantillon, contrôler que les contrastes sont respectés à l’aide, par exemple, de l’extension de navigateur Contrast Checker (symbolisée par une roue multicolore) :

  • 16

    Pourquoi ?

    La mise en page - permet avant tout la navigation sur la page pour les utilisateurs aveugles ayant un lecteur d’écran ou un clavier braille : ils ont ainsi connaissance de la structuration de la page et peuvent naviguer de titre en titre sans être obligés de lire l’ensemble du contenu.

    Ce principe est d’ailleurs valable pour les outils bureautiques de type Document Writer ou Word ou encore PDF: il est indispensable d’utiliser les "styles" et non pas une mise en forme du texte.

    De manière plus générale, une bonne hiérarchisation permet une meilleure visualisation et permet l’extraction du plan de chaque page aux outils dédiés (dont ceux d’indexation, avec par conséquent un meilleur référencement).

    Comment contrôler ?

    Sur l’échantillon, lancer l’extension headingsMap (symbolisé par le pictogramme ). 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 (il ne doit pas y avoir de "trous" : un titre de niveau h2 ne doit pas être suivi d’un titre h4, h5 ou h6, par exemple).

    Télécharger l’extension headingsMap :

  • 17

    Pourquoi ?

    L’association - visuellement et dans le code - entre l’intitulé, le champ concerné et les informations de saisie (type de donnée demandé, format, champ obligatoire…) évite l’agacement et l’incompréhension des utilisateurs. Elle leur permet d’identifier sans ambiguïté les champs de formulaire et la nature des informations à saisir, et ainsi de prévenir les erreurs. Elle améliore l’accessibilité en permettant l’utilisation des aides techniques (les lecteurs d’écran par exemple).

    Comment contrôler ?

    Pour tout champ de saisie, notamment dans les formulaires, contrôler que :

    • En cliquant sur les intitulés des champs, le curseur vient bien se positionner dans le champ concerné ;
    • Les intitulés des champs sont accolés soit immédiatement au-dessus ou à gauche du champ ;
    • 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 ;
    • Pour tout champ de formulaire présentant un type de donnée ou un format obligatoire, l’utilisateur est informé ;
    • Tout message d’erreur identifie le champ concerné.
  • 18

    Pourquoi ?

    Réserver le soulignement aux liens facilite leur identification et évite à l’utilisateur des clics inutiles sur des contenus soulignés perçus comme des hyperliens.

    Comment contrôler ?

    Vérifier que seuls les liens sont soulignés.

  • 19

    Pourquoi ?

    Les utilisateurs - y compris ceux en situation de handicap - doivent savoir s’il est pertinent pour eux de télécharger les fichiers et si leurs outils le leur permettent.

    Comment contrôler ?

    Pour chaque fichier proposé en téléchargement, contrôler que :

    • Le format est indiqué ;
    • La taille est indiquée ;
    • La langue, lorsque ce n’est pas la même que celle de la page, est indiquée ;
    • Le nom du fichier permet d’en identifier le contenu et la provenance.

Accompagnement de l’usager

  • 20

    Pourquoi ?

    L’intégration du dispositif FranceConnect à un site permet à l’usager de s’authentifier plus facilement tout en sécurisant son identification. Il permet ainsi aux usagers d’accéder à différents services publics en ligne en s’appuyant sur des comptes vérifiés existants sans devoir créer de nouveaux comptes. Cela vise à limiter les identifiants et mots de passe.

    Après l’authentification, FranceConnect orchestre la circulation des données personnelles de l’usager, avec son consentement.

    Les administrations ayant intégré FranceConnect bénéficient entre elles de passerelles naturelles : ce mécanisme de SSO (Single Sign-On, ou authentification unique) rend les parcours usagers plus fluides.

    Comment contrôler ?

    Si une identification est requise, contrôler qu’il est proposé à l’usager de s’authentifier via FranceConnect.

  • 21

    Pourquoi ?

    Les administrations développent et font évoluer leurs services en ligne en étant à l’écoute des attentes des usagers : tests utilisateurs, enquêtes en ligne, questionnaires de satisfaction, entretiens, focus group, analyse des statistiques, etc.

    Cependant il ne suffit pas de conduire les tests ou de mettre en place un outil de mesure statistique. Ce critère vise la publication et la communication au public des enquêtes conduites et des résultats atteints.

    Comment contrôler ?

    Contrôler que les démarches en ligne font l’objet d’enquêtes de satisfaction (par exemple en proposant le bouton "Je donne mon avis") et donnent accès aux résultats.

  • 22

    Pourquoi ?

    Pour l’usager, il n’est pas toujours évident de savoir si une démarche en ligne existe et si elle est utilisable dans sa situation. Le référencement sur service-public.fr est aussi une garantie que le site concerné est officiel. Par ailleurs, le référencement sur service-public.fr est une obligation relevant du Décret n°99-68 du 2 février 1999 qui indique que « Les formulaires dont l’usage est nécessaire pour accomplir une démarche auprès d’une administration ou d’un établissement public administratif de l’État sont tenus gratuitement à la disposition du public […] par le site public dénommé "service-public.fr" » ; il est précisé qu’il est mis « à la disposition des usagers, sur le site "service-public.fr", la liste à jour des téléprocédures et des formulaires administratifs disponibles ».

    Comment contrôler ?

    Les démarches en ligne sont référencées sur service-public.fr.

  • 23

    Pourquoi ?

    La qualité d’un site ou d’une démarche en ligne ne s’évalue pas à partir de la page d’accueil de la démarche mais bien avant. Il est nécessaire de se mettre dans les pas de l’usager et de vérifier si son parcours est fluide et s’il est informé dès le début de son parcours. Par ailleurs, un bon référencement par les moteurs de recherche diminue la probabilité que les usagers se retrouvent sur un site privé payant pour le même service.

    Comment contrôler ?

    Contrôler que les principaux moteurs (Google, Bing, Qwant) restituent bien le site dans les résultats lorsque l’on recherche le service (par exemple non pas en tapant le nom de l’institution mais le service qu’elle rend : on cherchera par exemple "Renouvellement carte grise" et non pas "ANTS") : 1/ parmi les trois premières occurrences et 2/ jamais derrière un site proposant le même service mais payant (hors sites sponsorisés dans les deux cas).

  • 24

    Pourquoi ?

    Le pied de page constitue un élément de navigation et un point de repère tout au long du site.

    Comment contrôler ?

    Sur l’échantillon, contrôler que :

    • Le pied de page est présent et identique sur toutes les pages ;
    • Il est présent et identique sur les pages d’erreur ;
    • Les informations suivantes sont indiquées : Contact, Accessibilité, Mentions légales. Les sites gouvernementaux doivent également proposer des liens de pied de page vers le Répertoire des informations publiques ou data.gouv.fr, legifrance.gouv.fr, service-public.fr, gouvernement.fr, france.fr.
  • 25

    Pourquoi ?

    Le fait de proposer au moins deux moyens de contact différents permet de favoriser les retours d’information de la part des utilisateurs, tout en évitant de mettre ce dernier en difficulté en cas d’indisponibilité ou de problèmes d’utilisation de l’un des moyens de contact.

    Par ailleurs, toutes les administrations (services de l’État, mairies, organismes de service public, etc.) doivent pouvoir être saisies par voie électronique (SVE) sauf exception publiée au Journal Officiel.

    Comment contrôler ?

    Vérifier que l’information "contact" permettant d’échanger avec un agent (ce qui exclut par exemple les tchat bots) est facile à trouver et qu’au moins deux alternatives existent (téléphone, mail, formulaire de contact, tchat, guichet physique local).

  • 26

    Pourquoi ?

    Lors de la mise en ligne de fichiers en téléchargement (traitement de texte, images, audio, vidéo, etc.), il est nécessaire de proposer les formats ouverts afin que tout le monde puisse y avoir accès sans avoir à payer pour accéder à un format propriétaire.

    Découvrir les guides pour rédiger des documents bureautiques accessibles

    Comment contrôler ?

    Sur l’échantillon, contrôler que :

    • pour mettre à disposition des documents que le destinataire n’a pas besoin de modifier, il faut utiliser le format PDF ;
    • pour diffuser un document de type texte, le format recommandé est ODT ;
    • pour diffuser un document de type présentation, le format recommandé est ODP ;
    • pour diffuser un document de type feuille de calcul, le format recommandé est ODS.

    La suite Office n’est pas interdite mais les alternatives ci-dessus doivent être proposées.

Nota bene : le diagnostic flash nécessite l’installation de deux extensions de navigateur - très utiles de manière générale 🙂 :

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 !

Recevoir notre newsletter

Sur Twitter : @design_gouv