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 ?

• 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 ?

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, vérifier à l’aide d’un outil de vérification de contraste

• le contraste entre la couleur du texte et la couleur de l’arrière-plan. Sa valeur doit être d’au moins 4,5:1
• le contraste entre la couleur des éléments d’interfaces interactifs (bouton, champ de formulaire, icône, ...) et la couleur de l’arrière-plan. Sa valeur doit être d’au moins 3:1

Vous pouvez, par exemple, utiliser 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, 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, 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, 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 ?

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.