60 règles d’impact pour l’assurance qualité

License : CC BY-NC-SA 2.0 FR

Contenus

#3 - Le code source de chaque page contient une métadonnée qui en décrit le contenu.

Objectifs : Descriptif :

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.

Contrôle :

Dans le code source de chaque page examinée :

#7 - Un lexique ou un glossaire adapté au public visé explique le vocabulaire sectoriel ou technique.

Objectifs : Descriptif :

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 :

Contrôle :

Pour chaque page contenant du vocabulaire spécifique, contrôler qu'il est possible d'accéder :

Données personnelles

#15 - La procédure d’accès et de rectification des données personnelles est décrite.

Objectifs : Descriptif :

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

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 : Descriptif :

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 :
Mettre en place une procédure de création de compte par saisie ou création d’un identifiant et d’un mot de passe propres au service.
Contrôle :
Vérifier qu’il est possible de créer un compte sans avoir recours à un service tiers, par la saisie ou le choix d’un identifiant et d’un mot de passe propres.

#17 - La création d’un compte est soumise à un processus de confirmation.

Objectifs : Descriptif :

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 :
Avant activation du compte créé en ligne, envoyer une demande de confirmation automatique à l’adresse e-mail correspondant à celui-ci.
Contrôle :
Créer un compte en ligne et contrôler qu’il n’est activé qu’à partir de l’e-mail de demande de confirmation qui suit l’envoi du formulaire d’inscription.

#22 - Il est possible de se déconnecter des espaces privés.

Objectifs : Descriptif :

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 : Descriptif :

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 :

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 : Descriptif :

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 :
Proposer deux options lors de la commande : commande sans création de compte et commande avec création d’un compte (ou avec un compte existant). 
Contrôle :
Démarrer une commande et contrôler si celle-ci peut être menée à terme sans création de compte sur le site.

#57 - Le site accepte au moins deux moyens de paiement.

Objectifs : Descriptif :

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 :

#58 - Les données bancaires ne sont mémorisées qu’après consentement explicite de l’utilisateur.

Objectifs : Descriptif :

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 : Contrôle :

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 : Descriptif :

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 : Descriptif :

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 : Descriptif :

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 : Descriptif :

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 :

<label for="nom1">Nom de famille :</label>

<input id="nom1" type="text" name="nom">

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.

Contrôle :

Pour chaque champ de formulaire :

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 : Descriptif :

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 :

#74 - Les caractères saisis dans un champ de mot de passe peuvent être affichés en clair.

Objectifs : Descriptif :

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 :
Afficher un bouton associé à un script qui bascule la valeur de l’attribut type du champ de saisie entre les valeurs password et text.
Contrôle :
Contrôler manuellement la possibilité d’afficher le mot de passe en clair via un dispositif inclus dans la page.

#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 : Descriptif :

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 :

#78 - En cas de rejet des données saisies dans un formulaire, les raisons du rejet sont indiquées à l’utilisateur.

Objectifs : Descriptif :

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

Contrôle :

Pour chaque formulaire examiné :

#85 - Les processus complexes sont accompagnés de la liste de leurs étapes.

Objectifs : Descriptif :

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 :

#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 : Descriptif :

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 : Descriptif :

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 : Contrôle :
Vérifier qu’il est possible de copier le contenu de chaque champ y compris les champs de type password (en utilisant le menu contextuel du navigateur ou à défaut un mécanisme propre au formulaire).
Vérifier qu’il est possible de coller un contenu dans chaque champ y compris dans les champs de type 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 : Descriptif :

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 :

#99 - Le code source des pages contient un appel valide à une icône de favori.

Objectifs : Descriptif :

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 :

Contrôle :

Dans le code source de chaque page examinée :

<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 : Descriptif :

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 :
Faire en sorte que la validation de chaque formulaire de contact ou de demande d’information déclenche l’envoi d’un accusé de réception à l’attention de l’envoyeur. Cela suppose bien entendu de rendre obligatoire le champ de saisie de l’adresse e-mail dans chaque formulaire.
Contrôle :
Via un formulaire de contact ou via le canal de contact mail indiqué :
  • 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 : Descriptif :

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 :
Les images-liens sont aisées à identifier (elles sont le seul contenu qui est placé entre des balises <a> et </a>). Il faut toutefois penser aussi aux liens générés avec JavaScript sur d’autres éléments.
D’une manière générale, il faut :
  • 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é.
Contrôle :

#113 - Chaque image porteuse d’information est dotée d’une alternative textuelle appropriée.

Objectifs : Descriptif :

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.
Dans le cas d’une image complexe qui ne peut être résumée de manière concise dans une alternative textuelle, le détail de l’information doit être apporté en complément à l’aide d’une description étendue :
  • 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.

Contrôle :
  • 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 : Descriptif :

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 :

La transcription peut :

Contrôle :

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 : Descriptif :

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.

Contrôle :

Dans chaque page comportant un contenu vidéo :

#120 - Les sons sont déclenchés par l’utilisateur.

Objectifs : Descriptif :

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.

Contrôle :

Dans chaque page comportant un contenu audio :

Liens

#131 - Chaque lien est doté d’un intitulé dans le code source.

Objectifs : Descriptif :

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

Contrôle :

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 :

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 : Descriptif :

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

Contrôle :

Dans le code source de chaque lien texte ou image-lien

#135 - Les liens sont visuellement différenciés du reste du contenu.

Objectifs : Descriptif :

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 :

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 : Descriptif :

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

Contrôle :

Pour chaque lien de téléchargement, vérifier qu'il est possible d'en connaître le poids :

#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 : Descriptif :

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 :

En savoir plus: élément a sur MDN

Contrôle :

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 :

#151 - Chaque page affiche une information permettant de connaître son emplacement dans l’arborescence du site.

Objectifs : Descriptif :

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 :

#160 - Le focus clavier n’est ni supprimé ni masqué.

Objectifs : Descriptif :

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

Contrôle :

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 :

#161 - Le site est intégralement utilisable au clavier.

Objectifs : Descriptif :

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.

Contrôle :

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 :

#163 - Le site propose un moteur de recherche interne.

Objectifs : Descriptif :

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

#166 - Un plan du site est disponible depuis chaque page.

Objectifs : Descriptif :

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 :

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 : Descriptif :

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 :

Présentation

#177 - Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan.

Objectifs : Descriptif :

À 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 :

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 : Descriptif :

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 :
Comparer l’affichage de la page sur différentes tailles d’écran (desktop, tablettes, smartphone, etc.) et vérifier que le rendu s’adapte à celles-ci.

#190 - Le site propose des styles dédiés à l’impression.

Objectifs : Descriptif :

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

Contrôle :

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 :

Sécurité

#192 - Toutes les pages utilisent le protocole HTTPS.

Objectifs : Descriptif :

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 : Descriptif :

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 : Descriptif :

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 : Descriptif :

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 :
La saisie du mot de passe donne lieu à une validation et à un retour indiquant son degré de sécurité, avant soumission définitive du formulaire d’inscription ou de changement de mot de passe.
Contrôle :
Pour tout formulaire d’inscription ou de changement de mot de passe :
  • 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.
Cette validation peut être plus ou moins exigeante : contrôle du nombre de caractères, de l’absence de l’identifiant du compte dans le mot de passe, du type de caractères présents, etc. 

#207 - Le site propose un mécanisme de sécurité permettant de restreindre l’origine des contenus.

Objectifs : Descriptif :

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 :
Activer l’en-tête HTTP Content-Security-Policy avec les directives CSP 1 appropriées :
  • img-src pour les images ;
  • script-src pour le JavaScript ;
  • style-src pour les styles CSS ;
  • font-src pour les webfonts ;
  • etc.
Contrôle :
Vérifier, à l’aide d’un outil d’inspection des en-têtes HTTP, la présence de l’en-tête Content-Security-Policy.

Serveur et performances

#212 - La racine du site contient des instructions pour les robots d’indexation.

Objectifs : Descriptif :

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" :

En savoir plus: meta sur MDN

Contrôle :

À partir de l'adresse URL de votre site :

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 : Descriptif :

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.

Contrôle :

Via l'adresse url du site examiné :

#216 - Le serveur envoie une page d’erreur 404 personnalisée.

Objectifs : Descriptif :

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.

Contrôle :

À partir de n'importe quelle adresse url du site examiné :

#217 - Le serveur envoie une page d’interdiction 403 personnalisée.

Objectifs : Descriptif :

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.

Contrôle :

Pour chaque site audité :

#219 - Le serveur transmet des contenus compressés aux clients qui les acceptent.

Objectifs : Descriptif :

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 :

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 : Descriptif :

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 : Descriptif :

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

#223 - Les scripts du site sont minifiés.

Objectifs : Descriptif :

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 :

Structure et code

#227 - Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée.

Objectifs : Descriptif :

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

Contrôle :

Dans chaque page, contrôler successivement :

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 : Descriptif :

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 savoir plus: meta sur MDN

Contrôle :

Pour chaque page examinée :

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 : Descriptif :

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 :