60 règles d’impact pour l’assurance qualité
License : CC BY-NC-SA 2.0 FR
Table des matières
- 1 - Contenus
- 2 - Données personnelles
- 3 - E-Commerce
- 4 - Formulaires
- 5 - Identification et contact
- 6 - Images et médias
- 7 - Internationalisation
- 8 - Liens
- 9 - Navigation
- 10 - Newsletter
- 11 - Présentation
- 12 - Sécurité
- 13 - Serveur et performances
- 14 - Structure et code
Contenus
#3 - Le code source de chaque page contient une métadonnée qui en décrit le contenu.
Objectifs :- Permettre aux outils de recherche et d'indexation d'extraire des informations à propos du contenu des pages.
- Améliorer la restitution aux utilisateurs des résultats de recherche.
- Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation.
Une métadonnée est une information contenue dans le code source d’une page web qui permet de la décrire ou de fournir des informations à son propos. Cette règle concerne la métadonnée description qui, comme son nom l’indique, permet de décrire la page.
Solution :Renseigner la balise <meta name="description" content="" />
, ou à défaut un élément spécifique ayant la même fonction, avec une description du contenu de la page ou du site.
Dans le code source de chaque page examinée :
- Vérifier la présence de la balise
<meta name="description" content="" />
ou d'un équivalent à l'aide, par exemple, des outils de développement des navigateurs. - Contrôler que le texte de cette balise décrit effectivement, de façon spécifique ou plus générique, le contenu de la page.
#7 - Un lexique ou un glossaire adapté au public visé explique le vocabulaire sectoriel ou technique.
Objectifs :- Permettre aux utilisateurs de comprendre les contenus sectoriels ou à caractère technique.
- Faciliter l'utilisation d'un service.
- Améliorer le référencement sur des mots-clés ou expressions techniques.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
- Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation.
Les auteurs de ce livre sont des exemples vivants de la capacité quasi instantanée de l’être humain à jargonner dès qu’il accumule quelques connaissances. Un petit lexique ou un glossaire, et hop, le visiteur du site peut appréhender les contenus.
Solution :Pour mettre en œuvre cette bonne pratique, il s'agira de fournir :
- Une section, une page ou une série de pages de glossaire explicitant le vocabulaire technique ou sectoriel utilisé dans le contenu du site. Ce glossaire devra être disponible directement depuis chaque page du site.
- Ou bien un mécanisme permettant à l'utilisateur d'accéder à la définition des termes du vocabulaire technique ou sectoriel, depuis au moins leur première occurrence dans chaque page du site.
Pour chaque page contenant du vocabulaire spécifique, contrôler qu'il est possible d'accéder :
- À une section jouant le rôle de glossaire dans chaque page concernée.
- À une page ou une série de pages de glossaire disponible via les menus de navigation.
- Ou directement à la définition des termes depuis au moins leur première occurrence dans chaque page du site via un lien ou un tooltip.
Données personnelles
#15 - La procédure d’accès et de rectification des données personnelles est décrite.
Objectifs :- Informer l'utilisateur sur l'utilisation de ses données personnelles.
- Faciliter la gestion des demandes liées aux données personnelles.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données
Cette bonne pratique est souvent traitée comme une mention à poser sur un site. Elle a pourtant une vraie valeur ajoutée, puisqu’elle impose aux administrateurs du site de se poser la question de la mise à jour et de la pérennité des données personnelles.
Solution :Indiquer à l'utilisateur dans une section de contenu dédiée par quelles procédures ou moyens de contact il peut effectuer une demande d'accès, de suppression ou de rectification de ses données personnelles.
Contrôle :Dans la page d'accueil, la page des mentions légales, la page d'à propos, d'aide, ou encore dans les pages consacrées aux conditions générales d'utilisation ou à la politique de confidentialité :
- Vérifier la présence d'informations sur la procédure d'accès ou de rectification des données personnelles.
La nature de la procédure en question n'est pas évaluée ici : seule sa présence est contrôlée.
#16 - La création de compte est possible sans recours à un système d’identification tiers.
Objectifs :- Laisser l’utilisateur libre de son choix d’utiliser ou non un service tiers.
- Fournir un moyen alternatif d’accès au service.
- Fournir un moyen d’accès maîtrisé par les administrateurs du service.
- Limiter la dépendance à un acteur tiers dont la politique et la stratégie commerciale ou technique ne manqueront pas d’évoluer dans le temps.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données
Les systèmes d’identification tiers proposés par Facebook, LinkedIn et bien d’autres sont très pratiques. Ils évitent aux utilisateurs d’avoir à créer un identifiant et un mot de passe et ils permettent aux créateurs de sites de se reposer sur des acteurs de référence. Mais le prix est élevé. La fermeture ou la désactivation d’un compte chez le fournisseur tiers rendra la connexion impossible. Le fonctionnement du système de connexion tiers rendra totalement dépendant le créateur de sites.
Solution :#17 - La création d’un compte est soumise à un processus de confirmation.
Objectifs :- Réduire les risques d’inscription de l’utilisateur à son insu.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données
Pour créer un compte sur un site web, il est généralement nécessaire de saisir une adresse de courriel. Cette adresse peut alors être utilisée pour vérifier que la personne à l’origine de la demande de création de compte et le propriétaire du mail saisi sont la même personne. En l’absence d’une telle vérification, n’importe qui pourrait vous créer un compte.
Solution :#22 - Il est possible de se déconnecter des espaces privés.
Objectifs :- Permettre à l’utilisateur de protéger ses données et contenus personnels.
- Limiter les risques d’usurpation d’identité.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données
Si vous êtes connecté à un espace privé, vous accédez généralement à des informations qui ne concernent que vous. En conséquence, vous avez à tout moment besoin de pouvoir fermer l’accès à ces informations. Vous n’avez certainement pas envie que n’importe qui puisse venir sur votre poste de travail, tablette ou mobile et puisse directement accéder aux contenus. Il est donc fondamental de pouvoir à tout moment vous déconnecter du service.
Solution :Fournir à l'utilisateur un mécanisme lui permettant de désactiver globalement toutes les connexions actives de ses différents appareils au service ou à l'espace privé.
Contrôle :Se connecter au service ou à l'espace privé à partir de plusieurs périphériques différents, et vérifier que le site permet de désactiver globalement toutes les connexions actives.
#26 - Les échanges de données sensibles sont sécurisés et signalés comme tels.
Objectifs :- Conforter la confiance de l'utilisateur.
- Permettre à l'utilisateur de saisir des données sensibles en sachant qu'elles seront protégées.
- Minimiser les risques d'utilisation frauduleuse des données des utilisateurs.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données
Il est parfaitement possible, pour un informaticien de niveau moyen, d’intercepter des données circulant sur le réseau. Le chiffrement des données constitue une mesure minimale de sécurité.
Solution :Recourir à un certificat de sécurité informatique dans une version supportée par les versions récentes des navigateurs.
Recourir à un service tiers d'authentification décentralisé du type OpenID.
Contrôle :Une page sécurisée se reconnaît à son URL qui commence par https:// ou à la présence d'un élément visuel dans le navigateur (apparition d'un cadenas, changement de couleur de la barre de saisie de l'URL).
Pour tout site proposant d'échanger des données sensibles :
- Saisir l'adresse URL du site en http (pas en https), sans être identifié, et vérifier que vous êtes directement redirigé vers la version HTTPS du site et que tous les échanges sont sécurisés ;
- Au minimum, vérifier que les échanges de données sensibles (pages de saisie d'identifiants, de données personnelles ou bancaires, etc.) sont en HTTPS ;
- Dans le cas où les données sont saisies dans une page non sécurisée, vérifier dans le code source du formulaire qu'une adresse en HTTPS est présente au sein de l'attribut action, ce qui prouve que les données sont envoyées vers une page sécurisée.
Attention, la troisième option n'offre pas un niveau de sécurité équivalent aux deux premières et peut être tolérée dans le cas de données personnelles, voire d'identifiants mais jamais pour des données très sensibles (biométriques ou bancaires, par exemple).
E-Commerce
#29 - L’achat d’un produit ou service est possible sans création de compte.
Objectifs :- Permettre à l’acheteur de commander immédiatement.
- Lever la barrière de la création de compte.
- Augmenter le taux de conversion.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données
Dans l’e-commerce, tous les détails comptent. L’abandon de panier est fréquent, notamment au stade de la création de compte. Un nombre croissant de sites d’e- commerce proposent l’achat direct, qui consiste à fournir uniquement les informations strictement nécessaires au traitement de la commande. C’est un vrai plus pour les clients.
Solution :#57 - Le site accepte au moins deux moyens de paiement.
Objectifs :- Permettre aux utilisateurs de choisir le mode de paiement qui leur convient le mieux dans leur contexte.
- Fournir au moins une alternative aux utilisateurs qui sont dans l’incapacité temporaire ou permanente d’utiliser un moyen de paiement.
Certains internautes n’ont pas de chéquier, d’autres n’ont pas de carte de crédit ou bien leur carte de crédit a expiré. La présence d’un moyen de paiement alternatif permet de ne pas perdre ces clients.
Solution :Informer le client le plus tôt possible, avant la fin de la commande, qu'il dispose de deux moyens de paiement.
Contrôle :Dans un site d'e-commerce :
- Entreprendre une procédure de commande et la poursuivre au moins jusqu'à l'étape du paiement ;
- Vérifier qu'au moins deux moyens de paiement sont effectivement disponibles.
#58 - Les données bancaires ne sont mémorisées qu’après consentement explicite de l’utilisateur.
Objectifs :- Laisser l’utilisateur maître de ses choix en matière de mémorisation de données bancaires.
- Prévenir d’éventuels problèmes juridiques en cas de plainte ou de vol de données.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données.
En tant qu’utilisateur, il peut être très pratique de pouvoir laisser son numéro de carte bleue à un site parce que l’on compte y revenir de temps en temps. Encore faut-t-il que la décision de laisser le site mémoriser ces données ait été faite de manière volontaire et éclairée.
Solution :- Ne pas enregistrer automatiquement les données permettant d'utiliser un moyen de paiement sans consentement explicite de l’utilisateur.
- Recueillir le consentement explicite de l'utilisateur pour la mémorisation d'un moyen de paiement destiné à être automatiquement réutilisé par le service (opt-in et non opt-out).
Vérifier qu'au cours du processus de commande, le moyen de paiement utilisé n'est pas mémorisé automatiquement par le service, et que son enregistrement éventuel pour une réutilisation automatique nécessite une validation explicite (opt-in et non opt-out).
#59 - Les données bancaires mémorisées par le site peuvent être modifiées ou supprimées.
Objectifs :- Prévenir les risques de fraude en permettant la suppression préventive des données.
- Donner aux utilisateurs la maîtrise de leurs données bancaires.
- Prévenir les erreurs de paiement en permettant la mise à jour préventive des données bancaires.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données
En tant qu’utilisateur, accorder à un site web le droit de mémoriser ses données personnelles est un choix tout à fait respectable, mais avoir le droit de changer d’avis sur la question est tout aussi important. Les utilisateurs doivent pouvoir modifier ou supprimer leurs données bancaires quand ils le souhaitent.
Solution :Si le site mémorise les données bancaires de l'utilisateur permettant un paiement (identité, numéro de carte bancaire, etc.), permettre dans la gestion de son compte de modifier toutes les données mémorisées et de les supprimer.
Contrôle :Vérifier après mémorisation de données bancaires qu'il est possible, dans le compte utilisateur, de modifier et supprimer celles-ci.
#61 - Les factures émises sont également disponibles en ligne.
Objectifs :- Faciliter les opérations de gestion et de rapprochement par les utilisateurs.
- Fournir une sauvegarde des données nécessaires à la comptabilité.
Les factures sont des documents essentiels pour un très grand nombre d’actions en ligne, que ce soit dans la sphère privée ou professionnelle. L’accès aux factures en ligne est une fonctionnalité essentielle, souvent en complément d’un envoi par mail.
Solution :Permettre à l'utilisateur d'accéder, dans son compte utilisateur, à l'ensemble des factures correspondant à ses achats sur le site et de les télécharger.
Contrôle :Vérifier après un achat que la facture est disponible dans le compte utilisateur et qu'il est possible de la télécharger.
#62 - Chaque facturation fait l’objet d’un mail de confirmation.
Objectifs :- Prévenir les pertes d’information et de factures.
- Améliorer la traçabilité des opérations.
La mise à disposition des factures en ligne est très pratique, mais il existe de nombreux cas dans lequel le document en ligne risque de ne plus être disponible (temps légal de conservation des données, migration de données, fin d’exploitation du service). Il est donc assez prudent d’envoyer les factures par mail à l’utilisateur, ce qui lui permet de maîtriser lui-même la conservation de ses factures.
Solution :Envoyer chaque facture établie à l'issue d'un processus de commande par mail à l'utilisateur.
Contrôle :Vérifier que chaque facture établie à l'issue d'un processus de commande est envoyée par mail à l'utilisateur.
Formulaires
#67 - Chaque champ de formulaire est associé dans le code source à une étiquette qui lui est propre.
Objectifs :- Faciliter la compréhension des données attendues dans les formulaires.
- Permettre aux aides techniques d'accessibilité de restituer les champs de formulaires en les associant systématiquement à une étiquette indiquant leur rôle et la nature de la saisie attendue.
- Faciliter la saisie en permettant de sélectionner le champ via un clic sur son étiquette aussi bien que sur le champ lui-même (particulièrement en cas de case à cocher ou de case radio).
- Améliorer l’accessibilité des contenus aux personnes handicapées
Ne pas savoir à quoi sert un champ de formulaire peut être extrêmement déroutant.
Solution :Donner à chaque champ de formulaire une étiquette qui lui soit explicitement associée :
- si l'étiquette est visible, sous la forme d'un élément
label
doté d'un attributfor
reprenant la valeur de l'attributid
affecté au champ, par exemple :
<label for="nom1">Nom de famille :</label>
<input id="nom1" type="text" name="nom">
- si l'affichage de l'étiquette n'est pas souhaité (placeholder), sous la forme d'un attribut
aria-label
ouaria-labelledby
.
Le recours à une étiquette <label for="…"> masquée via les styles CSS est déconseillé au profit de l'attribut aria-label
ou aria-labelledby
.
Pour chaque champ de formulaire :
- Vérifier, en regardant le code source ou à l'aide de Firebug, que l'attribut
for
, propre à l'élémentlabel
, ainsi que l'attributid
du champ ont exactement le même contenu. Si les valeurs de ces deux attributs sont effectivement identiques, l'étiquette (label
) est bien associée au champ (input
). - Dans le cas où aucune étiquette n'est visible dans le site (placeholder), vérifier que chaque champ de formulaire est doté d'un attribut
aria-label
ouaria-labelledby
.
Dans les deux cas, vérifier enfin que l'étiquette décrit effectivement le rôle du champ ou la nature de l'information qui doit y être saisie. Cette bonne pratique ne peut donc être automatisée mais nécessite un examen manuel de chaque formulaire
#69 - L’étiquette de chaque champ de formulaire indique si la saisie est obligatoire.
Objectifs :- Permettre aux utilisateurs de savoir à l'avance si un champ est obligatoire.
- Prévenir les erreurs avant qu'elles ne surviennent.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données.
- Améliorer l’accessibilité des contenus aux personnes handicapées
Mieux vaut éviter à l’utilisateur de commettre une erreur parce qu’on ne lui a pas donné suffisamment d’informations dès le départ.
Solution :Indiquer le caractère obligatoire de la saisie dans l'étiquette associée au champ. Si l'indication est faite avec un symbole graphique (astérisque par exemple), faire précéder le formulaire d'une légende explicitant ce symbole.
Contrôle :Pour chaque formulaire :
- Vérifier que l’étiquette associée à chaque champ en indique le caractère obligatoire, si besoin en contrôlant, avec un inspecteur de code, que l’information est bien présente dans l’élément
label
, dans un attributaria-label,
ou bien qu’elle est reliée au champ via un attributaria-labelledby
ouaria-describedby
. - Vérifier que les champs dont l’étiquette ne donne aucune information sur leur caractère obligatoire sont bien facultatifs, en validant le formulaire sans les remplir. Si un message d’erreur indique qu’ils doivent être remplis ou si le formulaire ne peut être validé ainsi, la bonne pratique est invalidée.
#74 - Les caractères saisis dans un champ de mot de passe peuvent être affichés en clair.
Objectifs :- Faciliter la saisie des mots de passe, notamment sur les claviers virtuels des terminaux mobiles.
- Prévenir les erreurs.
Lorsque vous saisissez vos mots de passe, vous avez l’habitude de le faire dans des champs dédiés, où chaque caractère saisi est remplacé par un point ou une étoile. C’est bien, car cela évite la consultation au-dessus de votre épaule. Mais très souvent, notamment pour les mots de passe longs ou dans des contextes mobiles, cela peut être gênant. Dès lors, pourquoi ne pas donner la possibilité aux utilisateurs d’afficher leur mot de passe à leur demande, lorsqu’ils en ont besoin et qu’ils jugent que cela ne présente pas de risque en matière de confidentialité.
Solution :password
et text
.#77 - En cas de rejet des données saisies dans un formulaire, les champs contenant les données rejetées sont indiqués à l’utilisateur.
Objectifs :- Donner un retour à l'utilisateur sur l'action qu'il vient d'effectuer.
- Guider l'utilisateur directement vers les éléments sur lesquels il doit agir.
- Améliorer l’accessibilité des contenus aux personnes handicapées
Remplir un formulaire n’est pas toujours une tâche aisée : évitez à vos utilisateurs de devoir également partir à la recherche de leurs erreurs éventuelles.
Solution :Faire figurer en début de formulaire un message indiquant que tout ou partie des champs nécessite une correction de la saisie précédente. Indiquer également cette information dans l'élément title
de la page.
Ajouter éventuellement au message en début de formulaire la liste des champs à corriger.
Indiquer explicitement dans l'étiquette de chaque champ concerné qu'il doit être corrigé.
Contrôle :Pour chaque formulaire :
- Soumettre différentes erreurs possibles dans chaque formulaire telles que absence de saisie d'un champ obligatoire, non-respect d'un format demandé ou prévisible (format d'adresse mail, de date, etc.), sensibilité à la casse.
- Puis, vérifier que l'utilisateur est informé de la présence d'erreurs à corriger au moins dans l'élément
title
de la page et que chaque champ erroné est signalé via son étiquette.
#78 - En cas de rejet des données saisies dans un formulaire, les raisons du rejet sont indiquées à l’utilisateur.
Objectifs :- Aider l'internaute à comprendre ce qu'on attend et, ainsi, faciliter le passage à l'étape suivante.
- Éviter la frustration de l'utilisateur face à une erreur dont il n'aurait pas la solution immédiate.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
Ce qui peut sembler évident pour l’auteur d’un formulaire risque de l’être beaucoup moins pour ses utilisateurs : aidez-les à chaque fois que possible.
Solution :Pour chaque champ contenant des données rejetées, indiquer la nature de l'erreur et fournir une aide à la correction
- Soit en début de formulaire, dans une liste des champs erronés ;
- Soit dans le contexte de chaque champ, autant que possible via leur étiquette
label
.
Pour chaque formulaire examiné :
- Soumettre les différentes erreurs possibles dans chaque formulaire absence de saisie d'un champ, non-respect d'un format demandé ou prévisible (format d'adresse mail, de date, etc.), sensibilité à la casse, etc.
- Vérifier, si la saisie est rejetée, que la nature de l'erreur est précisée de manière à fournir l'aide nécessaire à sa correction, par l'un des moyens indiqués dans le paragraphe de mise en oeuvre.
#85 - Les processus complexes sont accompagnés de la liste de leurs étapes.
Objectifs :- Donner de la visibilité à l'utilisateur sur les actions qu'il va réaliser (temps, ordre des étapes, informations nécessaires pour les accomplir, etc.).
- Éviter que l'utilisateur ne se sente piégé dans un processus dont il n'avait pas prévu la durée.
Il est toujours appréciable de connaître à l’avance le nombre d’étapes ou le temps nécessaire pour réaliser une longue démarche.
Solution :Pour tout processus complexe, par exemple un formulaire de commande, afficher à chaque étape la liste intégrale de toutes ses étapes.
Contrôle :Dans le cas de processus complexes :
- Vérifier, pour chaque page concernée, que la liste des étapes y est indiquée, en règle générale sous forme d'un chemin d'étapes en tête de page ou de formulaire.
#88 - L’utilisateur est averti de la perte d’information en cas d’utilisation de l’historique de son navigateur dans un processus complexe.
Objectifs :- Faciliter l’utilisation des formulaires répartis sur plusieurs pages successives.
- Limiter les risques d’abandon en cours de processus.
Ne vous est-il jamais arrivé de croire que vous pouviez tout simplement retourner voir ce que vous aviez saisi à l’étape précédente lors de votre déclaration d’impôts, par exemple, et de constater peu après que tout ce que vous aviez saisi avant ce remords était perdu ? Évitons ce genre de déception à nos utilisateurs.
Solution : Générer une alerte JavaScript en cas de l’utilisation de la fonctionnalité « back » de l’historique du navigateur. Contrôle : Amorcer la saisie d’un formulaire après la première étape du processus, puis activer le bouton « back » du navigateur.#90 - Le copier coller est possible dans les champs de formulaire.
Objectifs :- Faciliter la saisie dans les formulaires.
Saisissez votre adresse e-mail. C’est bon, c’est fait ? Et si maintenant je vous demande de la saisir de nouveau, vous allez peut-être avoir la flemme de le faire et voudrez la copier depuis le premier champ pour la coller dans le deuxième. De quel droit certains sites voudraient vous empêcher de faire cela ? Vive le copier-coller libre !
Solution :- Ne pas intercepter les événements JavaScript
onpaste
oukeydown
pour bloquer le coller dans un champ de formulaire. - Ne pas intercepter les événements JavaScript
oncopy
ouoncut
pour bloquer le copier dans un champ de formulaire.
password
(en utilisant le menu contextuel du navigateur ou à défaut un mécanisme propre au formulaire).password
(en utilisant le menu contextuel du navigateur ou à défaut un mécanisme propre au formulaire).Identification et contact
#98 - Le titre de chaque page permet d’identifier son contenu.
Objectifs :- Permettre aux utilisateurs d'identifier immédiatement la nature des contenus de chaque page dans les onglets, les favoris, dans la fenêtre du navigateur ou encore dans les lecteurs d'écran.
- Améliorer le référencement des pages et leur présentation dans les moteurs de recherche.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
- Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation
Identifier le site en regardant le titre d’une page, c’est bien, mais comprendre très vite la nature du contenu d’une page, c’est encore mieux. Et ce ne sont pas les moteurs de recherche qui diront le contraire.
Solution :Rédiger le contenu de l'élément title
de chaque page de manière à ce qu'il décrive, de la façon la plus concise possible, le contenu ou la fonction de la page , y compris à la suite d'une requête Ajax modifiant de manière essentielle le contenu de la page.
Préciser quelle est l'étape en cours d'un processus dans l'élément title des pages. Par exemple, inscrire « Étape 3 de votre inscription » dans l'élément title
de la page correspondant à la troisième étape d'un formulaire d'inscription.
Préciser, dans le cas de l'affichage d'une série de résultats de recherche, quel est l'intervalle de résultats affiché dans la page courante. Par exemple, « Résultats 10 à 19 de la recherche sur “Foo” ».
Préciser l'état dans le titre d'une page de demande de confirmation ou d'annulation lors de la soumission d'un formulaire (exemple : « Demande de confirmation de suppression - Mes documents »).
Contrôle :Dans toutes les pages du site, y compris dans les pages d'un processus ou d'une série de résultats de recherche, ou encore dans les pages dont le contenu peut être modifié de manière majeure via Ajax :
- Vérifier que chaque titre de page (élément
title
) permet d'identifier le contenu ou la fonction de la page.
#99 - Le code source des pages contient un appel valide à une icône de favori.
Objectifs :- Améliorer l'identification visuelle du site et de ses pages.
- Faciliter l'identification dans le navigateur et dans les favoris ou signets.
- Permettre l'affichage, l'appel, et la mémorisation éventuelle de l'icône de favori par tous les navigateurs.
L’icône de favori est la petite image qui s’affiche dans votre navigateur et dans vos marques-pages ou favoris. Elle mérite d’être bien traitée car elle joue un rôle important dans l’identification durable de votre site.
Solution :Selon le format choisi pour l'icône et son emplacement, utiliser un lien du type :
- <link rel="icon" type="image/png" href="/img/favicon.png"/> (format png, mais aussi jpg, gif, etc.) ;
- <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico" /> (format ico Microsoft seul reconnu par Internet Explorer).
Dans le code source de chaque page examinée :
- Vérifier, à l'aide d'un outil de développement web ou d'un inspecteur de code, que l'élément
link rel
est présent dans l'en-tête de pagehead
; - Vérifier que sa syntaxe est de la forme :
<link rel="icon" type="image/png" href="/img/favicon.png"/> pour les formats png, mais aussi jpg, gif, etc. ;
ou <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico" /> pour le format ico Microsoft.
#105 - Chaque demande d’information fait l’objet d’un accusé de réception.
Objectifs :- Informer les utilisateurs de la prise en compte de leur demande.
- Permettre aux utilisateurs d’obtenir une confirmation archivable de la bonne réception de leur demande d’information.
Après l’envoi d’un formulaire, un internaute peut-il être vraiment certain que sa demande a bien été prise en compte ? Un simple courriel d’accusé de réception lève ce doute et le rassure.
Solution :- Adresser une demande d’information fictive en utilisant une adresse e-mail réelle.
- Contrôler qu’un accusé de réception est bien reçu à cette adresse.
Images et médias
#112 - Chaque image-lien est dotée d’une alternative textuelle appropriée.
Objectifs :- Permettre aux utilisateurs placés dans des contextes où les images ne sont pas perceptibles (navigateur texte, lecteur d’écran, navigateur avec images désactivées) de comprendre le sens des liens présents sur des images qu’ils ne peuvent voir.
- Permettre aux robots d’exploiter l’information véhiculée par les images-liens (pour le référencement, l’indexation, la traduction automatique des alternatives d’images-texte).
- Permettre l’affichage d’un texte pertinent pendant le chargement des images.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
- Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation
Aimeriez-vous naviguer sur un site dont les liens seraient libellés « 42.gif », « logo » ou « 148572156725.jpg » ? Non, n’est-ce pas ? Alors, évitons d’imposer non seulement cela aux utilisateurs de lecteurs d’écran, mais aussi à Google, qui va, du coup, trouver vos contenus bien peu pertinents et bien difficiles à référencer.
Solution :- donner à chaque élément img concerné un attribut alt indiquant la cible ou le rôle du lien ;
- donner à chaque élément area concerné un attribut alt indiquant la cible ou le rôle du lien ;
- indiquer la cible ou le rôle du lien dans le contenu de chaque élément object concerné ;
- indiquer la cible ou le rôle du lien dans le contenu de chaque élément canvas concerné.
- Vérifier que l’attribut alt de chaque élément img concerné indique la cible ou le rôle du lien.
- Vérifier que l’attribut alt de chaque élément area concerné indique la cible ou le rôle du lien.
- Vérifier que le contenu de chaque élément object concerné indique la cible ou le rôle du lien.
- Vérifier que le contenu de chaque élément canvas concerné indique la cible ou le rôle du lien.
- Vérifier le libellé textuel de tout autre élément ayant le rôle d’un lien.
#113 - Chaque image porteuse d’information est dotée d’une alternative textuelle appropriée.
Objectifs :- Permettre aux utilisateurs placés dans des contextes où les images ne sont pas perceptibles (navigateur texte, lecteur d'écran, navigateur avec images désactivées) de comprendre le sens des images qu'ils ne peuvent voir.
- Permettre aux robots d'exploiter l'information véhiculée par les images (référencement, indexation, traduction automatique des alternatives d’images-texte).
- Permettre l'affichage d'un texte pendant le chargement des images.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
- Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation
Certaines images ne se contentent pas d’être jolies ou moches. Elles apportent de vraies informations. C’est le cas du texte mis en image, mais aussi d’images présentant des informations visuelles nécessaires ou utiles à la compréhension du contenu. Dans ce cas, faites-en sorte que les informations ne soient pas perdues lorsque l’image est désactivée.
Solution :- Donner à chaque élément img concerné un attribut alt reproduisant l’information.
- Donner à chaque élément area concerné un attribut alt reproduisant l’information.
- Reproduire l’information dans le contenu de chaque élément object concerné.
- Reproduire l’information dans le contenu de chaque élément canvas concerné.
- Reproduire l’information dans un libellé textuel associé à chaque élément svg concerné par le biais de son attribut aria-label ou de la balise desc.
- soit via l’attribut longdesc de l’image indiquant l’URL de la description,
- soit via un lien adjacent à l’image jouant le même rôle,
- soit dans le contenu de la page, dans le contexte immédiat de l’image. Dans ce dernier cas, l’alternative peut signaler la présence de cette description et y renvoyer.
- Vérifier que l’attribut alt de chaque élément img concerné reproduit l’information portée par l’image.
- Vérifier que l’attribut alt de chaque élément area concerné reproduit l’information portée par l’image.
- Vérifier que le contenu de chaque élément object concerné reproduit l’information portée par l’image.
- Vérifier que le contenu de chaque élément canvas concerné reproduit l’information portée par l’image.
- Vérifier que chaque élément svg concerné est associé à un libellé textuel reproduisant l’information portée par l’image par le biais de son attribut aria-label ou de la balise desc.
- Vérifier la présence et la pertinence de la description étendue le cas échéant.
#116 - Chaque contenu audio et vidéo est accompagné de sa transcription textuelle.
Objectifs :- Permettre aux utilisateurs qui ne peuvent accéder au son ou à l’image proposés de disposer d'une transcription textuelle servant d’alternative.
- Permettre aux utilisateurs d’accéder à l’information contenue dans la vidéo.
- Permettre l’exploitation de l’information par des robots pour améliorer son indexation et son référencement.
- Permettre la traduction par des outils linguistiques en ligne.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
Les vidéos et sons contiennent des textes qui ne sont pas perceptibles par les non- voyants, les sourds ou les moteurs de recherche. Cette bonne pratique montre comment faire en sorte que ces contenus soient lisibles et indexés.
Solution :Accompagner chaque contenu audio ou vidéo d'une transcription :
- Soit intégrale (contenant les paroles et une description des sons et éléments visuels nécessaires à la compréhension) ;
- Soit synthétique (mais reflétant la totalité de l'information).
La transcription peut :
- Figurer dans la page où se trouve le contenu vidéo ou audio ;
- Ou être immédiatement accessible par un lien présent dans la page où se trouve le contenu vidéo ou audio.
Identifier chaque page comportant un contenu multimédia et, dans le contexte immédiat de chaque contenu audio ou vidéo, s’assurer de la présence d’une transcription ou d’un lien y donnant immédiatement accès.
#119 - Les vidéos sont déclenchées par l’utilisateur.
Objectifs :- Laisser à l’utilisateur le contrôle de l’interface visuelle lors de la consultation du site.
- Ne pas imposer à l’utilisateur le déclenchement d’un contenu animé.
- Améliorer l’accessibilité des contenus aux personnes handicapées
Le déclenchement automatique des vidéos est à double tranchant. D’un côté vous « poussez » le contenu vidéo vers vos utilisateurs, vous rendez votre site plus dynamique (jeune, frais, sexy etc.). De l’autre, vous envoyez des données en quantité importante sans l’accord explicite des utilisateurs, vous prenez le risque d’augmenter le taux de rebond, de nuire à votre référencement. Si vous déclenchez vos vidéos automatiquement (en autoplay), comme le font certains réseaux sociaux, vous prenez le risque de voir certains utilisateurs accéder à des contenus dangereux ou inappropriés pour certains publics, surtout si vous diffusez de la vidéo en direct. Bref, avant de déclencher automatiquement vos vidéos, réfléchissez bien.
Solution :Ne pas mettre en place des contenus vidéo dont le démarrage est automatique et sans action explicite de l'utilisateur en ce sens.
Ne pas incorporer dans la page d'éléments déclenchant la lecture d'une vidéo non contrôlable par exemple avec l'élément html vidéo
doté de l'attribut autoplay
ou sans l'attribut controls
.
Dans chaque page comportant un contenu vidéo :
- Vérifier l'absence de contenus vidéo activés automatiquement au chargement de la page ;
- Vérifier l'absence de contenus vidéos activés de manière imprévisibles suite à une action de l'utilisateur.
#120 - Les sons sont déclenchés par l’utilisateur.
Objectifs :- Laisser à l'utilisateur le contrôle du son lors de la consultation du site.
- Ne pas surprendre l'utilisateur par la diffusion inattendue d'un contenu audio.
- Améliorer l’accessibilité des contenus aux personnes handicapées
Il est 23 heures, les enfants dorment, vous naviguez sur Internet et, brutalement, un site déclenche un son tonitruant. Vous sursautez, puis vous cherchez fébrilement comment couper le son car, oui, vous aviez oublié d’éteindre vos enceintes. C’est du vécu, n’est-ce-pas ? Alors ne déclenchez pas de son automatiquement dans votre site. S’il vous plaît.
Solution :Ne pas mettre en place des contenus audio dont le démarrage est automatique et sans action explicite de l'utilisateur en ce sens.
Ne pas incorporer dans la page d'éléments déclenchant la lecture d'un son non contrôlable par exemple avec l'élément html audio
doté de l'attribut autoplay
ou sans l'attribut controls
.
Dans chaque page comportant un contenu audio :
- Vérifier l'absence de contenus audio activés automatiquement au chargement de la page ;
- Vérifier l'absence de contenus audio activés de manière imprévisibles suite à une action de l'utilisateur.
Liens
#131 - Chaque lien est doté d’un intitulé dans le code source.
Objectifs :- Éviter aux utilisateurs d'avoir uniquement une URL peu compréhensible en guise de libellé.
- Éviter les liens qui deviennent invisibles lorsque les styles CSS ou les images d'arrière-plan ne sont pas pris en compte.
- Améliorer l’accessibilité des contenus aux personnes handicapées
Un lien se compose au minimum d’une Url et d’un libellé. Si vous ne saisissez pas de libellé, vous avez un lien, certes, mais qui n’a pas de sens et qui risque de ne pas être perçu ou d’être incorrectement compris par les utilisateurs et les moteurs de recherche.
Solution :Donner à chaque lien un libellé textuel (entre les balises ouvrantes et fermantes de l'élément a
) ou, si nécessaire, via l'alternative textuelle d'un élément img
ou object
, etc.
Ne pas masquer à l'affichage le libellé textuel de l'élément a
pour le remplacer par un effet de style CSS (image d'arrière-plan).
En savoir plus: élément a
sur MDN
La détection des liens vides nécessite l'examen du code généré afin de contrôler le contenu effectivement présent dans la balise a
, dans l'alternative de la balise img
en cas d'image-lien ou encore dans l'alternative des éléments object
et embed
, etc.
Dans chaque page examinée :
- Vérifier que chaque lien texte a un libellé affiché lorsque les styles CSS sont désactivés.
- Contrôler que chaque lien image a un libellé affiché lorsque les images sont désactivées ;
Dans le cas des liens HTML, il faut également vérifier que le libellé est affiché lorsque les couleurs seules sont désactivées.
#132 - Le libellé de chaque lien décrit sa fonction ou la nature du contenu vers lequel il pointe.
Objectifs :- Permettre aux utilisateurs d'identifier précisément la nature du lien et d'éviter des actions erronées.
- Permettre aux outils d'indexation d'associer un libellé à une ressource.
- Permettre aux lecteurs d'écran d'en indiquer la cible de façon explicite et d'éviter de désorienter les utilisateurs.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
- Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation
Pour s’en tenir à des contre-exemples fréquents de cette bonne pratique : les libellés de liens « Cliquer ici » et « Lire la suite » ne vous donnent aucune idée de l’endroit où vous allez vous rendre en cliquant dessus.
Solution :Indiquer sans ambiguïté le contenu de la page cible du lien, la fonction du lien ou son comportement, le cas échéant, dans le libellé des liens (portion de texte située entre les balises <a href="URL"> et </a> ou dans l'alternative textuelle de l'image placée entre ces balises, éventuellement combinée au libellé textuel).
En savoir plus: élément a
sur MDN - img
sur MDN
Dans le code source de chaque lien texte ou image-lien
- Vérifier que le libellé du lien désigne explicitement la nature ou la fonction du contenu visé, ou encore la fonction spécifique du lien ;
- Contrôler, dans le cas d'images-liens, que l'attribut
alt
de l'image joue ce rôle.
#135 - Les liens sont visuellement différenciés du reste du contenu.
Objectifs :- Permettre aux utilisateurs d’identifier facilement les liens au fil du texte ainsi que les blocs de navigation.
- Améliorer la visibilité et l’affordance des liens.
- Améliorer l’accessibilité des contenus aux personnes handicapées
Certains créateurs de sites adorent différencier les liens uniquement au survol. Dans ce cas, un utilisateur qui ne peut pas survoler une page avec son pointeur ne verra pas les liens. Est-ce si rare ? Pensons par exemple aux utilisateurs d’écrans tactiles et à la navigation en mode vocal.
Solution :Les hyperliens peuvent être différenciés à l'aide des propriétés CSS de couleur de texte, de couleur d'arrière-plan, de soulignement, de mise en gras, de bordures, de police de caractères, etc.
Contrôle :Dans chaque page examinée :
- Identifier les liens présents au fil du texte ;
- Vérifier que ces liens se différencient visuellement du reste du texte au sein duquel ils se trouvent placés.
- Vérifier que les liens différenciés par la couleur présentent un ratio de contraste minimal de 3 avec le texte environnant et qu’ils sont identifiables au survol ou à la prise de focus clavier.
Cette vérification ne s'applique pas aux blocs de navigation dont la nature est par ailleurs évidente pour l'utilisateur (menus).
#143 - La taille des fichiers internes proposés en téléchargement est indiquée.
Objectifs :- Informer de façon préventive les utilisateurs sur la quantité de données à télécharger.
- Permettre aux utilisateurs de différer le téléchargement en connexion bas débit ou mobile.
- Améliorer l’accessibilité des contenus aux personnes handicapées
Cette mention de la taille des fichiers va permettre aux internautes de décider du meilleur moment pour télécharger un document. Par exemple, un internaute dans un contexte de mobilité ou disposant d’une connexion bas débit pourra choisir de reporter, voire de ne pas lancer, le téléchargement d’un fichier.
Solution :Au minimum, prévoir une page d'aide indiquant le poids moyen ou maximum pour l'ensemble des fichiers proposés.
Au mieux, indiquer le poids lors de chaque lien permettant de télécharger un fichier.
En savoir plus: élément a
sur MDN
Pour chaque lien de téléchargement, vérifier qu'il est possible d'en connaître le poids :
- Via une information générique donnée dans une page d'aide ;
- Via une information donnée dans le contexte du lien : paragraphe ou élément de liste
li
où il est inclus, titre de section qui le précède, cellule d'en-tête de tableau associée à celle où il est présent ; - Via l'attribut
title
du lien reprenant et complétant le libellé de celui-ci ; - Ou via une information donnée dans le libellé du lien.
#144 - La langue des fichiers en téléchargement est précisée lorsqu’elle diffère de celle de la page d’origine.
Objectifs :- Éviter aux utilisateurs des téléchargements inutiles.
- Informer les utilisateurs du contenu des fichiers en téléchargement.
- Améliorer l’accessibilité des contenus aux personnes handicapées
Il est impossible, pour un internaute, de consulter un fichier avant de l’avoir télé- chargé. En conséquence, il est essentiel de lui fournir un maximum d’informations avant le téléchargement. La langue est bien sûr l’une des informations importantes.
Solution :Indiquer la langue du contenu du document :
- Soit dans le libellé du lien ;
- Soit via l'attribut
title
du lien.
En savoir plus: élément a
sur MDN
Pour chaque lien de téléchargement menant à un document rédigé dans une autre langue que celle de la page concerné, vérifier qu'il est possible de connaître la langue du fichier à télécharger :
- Via une information donnée dans le libellé du lien ;
- Via l'attribut
title
du lien reprenant et complétant le libellé de celui-ci ; - Via une information donnée dans le contexte du lien : paragraphe ou élément de liste
li
où il est inclus, titre de section qui le précède, cellule d'en-tête de tableau associée à celle où il est présent ; - Ou via une information générique donnée dans une page d'aide.
Navigation
#151 - Chaque page affiche une information permettant de connaître son emplacement dans l’arborescence du site.
Objectifs :- Permettre à l'utilisateur de déterminer son emplacement dans le site.
- Simplifier le passage des moteurs de recherche.
- Faciliter la navigation dans l'arborescence des contenus.
Fil d’Ariane, breadcrumb, chemin de fer : il porte différents noms, mais il remplit bien sa fonction d’aide au repérage dans l’architecture d’un site.
Solution :Fournir un fil d'Ariane au début de la zone de contenu principal de la page.
Contrôle :La vérification nécessite une inspection manuelle contrôlant la présence et la pertinence du fil d'Ariane sur les différentes pages ou, le cas échéant, dans les templates sous réserve de services tiers produisant un contenu spécifique.
Dans les pages examinées ou les templates du site :
- Vérifier la présence systématique du fil d'Ariane sur toutes les pages, à l'exception éventuelle de la page d'accueil du site ;
- S'assurer que le fil d'Ariane est immédiatement identifiable grâce à une mise en forme prévisible par l'utilisateur.
#160 - Le focus clavier n’est ni supprimé ni masqué.
Objectifs :- Permettre la navigation au clavier ou via des périphériques d'entrées ou des dispositifs qui ne reposent pas sur la souris.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
Le focus clavier signale où se trouve le curseur dans une page. Pour le voir pendant que vous naviguez sur un site, appuyez sur la touche Tabulation de votre clavier, vous le verrez changer d’emplacement dans la page. Si vous ne le voyez pas, c’est peut-être que le créateur du site a eu la mauvaise idée de le supprimer ou de le masquer.
Solution :Veiller à ne pas masquer ou supprimer l'effet visuel de prise de focus qui indique quel est l'élément atteint lors de la navigation au clavier. En particulier, ne pas annuler la valeur par défaut de la propriété CSS outline
sans la remplacer par une autre valeur personnalisée ou un effet visuel suffisamment perceptible.
Ne pas supprimer via Javascript la prise de focus clavier (exploitation de l'événement onblur
).
Ce contrôle s'effectue sur l'ensemble des éléments interactifs, prioritairement à l'aide de la touche tabulation et, dans l'interface de certains widgets, à l'aide de touches de déplacement spécifiques (touches flèches).
Pour chaque élément interactif contenu dans les pages examinées :
- Vérifier que l'indication visuelle du focus par défaut du navigateur est au moins présente ou qu'une indication visuelle spécifique a été aménagée.
#161 - Le site est intégralement utilisable au clavier.
Objectifs :- Permettre la navigation au clavier pour les utilisateurs ayant une préférence pour cette pratique.
- Permettre la consultation des contenus et l'utilisation des services indépendamment du périphérique d'entrée.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
La souris n’est pas le mode exclusif de navigation sur un site. Les utilisateurs qui ne voient pas l’emplacement du pointeur visuel et ceux qui souhaitent naviguer au clavier doivent pouvoir eux aussi visiter votre site.
Solution :Recourir à des gestionnaires d'événements universels en cas d'interaction basée sur Javascript (par exemple, onclick
pour un lien a
ou pour un champ ou contrôle de formulaire) ou, à défaut, compléter les gestionnaires d'événements non universels (onmouseover
par exemple) par un second gestionnaire permettant l'accès clavier (onfocus
par exemple) ou encore fournir un moyen d'accès alternatif.
Cette vérification s'applique à l'ensemble des éléments interactifs : hyperliens, boutons, champs de formulaires, widgets Javascript, etc. Le mode d'interaction par défaut est la touche tabulation pour atteindre les liens, les champs et les contrôles, puis la touche entrée pour les activer. Dans certains widgets, un mode d'interaction spécifique peut être présent : barre d'espace pour valider, touches flèches pour se déplacer, touche d'échappement pour fermer ou sortir. Autant que possible dans ce cas, ces touches spécifiques devraient être indiquées à l'utilisateur.
Au sein de chaque page examinée :
- Vérifier que l'ensemble des interactions, liens, boutons, champs de formulaires, présents dans les pages sont utilisables au clavier, à l'exception de ceux pour lesquels cela n'aurait pas de sens, comme une fonctionnalité de tracé à la souris.
#163 - Le site propose un moteur de recherche interne.
Objectifs :- Fournir aux utilisateurs une solution de navigation alternative et d'accès rapide aux contenus liés à des mots-clés retenus par ceux-ci.
- Diminuer l'impact énergétique lié à la consultation du site.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
Le moteur de recherche est, avec le plan du site, les menus et le lien de retour à l’accueil, un des moyens fondamentaux de réorientation et d’accès à l’information. Rendez-le présent et facile d’accès.
Solution :Proposer un formulaire et une fonctionnalité de recherche simple, qu'il s'agisse d'une solution interne ou de l'incorporation d'une solution externe.
Contrôle :Dans toutes les pages évaluées ou bien en contrôlant les templates du site (sous réserve de tenir compte de pages dépendant de solutions tierces) :
- Vérifier manuellement la présence systématique d'un moteur de recherche.
#166 - Un plan du site est disponible depuis chaque page.
Objectifs :- Fournir aux utilisateurs une solution en cas de désorientation, pour naviguer et se repérer dans le site, pour visualiser l'ensemble des contenus et la taille du site.
- Inciter les responsables du contenu à représenter graphiquement et à rationaliser leur contenu.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
- Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation
Dès qu’un site est un peu complexe, un plan du site est toujours utile pour s’y orienter.
Solution :Créer un plan de site qui donne accès, directement ou indirectement, à la totalité des pages du site sous la forme d'une liste de liens textuels explicites.
Structurer cette liste de manière à refléter l'organisation des rubriques du site, à l'aide d'éléments de titre et d'éléments de liste imbriqués.
La profondeur de l'arborescence à représenter varie en fonction des contenus, mais elle est en général limitée aux trois premiers niveaux. Les pages satellites telles que la page Contact et les mentions légales doivent figurer dans le plan de site.
Contrôle :Cette vérification gagne à être effectuée si possible à partir des templates, en tenant compte des éventuels services tiers. Dans le site :
- Vérifier la présence d'une page de plan de site ;
- Contrôler qu'un lien vers celui-ci est disponible dans chaque page du site.
L'emplacement du lien vers le plan de site est indifférent (en-tête, menu, pied de page) mais il est préférable qu'il soit constant sur l'ensemble du site. La présence du lien « plan de site » est particulièrement pertinente dans les pages 404 et 403.
Newsletter
#168 - L’inscription aux newsletters est soumise à un processus de confirmation.
Objectifs :- Éviter l'inscription à une newsletter par un tiers usurpant une identité.
- Vérifier que l'adresse e-mail a été saisie sans erreur.
- Renforcer la confiance des utilisateurs sur l’utilisation de leurs données.
Le spam est suffisamment pénible, ne lui donnons pas un coup de pouce. Faites-en sorte que l’inscription à votre newsletter ne puisse être faite que par le vrai détenteur de l’adresse e-mail.
Solution :Envoyer un e-mail permettant l'inscription définitive via la saisie d'un mot de passe, un clic sur un hyperlien, etc.
Contrôle :Cette vérification nécessite de s'abonner à la newsletter concernée.
Pour chaque site proposant de s'abonner à une newsletter :
- Effectuer une inscription de test et vérifier la réception d'un mail de confirmation.
Présentation
#177 - Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan.
Objectifs :- Permettre une bonne lisibilité des contenus.
- Limiter la charge mentale lors de la consultation.
- Améliorer l’accessibilité des contenus aux personnes handicapées
À première vue (sic), il s’agit d’une règle destinée uniquement aux utilisateurs handicapés, daltoniens ou malvoyants. Mais détrompez-vous : une page web avec des contrastes suffisants est plus agréable pour tout le monde.
Solution :Veiller à conserver un ratio de contraste minimal de 3:1 entre le texte et son arrière-plan, tel qu'il peut être mesuré via l'algorithme WCAG2.0.
Contrôle :Dans l'ensemble des pages :
- Repérer les contenus dont la différence de contraste/luminosité avec leur arrière-plan est potentiellement insuffisante
- Utiliser un outil du type Colour Contrast Analyzer pour calculer le ratio de contraste : cliquer sur Luminosité et relever la couleur du premier plan puis celle du second plan dans les champs dédiés ;
- Vérifier que le ratio de contraste relevé est supérieur ou égal à 3:1
Dans le cas de textes placés sur un arrière-plan en dégradé, en motif ou photographique, la mesure de couleur de l'arrière-plan est prise au point le plus défavorable jouxtant le texte (pour un texte noir, le pixel le plus sombre). Il est conseillé de tenir également compte de l'agrandissement éventuel de la taille de caractère par l'utilisateur (Zoom texte seulement), qui peut entraîner un changement dans la superposition texte/arrière-plan.
#189 - Le site propose un ou plusieurs mécanismes dédiés à l’adaptation aux terminaux mobiles.
Objectifs :- Faciliter la consultation sur les terminaux mobiles.
- Améliorer le positionnement dans les outils d’indexation qui prennent ce critère en compte.
Chaque site se doit aujourd’hui d’être consultable dans les meilleures conditions possibles quel que soit le terminal (desktop, smartphone, tablette, etc.).
Solution :Soit recourir aux media queries ou à l’adaptative design pour adresser au navigateur des règles de style adaptées selon la taille de l’écran.
Soit fournir une version mobile dédiée.
Contrôle :#190 - Le site propose des styles dédiés à l’impression.
Objectifs :- Permettre l'impression des contenus sous une forme appropriée au support.
Il est parfaitement possible de prévoir la façon dont le contenu web d’une page doit s’imprimer sur papier. Les feuilles de styles pour le media print sont là pour ça.
Solution :Fournir une feuille de style spécifique pour le type de media print, par exemple sous la forme : <link rel="stylesheet" type="text/css" href="print.css" media="print" />
.
Les styles d'impression peuvent corriger une feuille de style globale (feuille de style pour le media all ou sans mention du media) ou bien s'appliquer seuls pour le media print si la feuille de style d'affichage est appelée en précisant le media print.
En savoir plus: link
sur MDN - style
sur MDN
Cette bonne pratique peut être évaluée rapidement en testant l'aperçu avant impression dans le navigateur, mais sa confirmation nécessite l'examen du code pour détecter la présence d'un style d'impression pour le media print, qui peut être :
- Sous forme d'une balise du type <link rel="stylesheet" type="text/css" media="print" href="print.css" /> ;
- Sous forme d'une balise du type <style media="print" type="text/css">…</style> ;
- Sous forme d'une règle
@media print {…}
dans une CSS interne ou externe ; - Ou sous forme d'une règle
@import url("print.css")
print;
dans une CSS interne ou externe.
Sécurité
#192 - Toutes les pages utilisent le protocole HTTPS.
Objectifs :- Prévenir le risque d’interception et de vol de données.
- Améliorer la sécurité du site Web.
- Rassurer les utilisateurs.
Le HTTPS qui se trouve au début de la majorité des adresses web actuellement signifie que la page est envoyée par le serveur avec le protocole HyperText Transfer Protocol Secure ou « protocole de transfert hypertextuel sécurisé » Cela signifie que la page est envoyée avec http et qu’elle est chiffrée pour éviter qu’elle ne puisse être lue directement sur le réseau. Au début réservée au transfert de données sensibles, cette approche est maintenant généralisée pour toutes les pages web. Pour les utilisateurs, cela signifie que vos échanges avec le site sont chiffrés.
Solution :Ne pas utiliser le protocole HTTP, mais uniquement HTTPS pour toutes les ressources de chaque page du site.
Contrôle :Vérifier que chaque page et ressource de page du site utilise le protocole HTTPS et non HTTP.
#193 - Les certificats de sécurité sont signés et en cours de validité.
Objectifs :- Permettre aux utilisateurs de connaître la validité du certificat et contribuer à la sécurisation de la transaction.
La rencontre d’un site dont le certificat est invalide ou périmé provoque des alertes sur le poste de l’internaute. Dans un certain nombre de cas, elles le conduiront à quitter immédiatement le site.
Solution :Faire un suivi rigoureux des certificats de sécurité utilisés sur le site en anticipant les dates de renouvellement.
Contrôle :Vérifier la validité du certificat à l'aide d'un outil en ligne, ou bien à l'aide des outils fournis par les navigateurs
La plupart des navigateurs affichent également une alerte lorsqu'ils rencontrent un certificat non valide.
#194 - Les pages utilisant HTTPS ont un en-tête de transport strict.
Objectifs :- Améliorer la sécurité des échanges.
- Prévenir les risques d’attaques.
Selon Wikipédia, que nous nous refusons à paraphraser ici : « HTTP Strict Transport Security (HSTS) est un mécanisme de politique de sécurité proposé pour HTTP, permettant à un serveur web de déclarer à un agent utilisateur (comme un navigateur web), compatible, qu’il doit interagir avec lui en utilisant une connexion sécurisée (comme HTTPS) ». En résumé, cela signifie que votre serveur est configuré pour ne communiquer avec l’utilisateur que de manière chiffrée. Il s’agit donc d’un niveau de sécurité supplémentaire par rapport au fait d’utiliser HTTPS. Non seulement le serveur parle en HTTPS, mais il refuse de parler de toute autre façon.
Solution :Utiliser pour chaque page l'entête HTTP Strict Transport Security et son paramètre max-age pour spécifier que le navigateur doit convertir toutes les requêtes en HTTP en requêtes HTTPS.
Contrôle :Vérifier que le serveur envoie pour chaque page l'entête HTTP Strict Transport Security avec le paramètre max-age spécifiant la durée pendant laquelle le navigateur doit convertir toutes les requêtes en HTTP en requêtes HTTPS
#198 - Un dispositif sensibilise l’utilisateur sur le degré de sécurisation du mot de passe qu’il choisit
Objectifs :- Informer les utilisateurs sur le niveau de sécurité du mot de passe choisi et donc sur les risques de détournement.
Un mot de passe doit avoir un niveau minimum de complexité pour ne pas être facilement deviné à des fins malveillantes. Il est souhaitable d’avertir l’utilisateur si le mot de passe qu’il a choisi n’est pas assez complexe. Certains systèmes permettent même de l’en informer en direct pendant la saisie.
Solution :- Saisir un mot de passe et s’assurer que cette saisie donne lieu à une validation et à un retour indiquant son degré de sécurité, et ce, avant la soumission définitive du formulaire.
#207 - Le site propose un mécanisme de sécurité permettant de restreindre l’origine des contenus.
Objectifs :- Réduire les risques d’exécution ou d’affichage d’un contenu non désirable ou d’une source non autorisée.
Le serveur envoie une page contenant divers éléments (fichiers JavaScript, CSS, webfonts, etc.) au navigateur, qui va se charger de télécharger et d’afficher le tout, le mieux et le plus vite possible… sans se poser de questions sur la légitimité de ce qu’il fait. Le système nommé Content Security Policy permet d’indiquer au navigateur des règles concernant l’origine de ces contenus. Cela permet de déterminer précisément ce qu’il aura le droit d’exécuter ou d’afficher, et cela renforce donc la sécurité pour les utilisateurs.
Solution :- img-src pour les images ;
- script-src pour le JavaScript ;
- style-src pour les styles CSS ;
- font-src pour les webfonts ;
- etc.
Serveur et performances
#212 - La racine du site contient des instructions pour les robots d’indexation.
Objectifs :- Permettre un référencement ciblé.
- Améliorer le guidage des outils de recherche.
- Diminuer l'impact énergétique lié à la consultation du site.
- Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation
Les robots sont des programmes informatiques qui analysent et parcourent vos pages. Les plus connus sont ceux des moteurs de recherche, qui indexent les contenus. Ces robots peuvent recevoir des instructions pour les guider dans leur indexation, il suffit de mettre en place un fichier appelé robots.txt à la racine de votre site et de respecter une syntaxe particulière dans ce fichier.
Solution :Pour définir les répertoires, fichiers ou types de fichiers non indexables, utiliser les instructions user-agent
et disallow
dans un fichier texte unique appelé robots.txt
, placé dans le répertoire racine du site.
Alternativement, pour agir au niveau d'une page spécifique, utiliser dans celle-ci la balise meta name="robots" content="attribut1, attribut2"
:
- attribut1 peut prendre les valeurs
index
(indexer cette page) ounoindex
(ne pas indexer cette page) ; - attribut2 peut prendre les valeurs
follow
(suivre les liens contenus dans cette page) ounofollow
(ne pas suivre les liens).
En savoir plus: meta
sur MDN
À partir de l'adresse URL de votre site :
- Accéder tout d'abord à l'adresse du fichier robots.txt, à la racine du site, en tapant par exemple http://example.com/robots.txt dans la barre d'adresse du navigateur ;
- Vérifier la présence du fichier
robots.txt
placé dans le répertoire racine du site ; - Vérifier la validité de la syntaxe du fichier
robots.txt
à l'aide des indications données par les moteurs de recherche
En l'absence de fichier robots.txt
vérifier la présence et la validité de la balise meta name="robots" content="attribut1, attribut2"
dans chaque page.
#213 - Le site propose un fichier sitemap indiquant les contenus à explorer.
Objectifs :- Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation.
- Diminuer l'impact énergétique lié à la consultation du site.
Un fichier sitemap présente aux moteurs de recherche les contenus qu’ils doivent explorer. C’est en quelque sorte un plan du site écrit pour les machines.
Solution :Créer un fichier sitemap.xml
contenant la liste des pages du site à la racine du site. À défaut de respecter le format XML, une simple liste d'URL est acceptée par les moteurs.
Via l'adresse url du site examiné :
- Vérifier qu'un fichier
sitemap.xml
existe à la racine du site, en y accédant directement dans le navigateur avec une URL du type http://example.com/sitemap.xml ; - À défaut, consulter le fichier
robots.txt
pour y rechercher une URL spécifique mentionnée sous la formesitemap: http://example.com/adresse/du/fichier.xml
.
#216 - Le serveur envoie une page d’erreur 404 personnalisée.
Objectifs :- Informer l'utilisateur sur l'erreur rencontrée, sur la continuité de fonctionnement du serveur
- Lever le doute sur un éventuel problème lié à sa connexion.
Les erreurs sont inévitables. Même en vérifiant vos liens toutes les dix minutes, un internaute peut toujours taper indxe.html au lieu de index.html. La page d’erreur 404 est donc l’une des pages les plus importantes de votre site. Certaines agences y apportent un soin tout particulier. Ne l’oubliez pas, c’est un signe de professionnalisme.
Solution :Modifier la configuration du serveur web pour renvoyer l'utilisateur vers une page personnalisée lorsque la ressource demandée n'existe pas.
Si la configuration principale du serveur n'est pas directement accessible et si l'environnement le permet, utiliser une configuration locale par répertoire. Par exemple, l'environnement Apache autorise la création d'un fichier .htaccess
contenant des directives relatives aux traitements des erreurs : ErrorDocument 404 /mapage404.html
.
À partir de n'importe quelle adresse url du site examiné :
- Modifier l'adresse URL afin d'obtenir une erreur 404, par exemple, en ajoutant une série caractères aléatoires en fin d'adresse tel que : https://www.exemple.com/dbvdjb
- Vérifier que la page retournée correspond à une page personnalisée, cohérente avec le reste du site, et non pas à la page 404 envoyée par défaut par le serveur (Apache, IIS, Nginx) ;
- Dans le cas de l'utilisation d'un CMS, ce dernier peut vous faire croire qu'il ne renvoie pas la page 404 par défaut, il faudra donc effectuer la même vérification via l'adresse URL d'une image ou d'un fichier CSS ou encore JS pour valider définitivement cette bonne pratique.
#217 - Le serveur envoie une page d’interdiction 403 personnalisée.
Objectifs :- Rassurer l'internaute sur le fait qu'il est toujours dans le même site.
- Permettre à l'administrateur du site de mettre des éléments de guidage pour l'utilisateur.
- Informer l'utilisateur sur l'erreur rencontrée, sur la continuité de fonctionnement du serveur et mettre hors de cause sa connexion.
Lorsque l’internaute essaye de consulter une page interdite (demande d’affichage du contenu d’un répertoire, par exemple), le serveur n’envoie pas une page 404 (not found) mais 403 (forbidden), fort peu sympathique. Comme dans le cas de l’erreur 404, cette page peut être personnalisée aux couleurs du site visité.
Solution :Modifier la configuration du serveur web pour renvoyer l'utilisateur vers une page personnalisée lorsque l'accès à la ressource demandée n'est pas autorisé.
Si la configuration principale du serveur n'est pas directement accessible et si l'environnement le permet, utiliser une configuration locale par répertoire. Par exemple, l'environnement Apache autorise la création d'un fichier .htaccess
contenant des directives relatives aux traitements des erreurs : ErrorDocument 403 /mapage403.html
.
Pour chaque site audité :
- Obtenir une page d'erreur 403, pour cela, vous pouvez retirer la dernière partie de l'adresse url d'une des images du site pour ne garder que le nom des répertoires présents entre les slashs de cette adresse, par exemple : https://www.exemple/com/img/. La page affichée devrait alors être une page d'erreur 403.
- Vérifier que la page retournée ne correspond pas à la page 403 renvoyée par défaut par le serveur (Apache, IIS, Nginx) mais bien à une page d'erreur personnalisée, dont le graphisme est cohérent avec l'ensemble du site.
#219 - Le serveur transmet des contenus compressés aux clients qui les acceptent.
Objectifs :- Améliorer la vitesse de rendu de la page.
- Diminuer les coûts de bande passante.
- Diminuer l'impact énergétique lié à la consultation du site
Il s’agit d’un moyen particulièrement efficace d’accélérer le temps d’accès à une page et de réduire le coût de bande passante : il est possible de configurer un serveur pour qu’il envoie des pages compressées (dans un format proche de celui d’une archive .zip). Les contenus sont alors « dézippés » à la volée et de manière totalement transparente sur le poste de l’utilisateur.
Solution :Activer le module Gzip ou Deflate du serveur pour compresser les ressources Javascript, CSS et HTML.
Contrôle :Pour chaque page examinée :
- Vérifier la compression des contenus (Gzip) à l'aide d'un outil dédié.
Attention à bien vérifier tous les éléments liés (CSS, JS, HTML) et pas seulement la page en elle-même. Les formats déjà compressés comme les images JPEG ou PNG ou les archives zip, par exemple, ne doivent pas être recompressés.
Si la taille avant compression d'un élément est inférieure à 1 Ko, il n'est pas nécessaire de le compresser, au risque de voir son poids augmenter.
#220 - Le serveur envoie les informations permettant la mise en cache des contenus.
Objectifs :- Accélérer l'affichage des contenus et permettre une navigation plus fluide.
- Réduire les coûts de bande passante.
Un serveur peut accompagner l’envoi d’une page HTML ou d’un fichier image, Java- Script, CSS ou autre, ainsi que des informations permettant leur mise en cache sur le poste utilisateur. Pour cela, il est nécessaire de le configurer correctement, et tout le monde y gagne.
Solution :Configurer le serveur web pour qu’il puisse gérer la mise en cache des éléments statiques et gérer – au niveau applicatif – la possible mise en cache des éléments dynamiques.
En pratique, et en accord avec les spécifications HTTP, le serveur devra envoyer les en-têtes etag, date et last-modified correspondant, respectivement, à l’identifiant de la ressource, à la date de traitement de la requête et à la date de dernière modification de la ressource demandée. L’ensemble des dates est au format GMT. Ces informations peuvent être complétées par les champs content-length et expires si la taille en octets et la date d’expiration exacte du contenu sont connues.
Afin d’informer les proxys et les clients finaux sur le comportement à adopter vis-à-vis des contenus mis en cache, les auteurs devront utiliser l’en-tête HTTP cache-control en accord avec les délais de réactualisation nécessaires et le caractère privé de la diffusion.
La possible mise en cache pourra être ainsi finalisée par la soumission d’un message 304 Not Modified (sans la ressource demandée dans le corps de la requête) lorsque le serveur recevra un en-tête if-modified-since contenant une date antérieure à la date de modification de ladite ressource.
Contrôle :Pour chaque page : vérifier la possible mise en cache des éléments de la page à l’aide d’un outil dédié (outils de développement, service en ligne, etc.) Attention à bien vérifier tous les éléments liés (CSS, JS, images) et pas seulement la page en elle-même.
#222 - Les feuilles de style du site sont minifiées.
Objectifs :- Minimiser la quantité de données à télécharger par l'utilisateur.
- Améliorer les performances.
- Diminuer l'impact énergétique lié à la consultation du site
Il est possible de diminuer la taille des feuilles de styles CSS sans nuire au rendu final. Cette opération, appelée minification, minimise la quantité de données à télécharger et contribue à améliorer les performances.
Solution :Supprimer les espaces non nécessaires et les commentaires dans les fichiers CSS en recourant à des outils dédiés.
Contrôle :Pour l'ensemble du site
- Vérifier manuellement au sein de tous les fichiers CSS qu'aucun retour ligne, commentaire, indentation ou saut de ligne n'est présent.
- Ou identifier la liste des fichiers CSS non minifiés à l'aide d'outils de développement (navigateurs, outils en ligne, etc.)
#223 - Les scripts du site sont minifiés.
Objectifs :- Accélérer la vitesse d'affichage des pages.
- Améliorer les performances.
- Diminuer la quantité de données à télécharger.
- Diminuer l'impact énergétique lié à la consultation du site
La minification : une pratique simple pour réduire le volume de données à télécharger, et par là-même, accélérer l’accès à votre site.
Solution :Supprimer les espaces non nécessaires ainsi que les commentaires dans les fichiers Javascript, en recourant à des outils dédiés.
Contrôle :Pour l'ensemble du site :
- Vérifier manuellement au sein de tous les fichiers Javascript qu'aucun retour ligne, indentation ou saut de ligne n'est présent.
- Ou identifier la liste des scripts Javascript non minifiés à l'aide d'outils de développement (navigateurs, outils en ligne, etc.).
Structure et code
#227 - Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée.
Objectifs :- Permettre aux utilisateurs qui le souhaitent de visualiser la structure du contenu de la page et d’y naviguer.
- Permettre aux machines et aux outils d’indexation d’extraire le plan de chaque page.
- Améliorer le référencement en facilitant l’interprétation du contenu par les robots d’indexation.
Les titres et sous-titres permettent aux navigateurs, moteurs et outils de vocalisation de restituer la structure d’une page. Ainsi, les utilisateurs peuvent accéder directement au contenu qui les intéresse.
Solution :Structurer le document en titres et sous-titres à l’aide des éléments HTML h1 à h6.
Veiller à ce que la structure ne comporte pas de « trous » : un titre de niveau h2 ne doit pas être suivi d’un titre h4, h5 ou h6, par exemple.
Veiller à ce que chaque page comporte au moins un titre de niveau 1 avec l’élément h1.
En savoir plus: h1
... h6
sur MDN
Dans chaque page, contrôler successivement :
- la présence d’au moins un élément h1 correspondant au titre de la section principale du contenu de la page ;
- la présence de sous-titres h2 à h6 (si nécessaire) correspondant aux titres des sous-sections de contenu principal de la page ;
- l’absence d’interruption dans la succession descendante des titres h1 à h6, c’est-à-dire par exemple l’absence de titre h1 suivi d’un titre h3.
La vérification doit s’effectuer en tenant compte d’éventuels éléments de titres masqués à l’affichage ou bien de titres générés par JavaScript. On peut, à cet effet, utiliser la fonction d’affichage de la table des matières de la page disponible dans certains outils de développement.
#232 - Le site n’impose pas de redirection ou de rafraîchissement automatique côté client.
Objectifs :- Laisser à l’utilisateur le contrôle de son navigateur et de son interface de consultation
- Éviter des coupures ou des pertes d’information en cours de lecture, notamment pour les utilisateurs équipés de lecteurs d’écran qu’un rafraîchissement ou une redirection temporisée interromprait lors de la consultation.
- Ne pas pénaliser la consultation du contenu en mobilité lorsque la qualité du réseau est variable sur une courte échelle de temps.
- Permettre à l’utilisateur d’éviter un surcroît non désiré de coût d’utilisation des données mobiles.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
Les redirections côté client affichent brièvement une première page puis envoient automatiquement l’utilisateur vers une autre page. Le rafraîchissement automatique recharge automatiquement la page courante sans que l’utilisateur en fasse la demande.
Solution :Ne pas utiliser l’élément meta http-equiv="refresh"
.
Fournir à l’utilisateur un moyen de désactiver les éventuels rafraîchissements automatiques et les redirections créées :
- en JavaScript ;
- via un élément
object, embed ou applet
; - ou via un
en-tête HTTP refresh
.
En savoir plus: meta
sur MDN
Pour chaque page examinée :
- Vérifier, à l’aide d’un inspecteur de code, l’absence de l’élément
meta http-equiv="refresh"
. - Vérifier que la consultation de la page ne révèle aucun rafraîchissement automatique ni aucune redirection côté client qui ne soient désactivables auparavant via l’interface du site (sans devoir faire appel à une éventuelle fonctionnalité propre au navigateur).
La détection de l’élément meta http-equiv="refresh"
est aisée en observant le code source de la page. En revanche, la diversité des dispositifs JavaScript de rafraîchissement automatique impose de procéder également à un contrôle via la consultation de la page dans le navigateur. Ce contrôle peut être facilité si le navigateur offre une option interdisant certains de ces rafraîchissements et affiche alors un bandeau d’alerte. Mais seule l’observation de la page permet une détection à coup sûr.
#233 - Le texte des documents PDF internes est sélectionnable.
Objectifs :- Permettre le référencement des contenus des documents PDF.
- Faciliter la manipulation et la réutilisation du contenu des documents PDF (traduction, copier coller…).
- Garantir la lisibilité des contenus des documents PDF.
- Améliorer l’accessibilité des contenus aux personnes handicapées.
Un document PDF peut contenir du texte soit sous forme de texte réel, soit sous forme d’image, dans le cas, par exemple, où il s’agirait d’un document scanné. Sachez que le contenu d’un tel document ne sera ni indexé par les moteurs de recherche, ni manipulable (pour la copie, notamment), ni accessible aux lecteurs d’écran.
Solution :Ne pas diffuser de PDF issus de la numérisation de documents initiaux mais uniquement des documents convertis au format numérique (par OCR le cas échéant).
Contrôle :Pour chaque document PDF interne publié dans le site :
- Afficher ou ouvrir le document
- Vérifier que le texte affiché est immédiatement sélectionnable à l'écran ou bien qu'il peut être consulté dans un lecteur d'écran.