Diagnostic flash

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.

Pourquoi ?

Depuis fin 2016, le trafic internet mobile a officiellement dépassé celui du trafic internet fixe dans le monde. En 2018, alors que 95 % des ménages sont équipés en téléphone portable, seuls 82 % ont un ordinateur (y compris tablette), les ménages les plus modestes étant les moins équipés (source : Insee). 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 meilleure inclusion de tous les usagers ;
• 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 les démarches, contrôler que :

• Les différentes étapes de la démarche en ligne sont visibles à tout moment ;
• L’usager est informé à quelle étape il se trouve ;
• 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.

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 ?

• Le focus clavier (qui permet à l’usager de savoir sur quel élément interactif il se trouve) est clairement visible ;
• 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.

Comment navigue-t-on au clavier ?

• La touche Tab permet de voir le focus (le curseur dans la page), de le faire avancer et de naviguer entre les éléments interactifs d’une page (liens, boutons, champs de formulaires, onglets, modales, etc.)
• La combinaison Shift + Tab permet de faire reculer le focus
• La touche Entrée permet d’activer l’élément qui a le focus (lien, bouton, menu, etc.)
• La barre Espace permet de cocher ou décocher une case
• Les flèches Haut, Bas, Droite et Gauche permettent de faire défiler l’affichage, se déplacer dans un menu ou des onglets, modifier un choix de bouton radio

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.

Utilisation de la plage braille et de la synthèse vocale par une personne aveugle (vidéo, 3 minutes 54)

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 menu de navigation, le fil d’Ariane ou le bandeau d’entête ;
• La page d’erreur 404 permet la reprise de la navigation : pour tester, taper un nom de page inexistant à la fin de l’URL (par exemple design.numerique.gouv.fr/voilàvoilà).

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 et l’usager doit pouvoir 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 ?

Vérifier qu’il existe deux moyens de navigation parmi les trois suivants : menu principal, plan du site et moteur de recherche.

Pourquoi ?

Le fait de proposer plusieurs moyens de naviguer permet aux utilisateurs de procéder selon leur préférence ou leur besoin. L’alternative est également importante pour les utilisateurs si l’un des moyens utilisés ne donne pas le résultat attendu.

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.

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.

Vous pouvez vous référer aux guides pour rédiger des documents bureautiques accessibles

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.

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 exclut de fait les usagers malvoyants. À titre d’exemple, 8% des hommes et 0,5% des femmes sont atteints de daltonisme.

C’est accessible ça ? L’usage des couleurs (vidéo - 1 minute 56)

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.

Pourquoi ?

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

La présence d’une transcription assure l’accès à l’information même dans le cas où l’utilisateur ne peut pas lire la vidéo.

Comment naviguer sur le web quand on est non-voyant ? (vicdéo, 2 minutes 32) La partie concernant les alternatives textuelles commence à 1 minute 29.

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

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.

C’est accessible ça ? La langue par défaut (vidéo - 1 minute 22)

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 /404 ) ?
• 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) ?

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, 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, il faut augmenter la taille des caractères jusqu’à 200% :

• soit en effectuant la combinaison de touches ctrl + + six fois ou ctrl + molette ;
• soit en modifiant les préférences du navigateur.

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 ?

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

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

Pourquoi ?

Le titre de la page permet l’identification des contenus de la page dans l’onglet, dans les favoris, dans l’historique de navigation, 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 les contrastes sont respectés à l’aide, par exemple, de l’extension de navigateur Contrast Checker (symbolisée par une roue multicolore) :

• Extension pour Chrome
• Extension pour Firefox
• Extension pour Edge

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, lancer l’extension headingsMap (symbolisée par le pictogramme [h/]). 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 :

• Extension pour Chrome
• Extension pour Firefox
• Extension pour Edge

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 ?

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

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 ?

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

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

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.

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 ?

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.

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 ?

• La page d’accueil affiche l’état de conformité
• La déclaration d’accessibilité est accessible à partir du pied de page

Pourquoi ?

Les produits et services numériques sont trop 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 ?

Lorsqu’un utilisateur doit simplement s’identifier (sans s’authentifier) pour effectuer une démarche en ligne, il n’est pas nécessaire de proposer FranceConnect. Si l’identification s’accompagne d’une authentification – c’est-à-dire que service en ligne s’assure que l’utilisateur est bien celui qu’il prétend être – les démarches doivent proposer une connexion soit via FranceConnect, soit via FranceConnect+.

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.

FranceConnect et FranceConnect+ se distinguent par leur niveau de garantie en termes de sécurité. Le choix entre les deux se fait en lien avec les équipes de la Dinum, en fonction des besoins identifiés. Pour demander l’intégration de FranceConnect ou FranceConnect+, il convient de faire une demande d’habilitation sur la page « Partenaires » du site. Il est également possible de contacter la responsable des relations partenaires FranceConnect à la Direction interministérielle du numérique (Dinum) : Lauren Tron lauren.tron(a)modernisation.gouv.fr.

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.

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 ?

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

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 ?

Contrôler que les principaux moteurs 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 ;
2. et jamais derrière un site proposant le même service mais payant (hors sites sponsorisés dans les deux cas).

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 ?

Sur l’échantillon, contrôler que : L’entête - ou header - doit être composé des éléments suivants :

• du bloc Marque - obligatoire.
• du nom de site - optionnel.
• d’une « baseline », sous le nom de site - optionnelle.
• d’une partie fonctionnelle - proposant des accès rapide et/ou le moteur de recherche - adaptée aux besoins particuliers de chaque site - optionnelle.

Tous les cas et toutes les précisions concernant les entêtes sont décrits sur le site du Système de design de l’État.

Le pied de page - ou footer - doit être composé des éléments suivants :

• un bloc Marque
• un texte de présentation - optionnel.
• 4 liens de références de l'écosystème institutionnel (legifrance.gouv.fr, gouvernement.fr, service-public.fr, data.gouv.fr) - obligatoires.
• la liste de liens liés aux obligations légales. Cette liste doit être définie en fonction du site, toutefois les liens & contenus suivants sont obligatoires : « accessibilité : non/partiellement/totalement conforme », mentions légales, données personnelles et gestion des cookies. - obligatoire.
• une mention de la licence - obligatoire : « Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0 »

Tous les cas et toutes les précisions concernant les pieds de page sont décrits sur le site du Système de design de l’État.

Tous les cas et toutes les précisions concernant les pieds de page sont décrits sur le site du Système de design de l’État.

Pourquoi ?

Le Système de design de l’État est le volet numérique de la marque de l'État, il est obligatoire pour les sites de l'État et peut être utilisé par les opérateurs de l'État. Il permet aux citoyens d'avoir une cohérence graphique et une meilleure expérience à travers l'ensemble des sites de l'État. Par ailleurs, il regroupe un ensemble de composants pour créer des sites Internet accessibles et ergonomiques.

L’entête et le pied de page constitue pour les usagers des éléments de navigation et des points de repère tout au long du site. Ce sont deux points de contrôle de la bonne prise en compte du Système de design de l’État.

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

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.