Notice d'accessibilité pour la conception graphique

Un fil d'Ariane (parfois appelé « chemin de fer ») doit être présent sur chaque page :

• il doit indiquer la position courante de l'internaute dans l'arborescence du site par rapport à la page d'accueil ;
• il doit permettre à l'internaute de remonter dans l'arborescence du site ;
• il doit toujours être situé au même endroit.

Remarque
Le fil d'Ariane n'est pas obligatoire sur la page d'accueil.

Astuce
Une bonne pratique est de différencier visuellement le dernier élément du fil d'Ariane lorsqu'il s'agit de la position courante.

Exemples▲

Ressources▲

Parmi les trois moyens de navigation suivants, au moins deux doivent être présents sur le site :

• un menu principal ;
• un plan du site qui doit permettre de comprendre la structure et a minima d'accéder à l'ensemble des rubriques et des fonctionnalités du site ;
• un moteur de recherche globale qui doit permettre la recherche dans l'ensemble des contenus (textes, documents, vidéos, etc.).

Ces éléments doivent être disponibles depuis le même endroit, sur toutes les pages, partout sur le site.

Remarque
Il est tout à fait possible d'opter pour les trois moyens de navigation simultanément.

Exemples▲

Plans du site

Moteurs de recherche

Dans chaque menu, l'élément courant doit avoir un aspect différent.

Astuce
Il est fortement recommandé de prévoir également un aspect différent au survol des éléments.

Exemples▲

Sur l'ensemble du site, l'apparence ainsi que le positionnement des éléments suivants doivent rester cohérents (sans être nécessairement identiques) :

• les menus de navigation ;
• le moteur de recherche ;
• et, de manière générale, l'ensemble des éléments qui apparaissent sur toutes les pages (logo, liens utiles, etc.).

Remarque
L'apparence de la page d'accueil peut être différente de celle du reste du site.

Exemple▲

Sur cet exemple, bien que les couleurs et les informations soient différentes sur les trois pages, le positionnement et l'apparence générale des éléments communs sont cohérents.

Une page d'aide doit être prévue :

• la page d'aide doit fournir des informations qui facilitent la consultation et l'utilisation du site ;
• un lien vers la page d'aide doit être disponible au même endroit depuis l'ensemble des pages du site.

Remarque
Un modèle de page d'aide est disponible sur http://wiki.accede-web.com/notices/graphique-ergonomique/modele-de-page-d-aide.

Exemple▲

Un lien d'évitement « Aller au contenu » doit être affiché au même endroit au sommet de chaque page.

Astuce
Dans le cas de contraintes graphiques fortes empêchant l'affichage de ce lien, celui-ci peut être masqué ultérieurement, lors de la phase de développement, pour ne réapparaître que dans certaines situations (navigation au clavier, version mobile, etc.).

Remarque
Des liens « Aller au menu » et « Aller à la recherche » peuvent aussi être rajoutés aux côtés du lien « Aller au contenu » si ces éléments sont éloignés du sommet de la page.

Exemple▲

Les accents doivent être conservés, même sur les lettres capitales.

Remarque
Il est fortement déconseillé d'écrire de longues portions de textes en lettres capitales, car ces dernières rendent la lecture pénible.

Exemple▲

Les textes ne doivent pas être justifiés.

Exemple▲

Les polices de caractères utilisées doivent pouvoir être affichées sous forme de texte plutôt que sous forme d'images.

Attention
Pour confirmer ce point, il est nécessaire de rentrer en contact avec les personnes chargée du développement. Elles pourront alors vérifier si les polices choisies peuvent s'afficher correctement sous forme de texte dans les navigateurs cibles du projet.
Dans le cas contraire, des solutions pourront être trouvées en phase de développement mais il s'agira de compromis moins efficaces et plus contraignants à mettre en œuvre que la simple utilisation de polices de caractères.

Remarque
L'aspect technique de cette recommandation est traité dans la notice d'accessibilité HTML et CSS au niveau de la recommandation Utiliser CSS pour mettre en forme les textes.

Exemple▲

Si des symboles dont la signification n'est pas immédiatement évidente sont utilisés, ils doivent :

• être accompagnés d'un texte qui en précise le sens ;
• être positionnés à proximité de ce texte.

Remarque
S'il n'est pas envisageable d'associer un texte à certains symboles dont le sens peut porter à confusion (manque de place sur la maquette, par exemple), des solutions pourront être trouvées ultérieurement, en phase de développement (ajout d'infobulles, par exemple). Il s'agira toutefois de compromis : ces solutions seront toujours moins efficaces que l'optimisation directe du symbole.

Exemples▲

Le contraste entre les contenus et l'arrière-plan doit être suffisant pour l'ensemble des éléments (textes, images, animations, etc.).

Afin de tester les contrastes, utiliser par exemple l'outil Contrast AnalyserComment utiliser Contrast Analyser, disponible en libre téléchargement pour Windows et Mac OS.

D'après cet outil, un rapport de contraste est considéré comme suffisant dès lors qu'il est conforme AA.

Attention
Utiliser avec vigilance les dégradés ou les motifs en arrière-plan des contenus.

Remarque
S'il n'est pas envisageable d'optimiser les contrastes, alors, une charte graphique alternative suffisamment contrastée peut être réalisée.
Une charte graphique alternative n'est pas nécessairement une charte où les contrastes sont poussés à l'extrême (du type noir sur blanc ou blanc sur noir), mais une charte où les associations de couleurs sont suffisamment optimisées.

Exemples▲

Outils pratiques▲

L'information ne doit pas être véhiculée uniquement par la couleur.

Astuce
Pour tester ce point, une première étape est par exemple de passer la maquette en nuances de gris et de vérifier que l'ensemble des informations reste compréhensible.

Exemples▲

Outils pratiques▲

Un intitulé explicite doit être prévu pour chaque lien. C'est-à-dire que la fonction du lien doit être parfaitement compréhensible à la lecture du seul intitulé.

Les intitulés de liens suivants sont donc à éviter :

• « Lire la suite » ;
• « En savoir plus » ;
• « Cliquez ici » ;
• etc.

Ils sont par exemple à remplacer par :

• « Déclaration de Monsieur Martin (lire la suite) » ;
• « En savoir plus sur le contrat Avidéa » ;
• « Découvrez l'offre de bienvenue » ;
• etc.

Remarque
S'il n'est pas envisageable de rendre explicites certains intitulés de liens (manque de place sur la maquette, par exemple), des solutions pourront être trouvées ultérieurement, en phase de développement (ajout d'infobulles, par exemple). Il s'agira toutefois de compromis : ces solutions seront toujours moins efficaces que l'optimisation directe de l'intitulé.

Dans cet exemple, les liens « Lire la suite » ont été retirés et directement placés sur les titres des actualités.

Pour chaque lien qui déclenche l'ouverture d'une nouvelle fenêtre ou d'un nouvel onglet, prévoir un pictogramme ou une mention afin de prévenir l'internaute.

Attention
Ce pictogramme ou cette mention doit être le ou la même sur l'ensemble du site.

Remarque
S'il n'est pas envisageable d'ajouter un tel pictogramme ou une telle mention (manque de place sur la maquette, par exemple), des solutions pourront être trouvées ultérieurement, en phase de développement (ajout d'infobulles, par exemple). Il s'agira toutefois de compromis : ces solutions seront toujours moins efficaces que l'optimisation directe de l'intitulé.

Exemple▲

Lorsque des liens sont intégrés dans les contenus, ils doivent être différenciés visuellement du texte qui les entoure, par exemple en les soulignant.

Remarque
Les liens intégrés dans des groupes de liens (éléments des menus, par exemple) ne sont pas concernés car suffisamment évidents.

Astuce
En plus de cette recommandation, il est également utile de prévoir l'apparence des liens au survol dans les maquettes.

Exemple▲

Pour chaque lien qui pointe directement sur un document à télécharger, les informations suivantes doivent être intégrées directement dans l'intitulé :

1. Le nom du document.
2. Le format du document.
3. Le poids du document.

Remarque
S'il n'est pas envisageable d'ajouter ces informations dans l'intitulé des liens (manque de place sur la maquette, par exemple), des solutions pourront être trouvées ultérieurement, en phase de développement (ajout d'infobulles, par exemple). Il s'agira toutefois de compromis : ces solutions seront toujours moins efficaces que l'optimisation directe de l'intitulé.

Exemple▲

Ressource▲

Pour chaque lien vers un document à télécharger dont la langue diffère de la langue principale de la page, la langue du document doit être précisée dans l'intitulé du lien.

Remarque
S'il n'est pas envisageable d'ajouter cette information dans l'intitulé des liens (manque de place sur la maquette, par exemple), des solutions pourront être trouvées ultérieurement, en phase de développement (ajout d'infobulles, par exemple). Il s'agira toutefois de compromis : ces solutions seront toujours moins efficaces que l'optimisation directe de l'intitulé.

Exemple▲

Lorsque des tableaux de données sont utilisés, ils doivent être associés à un titre qui en présente clairement et succinctement le contenu.

Exemple▲

Un intitulé explicite doit être prévu pour chaque champ de formulaire.

Remarque
S'il n'est pas envisageable d'associer un intitulé à chaque champ (manque de place sur la maquette, par exemple), des solutions pourront être trouvées ultérieurement, en phase de développement (ajout d'infobulles, par exemple). Il s'agira toutefois de compromis : ces solutions seront toujours moins efficaces que l'optimisation directe de l'intitulé.

Exemples▲

Dans cet exemple, un libellé a été ajouté au champ prévu pour la seconde ligne de l'adresse.

Lorsque des champs dont la fonction est identique sont répétés dans une même page, leurs intitulés doivent également être identiques.

Exemples▲

Chaque intitulé doit être positionné à proximité du champ auquel il est associé. Seuls quelques pixels doivent séparer un intitulé de son champ correspondant.

Exemples▲

Dans cet exemple les intitulés ont été alignés à droite afin d'être positionnés à proximité de leurs champs respectifs.

Lorsque des champs de même nature sont présents dans les formulaires longs (par exemple, des champs liés aux informations postales), ceux-ci doivent :

• être visuellement regroupés entre eux ;
• être introduits par un titre clair et concis.

Exemple▲

Dans cet exemple, les champs sont regroupés en plusieurs zones : « Où et quand souhaitez-vous partir ? » et « Qui participe à ce voyage ? ».
Les informations de même nature concernant les voyageurs sont également titrées par « Voyageur 1 » et « Voyageur 2 ».

Un bouton de soumission doit être prévu et positionné à la fin de chaque formulaire.

Remarque
Dans certaines situations, il n'est pas nécessaire de prévoir un bouton. C'est par exemple le cas pour une liste déroulante qui permet de trier dynamiquement une liste de résultats, car l'action est déclenchée dynamiquement.

Exemples▲

Un intitulé explicite doit être prévu pour chaque bouton de formulaire. C'est-à-dire que la fonction du bouton doit être parfaitement compréhensible à la lecture du seul intitulé, même si ce dernier est lu en dehors de son contexte.

Les intitulés de boutons suivants sont donc à éviter :

• « OK » ;
• « Valider » ;
• « Confirmer » ;
• etc.

Ils sont par exemple à remplacer par :

• « S'inscrire » ;
• « Passer à l'étape 2 » ;
• « Confirmer le paiement » ;
• etc.

Remarque
S'il n'est pas envisageable de rendre explicites certains intitulés de boutons (manque de place sur la maquette ou boutons-images, par exemple), des solutions pourront être trouvées ultérieurement, en phase de développement (ajout d'infobulles, par exemple). Il s'agira toutefois de compromis : ces solutions seront toujours moins efficaces que l'optimisation directe de l'intitulé.

Dans cet exemple, un bouton-image représentant une loupe est utilisé. Il sera rendu accessible en phase technique.

Exemples▲

Sur chaque formulaire, les champs obligatoires doivent être clairement indiqués :

• un signe distinctif (mention, symbole, pictogramme, etc.) doit être prévu dans l'intitulé de chaque champ obligatoire ;
• une mention au début du formulaire doit indiquer que le symbole ou le pictogramme signale un champ obligatoire.

Exemples▲

Chaque fois qu'un format de saisie spécifique est attendu dans un champ de formulaire, celui-ci doit être indiqué a priori à l'utilisateur.

Exemples▲

Chaque fois qu'un formulaire est susceptible de renvoyer des erreurs, les éléments suivants doivent être prévus :

• des messages d'erreurs explicites ;
• des suggestions de correction.

Ces éléments doivent être positionnés, au choix :

• soit au début du formulaire ;
• soit au niveau de chaque champ concerné ;
• soit aux deux endroits en même temps.

Les messages d'erreurs doivent être explicites. C'est-à-dire qu'à la lecture du seul message d'erreur, la cause de l'erreur doit être compréhensible et le champ concerné identifiable.

Des suggestions de correction doivent être prévues dès lors qu'une erreur est due à un format de saisie incorrect.

Exemples▲

Chaque fois qu'un formulaire est validé avec succès, un message de confirmation doit être prévu. Ce message doit rappeler la nature de l'action effectuée.

Exemple▲

Pour chaque formulaire à étapes multiples, le nombre total d'étapes ainsi que l'étape en cours de consultation doivent être clairement indiqués.

Exemple▲

Pour chaque formulaire à étapes multiples, un moyen de revenir aux étapes précédentes doit être prévu.

Exemple▲

Pour chaque formulaire à étapes multiples, un récapitulatif de l'ensemble des données renseignées doit être proposé à l'utilisateur avant la soumission finale du formulaire.

À partir de ce récapitulatif, il doit être possible de modifier directement (ou de revenir aux étapes précédentes pour modifier) l'ensemble des données.

Exemple▲

Pour chaque CAPTCHA (système anti-spam) uniquement visuel ou sonore, une alternative doit être prévue. Par exemple :

• une alternative sonore dans le cas d'un CAPTCHA visuel ;
• une alternative visuelle dans le cas d'un CAPTCHA sonore ;
• une alternative textuelle sous forme de question simple dans le cas d'un CAPTCHA visuel ou sonore ;
• etc.

Attention
Les CAPTCHA sont des systèmes conçus pour bloquer les spammeurs, qui utilisent des techniques de plus en plus abouties pour les déjouer. Les CAPTCHA sont donc de plus en plus compliqués à déchiffrer par les utilisateurs. Par définition, un CAPTCHA ne sera donc jamais pleinement accessible, et dans une optique d'accessibilité, la meilleure solution est encore de s'en passer.

Exemple▲

Pour chaque CAPTCHA (système anti-spam), un moyen qui permet d'en rafraîchir le contenu doit être prévu car il arrive très régulièrement que les CAPTCHA ne puissent être déchiffrés à la première lecture.

Astuce
Une bonne pratique est de proposer, en plus de la solution de rafraîchissement, un moyen de contacter le responsable du site pour le cas où le CAPTCHA ne peut être renseigné (lien vers une page « Contact », coordonnées téléphoniques, etc.).

Exemple▲

Pour annoncer chaque vidéo, un titre et/ou un résumé doivent être prévus.

Exemple▲

Un moyen d'accès à la transcription textuelle doit être prévu pour chaque vidéo.

Cette transcription textuelle doit être disponible :

• soit directement sur la même page à proximité de la vidéo ;
• soit sur une autre page, disponible depuis un lien à proximité de la vidéo.

Exemples▲

Les contrôles suivants doivent au minimum être prévus sur chaque vidéo :

• contrôles de l'avancement : bouton lecture/pause et bouton stop ;
• contrôles du son : bouton activer/désactiver le son et contrôle du volume.

Astuce
Il est de plus intéressant d'afficher dans chaque vidéo des informations concernant la position courante et la durée totale du média, ainsi que des moyens de contrôler la progression dans ce dernier (barre de progression, boutons avance/retour rapide, etc.).

Exemple▲

Un moyen pour afficher et masquer les sous-titres doit être prévu pour chaque vidéo.

Exemple▲

Chaque fois que des sous-titres sont affichés, le contraste entre le texte et la vidéo en arrière-plan doit être suffisant.

Astuce
Envisager par exemple d'ajouter un fond noir derrière les sous-titres blancs ou un contour sombre au texte clair, afin de garantir la lisibilité dans toutes les situations.

Exemples▲

Un moyen pour activer et désactiver l'audiodescription doit être prévu sur chaque vidéo.

Remarque
L'audiodescription est l'équivalent des sous-titres pour les personnes aveugles ou malvoyantes. Elle restitue sous forme de voix off les informations qui ne sont véhiculées que par l'image.

Exemple▲

Pour annoncer chaque contenu audio, un titre et/ou un résumé doivent être prévus.

Exemple▲

Un moyen d'accès à la transcription textuelle doit être prévu pour chaque contenu audio.

Cette transcription textuelle doit être disponible :

• soit directement sur la même page à proximité du contenu audio ;
• soit sur une autre page, disponible depuis un lien à proximité du contenu audio.

Exemple▲

Les contrôles suivants doivent au minimum être prévus sur chaque lecteur audio :

• contrôles de l'avancement : bouton lecture/pause et bouton stop ;
• contrôles du son : bouton activer/désactiver le son et contrôle du volume.

Astuce
Il est de plus intéressant d'afficher dans chaque lecteur audio des informations concernant la position courante et la durée totale du média, ainsi que des moyens de contrôler la progression dans ce dernier (barre de progression, boutons avance/retour rapide, etc.).

Exemple▲

Un moyen de mettre en pause et de relancer l'animation doit être prévu pour chaque contenu animé (défilement, clignotement, mouvement, mise à jour automatique, etc.).

Remarque
Il n'est pas nécessaire de prévoir de moyen pour mettre en pause les barres de progression animées ou les éléments dont le mouvement s'arrête automatiquement dans un laps de temps inférieur à 5 secondes.

Astuce
Si la page propose de nombreux contenus en mouvement, une bonne pratique d'accessibilité consiste à proposer un système de mise en pause et de relance de la totalité du mouvement dans la page, en haut de cette dernière.

Exemple▲

Chaque fois qu'un son dont la durée est supérieure à trois secondes est lancé automatiquement, un moyen de stopper ce son doit être prévu en début de page.

Attention
Il reste très fortement déconseillé malgré tout de déclencher du son automatiquement. Certains utilisateurs seront perturbés par ce son qui se déclenche sans action de leur part (difficulté à trouver la source du son lorsque plusieurs onglets sont ouverts), d'autres seront tout simplement bloqués (utilisateurs de synthèses vocales, qui deviendront incapables de naviguer).