From 6ef999dce0bfdb8f4f2a4b71bd41804c3adf66d3 Mon Sep 17 00:00:00 2001
From: nicod_ <nicod@lerebooteux.fr>
Date: Sat, 23 Jan 2021 16:21:35 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20des=20donn=C3=A9es=20du=20r=C3=A9f?=
 =?UTF-8?q?=C3=A9rentiel=20v4,=20et=20fonctions=20de=20mise=20=C3=A0=20jou?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 base/opquast.php            |   41 +-
 data/data-fr-v4.json        | 2162 +++++++++++++++++++++++++++++++++++
 opquast_administrations.php |  104 +-
 paquet.xml                  |    4 +-
 4 files changed, 2293 insertions(+), 18 deletions(-)
 create mode 100644 data/data-fr-v4.json

diff --git a/base/opquast.php b/base/opquast.php
index 8317ed5..c77421e 100644
--- a/base/opquast.php
+++ b/base/opquast.php
@@ -16,12 +16,16 @@ if (!defined('_ECRIRE_INC_VERSION')) {
  *     Déclarations d'interface pour le compilateur
  **/
 function opquast_declarer_tables_interfaces($interfaces) {
-	$interfaces['table_des_tables']['opquast_criteres'] = 'opquast_criteres';
+	$interfaces['table_des_tables']['opquast_criteres']       = 'opquast_criteres';
 	$interfaces['table_des_tables']['opquast_criteres_liens'] = 'opquast_criteres_liens';
-	$interfaces['table_des_tables']['opquast_tags'] = 'opquast_tags';
+	$interfaces['table_des_tables']['opquast_tags']           = 'opquast_tags';
+	$interfaces['table_des_tables']['opquast_themes']         = 'opquast_themes';
+	$interfaces['table_des_tables']['opquast_etapes']         = 'opquast_etapes';
 
 	$interfaces['tables_jointures']['spip_opquast_criteres'][] = 'opquast_criteres_liens';
-	$interfaces['tables_jointures']['spip_opquast_tags'][] = 'opquast_criteres_liens';
+	$interfaces['tables_jointures']['spip_opquast_tags'][]     = 'opquast_criteres_liens';
+	$interfaces['tables_jointures']['spip_opquast_themes'][]   = 'opquast_criteres_liens';
+	$interfaces['tables_jointures']['spip_opquast_etapes'][]   = 'opquast_criteres_liens';
 
 	return $interfaces;
 }
@@ -45,6 +49,8 @@ function opquast_declarer_tables_objets_sql($tables) {
 		'table_objet_surnoms'     => array('opquast_critere'),
 		'field'                   => array(
 			'id_opquast_critere' => 'BIGINT(21) NOT NULL',
+			'numero'             => 'BIGINT(21) NOT NULL',
+			'version'            => 'VARCHAR(5) NOT NULL DEFAULT ""',
 			'titre'              => "TEXT NOT NULL DEFAULT ''",
 			'lien'               => "TEXT NOT NULL DEFAULT ''",
 			'texte'              => "TEXT NOT NULL DEFAULT ''",
@@ -56,7 +62,12 @@ function opquast_declarer_tables_objets_sql($tables) {
 			'KEY statut'  => 'statut',
 		),
 		'titre'                   => 'titre AS titre, "" AS lang',
-		'champs_editables'        => array(),
+		'champs_editables'        => array(
+			'titre',
+			'texte',
+			'numero',
+			'version',
+		),
 		'champs_versionnes'       => array(),
 		'rechercher_champs'       => array(
 			'titre' => 10,
@@ -118,6 +129,28 @@ function opquast_declarer_tables_principales($tables) {
 		),
 	);
 
+	$tables['spip_opquast_themes'] = array(
+		'field' => array(
+			'id_opquast_theme' => 'BIGINT(21) NOT NULL',
+			'titre'            => "TEXT NOT NULL DEFAULT ''",
+			'maj'              => 'TIMESTAMP',
+		),
+		'key'   => array(
+			'PRIMARY KEY' => 'id_opquast_theme',
+		),
+	);
+
+	$tables['spip_opquast_etapes'] = array(
+		'field' => array(
+			'id_opquast_etape' => 'BIGINT(21) NOT NULL',
+			'titre'            => "TEXT NOT NULL DEFAULT ''",
+			'maj'              => 'TIMESTAMP',
+		),
+		'key'   => array(
+			'PRIMARY KEY' => 'id_opquast_etape',
+		),
+	);
+
 	return $tables;
 }
 
diff --git a/data/data-fr-v4.json b/data/data-fr-v4.json
new file mode 100644
index 0000000..ec85016
--- /dev/null
+++ b/data/data-fr-v4.json
@@ -0,0 +1,2162 @@
+{
+  "225": {
+    "objectif": "<ul><li>Permettre un affichage hors ligne correct des pages en indiquant au navigateur quel est le jeu de caract\u00e8res utilis\u00e9.<\/li><li>Pr\u00e9venir le risque de probl\u00e8mes d\u2019affichage de caract\u00e8res li\u00e9 \u00e0 un fonctionnement parfois hasardeux des m\u00e9canismes de rattrapage des navigateurs quand ils ne disposent pas de l\u2019information n\u00e9cessaire via l\u2019en-t\u00eate HTTP content-type.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Le code source de chaque page contient une m\u00e9tadonn\u00e9e qui d\u00e9finit le jeu de caract\u00e8res.",
+    "controle": "<p>Ce crit\u00e8re peut \u00eatre v\u00e9rifi\u00e9 par l\u2019examen du code source, \u00e0 l\u2019aide d'un outil de d\u00e9veloppement. Pour chaque page :<\/p><ul><li>V\u00e9rifier la pr\u00e9sence de l\u2019\u00e9l\u00e9ment meta http-equiv=\"Content- Type\" ou charset.<\/li><li>V\u00e9rifier la pertinence du jeu de caract\u00e8res indiqu\u00e9 dans son attribut content ou charset.<\/li><\/ul>",
+    "solution": "<p>L\u2019\u00e9l\u00e9ment meta est renseign\u00e9 en fonction de l\u2019encodage effectif du document et de son type MIME sous la forme :<\/p><ul><li><code>meta charset=\"utf-8\"<\/code> en HTML5 <\/li><\/ul><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/meta\"><code>meta<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Structure et code"
+  },
+  "180": {
+    "objectif": "<ul><li>Faciliter l\u2019adaptation du rendu au media (mobile ou autre) ou aux besoins de l\u2019utilisateur (agrandissement de la taille des caract\u00e8res, modification des couleurs, de la police, de la graisse, de la justification, etc.). <\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Un contenu qui doit \u00eatre restitu\u00e9 dans un lecteur d'\u00e9cran ne lui est pas dissimul\u00e9.",
+    "controle": "<p>Dans le code g\u00e9n\u00e9r\u00e9 et dans les feuilles de styles CSS des pages examin\u00e9es :<\/p><p><\/p><ul><li>D\u00e9tecter, \u00e0 l\u2019aide d\u2019un inspecteur de code, des contenus qui seraient masqu\u00e9s \u00e0 l\u2019affichage (en dehors de ceux destin\u00e9s \u00e0 \u00eatre rendus visibles sur action de l\u2019utilisateur).<\/li><li>V\u00e9rifier qu\u2019aucun de ces contenus n\u2019utilise les techniques indiqu\u00e9es dans la mise en \u0153uvre s\u2019ils sont destin\u00e9s \u00e0 \u00eatre restitu\u00e9s dans un lecteur d\u2019\u00e9cran.<\/li><\/ul><p><\/p><ul><\/ul>",
+    "solution": "<p>Sauf si le contenu concern\u00e9 est destin\u00e9 \u00e0 \u00eatre rendu visible et perceptible sur action de l\u2019utilisateur (onglets, menus d\u00e9roulants, etc.) :<\/p><ul><li>Ne pas utiliser les propri\u00e9t\u00e9s display et visibility pour masquer le contenu.<\/li><li>Ne pas utiliser l\u2019attribut HTML hidden pour masquer le contenu.<\/li><li>Ne pas donner au contenu un attribut ARIA aria-hidden=\"true\".<\/li><li>Ne pas utiliser le param\u00e8tre wmode d\u2019un objet Flash avec les valeurs transparent ou opaque.<\/li><\/ul><p><\/p><div>Utiliser :<\/div><ul><li>les propri\u00e9t\u00e9s CSS permettant de positionner le contenu en dehors de la zone d\u2019affichage du navigateur (position, text- indent) ou de le rogner (clip) ;<\/li><li>les propri\u00e9t\u00e9s ARIA permettant d\u2019associer un libell\u00e9 \u00e0 un contenu (aria-label, aria-labelledby, aria-describedby) ;<\/li><li>ou, dans le cas d\u2019une \u00e9tiquette de champ de formulaire, l\u2019attribut title de celui-ci.<\/li><\/ul><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/display\"><code>display<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/visibility\"><code>visibility<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Pr\u00e9sentation"
+  },
+  "182": {
+    "objectif": "<ul><li>Faciliter l\u2019adaptation du rendu au media (mobile ou autre) ou aux besoins de l\u2019utilisateur (agrandissement de la taille des caract\u00e8res, modification des couleurs, de la police, de la graisse, de la justification, etc.).<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation.<\/li><\/ul>",
+    "titre": "Les textes pouvant \u00eatre mis en forme via des styles ne sont pas remplac\u00e9s par des images.",
+    "controle": "<p>Cette v\u00e9rification n\u00e9cessite l\u2019examen visuel des pages pour identifier les images ne contenant que du texte et \u00e9valuer si une mise en forme via CSS aurait permis d\u2019obtenir un rendu \u00e9quivalent. Pour chaque page contenant des textes mis en images :<\/p><p><\/p><ul><li>Passer en revue les images (images HTML et \u00e9ventuelles images d\u2019arri\u00e8re-plan CSS utilis\u00e9es pour simuler un contenu \u00e9ditorial dans un \u00e9l\u00e9ment vide).<\/li><li>V\u00e9rifier que les textes mis en image correspondent uniquement \u00e0 des mises en forme ne pouvant \u00eatre obtenues via les styles CSS.<\/li><\/ul><p><\/p><p>Sont exclus de cette exigence : les logos, les banni\u00e8res publicitaires et les \u00e9l\u00e9ments graphiques de promotion.&nbsp;<\/p>",
+    "solution": "<p>Utiliser des textes HTML mis en forme \u00e0 l\u2019aide des styles CSS (et en particulier les polices de caract\u00e8res t\u00e9l\u00e9chargeables, ou Web fonts).<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Pr\u00e9sentation"
+  },
+  "105": {
+    "objectif": "<ul><li>Informer les utilisateurs de la prise en compte de leur demande. <\/li><li>Permettre aux utilisateurs d\u2019obtenir une confirmation archivable de la bonne r\u00e9ception de leur demande d\u2019information.<\/li><\/ul>",
+    "titre": "Chaque demande d'information fait l'objet d'un accus\u00e9 de r\u00e9ception.",
+    "controle": "<div>Via un formulaire de contact ou via le canal de contact mail indiqu\u00e9 :<\/div><div><ul><li>Adresser une demande d\u2019information fictive en utilisant une adresse e-mail r\u00e9elle.<\/li><li>Contr\u00f4ler qu\u2019un accus\u00e9 de r\u00e9ception est bien re\u00e7u \u00e0 cette adresse.<\/li><\/ul><\/div>",
+    "solution": "<div>Faire en sorte que la validation de chaque formulaire de contact ou de demande d\u2019information d\u00e9clenche l\u2019envoi d\u2019un accus\u00e9 de r\u00e9ception \u00e0 l\u2019attention de l\u2019envoyeur. Cela suppose bien entendu de rendre obligatoire le champ de saisie de l\u2019adresse e-mail dans chaque formulaire.<\/div>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "98": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier imm\u00e9diatement la nature des contenus de chaque page dans les onglets, les favoris, dans la fen\u00eatre du navigateur ou encore dans les lecteurs d'\u00e9cran.<\/li><li>Am\u00e9liorer le r\u00e9f\u00e9rencement des pages et leur pr\u00e9sentation dans les moteurs de recherche.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Le titre de chaque page permet d'identifier son contenu.",
+    "controle": "<p>Dans toutes les pages du site, y compris dans les pages d'un processus ou d'une s\u00e9rie de r\u00e9sultats de recherche, ou encore dans les pages dont le contenu peut \u00eatre modifi\u00e9 de mani\u00e8re majeure via Ajax :<\/p><ul><li>V\u00e9rifier que chaque titre de page (\u00e9l\u00e9ment <code>title<\/code>) permet d'identifier le contenu ou la fonction de la page.<\/li><\/ul>",
+    "solution": "<p>R\u00e9diger le contenu de l'\u00e9l\u00e9ment <code>title<\/code> de chaque page de mani\u00e8re \u00e0 ce qu'il d\u00e9crive, de la fa\u00e7on la plus concise possible, le contenu ou la fonction de la page , y compris \u00e0 la suite d'une requ\u00eate Ajax modifiant de mani\u00e8re essentielle le contenu de la page.<\/p><p>Pr\u00e9ciser quelle est l'\u00e9tape en cours d'un processus dans l'\u00e9l\u00e9ment title des pages. Par exemple, inscrire \u00ab&nbsp;\u00c9tape 3 de votre inscription&nbsp;\u00bb dans l'\u00e9l\u00e9ment <code>title<\/code> de la page correspondant \u00e0 la troisi\u00e8me \u00e9tape d'un formulaire d'inscription. <\/p><p>Pr\u00e9ciser, dans le cas de l'affichage d'une s\u00e9rie de r\u00e9sultats de recherche, quel est l'intervalle de r\u00e9sultats affich\u00e9 dans la page courante. Par exemple, \u00ab R\u00e9sultats 10 \u00e0 19 de la recherche sur \u201cFoo\u201d&nbsp;\u00bb.<\/p><p>Pr\u00e9ciser l'\u00e9tat dans le titre d'une page de demande de confirmation ou d'annulation lors de la soumission d'un formulaire (exemple : \u00ab&nbsp;Demande de confirmation de suppression - Mes documents&nbsp;\u00bb).<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Identification et contact"
+  },
+  "8": {
+    "objectif": "<ul><li>Permettre une identification imm\u00e9diate des contenus publicitaires ou sponsoris\u00e9s.<\/li><li>\u00c9viter les confusions entre contenus r\u00e9dactionnels et publicitaires. <\/li><li>Pr\u00e9venir les risques associ\u00e9s aux conflits d'int\u00e9r\u00eat.<\/li><\/ul>",
+    "titre": "Les contenus publicitaires ou sponsoris\u00e9s sont identifi\u00e9s comme tels.",
+    "controle": "<p>Au sein du site examin\u00e9 :<\/p><ul><li>Identifier les contenus publicitaires. <\/li><li>V\u00e9rifier que tous les espaces d\u00e9di\u00e9s \u00e0 la publicit\u00e9 se diff\u00e9rencient du reste du contenu et comportent une mention permettant de les identifier sans ambigu\u00eft\u00e9&nbsp;: typiquement, la mention \u00ab&nbsp;publicit\u00e9&nbsp;\u00bb affich\u00e9e au dessus ou en dessous du contenu concern\u00e9.<\/li><\/ul>",
+    "solution": "<ul><li>Signaler les publicit\u00e9s par une mention permettant de les identifier (publicit\u00e9, pub, partenariats\u2026).<\/li><li>Et, dans la mesure du possible, s\u00e9parer graphiquement la publicit\u00e9 du reste du contenu.<\/li><\/ul>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Contenus"
+  },
+  "7": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de comprendre les contenus sectoriels ou \u00e0 caract\u00e8re technique. <\/li><li>Faciliter l'utilisation d'un service. <\/li><li>Am\u00e9liorer le r\u00e9f\u00e9rencement sur des mots-cl\u00e9s ou expressions techniques.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Un lexique ou un glossaire adapt\u00e9 au public vis\u00e9 explique le vocabulaire sectoriel ou technique.",
+    "controle": "<p>Pour chaque page contenant du vocabulaire sp\u00e9cifique, contr\u00f4ler qu'il est possible d'acc\u00e9der&nbsp;: <\/p><ul><li>\u00c0 une section jouant le r\u00f4le de glossaire dans chaque page concern\u00e9e.<\/li><li>\u00c0 une page ou une s\u00e9rie de pages de glossaire disponible via les menus de navigation.<\/li><li>Ou directement \u00e0 la d\u00e9finition des termes depuis au moins leur premi\u00e8re occurrence dans chaque page du site via un lien ou un tooltip.<\/li><\/ul>",
+    "solution": "<p>Pour mettre en \u0153uvre cette bonne pratique, il s'agira de fournir :<\/p><ul><li>Une section, une page ou une s\u00e9rie de pages de glossaire explicitant le vocabulaire technique ou sectoriel utilis\u00e9 dans le contenu du site. Ce glossaire devra \u00eatre disponible directement depuis chaque page du site.<\/li><li>Ou bien un m\u00e9canisme permettant \u00e0 l'utilisateur d'acc\u00e9der \u00e0 la d\u00e9finition des termes du vocabulaire technique ou sectoriel, depuis au moins leur premi\u00e8re occurrence dans chaque page du site.<\/li><\/ul>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Contenus"
+  },
+  "142": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de savoir en temps utile si leurs outils les autorisent \u00e0 consulter les fichiers propos\u00e9s en t\u00e9l\u00e9chargement. <\/li><li>R\u00e9duire la charge serveur en \u00e9vitant les t\u00e9l\u00e9chargements inutiles.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Le format des fichiers propos\u00e9s en t\u00e9l\u00e9chargement est indiqu\u00e9.",
+    "controle": "<p>Pour chaque lien de t\u00e9l\u00e9chargement, v\u00e9rifier qu'il est possible d'en conna\u00eetre le format via : <\/p><ul><li>Une information g\u00e9n\u00e9rique donn\u00e9e dans une page d'aide ;<\/li><li>Une information donn\u00e9e dans le contexte du lien&nbsp;: paragraphe ou \u00e9l\u00e9ment de liste <code>li<\/code> o\u00f9 il est inclus, titre de section qui le pr\u00e9c\u00e8de, cellule d'en-t\u00eate de tableau associ\u00e9e \u00e0 celle o\u00f9 il est pr\u00e9sent ;<\/li><li>L'attribut <code>title<\/code> du lien reprenant et compl\u00e9tant le libell\u00e9 de celui-ci ;<\/li><li>Une information donn\u00e9e dans le libell\u00e9 du lien ;<\/li><li>Une ic\u00f4ne dot\u00e9e d'un texte alternatif indiquant le format du fichier.<\/li><\/ul>",
+    "solution": "<p>Au minimum, pr\u00e9voir une page d'aide indiquant le format des fichiers propos\u00e9s s'il est unique.<\/p><p>Au mieux, indiquer le format pour chaque lien permettant de t\u00e9l\u00e9charger un fichier. <\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/a\">\u00e9l\u00e9ment <code>a<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Liens"
+  },
+  "42": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de conna\u00eetre les conditions d'assistance en cas de difficult\u00e9.<\/li><\/ul>",
+    "titre": "Les conditions de fonctionnement du service apr\u00e8s-vente sont indiqu\u00e9es.",
+    "controle": "<p>Dans la page d'accueil, la page des mentions l\u00e9gales, la page d'aide ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente&nbsp;:<\/p><ul><li>V\u00e9rifier la pr\u00e9sence des informations relatives aux conditions de fonctionnement du service apr\u00e8s-vente.<\/li><\/ul>",
+    "solution": "<p>Indiquer, dans les conditions g\u00e9n\u00e9rales, les informations relatives aux conditions de fonctionnement du service apr\u00e8s-vente.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "52": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de comprendre ou d'anticiper d'\u00e9ventuelles difficult\u00e9s sur le site ou lors de la transaction.<\/li><\/ul>",
+    "titre": "Le mode de d\u00e9p\u00f4t et la proc\u00e9dure de traitement des r\u00e9clamations sont indiqu\u00e9s.",
+    "controle": "<p>Dans au moins une des pages suivantes : les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente, la page d'accueil, la page des mentions l\u00e9gales, la page d'\u00e0 propos, la page produit ou encore la page d'aide&nbsp;: <\/p><ul><li>V\u00e9rifier la pr\u00e9sence des informations relatives \u00e0 la proc\u00e9dure de d\u00e9p\u00f4t et de traitement des r\u00e9clamations.<\/li><\/ul><p>La nature de la proc\u00e9dure en question n'est pas \u00e9valu\u00e9e ici : seule sa pr\u00e9sence est contr\u00f4l\u00e9e.<\/p>",
+    "solution": "<p>Indiquer, dans les conditions g\u00e9n\u00e9rales de vente, par exemple, la proc\u00e9dure de d\u00e9p\u00f4t et de traitement des r\u00e9clamations.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "60": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d\u2019afficher et \u00e9ventuellement d\u2019imprimer une trace de leur commande. <\/li><li>Fournir aux utilisateurs une preuve \u00e9crite de l\u2019op\u00e9ration effectu\u00e9e. <\/li><li>Renforcer la tra\u00e7abilit\u00e9 de la transaction.<\/li><\/ul>",
+    "titre": "La r\u00e9f\u00e9rence de la transaction est affich\u00e9e au client apr\u00e8s la validation de sa commande.",
+    "controle": "<p>Dans un site de e-commerce :<\/p><ul><li>Mener \u00e0 terme une proc\u00e9dure de commande ;<\/li><li>V\u00e9rifier que la r\u00e9f\u00e9rence de la transaction est bien indiqu\u00e9e sur la page de confirmation de commande affich\u00e9e apr\u00e8s validation d'un achat en ligne. <\/li><\/ul>",
+    "solution": "<p>Indiquer la r\u00e9f\u00e9rence de la transaction sur la page de confirmation apr\u00e8s validation d'un achat en ligne.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "65": {
+    "objectif": "<ul><li>Donner \u00e0 l'utilisateur une confirmation des informations relatives \u00e0 la commande. <\/li><li>Permettre \u00e0 l'utilisateur de conserver un historique de la transaction ailleurs que dans le site.<\/li><\/ul>",
+    "titre": "Un mail indiquant la r\u00e9f\u00e9rence de la transaction et les donn\u00e9es de la commande est envoy\u00e9 suite \u00e0 la validation.",
+    "controle": "<p>Dans un site de e-commerce :<\/p><ul><li>Mener \u00e0 terme une proc\u00e9dure de commande ;<\/li><li>V\u00e9rifier, \u00e0 l'issue de cette derni\u00e8re, que le mail contenant la r\u00e9f\u00e9rence de la transaction et les donn\u00e9es de la commande parvient effectivement au destinataire.<\/li><\/ul>",
+    "solution": "<p>Utiliser ou d\u00e9velopper des outils de gestion du caddie qui envoient automatiquement une confirmation contenant le r\u00e9capitulatif des donn\u00e9es de la commande.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "67": {
+    "objectif": "<ul><li>Faciliter la compr\u00e9hension des donn\u00e9es attendues dans les formulaires. <\/li><li>Permettre aux aides techniques d'accessibilit\u00e9 de restituer les champs de formulaires en les associant syst\u00e9matiquement \u00e0 une \u00e9tiquette indiquant leur r\u00f4le et la nature de la saisie attendue.<\/li><li>Faciliter la saisie en permettant de s\u00e9lectionner le champ via un clic sur son \u00e9tiquette aussi bien que sur le champ lui-m\u00eame (particuli\u00e8rement en cas de case \u00e0 cocher ou de case radio).<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Chaque champ de formulaire est associ\u00e9 dans le code source \u00e0 une \u00e9tiquette qui lui est propre.",
+    "controle": "<p>Pour chaque champ de formulaire&nbsp;: <\/p><ul><li>V\u00e9rifier, en regardant le code source ou \u00e0 l'aide de Firebug, que l'attribut <code>for<\/code>, propre \u00e0 l'\u00e9l\u00e9ment <code>label<\/code>, ainsi que l'attribut <code>id<\/code> du champ ont exactement le m\u00eame contenu. Si les valeurs de ces deux attributs sont effectivement identiques, l'\u00e9tiquette (<code>label<\/code>) est bien associ\u00e9e au champ (<code>input<\/code>). <\/li><li>Dans le cas o\u00f9 aucune \u00e9tiquette n'est visible dans le site (placeholder), v\u00e9rifier que chaque champ de formulaire est dot\u00e9 d'un attribut <code>aria-label<\/code> ou <code>aria-labelledby<\/code>.<\/li><\/ul><p>Dans les deux cas, v\u00e9rifier enfin que l'\u00e9tiquette d\u00e9crit effectivement le r\u00f4le du champ ou la nature de l'information qui doit y \u00eatre saisie. Cette bonne pratique ne peut donc \u00eatre automatis\u00e9e mais n\u00e9cessite un examen manuel de chaque formulaire<\/p>",
+    "solution": "<p>Donner \u00e0 chaque champ de formulaire une \u00e9tiquette qui lui soit explicitement associ\u00e9e&nbsp;:<\/p><ul><li>si l'\u00e9tiquette est visible, sous la forme d'un \u00e9l\u00e9ment <code>label<\/code> dot\u00e9 d'un attribut <code>for<\/code> reprenant la valeur de l'attribut <code>id<\/code> affect\u00e9 au champ, par exemple :<\/li><\/ul><p>&lt;label for=\"nom1\"&gt;Nom de famille&nbsp;:&lt;\/label&gt;<\/p><p>&lt;input id=\"nom1\" type=\"text\" name=\"nom\"&gt;<\/p><ul><li>si l'affichage de l'\u00e9tiquette n'est pas souhait\u00e9e (placeholder), sous la forme d'un attribut <code>aria-label<\/code> ou <code>aria-labelledby<\/code>.<\/li><\/ul><p>Le recours \u00e0 une \u00e9tiquette &lt;label for=\"\u2026\"&gt; masqu\u00e9e via les styles CSS est d\u00e9conseill\u00e9 au profit de l'attribut <code>aria-label<\/code> ou <code>aria-labelledby<\/code>.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "75": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier sans ambigu\u00eft\u00e9 les champs de formulaire et la nature des informations \u00e0 saisir. <\/li><li>Pr\u00e9venir les erreurs de saisie. <\/li><li>Faciliter et acc\u00e9l\u00e9rer l'usage du formulaire. <\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Chaque \u00e9tiquette de formulaire est visuellement rattach\u00e9e au champ qu'elle d\u00e9crit.",
+    "controle": "<p>Pour chaque formulaire<\/p><ul><li>S'assurer que chaque \u00e9tiquette de formulaire est affich\u00e9e \u00e0 proximit\u00e9 imm\u00e9diate du champ concern\u00e9 sur toutes les tailles d'\u00e9cran (attention au mobile);<\/li><li>V\u00e9rifier que l'\u00e9tiquette occupe une position pr\u00e9visible&nbsp;: au-dessus ou \u00e0 gauche d'un champ sauf pour les champs <code>input type radio<\/code> et <code>checkbox<\/code> o\u00f9 elle peut se trouver \u00e0 droite ou \u00e0 gauche du champ. <\/li><\/ul><p>La proximit\u00e9 imm\u00e9diate est une mesure \u00e0 pr\u00e9ciser selon le contexte mais elle est de l'ordre d'une trentaine de pixels maximum pour une \u00e9tiquette plac\u00e9e \u00e0 gauche du champ, d'un interligne pour une \u00e9tiquette plac\u00e9e au-dessus du champ et de quelques pixels pour l'\u00e9tiquette d'une case radio ou \u00e0 cocher.<\/p>",
+    "solution": "<p>Veiller \u00e0 ce que l'\u00e9tiquette visible de chaque champ de formulaire soit affich\u00e9e \u00e0 proximit\u00e9 imm\u00e9diate du champ concern\u00e9, afin que le rapport entre ceux-ci puisse \u00eatre per\u00e7u sans ambigu\u00eft\u00e9.<\/p><p>\u00c9viter les mises en forme de formulaire entra\u00eenant la pr\u00e9sence d'un espace vide important entre un champ et son \u00e9tiquette, ou un positionnement inhabituel de l'\u00e9tiquette telle qu'une \u00e9tiquette plac\u00e9e en-dessous du champ, ou une \u00e9tiquette de case \u00e0 cocher plac\u00e9e au dessus de celle-ci.<\/p>",
+    "etape": "Conception",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "73": {
+    "objectif": "<ul><li>\u00c9viter \u00e0 l'utilisateur de saisir un mot de passe qui ne correspond finalement pas \u00e0 celui qu'il a souhait\u00e9 ou m\u00e9moris\u00e9.<\/li><\/ul>",
+    "titre": "La cr\u00e9ation d'un mot de passe par l'utilisateur fait l'objet d'un m\u00e9canisme de pr\u00e9vention des erreurs de saisie.",
+    "controle": "<p>Dans le cas d'une cr\u00e9ation de mot de passe&nbsp;:<\/p><ul><li>V\u00e9rifier qu'un m\u00e9canisme de double saisie des mots de passe, g\u00e9n\u00e9ralement pr\u00e9sent sous la forme de deux champs successifs, est syst\u00e9matiquement pr\u00e9sent.<\/li><\/ul>",
+    "solution": "<p>Proposer, apr\u00e8s le champ de saisie du mot de passe, un champ de confirmation o\u00f9 le mot de passe doit \u00eatre saisi \u00e0 nouveau et v\u00e9rifier que les deux saisies sont effectivement identiques lors de la soumission.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "137": {
+    "objectif": "<ul><li>Avertir clairement l\u2019internaute du fait qu\u2019il va quitter le service en ligne qu\u2019il est en train de visiter. <\/li><li>Faciliter le rep\u00e9rage des liens externes.<\/li><\/ul>",
+    "titre": "Les liens internes et externes sont diff\u00e9renci\u00e9s.",
+    "controle": "<p>Pour chaque page contenant des liens&nbsp;:<\/p><ul><li>V\u00e9rifier que les liens internes et externes sont diff\u00e9renci\u00e9s par le moyen d'une mention textuelle, d'une ic\u00f4ne ou d'un comportement qui leur est propre. La v\u00e9rification s'effectue manuellement en contr\u00f4lant visuellement les liens. <\/li><\/ul>",
+    "solution": "<p>Il est possible d'ajouter l'information \u00ab&nbsp;lien externe&nbsp;\u00bb dans le libell\u00e9 du lien (mention textuelle, ic\u00f4ne HTML sp\u00e9cifique), dans l'attribut <code>title<\/code> du lien en y reprenant et en y compl\u00e9tant le libell\u00e9, via la mise en forme du lien (ic\u00f4ne CSS) ou encore via le comportement du lien (ouverture dans une nouvelle fen\u00eatre r\u00e9serv\u00e9e aux liens externes, avec avertissement pr\u00e9alable).<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Liens"
+  },
+  "212": {
+    "objectif": "<ul><li>Permettre un r\u00e9f\u00e9rencement cibl\u00e9. <\/li><li>Am\u00e9liorer le guidage des outils de recherche. <\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "La racine du site contient des instructions pour les robots d'indexation.",
+    "controle": "<p>\u00c0 partir de l'adresse URL de votre site : <\/p><ul><li>Acc\u00e9der tout d'abord \u00e0 l'adresse du fichier robots.txt, \u00e0 la racine du site, en tapant par exemple http:\/\/example.com\/robots.txt dans la barre d'adresse du navigateur ; <\/li><li>V\u00e9rifier la pr\u00e9sence du fichier <code>robots.txt<\/code> plac\u00e9 dans le r\u00e9pertoire racine du site ; <\/li><li>V\u00e9rifier la validit\u00e9 de la syntaxe du fichier <code>robots.txt<\/code> \u00e0 l'aide des indications donn\u00e9es par les moteurs de recherche <\/li><\/ul><p>En l'absence de fichier <code>robots.txt<\/code> v\u00e9rifier la pr\u00e9sence et la validit\u00e9 de la balise <code>meta name=\"robots\" content=\"attribut1, attribut2\"<\/code> dans chaque page.<\/p>",
+    "solution": "<p>Pour d\u00e9finir les r\u00e9pertoires, fichiers ou types de fichiers non indexables, utiliser les instructions <code>user-agent<\/code> et <code>disallow<\/code> dans un fichier texte unique appel\u00e9 <code>robots.txt<\/code>, plac\u00e9 dans le r\u00e9pertoire racine du site.<\/p><p>Alternativement, pour agir au niveau d'une page sp\u00e9cifique, utiliser dans celle-ci la balise <code>meta name=\"robots\" content=\"attribut1, attribut2\" <\/code> : <\/p><ul><li>attribut1 peut prendre les valeurs <code>index<\/code> (indexer cette page) ou <code>noindex<\/code> (ne pas indexer cette page) ;<\/li><li>attribut2 peut prendre les valeurs <code>follow<\/code> (suivre les liens contenus dans cette page) ou <code>nofollow<\/code> (ne pas suivre les liens).<\/li><\/ul><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/meta\"><code>meta<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Serveur et performances"
+  },
+  "189": {
+    "objectif": "<ul><li>Faciliter la consultation sur les terminaux mobiles. <\/li><li>Am\u00e9liorer le positionnement dans les outils d\u2019indexation qui prennent ce crit\u00e8re en compte.<\/li><\/ul>",
+    "titre": "Le site propose un ou plusieurs m\u00e9canismes d\u00e9di\u00e9s \u00e0 l'adaptation aux terminaux mobiles.",
+    "controle": "<div>Comparer l\u2019affichage de la page sur diff\u00e9rentes tailles d\u2019\u00e9cran (desktop, tablettes, smartphone, etc.) et v\u00e9rifier que le rendu s\u2019adapte \u00e0 celles-ci.<\/div>",
+    "solution": "<p>Soit recourir aux media queries ou \u00e0 l\u2019adaptative design pour adresser au navigateur des r\u00e8gles de style adapt\u00e9es selon la taille de l\u2019\u00e9cran.<\/p><p>Soit fournir une version mobile d\u00e9di\u00e9e.&nbsp;<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Mobile",
+    "theme": "Pr\u00e9sentation"
+  },
+  "162": {
+    "objectif": "<ul><li>Faciliter la navigation au clavier.<\/li><li>Permettre aux utilisateurs de clavier de se doter de rep\u00e8res de navigation.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "La navigation au clavier s'effectue dans un ordre pr\u00e9visible.",
+    "controle": "<p>Ce contr\u00f4le s'effectue sur l'ensemble des \u00e9l\u00e9ments interactifs, prioritairement \u00e0 l'aide de la touche tabulation et, dans l'interface de certains widgets, \u00e0 l'aide de touches de d\u00e9placement sp\u00e9cifiques (touches fl\u00e8ches) : <\/p><ul><li>Naviguer au clavier puis v\u00e9rifier que l'ordre de passage d'un \u00e9l\u00e9ment \u00e0 un autre est identique entre les diff\u00e9rentes pages ; <\/li><li>V\u00e9rifier que l'ordre de passage est adapt\u00e9 au contenu concern\u00e9. Par exemple, la navigation clavier dans une pseudo-popup javascript commence par son bouton de fermeture<\/li><li>Contr\u00f4ler que l'ordre est pr\u00e9visible par l'utilisateur : sauf exceptions, cet ordre doit \u00eatre aussi proche que possible de l'ordre de lecture, par exemple haut-bas et gauche-droite pour les \u00e9critures lisibles de gauche \u00e0 droite.<\/li><\/ul>",
+    "solution": "<p>Organiser les contenus dans l'ordre lin\u00e9aire du code HTML de mani\u00e8re \u00e0 regrouper et ordonner logiquement les liens et les contr\u00f4les de formulaires qui apparaissent les uns \u00e0 la suite des autres \u00e0 l'affichage et ordonner logiquement les principaux blocs de navigation et de contenu composant la page.<\/p><p>Le cas \u00e9ch\u00e9ant, et en dernier ressort, recourir \u00e0 l'attribut HTML <code>tabindex<\/code> pour cr\u00e9er un ordre de navigation au clavier sp\u00e9cifique, diff\u00e9rent de l'ordre par d\u00e9faut issu de l'organisation des liens et des contr\u00f4les de formulaires dans le code.<\/p><p>G\u00e9rer sp\u00e9cifiquement l'ordre de navigation au clavier en cas de fen\u00eatre modale ou de widget.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Navigation"
+  },
+  "163": {
+    "objectif": "<ul><li>Fournir aux utilisateurs une solution de navigation alternative et d'acc\u00e8s rapide aux contenus li\u00e9s \u00e0 des mots-cl\u00e9s retenus par ceux-ci.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site. <\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "Le site propose un moteur de recherche interne.",
+    "controle": "<p>Dans toutes les pages \u00e9valu\u00e9es ou bien en contr\u00f4lant les templates du site (sous r\u00e9serve de tenir compte de pages d\u00e9pendant de solutions tierces) : <\/p><ul><li>V\u00e9rifier manuellement la pr\u00e9sence syst\u00e9matique d'un moteur de recherche.<\/li><\/ul>",
+    "solution": "<p>Proposer un formulaire et une fonctionnalit\u00e9 de recherche simple, qu'il s'agisse d'une solution interne ou de l'incorporation d'une solution externe.<\/p>",
+    "etape": "Conception",
+    "tag": "Ecodesign",
+    "theme": "Navigation"
+  },
+  "187": {
+    "objectif": "<ul><li>Permettre un copier-coller des contenus ind\u00e9pendamment de la mise en forme enti\u00e8rement en majuscules. <\/li><li>Faciliter l'adaptation de la mise en forme pour les utilisateurs ayant des difficult\u00e9s de lecture des textes enti\u00e8rement en majuscules.<\/li><\/ul>",
+    "titre": "Les mises en majuscules \u00e0 des fins d\u00e9coratives sont effectu\u00e9es \u00e0 l'aide des styles",
+    "controle": "<p>Pour tous les contenus mis enti\u00e8rement en majuscules&nbsp;: <\/p><ul><li>D\u00e9sactiver le support des styles du site dans le navigateur ;<\/li><li>Identifier les textes qui apparaissent en majuscules lorsque les styles sont d\u00e9sactiv\u00e9s ;<\/li><li>V\u00e9rifier que l'usage des majuscules respecte le cadre des conventions typographiques de la langue utilis\u00e9e. Par exemple&nbsp;: les sigles ou noms d'auteurs dans une bibliographie peuvent \u00eatre en majuscules.<\/li><\/ul>",
+    "solution": "<p>Saisir les contenus HTML en respectant l'usage typographique pour les majuscules (d\u00e9but de phrase, noms propres, etc.).<\/p><p>Utiliser la propri\u00e9t\u00e9 CSS <code>text-transform<\/code> avec la valeur <code>uppercase<\/code> pour g\u00e9rer les mises en majuscules d\u00e9coratives.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Pr\u00e9sentation"
+  },
+  "179": {
+    "objectif": "<ul><li>Permettre la compr\u00e9hension de l'information sans l'acc\u00e8s au support visuel ou lorsque le rendu de celui-ci est alt\u00e9r\u00e9.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Un contenu n'est pas d\u00e9sign\u00e9 uniquement par sa forme ou par sa position \u00e0 l'\u00e9cran.",
+    "controle": "<p>Cette v\u00e9rification concerne une large vari\u00e9t\u00e9 de cas potentiels, par exemple dans une page d'aide o\u00f9 il est fait r\u00e9f\u00e9rence \u00e0 des captures d'\u00e9cran ou encore dans le fil d'un texte o\u00f9 il est fait r\u00e9f\u00e9rence \u00e0 une illustration ou \u00e0 un tableau. Pour chaque contenu o\u00f9 il est n\u00e9cessaire d'avoir acc\u00e8s \u00e0 l'affichage graphique de la page afin de retrouver le contenu ainsi d\u00e9sign\u00e9&nbsp;: <\/p><ul><li>S'assurer que les r\u00e9f\u00e9rences \u00e0 la forme ou \u00e0 la position \u00e0 l'\u00e9cran d'un contenu ne sont pas le seul moyen d'identifier celui-ci. <\/li><\/ul><p>Les moyens compl\u00e9mentaires peuvent \u00eatre la r\u00e9f\u00e9rence explicite \u00e0 un identifiant (exemple \u00ab Voir la figure n\u00b01 \u00bb), un lien vers une ancre, etc.<\/p>",
+    "solution": "<p>Lorsqu'un contenu est d\u00e9sign\u00e9 par une r\u00e9f\u00e9rence \u00e0 sa forme ou \u00e0 sa position \u00e0 l'\u00e9cran, l'information doit \u00eatre \u00e9galement disponible par un autre moyen (balisage, mention textuelle, etc.).<\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Pr\u00e9sentation"
+  },
+  "206": {
+    "objectif": "<ul><li>R\u00e9duire les risques d\u2019utilisation trompeuse du contenu.<\/li><\/ul>",
+    "titre": "Le serveur envoie les informations indiquant les domaines autoris\u00e9s \u00e0 int\u00e9grer ses pages dans des cadres.",
+    "controle": "<div>V\u00e9rifier \u00e0 l\u2019aide d\u2019un outil d\u2019inspection des en-t\u00eates HTTP la pr\u00e9sence de X-Frame-Options avec la valeur deny ou sameorigin.<\/div>",
+    "solution": "<div>Configurer le serveur pour l\u2019envoi de l\u2019en-t\u00eate HTTP X-Frame-Options avec la valeur deny (pour interdire toute inclusion de la page dans un cadre, quel qu\u2019en soit le site) ou sameorigin (pour limiter les inclusions \u00e0 des cadres du m\u00eame nom de domaine que la page). La valeur allow-from (pour limiter les inclusions \u00e0 des URL sp\u00e9cifiques) ne b\u00e9n\u00e9ficie pas, en revanche, \u00e0 l\u2019heure o\u00f9 nous \u00e9crivons ces lignes, d\u2019un support suffisant.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "103": {
+    "objectif": "<ul><li>Informer les utilisateurs sur les d\u00e9lais chiffr\u00e9s de r\u00e9ponse.<\/li><li> Limiter les risques de relance de la part des utilisateurs. <\/li><li>Rassurer sur la capacit\u00e9 \u00e0 prendre en compte les demandes.<\/li><\/ul>",
+    "titre": "Les d\u00e9lais de r\u00e9ponse aux demandes d'information sont indiqu\u00e9s.",
+    "controle": "<p>Dans toute page comportant un formulaire de contact, v\u00e9rifier qu'une indication chiffr\u00e9e de d\u00e9lai de r\u00e9ponse est pr\u00e9sente.<\/p><p>Ni le d\u00e9lai en lui-m\u00eame ni son respect effectif ne font l'objet d'une validation&nbsp;: seule la pr\u00e9sence de sa mention est contr\u00f4l\u00e9e.<\/p>",
+    "solution": "<p>Indiquer le d\u00e9lai chiffr\u00e9 de r\u00e9ponse pr\u00e9vu pour chaque formulaire de demande d'information.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "2": {
+    "objectif": "<ul><li>Informer les utilisateurs sur les conditions sous lesquelles sont publi\u00e9s les contenus. <\/li><li>Informer les utilisateurs sur les conditions de copie et de r\u00e9utilisation.<\/li><\/ul>",
+    "titre": "Les informations relatives aux droits de copie et de r\u00e9utilisation sont disponibles depuis toutes les pages.",
+    "controle": "<p>Dans chacune des pages \u00e9valu\u00e9es, v\u00e9rifier la pr\u00e9sence de la mention compl\u00e8te des droits de copie et de r\u00e9utilisation ou d'un lien donnant directement acc\u00e8s \u00e0 la mention des droits de copie et de r\u00e9utilisation.<\/p>",
+    "solution": "<p>Indiquer les droits de copie et de r\u00e9utilisation des divers \u00e9l\u00e9ments du site sur chaque page ou via un hyperlien pointant vers une page sp\u00e9cifique.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Contenus"
+  },
+  "133": {
+    "objectif": "<ul><li>Acc\u00e9l\u00e9rer l'apprentissage du fonctionnement de l'interface. <\/li><li>Am\u00e9liorer l'identification des liens et de leurs fonctions respectives.<\/li><\/ul>",
+    "titre": "Les liens de m\u00eame nature ont des couleurs, des formes et des comportements identiques sur toutes les pages.",
+    "controle": "<p>Dans l'ensemble du site&nbsp;:<\/p><ul><li>V\u00e9rifier que les liens de m\u00eame nature (menus, liens au fil du texte, autres groupes de liens tels qu'un nuage de tags, etc.) ont des pr\u00e9sentations visuellement similaires dans l'ensemble du site.<\/li><\/ul>",
+    "solution": "<p>Appliquer des propri\u00e9t\u00e9s communes de style, de couleur, de graisse, de casse, de soulignement aux ensembles de liens de m\u00eame nature.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Liens"
+  },
+  "158": {
+    "objectif": "<ul><li>Limiter le temps d\u2019apprentissage de l\u2019interface. <\/li><li>Acc\u00e9l\u00e9rer l\u2019acc\u00e8s aux contenus. <\/li><li>Faciliter la navigation.<\/li><\/ul>",
+    "titre": "Les m\u00e9canismes de fermetures de fen\u00eatres sont affich\u00e9s aux m\u00eames emplacements sur toutes les pages.",
+    "controle": "S\u2019assurer visuellement que l\u2019emplacement de tous les boutons de fermeture est identique \u00e0 travers le site.",
+    "solution": "Opter pour un positionnement syst\u00e9matique des boutons de fermeture dans un m\u00eame emplacement, pour toutes les fen\u00eatres modales et similaires (par exemple, en haut \u00e0 droite de la fen\u00eatre).",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Navigation"
+  },
+  "183": {
+    "objectif": "<ul><li>Permettre aux utilisateurs plac\u00e9s dans des contextes o\u00f9 les styles ne sont pas restitu\u00e9s (navigateur texte, lecteur d'\u00e9cran, navigateur avec styles d\u00e9sactiv\u00e9s) d\u2019acc\u00e9der \u00e0 l\u2019information pr\u00e9sente sous forme de contenus g\u00e9n\u00e9r\u00e9s en CSS (images d\u2019arri\u00e8re-plan notamment). <\/li><li>Permettre aux robots d'exploiter l'information v\u00e9hicul\u00e9e par les styles CSS (r\u00e9f\u00e9rencement, indexation, traduction automatique des alternatives).<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Les contenus g\u00e9n\u00e9r\u00e9s via les styles sont dot\u00e9s d'une alternative appropri\u00e9e.",
+    "controle": "<div>Examiner directement le code CSS et comparer visuellement l\u2019affichage normal de la page avec son rendu apr\u00e8s d\u00e9sactivation des images d\u2019arri\u00e8re-plan. Pour chaque page :<\/div><div><ul><li>Afficher les feuilles de styles gr\u00e2ce \u00e0 une barre d\u2019outils d\u00e9di\u00e9e et v\u00e9rifier que les propri\u00e9t\u00e9s et \u00e9l\u00e9ments cit\u00e9s dans le paragraphe \u00ab Solution technique \u00bb sont absents des CSS ou ne sont pas utilis\u00e9s pour produire une information par ailleurs absente du code HTML.<\/li><li>D\u00e9sactiver les images d\u2019arri\u00e8re-plan CSS avec une barre d\u2019outils d\u00e9di\u00e9e.<\/li><li>Contr\u00f4ler l\u2019absence de perte d\u2019information, en comparant l\u2019affichage avec et sans images d\u2019arri\u00e8re-plan.<\/li><\/ul><\/div>",
+    "solution": "<p>Fournir un contenu masqu\u00e9 \u00e0 l\u2019affichage via CSS :<\/p><ul><li>pour chaque information port\u00e9e par les propri\u00e9t\u00e9s CSS background-image ou content ;<\/li><li>pour chaque information affich\u00e9e via un pseudo-\u00e9l\u00e9ment CSS :before ou :after ;<\/li><li>et plus g\u00e9n\u00e9ralement, pour chaque information absente par ailleurs de la page et dont la restitution d\u00e9pend du support des styles. <\/li><\/ul><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/background-image\"><code>background-image<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/content\"><code>content<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/::before\"><code>before<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/::after\"><code>after<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Pr\u00e9sentation"
+  },
+  "66": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur d'obtenir une confirmation de sa demande en-dehors du contexte de la navigation sur le site. <\/li><li>\u00c9viter au service client de recevoir plusieurs demandes concernant une m\u00eame r\u00e9clamation.<\/li><\/ul>",
+    "titre": "Chaque r\u00e9clamation fait l'objet d'un accus\u00e9 de r\u00e9ception.",
+    "controle": "<p>Via le canal de contact de r\u00e9clamation indiqu\u00e9&nbsp;:<\/p><ul><li>Adresser une r\u00e9clamation fictive ;<\/li><li>Contr\u00f4ler l'envoi par le service d'un accus\u00e9 de r\u00e9ception.<\/li><\/ul><p><br><\/p>",
+    "solution": "<p>D\u00e9finir une proc\u00e9dure de gestion de l'envoi d'un e-mail accusant r\u00e9ception d'une r\u00e9clamation.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "226": {
+    "objectif": "<ul><li>Recourir \u00e0 un jeu de caract\u00e8res international. <\/li><li>Pr\u00e9venir les d\u00e9fauts d\u2019affichage. <\/li><li>Faciliter la manipulation des contenus par les utilisateurs et les d\u00e9veloppeurs.<\/li><\/ul>",
+    "titre": "Le codage de caract\u00e8res utilis\u00e9 est UTF-8.",
+    "controle": "<p>Cette v\u00e9rification s\u2019effectue en trois temps. Pour chaque page examin\u00e9e :<\/p><ul><li>V\u00e9rifier l\u2019indication du jeu de caract\u00e8res donn\u00e9e par l\u2019en-t\u00eate HTTP content-type envoy\u00e9e par le serveur, \u00e0 l'aide d'un outil d\u00e9di\u00e9.<\/li><li>V\u00e9rifier, le cas \u00e9ch\u00e9ant, la conformit\u00e9 \u00e0 cet en-t\u00eate de l\u2019\u00e9l\u00e9ment meta http-equiv=\"Content-Type\" dans le code HTML des pages.<\/li><li>V\u00e9rifier que le contenu des pages est effectivement encod\u00e9 en UTF-8 (absence de caract\u00e8res inattendus ou erron\u00e9s), par exemple en soumettant la page \u00e0 une validation HTML aupr\u00e8s du validateur du W3C (validator.w3.org).<\/li><\/ul><p>L\u2019outil Internationalization Checker du W3C (validator.w3.org\/i18n-checker\/) permet de combiner ces trois \u00e9tapes.<\/p>",
+    "solution": "<p>Configurer le serveur et les bases de donn\u00e9es de mani\u00e8re \u00e0 utiliser UTF-8.<\/p><p>Choisir des outils (logiciels de d\u00e9veloppement, frameworks, CMS, outils de production de contenu) compatibles avec UTF-8.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Structure et code"
+  },
+  "40": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur de conna\u00eetre le d\u00e9tail du montant de sa commande. <\/li><li>Lever un frein \u00e0 la validation d'une commande.<\/li><\/ul>",
+    "titre": "Le sous-total d\u00e9taill\u00e9 est indiqu\u00e9 avant la validation d\u00e9finitive de la commande.",
+    "controle": "<p>Dans un site de vente en ligne : <\/p><ul><li>Entreprendre une commande de test ;<\/li><li>V\u00e9rifier la pr\u00e9sence du sous-total d\u00e9taill\u00e9 (quantit\u00e9s, montants, frais, assurances, etc.) avant la validation. <\/li><\/ul>",
+    "solution": "<p>Indiquer sur le formulaire r\u00e9capitulatif de la commande et avant validation, le sous-total d\u00e9taill\u00e9 du co\u00fbt du produit ou service command\u00e9.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "207": {
+    "objectif": "<ul><li>R\u00e9duire les risques d\u2019ex\u00e9cution ou d\u2019affichage d\u2019un contenu non d\u00e9sirable ou d\u2019une source non autoris\u00e9e.<\/li><\/ul>",
+    "titre": "Le site propose un m\u00e9canisme de s\u00e9curit\u00e9 permettant de restreindre l'origine des contenus.",
+    "controle": "<div>V\u00e9rifier, \u00e0 l\u2019aide d\u2019un outil d\u2019inspection des en-t\u00eates HTTP, la pr\u00e9sence de l\u2019en-t\u00eate Content-Security-Policy.<\/div>",
+    "solution": "<div>Activer l\u2019en-t\u00eate HTTP Content-Security-Policy avec les directives CSP 1 appropri\u00e9es :<\/div><div><ul><li>img-src pour les images ;<\/li><li>script-src pour le JavaScript ;<\/li><li>style-src pour les styles CSS ;<\/li><li>font-src pour les webfonts ;<\/li><li>etc.<\/li><\/ul><\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "113": {
+    "objectif": "<ul><li>Permettre aux utilisateurs plac\u00e9s dans des contextes o\u00f9 les images ne sont pas perceptibles (navigateur texte, lecteur d'\u00e9cran, navigateur avec images d\u00e9sactiv\u00e9es) de comprendre le sens des images qu'ils ne peuvent voir. <\/li><li>Permettre aux robots d'exploiter l'information v\u00e9hicul\u00e9e par les images (r\u00e9f\u00e9rencement, indexation, traduction automatique des alternatives d\u2019images-texte).<\/li><li>Permettre l'affichage d'un texte pendant le chargement des images.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><li> Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Chaque image porteuse d'information est dot\u00e9e d'une alternative textuelle appropri\u00e9e.",
+    "controle": "<div><ul><li>V\u00e9rifier que l\u2019attribut alt de chaque \u00e9l\u00e9ment img concern\u00e9 reproduit l\u2019information port\u00e9e par l\u2019image.<\/li><li>V\u00e9rifier que l\u2019attribut alt de chaque \u00e9l\u00e9ment area concern\u00e9 reproduit l\u2019information port\u00e9e par l\u2019image.<\/li><li>V\u00e9rifier que le contenu de chaque \u00e9l\u00e9ment object concern\u00e9 reproduit l\u2019information port\u00e9e par l\u2019image.<\/li><li>V\u00e9rifier que le contenu de chaque \u00e9l\u00e9ment canvas concern\u00e9 reproduit l\u2019information port\u00e9e par l\u2019image.<\/li><li>V\u00e9rifier que chaque \u00e9l\u00e9ment svg concern\u00e9 est associ\u00e9 \u00e0 un libell\u00e9 textuel reproduisant l\u2019information port\u00e9e par l\u2019image par le biais de son attribut aria-label ou de la balise desc.<\/li><li>V\u00e9rifier la pr\u00e9sence et la pertinence de la description \u00e9tendue le cas \u00e9ch\u00e9ant.<br><\/li><\/ul><\/div>",
+    "solution": "<div><ul><li>Donner \u00e0 chaque \u00e9l\u00e9ment img concern\u00e9 un attribut alt reproduisant l\u2019information.<\/li><li>Donner \u00e0 chaque \u00e9l\u00e9ment area concern\u00e9 un attribut alt reproduisant l\u2019information.<\/li><li>Reproduire l\u2019information dans le contenu de chaque \u00e9l\u00e9ment object concern\u00e9.<\/li><li>Reproduire l\u2019information dans le contenu de chaque \u00e9l\u00e9ment canvas concern\u00e9.<\/li><li>Reproduire l\u2019information dans un libell\u00e9 textuel associ\u00e9 \u00e0 chaque \u00e9l\u00e9ment svg concern\u00e9 par le biais de son attribut aria-label ou de la balise desc.<\/li><\/ul><\/div><div>Dans le cas d\u2019une image complexe qui ne peut \u00eatre r\u00e9sum\u00e9e de mani\u00e8re concise dans une alternative textuelle, le d\u00e9tail de l\u2019information doit \u00eatre apport\u00e9 en compl\u00e9ment \u00e0 l\u2019aide d\u2019une description \u00e9tendue :<\/div><div><ul><li>soit via l\u2019attribut longdesc de l\u2019image indiquant l\u2019URL de la description,<\/li><li>soit via un lien adjacent \u00e0 l\u2019image jouant le m\u00eame r\u00f4le,<\/li><li>soit dans le contenu de la page, dans le contexte imm\u00e9diat de l\u2019image. Dans ce dernier cas, l\u2019alternative peut signaler la pr\u00e9sence de cette description et y renvoyer.<\/li><\/ul><\/div><div><br><\/div>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Images et m\u00e9dias"
+  },
+  "228": {
+    "objectif": "<ul><li>Permettre l\u2019identification des listes par les navigateurs et les aides techniques et donc leur restitution approprie\u0301e afin de faciliter leur compre\u0301hension par les utilisateurs.<\/li><li>Ame\u0301liorer la se\u0301mantique du contenu des pages et sa re\u0301utilisabilite\u0301.<\/li><\/ul>",
+    "titre": "Les \u00e9l\u00e9ments visuellement pr\u00e9sent\u00e9s sous forme de liste sont balis\u00e9s de fa\u00e7on appropri\u00e9e dans le code source.",
+    "controle": "<p>Pour chaque page contenant une liste :<\/p><ul><li>Contr\u00f4ler le code source des contenus pr\u00e9sent\u00e9s sous forme de liste (caract\u00e9ris\u00e9s par la pr\u00e9sence de retours \u00e0 la ligne et de marqueurs de listes tels que des puces ou des num\u00e9ros) \u00e0 l\u2019aide d\u2019un inspecteur de code.<\/li><li>V\u00e9rifier si le code source de ces listes apparentes comporte bien les \u00e9l\u00e9ments HTML correspondant au type de liste concern\u00e9 :<code> ul, li<\/code> pour une liste non ordonn\u00e9e (liste \u00e0 puces), <code>ol, li<\/code> pour une liste ordonn\u00e9e (liste num\u00e9rot\u00e9e) et <code>dl, dt, dd<\/code>npour une liste de d\u00e9finitions ou, \u00e0 d\u00e9faut, les r\u00f4les ARIA <code>list<\/code> et <code>listitem<\/code>.<\/li><\/ul>",
+    "solution": "<p>Soit utiliser les \u00e9l\u00e9ments HTML appropri\u00e9s :<\/p><ul><li><code>ul, li<\/code> pour les listes non ordonn\u00e9es ;<\/li><li><code>ol, li<\/code>pour les listes ordonn\u00e9es ;<\/li><li><code>dl, dt, dd<\/code> pour les listes de d\u00e9finitions ou de descriptions.<\/li><\/ul><p>Soit recourir aux attributs ARIA permettant de donner la s\u00e9mantique d\u2019une liste non ordonn\u00e9e ou ordonn\u00e9e \u00e0 un contenu balis\u00e9 de mani\u00e8re plus g\u00e9n\u00e9rique :<\/p><ul><li>donner au conteneur de la liste un attribut <code>role=\"list\"<\/code> ;<\/li><li>donner \u00e0 chaque \u00e9l\u00e9ment de la liste un attribut <code>role=\"listitem\"<\/code> ;<\/li><li>(il n\u2019existe pas d\u2019\u00e9quivalent aux listes de d\u00e9finitions via un r\u00f4le ARIA).&nbsp;<\/li><\/ul><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/ul\"><code>ul<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/ol\"><code>ol<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/dl\"><code>dl<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Structure et code"
+  },
+  "101": {
+    "objectif": "<ul><li>Fournir aux utilisateurs une indication v\u00e9rifiable de l'existence officielle de la structure qui propose les contenus ou le service.<\/li><\/ul>",
+    "titre": "Le num\u00e9ro d'immatriculation d\u00e9livr\u00e9 aux soci\u00e9t\u00e9s ou organisations au terme des proc\u00e9dures l\u00e9gales d'enregistrement en vigueur dans leur pays est indiqu\u00e9.",
+    "controle": "<p>Sur la page d'accueil, ou sur la page des mentions l\u00e9gales, la page d'\u00e0 propos, de contact, ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente&nbsp;: <\/p><ul><li>V\u00e9rifier que le num\u00e9ro d'immatriculation d\u00e9livr\u00e9 \u00e0 la soci\u00e9t\u00e9 ou association au terme des proc\u00e9dures l\u00e9gales d'enregistrement en vigueur dans son pays est indiqu\u00e9.<\/li><\/ul>",
+    "solution": "<p>Indiquer le num\u00e9ro d'immatriculation d\u00e9livr\u00e9 \u00e0 la soci\u00e9t\u00e9 ou association au terme des proc\u00e9dures l\u00e9gales d'enregistrement en vigueur dans son pays. Cette bonne pratique ne s'applique pas aux personnes physiques, sauf si elles sont constitu\u00e9es en entit\u00e9 juridique (freelances, auto-entrepreneurs, etc.).<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "54": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur d\u2019anticiper les conditions et les moyens d\u2019utilisation du service. <\/li><li>Limiter les risques de r\u00e9clamations.<\/li><\/ul>",
+    "titre": "Les mat\u00e9riels et logiciels n\u00e9cessaires au fonctionnement du service sont indiqu\u00e9s avant la validation de la commande.",
+    "controle": "<div>Contr\u00f4ler manuellement que les informations n\u00e9cessaires sont pr\u00e9sentes dans la page produit, ou fournies \u00e0 l\u2019aide d\u2019un lien \u00e0 partir de celle-ci, ou via une page de support disponible avant la finalisation de la commande.<\/div>",
+    "solution": "<div>Fournir les informations n\u00e9cessaires dans la page produit, ou \u00e0 l\u2019aide d\u2019un lien \u00e0 partir de celle-ci, ou via une page de support disponible avant la finalisation de la commande.<\/div>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "232": {
+    "objectif": "<ul><li>Laisser \u00e0 l\u2019utilisateur le contr\u00f4le de son navigateur et de son interface de consultation<\/li><li>\u00c9viter des coupures ou des pertes d\u2019information en cours de lecture, notamment pour les utilisateurs \u00e9quip\u00e9s de lecteurs d\u2019\u00e9cran qu\u2019un rafra\u00eechissement ou une redirection temporis\u00e9e interromprait lors de la consultation.<\/li><li>Ne pas p\u00e9naliser la consultation du contenu en mobilit\u00e9 lorsque la qualit\u00e9 du r\u00e9seau est variable sur une courte \u00e9chelle de temps.<\/li><li>Permettre \u00e0 l\u2019utilisateur d\u2019\u00e9viter un surcro\u00eet non d\u00e9sir\u00e9 de co\u00fbt d\u2019utilisation des donn\u00e9es mobiles.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "Le site n'impose pas de redirection ou de rafra\u00eechissement automatique c\u00f4t\u00e9 client.",
+    "controle": "<p>Pour chaque page examin\u00e9e :<\/p><ul><li>V\u00e9rifier, \u00e0 l\u2019aide d\u2019un inspecteur de code, l\u2019absence de l\u2019\u00e9l\u00e9ment <code>meta http-equiv=\"refresh\"<\/code>.<\/li><li>V\u00e9rifier que la consultation de la page ne r\u00e9v\u00e8le aucun rafra\u00eechissement automatique ni aucune redirection c\u00f4t\u00e9 client qui ne soient d\u00e9sactivables auparavant via l\u2019interface du site (sans devoir faire appel \u00e0 une \u00e9ventuelle fonctionnalit\u00e9 propre au navigateur).<\/li><\/ul><p>La d\u00e9tection de l\u2019\u00e9l\u00e9ment <code>meta http-equiv=\"refresh\"<\/code> est ais\u00e9e en observant le code source de la page. En revanche, la diversit\u00e9 des dispositifs JavaScript de rafra\u00eechissement automatique impose de proc\u00e9der \u00e9galement \u00e0 un contr\u00f4le via la consultation de la page dans le navigateur. Ce contr\u00f4le peut \u00eatre facilit\u00e9 si le navigateur offre une option interdisant certains de ces rafra\u00eechissements et affiche alors un bandeau d\u2019alerte. Mais seule l\u2019observation de la page permet une d\u00e9tection \u00e0 coup s\u00fbr.<\/p>",
+    "solution": "<p>Ne pas utiliser l\u2019\u00e9l\u00e9ment <code>meta http-equiv=\"refresh\"<\/code>.<\/p><p>Fournir \u00e0 l\u2019utilisateur un moyen de d\u00e9sactiver les \u00e9ventuels rafra\u00eechissements automatiques et les redirections cr\u00e9\u00e9es :<\/p><ul><li>en JavaScript ;<\/li><li>via un \u00e9l\u00e9ment <code>object, embed ou applet<\/code> ;<\/li><li>ou via un <code>en-t\u00eate HTTP refresh<\/code>.<\/li><\/ul><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/meta\"><code>meta<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Structure et code"
+  },
+  "51": {
+    "objectif": "<ul><li>Informer les utilisateurs du co\u00fbt en cas de retour des produits. <\/li><li>Rassurer les utilisateurs en vue de leur achat.<\/li><li>Augmenter le taux de transformation.<\/li><\/ul>",
+    "titre": "La charge des frais de retour est indiqu\u00e9e avant la validation d\u00e9finitive de la commande.",
+    "controle": "<p>V\u00e9rifier que l'utilisateur est inform\u00e9 dans une page disponible avant validation d\u00e9finitive de la commande si les frais de retour sont \u00e0 la charge du vendeur ou \u00e0 celle de l'acheteur (r\u00e9capitulatif de la commande avant validation, page des conditions g\u00e9n\u00e9rales de vente, etc.)<\/p>",
+    "solution": "<p>Indiquer dans une page disponible avant validation d\u00e9finitive de la commande si les frais de retour sont \u00e0 la charge du vendeur ou \u00e0 celle de l'acheteur (r\u00e9capitulatif de la commande avant validation, page des conditions g\u00e9n\u00e9rales de vente, etc.)<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "31": {
+    "objectif": "<ul><li>Laisser \u00e0 l'utilisateur le contr\u00f4le de sa commande. <\/li><li>Ne pas compromettre la relation de confiance avec l'utilisateur. <\/li><li>\u00c9viter toute forme de vente forc\u00e9e.<\/li><\/ul>",
+    "titre": "Aucun produit ni service annexe n'est ajout\u00e9 au panier de commande sans que cette action soit d\u00e9clench\u00e9e par l'utilisateur.",
+    "controle": "<p>Dans un site de e-commerce, dans la page affichant le panier, v\u00e9rifier qu'une commande finalis\u00e9e ne donne pas lieu \u00e0 des ajouts au panier de produits ou services non s\u00e9lectionn\u00e9s. <\/p>",
+    "solution": "<p>N'inclure dans le panier de l'utilisateur que des produits ou services qu'il a explicitement s\u00e9lectionn\u00e9s.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "148": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de commencer imm\u00e9diatement leur navigation sur la ressource qu'ils ont demand\u00e9e.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Si le site n'est pas r\u00e9serv\u00e9 \u00e0 un public sp\u00e9cifique, l'acc\u00e8s aux contenus est imm\u00e9diat.",
+    "controle": "<p>Dans le site examin\u00e9&nbsp;:<\/p><ul><li>Acc\u00e9der successivement \u00e0 la page d'accueil du site et \u00e0 une page interne via une adresse directement saisie dans le navigateur ou depuis un site tiers ;<\/li><li>V\u00e9rifier alors que l'acc\u00e8s au contenu est imm\u00e9diat, sans avoir \u00e0 \u00ab&nbsp;passer&nbsp;\u00bb au pr\u00e9alable un affichage temporaire d'avertissement (sauf en cas de contenu r\u00e9serv\u00e9 \u00e0 un public sp\u00e9cifique comme dans le cas d'un public majeur) ou bien un message \u00e0 caract\u00e8re publicitaire ou informatif.<\/li><\/ul>",
+    "solution": "<p>Ne pas imposer d'\u00e9l\u00e9ment diff\u00e9rant l'acc\u00e8s au contenu sauf en cas de contenu r\u00e9serv\u00e9 \u00e0 un public sp\u00e9cifique.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Navigation"
+  },
+  "239": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d\u2019acc\u00e9der \u00e0 des tableaux exploitables par leur agent utilisateur et restitu\u00e9s de mani\u00e8re compr\u00e9hensible dans tous les cas.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Les tableaux de donn\u00e9es ne sont pas remplac\u00e9s par des images.",
+    "controle": "<div>S\u2019assurer qu\u2019aucun tableau de donn\u00e9es n\u2019est g\u00e9r\u00e9 sous forme d\u2019image.<\/div>",
+    "solution": "<p>Utiliser syst\u00e9matiquement l\u2019\u00e9l\u00e9ment <code>table<\/code> et les \u00e9l\u00e9ments associ\u00e9s <code>tr, td, th, caption<\/code> pour baliser les tableaux de donn\u00e9es, et non des images reproduisant le tableau.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/table\"><code>table<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Structure et code"
+  },
+  "97": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier imm\u00e9diatement le site dans les onglets, les favoris, dans la fen\u00eatre du navigateur ou encore dans les lecteurs d'\u00e9cran. <\/li><li>Am\u00e9liorer le r\u00e9f\u00e9rencement du site et sa pr\u00e9sentation dans les moteurs de recherche.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Le titre de chaque page permet d'identifier le site.",
+    "controle": "<p>Pour chaque page du site, v\u00e9rifier que le nom du site est pr\u00e9sent dans le titre (\u00e9l\u00e9ment title) de page. <\/p><p>Le contr\u00f4le peut \u00eatre effectu\u00e9 de mani\u00e8re exhaustive si l'on dispose d'un outil permettant de dresser la liste compl\u00e8te des titres de toutes les pages (c'est le cas, par exemple, de Xenu's Link Sleuth). Il peut \u00e9galement \u00eatre effectu\u00e9 \u00e0 partir d'une v\u00e9rification des templates utilis\u00e9s par le CMS ou d'un \u00e9chantillon de pages-types repr\u00e9sentatives de ceux-ci. Dans tous les cas, on veillera \u00e0 prendre en compte tout particuli\u00e8rement les pages d\u00e9pendant de services tiers, o\u00f9 la bonne pratique risque davantage de ne pas avoir \u00e9t\u00e9 prise en compte.<\/p>",
+    "solution": "<p>R\u00e9diger le contenu de l'\u00e9l\u00e9ment title de chaque page de mani\u00e8re \u00e0 y indiquer le nom du site.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Identification et contact"
+  },
+  "233": {
+    "objectif": "<ul><li>Permettre le r\u00e9f\u00e9rencement des contenus des documents PDF. <\/li><li>Faciliter la manipulation et la r\u00e9utilisation du contenu des documents PDF (traduction, copier coller\u2026). <\/li><li>Garantir la lisibilit\u00e9 des contenus des documents PDF.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "Le texte des documents PDF internes est s\u00e9lectionnable.",
+    "controle": "<p>Pour chaque document PDF interne publi\u00e9 dans le site&nbsp;: <\/p><ul><li>Afficher ou ouvrir le document <\/li><li>V\u00e9rifier que le texte affich\u00e9 est imm\u00e9diatement s\u00e9lectionnable \u00e0 l'\u00e9cran ou bien qu'il peut \u00eatre consult\u00e9 dans un lecteur d'\u00e9cran. <\/li><\/ul>",
+    "solution": "<p>Ne pas diffuser de PDF issus de la num\u00e9risation de documents initiaux mais uniquement des documents convertis au format num\u00e9rique (par OCR le cas \u00e9ch\u00e9ant).<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Structure et code"
+  },
+  "21": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de ne conserver ou m\u00e9moriser des identifiants uniques.<\/li><li>Acc\u00e9l\u00e9rer la connexion et am\u00e9liorer l\u2019exp\u00e9rience utilisateur.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "La connexion \u00e0 tous les services propos\u00e9s est possible avec les m\u00eames identifiants.",
+    "controle": "Si le site propose plusieurs services n\u00e9cessitant chacun un acc\u00e8s authentifi\u00e9, v\u00e9rifier que le m\u00eame jeu d'identifiant\/mot de passe et le cas \u00e9ch\u00e9ant les m\u00eames moyens d'authentification \u00e0 double facteur ou renforc\u00e9e peuvent \u00eatre utilis\u00e9s pour tous ces services.",
+    "solution": "Si le site propose plusieurs services n\u00e9cessitant chacun un acc\u00e8s authentifi\u00e9, mutualiser le m\u00eame jeu d'identifiant\/mot de passe et le cas \u00e9ch\u00e9ant les m\u00eames moyens d'authentification \u00e0 double facteur ou renforc\u00e9e pour tous ces services.",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "214": {
+    "objectif": "<ul><li>Laisser le choix \u00e0 l\u2019utilisateur de la version ayant ses pr\u00e9f\u00e9rences.<\/li><li>Am\u00e9liorer la compatibilit\u00e9 avec les terminaux mobiles<\/li><\/ul>",
+    "titre": "Le serveur ne force pas la redirection vers la version ou l'application mobile.",
+    "controle": "<div>Contr\u00f4ler manuellement qu\u2019il est possible d\u2019acc\u00e9der \u00e0 la version desktop depuis un p\u00e9riph\u00e9rique mobile.<\/div>",
+    "solution": "<div>Ne pas rediriger c\u00f4t\u00e9 serveur vers la version mobile (en dynamic serving ou en cas de version mobile d\u00e9di\u00e9e) sans possibilit\u00e9 pour l\u2019utilisateur de d\u00e9sactiver cette redirection.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Mobile",
+    "theme": "Serveur et performances"
+  },
+  "44": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier pr\u00e9cis\u00e9ment la nature des services associ\u00e9s et leur co\u00fbt.<\/li><\/ul>",
+    "titre": "Les conditions de garantie sont indiqu\u00e9es.",
+    "controle": "<p>Dans un site de vente en ligne et notamment dans la page d'accueil, ou dans la page des mentions l\u00e9gales, la page d'aide ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente : <\/p><ul><li>V\u00e9rifier la pr\u00e9sence des informations relatives aux conditions de garanties appliqu\u00e9es.<\/li><\/ul>",
+    "solution": "<p>Indiquer dans les conditions g\u00e9n\u00e9rales disponibles sur le site, les informations relatives aux conditions de garantie appliqu\u00e9es.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "139": {
+    "objectif": "<ul><li>\u00c9viter sur le poste client l'ouverture inopin\u00e9e d'un autre logiciel que le navigateur Web.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les liens provoquant l'ouverture d'un logiciel externe ont un libell\u00e9 explicite.",
+    "controle": "<p>Dans toutes les pages inspect\u00e9es&nbsp;:<\/p><ul><li>Examiner le contenu pour y d\u00e9tecter les liens provoquant l'ouverture d'un logiciel externe (lien mail par exemple). <\/li><li>Pour chaque lien concern\u00e9, v\u00e9rifier que le libell\u00e9 du lien est suffisamment explicite pour que l'utilisateur soit pr\u00e9venu de son comportement particulier.<\/li><\/ul>",
+    "solution": "<p>R\u00e9diger les libell\u00e9s de liens concern\u00e9s de mani\u00e8re \u00e0 annoncer le comportement pour mieux l'anticiper. Par exemple, il est pr\u00e9f\u00e9rable de r\u00e9diger les liens <code>mailto<\/code> sous la forme \u00ab&nbsp;Envoyer un mail &nbsp;\u00bb plut\u00f4t qu'un simple lien \u00ab&nbsp;Contact&nbsp;\u00bb.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/a\">\u00e9l\u00e9ment <code>a<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Liens"
+  },
+  "222": {
+    "objectif": "<ul><li>Minimiser la quantit\u00e9 de donn\u00e9es \u00e0 t\u00e9l\u00e9charger par l'utilisateur. <\/li><li>Am\u00e9liorer les performances.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site<\/li><\/ul>",
+    "titre": "Les feuilles de style du site sont minifi\u00e9es.",
+    "controle": "<p>Pour l'ensemble du site <\/p><ul><li>V\u00e9rifier manuellement au sein de tous les fichiers CSS qu'aucun retour ligne, commentaire, indentation ou saut de ligne n'est pr\u00e9sent.<\/li><li>Ou identifier la liste des fichiers CSS non minifi\u00e9s \u00e0 l'aide d'outils de d\u00e9veloppement (navigateurs, outils en ligne, etc.) <\/li><\/ul>",
+    "solution": "<p>Supprimer les espaces non n\u00e9cessaires et les commentaires dans les fichiers CSS en recourant \u00e0 des outils d\u00e9di\u00e9s.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Ecodesign",
+    "theme": "Serveur et performances"
+  },
+  "74": {
+    "objectif": "<ul><li>Faciliter la saisie des mots de passe, notamment sur les claviers virtuels des terminaux mobiles. <\/li><li>Pr\u00e9venir les erreurs.<\/li><\/ul>",
+    "titre": "Les caract\u00e8res saisis dans un champ de mot de passe peuvent \u00eatre affich\u00e9s en clair.",
+    "controle": "<div>Contr\u00f4ler manuellement la possibilit\u00e9 d\u2019afficher le mot de passe en clair via un dispositif inclus dans la page.<\/div>",
+    "solution": "<div>Afficher un bouton associ\u00e9 \u00e0 un script qui bascule la valeur de l\u2019attribut type du champ de saisie entre les valeurs <code>password<\/code> et <code>text<\/code>.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "240": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'acc\u00e9der \u00e0 des tableaux exploitables par leur agent utilisateur et restitu\u00e9s de mani\u00e8re compr\u00e9hensible dans tous les cas.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Les tableaux de donn\u00e9es ne sont pas simul\u00e9s \u00e0 l'aide de texte mis en forme.",
+    "controle": "<p>Pour chaque contenu affich\u00e9 sous forme de tableau de donn\u00e9es (c'est-\u00e0-dire associant des cellules de donn\u00e9es \u00e0 des en-t\u00eates de ligne ou de colonnes) : <\/p><ul><li>S'assurer que celui-ci est balis\u00e9 avec les \u00e9l\u00e9ments HTML <code>tr<\/code> (ligne), <code>td<\/code> (cellule de donn\u00e9es), <code>th<\/code> (en-t\u00eate de ligne ou de colonne) et <code>caption<\/code> (titre du tableau), par exemple \u00e0 l'aide d'un outil de d\u00e9veloppement.<\/li><\/ul>",
+    "solution": "<p>Utiliser syst\u00e9matiquement l'\u00e9l\u00e9ment <code>table<\/code> et les \u00e9l\u00e9ments associ\u00e9s <code>tr, td, th, caption<\/code>, pour baliser les tableaux de donn\u00e9es, et non des artifices reposant sur des accumulations d'espaces ins\u00e9cables ou de caract\u00e8res graphiques tels que les pipes (lignes verticales \u00ab | \u00bb).<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/table\"><code>table<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Structure et code"
+  },
+  "37": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur de modifier facilement sa commande.<\/li><\/ul>",
+    "titre": "La modification de la quantit\u00e9 de chaque article, l'ajout et la suppression d'un ou plusieurs articles restent possibles avant la validation d\u00e9finitive de la commande.",
+    "controle": "<p>Dans un site de vente en ligne : <\/p><ul><li>Faire une commande de test ;<\/li><li>V\u00e9rifier la possibilit\u00e9 de changer les quantit\u00e9s command\u00e9es avant la validation. <\/li><\/ul><p><br><\/p>",
+    "solution": "<p>Proposer \u00e0 l'utilisateur une option sp\u00e9cifique sur le formulaire de commande lui permettant de modifier les quantit\u00e9s command\u00e9es mais aussi d'annuler ou d'ajouter un article avant validation de la commande.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "82": {
+    "objectif": "<ul><li>\u00c9viter de d\u00e9router l\u2019utilisateur en le menant \u00e0 une page en impasse, y compris par l\u2019utilisation de la fonction \u00ab page pr\u00e9c\u00e9dente \u00bb du navigateur. <\/li><li>Limiter le risque de double envoi de formulaire.<\/li><\/ul>",
+    "titre": "La page affich\u00e9e apr\u00e8s l'envoi d'un formulaire permet de reprendre directement la navigation.",
+    "controle": "<p>Pour chaque formulaire examin\u00e9<\/p><ul><li>Remplir les champs demand\u00e9s et soumettre le formulaire ; <\/li><li>V\u00e9rifier que l'envoi final de chaque formulaire pr\u00e9sent dans le site est suivi de l'affichage d'une page comportant les \u00e9l\u00e9ments n\u00e9cessaires \u00e0 la poursuite de la navigation (menu principal, lien retour en page d'accueil, etc.).<\/li><\/ul>",
+    "solution": "<p>Apr\u00e8s envoi d'un formulaire, afficher une page de confirmation du succ\u00e8s ou d'avertissement d'\u00e9chec de l'envoi, o\u00f9 sont pr\u00e9sents les \u00e9l\u00e9ments de navigation du site.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "46": {
+    "objectif": "<ul><li>\u00c9viter une navigation et des commandes inutiles, voire une perte de temps pour l'utilisateur ainsi que pour la structure qui propose les biens ou les services.<\/li><\/ul>",
+    "titre": "Les informations relatives \u00e0 la zone de livraison des produits ou de r\u00e9alisation des services sont indiqu\u00e9es.",
+    "controle": "<p>Dans un site de e-commerce, notamment au sein de la page d'accueil, ou la page des mentions l\u00e9gales, la page d'aide, ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente&nbsp;: <\/p><ul><li>V\u00e9rifier la pr\u00e9sence des informations relatives \u00e0 la zone de livraison couverte pour les produits et les services.<\/li><\/ul>",
+    "solution": "<p>Les informations relatives \u00e0 la zone de livraison doivent \u00eatre les suivantes&nbsp;:<\/p><ul><li>Lieu du \u00ab&nbsp;d\u00e9p\u00f4t final&nbsp;\u00bb ;<\/li><li>Heure d'ouverture du \u00ab&nbsp;d\u00e9p\u00f4t final&nbsp;\u00bb ;<\/li><li>Moyen de contact (t\u00e9l\u00e9phone, fax, e-mail). <\/li><\/ul><p>Cette information doit \u00eatre pr\u00e9sente \u00e0 3 moments distincts : avant paiement, apr\u00e8s paiement et sur l'e-mail r\u00e9capitulatif de la commande.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "3": {
+    "objectif": "<ul><li>Permettre aux outils de recherche et d'indexation d'extraire des informations \u00e0 propos du contenu des pages.<\/li><li>Am\u00e9liorer la restitution aux utilisateurs des r\u00e9sultats de recherche.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation.<\/li><\/ul>",
+    "titre": "Le code source de chaque page contient une m\u00e9tadonn\u00e9e qui en d\u00e9crit le contenu.",
+    "controle": "<p>Dans le code source de chaque page examin\u00e9e&nbsp;:<\/p><ul><li>V\u00e9rifier la pr\u00e9sence de la balise <code>&lt;meta name=\"description\" content=\"\" \/&gt;<\/code> ou d'un \u00e9quivalent \u00e0 l'aide, par exemple, des outils de d\u00e9veloppement des navigateurs. <\/li><li>Contr\u00f4ler que le texte de cette balise d\u00e9crit effectivement, de fa\u00e7on sp\u00e9cifique ou plus g\u00e9n\u00e9rique, le contenu de la page.<\/li><\/ul>",
+    "solution": "<p>Renseigner la balise <code>&lt;meta name=\"description\" content=\"\" \/&gt;<\/code>, ou \u00e0 d\u00e9faut un \u00e9l\u00e9ment sp\u00e9cifique ayant la m\u00eame fonction, avec une description du contenu de la page ou du site.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Contenus"
+  },
+  "33": {
+    "objectif": "<ul><li>Permettre d'anticiper d'\u00e9ventuelles difficult\u00e9s et une augmentation du d\u00e9lai de livraison.<\/li><\/ul>",
+    "titre": "La disponibilit\u00e9 des produits est indiqu\u00e9e avant la validation d\u00e9finitive de la commande.",
+    "controle": "<p>Dans les pages produits et dans le formulaire r\u00e9capitulant la commande&nbsp;: <\/p><ul><li>Contr\u00f4ler que les informations relatives \u00e0 la disponibilit\u00e9 des produits s\u00e9lectionn\u00e9s sont bien disponibles avant de d\u00e9buter la commande et apr\u00e8s validation (dans le panier, dans les pages produits, sur le formulaire r\u00e9capitulatif de commande).<\/li><\/ul>",
+    "solution": "<p>Indiquer avant la commande et sur le formulaire r\u00e9capitulatif la disponibilit\u00e9 des produits s\u00e9lectionn\u00e9s.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "114": {
+    "objectif": "<ul><li>Diminuer la quantit\u00e9 de donn\u00e9es \u00e0 t\u00e9l\u00e9charger. <\/li><li>Am\u00e9liorer la vitesse d\u2019affichage de la page. <\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site.<\/li><\/ul>",
+    "titre": "Les vignettes et aper\u00e7us ne sont pas des images de taille sup\u00e9rieure redimensionn\u00e9es c\u00f4t\u00e9 client.",
+    "controle": "<p>Pour toutes les images HTML pr\u00e9sentes dans le code source ou g\u00e9n\u00e9r\u00e9es via javascript&nbsp;:<\/p><ul><li>V\u00e9rifier qu'elles ne sont pas dot\u00e9es de propri\u00e9t\u00e9s CSS <code>height<\/code> ou <code>width<\/code> qui modifient la taille apparente des images par rapport \u00e0 leurs dimensions r\u00e9elles. Pour cela, utiliser  d\u00e9sactiver tous les styles CSS \u00e0 l'aide d'un outil de d\u00e9veloppement web  pour rep\u00e9rer les images dont les dimensions changent apr\u00e8s d\u00e9sactivation des styles CSS. <\/li><li>Contr\u00f4ler \u00e9galement que les dimensions indiqu\u00e9es dans les attributs <code>width<\/code> et <code>height<\/code> du code HTML g\u00e9n\u00e9r\u00e9 correspondent aux dimensions r\u00e9elles de l'image \u00e0 l'aide d'un outils de d\u00e9veloppement.<\/li><\/ul><p>Par exemple, on invalidera donc&nbsp;: <\/p><ul><li>Une image du type &lt;img height=\"300\" width=\"600\" class=\"thumb\"\/&gt; si la classe <code>.thumb<\/code> impose les propri\u00e9t\u00e9s CSS <code>height: 100px<\/code> et <code>width: auto<\/code>. <\/li><li>Une image du type &lt;img height=\"100\" width=\"200\"\/&gt; si les dimensions r\u00e9elles de l'image sont 300 px de haut et 600 px de large.<\/li><\/ul>",
+    "solution": "<p>Utiliser, pour les vignettes de pr\u00e9visualisation d'images, des versions sp\u00e9cifiques de celles-ci et non les images originales redimensionn\u00e9es via leurs attributs HTML ou leurs propri\u00e9t\u00e9s CSS.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Ecodesign",
+    "theme": "Images et m\u00e9dias"
+  },
+  "43": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier pr\u00e9cis\u00e9ment les conditions de l'encaissement.<\/li><\/ul>",
+    "titre": "Les conditions de d\u00e9bit ou d'encaissement sont indiqu\u00e9es.",
+    "controle": "<p>Dans un site de vente en ligne&nbsp;:<\/p><ul><li>Entreprendre une proc\u00e9dure de commande ; <\/li><li>Puis, v\u00e9rifier que les conditions de d\u00e9bit ou d'encaissement sont affich\u00e9es ou disponibles avant la validation d\u00e9finitive du panier. <\/li><\/ul>",
+    "solution": "<p>Indiquer dans le processus de commande et de gestion du panier les conditions de d\u00e9bit ou d'encaissement avant la validation de celui-ci.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "88": {
+    "objectif": "<ul><li>Faciliter l\u2019utilisation des formulaires r\u00e9partis sur plusieurs pages successives. <\/li><li>Limiter les risques d\u2019abandon en cours de processus.<\/li><\/ul>",
+    "titre": "L'utilisateur est averti de la perte d'information en cas d'utilisation de l'historique de son navigateur dans un processus complexe.",
+    "controle": "Amorcer la saisie d\u2019un formulaire apr\u00e8s la premi\u00e8re \u00e9tape du processus, puis activer le bouton \u00ab back \u00bb du navigateur.",
+    "solution": "G\u00e9n\u00e9rer une alerte JavaScript en cas de l\u2019utilisation de la fonctionnalit\u00e9 \u00ab back \u00bb de l\u2019historique du navigateur.",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "92": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'acc\u00e9der rapidement \u00e0 l'item de liste recherch\u00e9.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les listes d'options de formulaires sont pr\u00e9sent\u00e9es dans un ordre identifiable.",
+    "controle": "<p>Pour chaque liste d\u00e9roulante contenant plusieurs items<\/p><ul><li>V\u00e9rifier, pour chaque liste <code>select<\/code>, que les \u00e9l\u00e9ments <code>option<\/code> apparaissent dans un ordre identifiable (alphab\u00e9tique, num\u00e9rique, chronologique, th\u00e9matique, etc.).<\/li><\/ul><p>La v\u00e9rification s'effectue manuellement en contr\u00f4lant visuellement l'ordre des \u00e9l\u00e9ments au sein de chaque \u00e9l\u00e9ment <code>select<\/code>.<\/p>",
+    "solution": "<ul><li>Pr\u00e9senter les items dans un ordre identifiable, par exemple par ordre alphab\u00e9tique ou chronologique.<\/li><\/ul>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "102": {
+    "objectif": "<ul><li>Optimiser les possibilit\u00e9s de retour d\u2019information de la part des utilisateurs. <\/li><li>\u00c9viter de mettre l\u2019utilisateur en difficult\u00e9 en cas d\u2019indisponibilit\u00e9 ou de probl\u00e8mes d\u2019utilisation de l\u2019un des moyens de contact.<\/li><\/ul>",
+    "titre": "Le site propose au moins deux moyens de contact.",
+    "controle": "<p>Dans l\u2019ensemble du site :<\/p><p><\/p><ul><li>V\u00e9rifier la pr\u00e9sence d\u2019au moins deux modes de contact.<\/li><li>V\u00e9rifier qu\u2019il est possible de joindre effectivement l\u2019auteur et\/ou le responsable technique via les modes de contact propos\u00e9s.<\/li><\/ul><p><\/p>",
+    "solution": "<p>Par exemple, indiquer l\u2019adresse postale ou le num\u00e9ro de t\u00e9l\u00e9phone de l\u2019auteur et\/ou du webmestre et mettre en place un formulaire permettant de les contacter.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "38": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier pr\u00e9cis\u00e9ment la nature et les sp\u00e9cifications des produits propos\u00e9s.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation.<\/li><\/ul>",
+    "titre": "La nature et les caract\u00e9ristiques quantifiables des produits et services sont indiqu\u00e9es.",
+    "controle": "<p>Dans les pages produits, ou dans la page d'accueil, ou la page des mentions l\u00e9gales, la page d'aide ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente :<\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'informations relatives \u00e0 la nature et aux caract\u00e9ristiques des produits et services propos\u00e9s.<\/li><\/ul>",
+    "solution": "<p>Indiquer sur le site les informations relatives \u00e0 la nature ainsi qu'aux caract\u00e9ristiques des produits et services propos\u00e9s.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "E-Commerce"
+  },
+  "77": {
+    "objectif": "<ul><li>Donner un retour \u00e0 l'utilisateur sur l'action qu'il vient d'effectuer. <\/li><li>Guider l'utilisateur directement vers les \u00e9l\u00e9ments sur lesquels il doit agir.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "En cas de rejet des donn\u00e9es saisies dans un formulaire, les champs contenant les donn\u00e9es rejet\u00e9es sont indiqu\u00e9s \u00e0 l'utilisateur.",
+    "controle": "<p>Pour chaque formulaire&nbsp;:<\/p><ul><li>Soumettre diff\u00e9rentes erreurs possibles dans chaque formulaire telles que absence de saisie d'un champ obligatoire, non-respect d'un format demand\u00e9 ou pr\u00e9visible (format d'adresse mail, de date, etc.), sensibilit\u00e9 \u00e0 la casse.<\/li><li>Puis, v\u00e9rifier que l'utilisateur est inform\u00e9 de la pr\u00e9sence d'erreurs \u00e0 corriger au moins dans l'\u00e9l\u00e9ment <code>title<\/code> de la page et que chaque champ erron\u00e9 est signal\u00e9 via son \u00e9tiquette. <\/li><\/ul>",
+    "solution": "<p>Faire figurer en d\u00e9but de formulaire un message indiquant que tout ou partie des champs n\u00e9cessite une correction de la saisie pr\u00e9c\u00e9dente. Indiquer \u00e9galement cette information dans l'\u00e9l\u00e9ment <code>title<\/code> de la page.<\/p><p>Ajouter \u00e9ventuellement au message en d\u00e9but de formulaire la liste des champs \u00e0 corriger.<\/p><p>Indiquer explicitement dans l'\u00e9tiquette de chaque champ concern\u00e9 qu'il doit \u00eatre corrig\u00e9.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "117": {
+    "objectif": "<ul><li>Permettre aux utilisateurs qui ne peuvent acc\u00e9der au son de disposer d'une alternative visuelle synchronis\u00e9e avec l'image suivre confortablement le d\u00e9roulement de la vid\u00e9o sans devoir utiliser un transcript externe.<\/li><li>Permettre aux utilisateurs sourds d\u2019acc\u00e9der aux contenus de la vid\u00e9o. <\/li><li>Permettre \u00e0 tous les utilisateurs d\u2019acc\u00e9der aux contenus de la vid\u00e9o.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les vid\u00e9os comportent des sous-titres synchronis\u00e9s.",
+    "controle": "<p>V\u00e9rifier, pour chaque contenu vid\u00e9o fournissant une information par la parole, que celle-ci peut \u00eatre lue via des sous-titres synchronis\u00e9s.<\/p>",
+    "solution": "<p>Associer \u00e0 chaque contenu vid\u00e9o des sous-titres synchronis\u00e9s reprenant au moins l'information donn\u00e9e par la parole.<\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Images et m\u00e9dias"
+  },
+  "57": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de choisir le mode de paiement qui leur convient le mieux dans leur contexte. <\/li><li>Fournir au moins une alternative aux utilisateurs qui sont dans l\u2019incapacit\u00e9 temporaire ou permanente d\u2019utiliser un moyen de paiement.<\/li><\/ul>",
+    "titre": "Le site accepte au moins deux moyens de paiement.",
+    "controle": "<p>Dans un site de e-commerce :<\/p><ul><li>Entreprendre une proc\u00e9dure de commande et la poursuivre au moins jusqu'\u00e0 l'\u00e9tape du paiement ;<\/li><li>V\u00e9rifier qu'au moins deux moyens de paiement sont effectivement disponibles.<\/li><\/ul>",
+    "solution": "<p>Informer le client le plus t\u00f4t possible, avant la fin de la commande, qu'il dispose de deux moyens de paiement.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "130": {
+    "objectif": "<ul><li>Envoyer prioritairement \u00e0 l\u2019utilisateur la version de la page correspondant \u00e0 la langue qu\u2019il a indiqu\u00e9 dans les pr\u00e9f\u00e9rences de son outil de consultation.<\/li><\/ul>",
+    "titre": "Le serveur respecte l'ordre pr\u00e9f\u00e9rentiel de langues des outils de consultation.",
+    "controle": "<p>Pour un site disponible en plusieurs langues (fran\u00e7ais et anglais, par exemple)&nbsp;:<\/p><ul><li>Modifier les options de votre navigateur pour choisir votre langue favorite : s\u00e9lectionner, par exemple, l'anglais en tant que langue pr\u00e9f\u00e9r\u00e9e ;<\/li><li>Taper l'URL principale du site dans ce m\u00eame navigateur et v\u00e9rifier que les contenus de la page sont disponibles dans la langue retenue comme favorite. Dans notre exemple, la version anglaise devrait \u00eatre automatiquement renvoy\u00e9e.<\/li><li>Effectuer le m\u00eame test en choisissant une autre langue favorite dans les options du navigateur.<\/li><\/ul>",
+    "solution": "<p>Utiliser la n\u00e9gociation de contenu disponible selon le serveur, en testant les valeurs de l'en-t\u00eate HTTP accept-language.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Internationalisation"
+  },
+  "125": {
+    "objectif": "<ul><li>Favoriser l\u2019indexation des contenus selon leur langue. <\/li><li>Faciliter la traduction automatique. <\/li><li>Permettre une lecture correcte du contenu par un outil de synth\u00e8se vocale.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><li> Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Le code source de chaque page indique la langue principale du contenu.",
+    "controle": "<p>La v\u00e9rification consiste \u00e0 contr\u00f4ler la pr\u00e9sence et la pertinence de l'attribut lang de l'\u00e9l\u00e9ment <code>html<\/code> (ou \u00e0 d\u00e9faut de ses \u00e9l\u00e9ments descendants) dans le code source, par exemple \u00e0 l'aide de Firebug. Dans le code source de chaque page&nbsp;:<\/p><ul><li>V\u00e9rifier que la langue par d\u00e9faut du contenu est indiqu\u00e9e via l'attribut <code>lang<\/code> de l'\u00e9l\u00e9ment <code>html<\/code>, par exemple &lt;html lang=\"fr\"&gt; (en HTML)<\/li><li>\u00c0 d\u00e9faut, v\u00e9rifier qu'elle est au moins h\u00e9rit\u00e9e, pour chaque \u00e9l\u00e9ment de contenu, d'un \u00e9l\u00e9ment parent (<code>head<\/code>, <code>body<\/code>, <code>title<\/code>, etc.) via son attribut <code>lang<\/code>. <\/li><\/ul><p>V\u00e9rifier la validit\u00e9 et la pertinence du code de langue utilis\u00e9. Pour cela, recourir par exemple au Language Subtag Lookup Tool de Richard Ishida,&nbsp;<a href=\"https:\/\/r12a.github.io\/app-subtags\/\">https:\/\/r12a.github.io\/app-subtags\/<\/a>. <\/p><p>Parmi les cas courants de codes de langue erron\u00e9s, citons <code>jp<\/code> au lieu de <code>ja<\/code> pour le japonais, <code>lu<\/code> au lieu de <code>lb<\/code> pour le luxembourgeois, <code>gr<\/code> au lieu de <code>el<\/code> pour le grec, <code>lat<\/code> au lieu de <code>la<\/code> pour le latin et <code>oci<\/code> au lieu de <code>oc<\/code> pour l'occitan. Par ailleurs, les codes <code>mul<\/code> pour \u00ab&nbsp;langues multiples&nbsp;\u00bb et <code>und<\/code> pour \u00ab&nbsp;langue ind\u00e9termin\u00e9e&nbsp;\u00bb ne doivent pas \u00eatre utilis\u00e9s dans un contenu web. Enfin, l'attribut <code>xml:lang <\/code>peut \u00eatre \u00e9galement renseign\u00e9 en compl\u00e9ment de l'attribut <code>lang<\/code>, mais il n'est pas suffisant pour rendre conforme cette bonne pratique.<\/p>",
+    "solution": "<p>Renseigner l'attribut <code>lang<\/code> de l'\u00e9l\u00e9ment racine <code>html<\/code> \u00e0 l'aide du code langue appropri\u00e9 (tel qu'indiqu\u00e9 par le registre tenu par l'IANA : <a href=\"http:\/\/www.iana.org\/assignments\/language-subtag-registry\">http:\/\/www.iana.org\/assignments\/language-subtag-registry<\/a>). En pratique, pour le fran\u00e7ais, cela donne : &lt;html lang=\"fr\"&gt; (en HTML) et &lt;html lang=\"fr\" xml:lang=\"fr\"&gt; (en XHTML).<\/p><p>\u00c0 d\u00e9faut, dans des cas plus complexes, la langue du contenu peut \u00eatre indiqu\u00e9e via les diff\u00e9rents \u00e9l\u00e9ments parents : <code>head<\/code>, <code>body<\/code>, <code>title<\/code>, etc.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Attributs_universels\/lang\"><code>lang<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Internationalisation"
+  },
+  "170": {
+    "objectif": "<ul><li>Ne pas imposer \u00e0 l\u2019utilisateur une \u00e9tape qui n\u2019est pas n\u00e9cessaire dans ce contexte.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site. <\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es.<\/li><\/ul>",
+    "titre": "La d\u00e9sinscription depuis une newsletter ne demande pas de confirmation par courriel.",
+    "controle": "<div>Activer le lien de d\u00e9sinscription pr\u00e9sent dans la newsletter et v\u00e9rifier que le processus ne renvoie pas d'e-mail de demande de confirmation.<\/div>",
+    "solution": "<div>G\u00e9rer sp\u00e9cifiquement le processus de d\u00e9sinscription depuis le lien pr\u00e9sent dans le corps de la newsletter, de mani\u00e8re \u00e0 ce que l\u2019utilisateur n\u2019ait qu\u2019une confirmation en ligne \u00e0 donner, sans envoi d\u2019un e-mail de demande de confirmation.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Ecodesign",
+    "theme": "Newsletter"
+  },
+  "176": {
+    "objectif": "<ul><li>Permettre l\u2019acc\u00e8s \u00e0 l\u2019information pour les utilisateurs dont le navigateur, la plate-forme, l\u2019aide technique ou encore le handicap (comme le daltonisme) ne permettent pas de visualiser ou de diff\u00e9rencier les couleurs. <\/li><li>Rendre l\u2019information accessible aux robots d\u2019indexation.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "L'information n'est pas v\u00e9hicul\u00e9e uniquement par la couleur.",
+    "controle": "<p>La v\u00e9rification n\u00e9cessite de comparer visuellement deux versions de la page : la version normale et une version o\u00f9 les couleurs seront d\u00e9sactiv\u00e9es. Elle est donc plus ais\u00e9e \u00e0 mener avec un double \u00e9cran. Pour chaque page examin\u00e9e :<\/p><p><\/p><ul><li>D\u00e9sactiver le support de la couleur via votre barre d\u2019outils de test puis passer les images en niveau de gris.<\/li><li>V\u00e9rifier par comparaison si la version sans couleurs pr\u00e9sente des pertes d\u2019information. Ce sera par exemple le cas dans un menu de navigation o\u00f9 la rubrique en cours ne se diff\u00e9rencie que par sa couleur, ou encore dans une carte dont les zones sont de simples aplats de couleur sans bordure ni motifs.<\/li><\/ul><p><\/p><p>Attention : l\u2019information peut parfois \u00eatre pr\u00e9sente ind\u00e9pendamment de la couleur dans un attribut title, provoquant l\u2019apparition d\u2019une infobulle au survol du contenu. L\u2019acc\u00e8s \u00e0 l\u2019infobulle depuis le clavier n\u2019\u00e9tant \u00e0 ce jour pas possible par d\u00e9faut dans tous les navigateurs, cette solution doit \u00eatre \u00e9cart\u00e9e.<\/p>",
+    "solution": "<p>Fournir un compl\u00e9ment \u00e0 la couleur pour v\u00e9hiculer l\u2019information qu\u2019elle porte. Ce compl\u00e9ment, ind\u00e9pendant de la couche de mise en forme CSS, peut \u00eatre de plusieurs ordres :<\/p><p><\/p><ul><li>pr\u00e9voir un balisage s\u00e9mantique (strong, em, etc.) ;<\/li><li>ajouter des mentions textuelles (ast\u00e9risque signalant un champ obligatoire) ;<\/li><li>ajouter des hachures, motifs, bordures, etc. dans les cartes et les graphiques.<\/li><\/ul><p><\/p><ul><\/ul>",
+    "etape": "Conception",
+    "tag": "Accessibility",
+    "theme": "Pr\u00e9sentation"
+  },
+  "20": {
+    "objectif": "<ul><li>Permettre l'archivage des contenus cr\u00e9\u00e9s par l'utilisateur. <\/li><li>\u00c9viter \u00e0 l'utilisateur d'\u00e9ventuelles saisies redoubl\u00e9es en cas de r\u00e9utilisation des contenus.<\/li><li>Permettre la r\u00e9utilisation de documents pr\u00e9c\u00e9demment ajout\u00e9s.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es.<\/li><\/ul>",
+    "titre": "Si le site propose un espace personnel ou abonn\u00e9, il est possible de t\u00e9l\u00e9charger les contenus personnels.",
+    "controle": "<p>Dans chaque espace personnel au sein duquel il est possible de saisir ou cr\u00e9er des images, documents ou toute autre donn\u00e9e :<\/p><ul><li>Saisir ces diff\u00e9rents types de contenus ; <\/li><li>Puis, v\u00e9rifier qu'il est possible d'exporter les contenus personnellement saisis ou cr\u00e9\u00e9s dans un format standard.<\/li><\/ul>",
+    "solution": "<p>Fournir une solution d'exportation des contenus dans un format bureautique courant, dans un format XML courant ou dans un format dont les sp\u00e9cifications sont publiques.<br><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "45": {
+    "objectif": "<ul><li>Permettre un acc\u00e8s facile et permanent \u00e0 toutes les conditions de r\u00e9alisation du service.<\/li><\/ul>",
+    "titre": "Les conditions de vente ou d'utilisation sont disponibles depuis toutes les pages.",
+    "controle": "<p>Dans l'ensemble des pages du site, v\u00e9rifier la pr\u00e9sence d'un lien pointant vers la page pr\u00e9sentant les conditions de vente et\/ou d'utilisation.<\/p><p>Cette v\u00e9rification peut s'effectuer manuellement au fil des autres contr\u00f4les. Elle peut \u00e9galement s'effectuer \u00e0 partir des templates du site, sous r\u00e9serve de services tiers n'impl\u00e9mentant pas compl\u00e8tement ceux-ci.<\/p>",
+    "solution": "<p>Faire figurer sur toutes les pages un lien pointant vers la page sp\u00e9cifique pr\u00e9sentant les conditions de vente et\/ou d'utilisation.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "53": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier pr\u00e9cis\u00e9ment les pi\u00e8ces n\u00e9cessaires en cas de n\u00e9cessit\u00e9 de retour du produit. <\/li><li>Anticiper d'\u00e9ventuels probl\u00e8mes en cas de demande de remboursement r\u00e9alis\u00e9e apr\u00e8s le d\u00e9lai l\u00e9gal. <\/li><li>Diminuer le nombre de d\u00e9marches inutiles et le nombre de demandes au support client. <\/li><li>Augmenter le taux de transformation d'un site e-commerce.<\/li><\/ul>",
+    "titre": "Les conditions de remboursement sont indiqu\u00e9es.",
+    "controle": "<p>Dans au moins une des pages suivantes&nbsp;: les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente, la page d'accueil, la page des mentions l\u00e9gales, la page produit, la page d'\u00e0 propos ou encore la page d'aide&nbsp;:<\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'informations relatives aux conditions de remboursement.<\/li><\/ul>",
+    "solution": "<p>Indiquer, au minimum dans les conditions g\u00e9n\u00e9rales de vente, les informations relatives aux conditions de remboursement&nbsp;: d\u00e9lais, frais et justificatifs exig\u00e9s.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "190": {
+    "objectif": "<ul><li>Permettre l'impression des contenus sous une forme appropri\u00e9e au support.<\/li><\/ul>",
+    "titre": "Le site propose des styles d\u00e9di\u00e9s \u00e0 l'impression.",
+    "controle": "<p>Cette bonne pratique peut \u00eatre \u00e9valu\u00e9e rapidement en testant l'aper\u00e7u avant impression dans le navigateur, mais sa confirmation n\u00e9cessite l'examen du code pour d\u00e9tecter la pr\u00e9sence d'un style d'impression pour le media print, qui peut \u00eatre&nbsp;: <\/p><ul><li>Sous forme d'une balise du type &lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"print\" href=\"print.css\" \/&gt; ;<\/li><li>Sous forme d'une balise du type &lt;style media=\"print\" type=\"text\/css\"&gt;\u2026&lt;\/style&gt; ;<\/li><li>Sous forme d'une r\u00e8gle <code>@media print {\u2026}<\/code> dans une CSS interne ou externe ;<\/li><li>Ou sous forme d'une r\u00e8gle <code>@import url(\"print.css\")<\/code> <code>print;<\/code> dans une CSS interne ou externe.<\/li><\/ul>",
+    "solution": "<p>Fournir une feuille de style sp\u00e9cifique pour le type de media print, par exemple sous la forme : &lt;<code>link rel=\"stylesheet\" type=\"text\/css\" href=\"print.css\" media=\"print\" \/&gt;<\/code>.<\/p><p>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\u00e9e en pr\u00e9cisant le media print.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/link\"><code>link<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/style\"><code>style<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Pr\u00e9sentation"
+  },
+  "109": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier sans ambigu\u00eft\u00e9 un interlocuteur physique capable de r\u00e9pondre aux questions \u00e9ventuelles sur les contenus propos\u00e9s, ou d'assumer les responsabilit\u00e9s li\u00e9es \u00e0 ces contenus.<\/li><\/ul>",
+    "titre": "L'identit\u00e9 de la personne ou du service responsable des contenus est indiqu\u00e9e.",
+    "controle": "<p>Au sein de la page d'accueil ou au moins sur une page consultable depuis la page d'accueil (fr\u00e9quemment, la page des mentions l\u00e9gales) ou encore sur chacune des pages du site (souvent en pied de page) <\/p><ul><li>V\u00e9rifier manuellement que la mention d'une personne physique ou du service responsable des contenus du site est pr\u00e9sente dans au moins une des pages cit\u00e9e ci-dessus.<\/li><\/ul>",
+    "solution": "<p>Indiquer le nom d'une personne physique responsable des contenus sur le site.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "146": {
+    "objectif": "<ul><li>Faciliter le r\u00e9f\u00e9rencement \u00e0 travers l'obtention de liens entrants. <\/li><li>Augmenter la visibilit\u00e9 du site pour les utilisateurs.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Le site n'impose pas d'interdiction ou de restriction \u00e0 la mise en place des liens entrants.",
+    "controle": "<p>Dans les pages de type \u00ab&nbsp;mentions l\u00e9gales&nbsp;\u00bb, dans les conditions g\u00e9n\u00e9rales d'utilisation ou dans la page d\u00e9di\u00e9e aux cr\u00e9dits du site&nbsp;:<\/p><ul><li>V\u00e9rifier l'absence de conditions restreignant ou interdisant la mise en place dans d'autres sites de liens pointant vers le site.<\/li><\/ul>",
+    "solution": "<p>Ne pas publier de conditions restreignant ou interdisant la mise en place dans des sites externes de liens pointant vers le site.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Liens"
+  },
+  "129": {
+    "objectif": "<ul><li>Permettre l\u2019identification imm\u00e9diate du lien pertinent par l\u2019utilisateur. Rendre compr\u00e9hensible des liens sp\u00e9cialement cr\u00e9\u00e9s pour un public sp\u00e9cifique.<\/li><\/ul>",
+    "titre": "Les liens vers les versions \u00e9quivalentes de la page ou du site sont r\u00e9dig\u00e9s dans leur langue cible.",
+    "controle": "<p>Dans le cas d'un site internationalis\u00e9&nbsp;:<\/p><ul><li>V\u00e9rifier que chaque lien, qui m\u00e8ne vers une autre version linguistique de la page ou du site, est r\u00e9dig\u00e9 dans la langue cible. <\/li><\/ul>",
+    "solution": "<p>R\u00e9diger les liens et les alternatives textuelles d'images-liens concern\u00e9es dans la langue de chaque page cible. Par exemple, inscrire \u00ab&nbsp;English version&nbsp;\u00bb pour un lien menant vers une version anglaise de la page actuellement r\u00e9dig\u00e9e en fran\u00e7ais.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Internationalisation"
+  },
+  "185": {
+    "objectif": "<ul><li>Permettre aux contenus de s'afficher correctement, m\u00eame lorsque les polices pr\u00e9vues ne sont pas pr\u00e9sentes sur le syst\u00e8me de l'utilisateur.<\/li><\/ul>",
+    "titre": "Une famille g\u00e9n\u00e9rique de police est indiqu\u00e9e comme dernier \u00e9l\u00e9ment de substitution.",
+    "controle": "<p>Dans toutes les feuilles de style CSS (pour tous les media : screen, print, etc.)&nbsp;:<\/p><ul><li>V\u00e9rifier \u00e0 l'aide d'un outil de d\u00e9veloppement d'un navigateur que chaque propri\u00e9t\u00e9 <code>font<\/code> ou <code>font-family<\/code> contient l'un des termes relatifs aux familles g\u00e9n\u00e9riques de police : <code>serif<\/code>, <code>sans-serif<\/code>, <code>monospace<\/code>, <code>cursive<\/code> ou <code>fantasy<\/code> ;<\/li><li>Contr\u00f4ler que ces termes sont situ\u00e9s en fin de liste pour chaque propri\u00e9t\u00e9 <code>font<\/code> ou <code>font-family<\/code> ;<\/li><li>S'assurer de la pertinence de la famille g\u00e9n\u00e9rique indiqu\u00e9e : <code>serif<\/code> pour les polices \u00e0 empattements, <code>sans-serif<\/code> pour les polices sans empattements, <code>monospace<\/code>, <code>cursive<\/code> ou <code>fantasy<\/code> dans des cas particuliers. <\/li><\/ul><p>La v\u00e9rification peut \u00e9galement \u00eatre effectu\u00e9e en validant la page HTML \u00e0 l'aide du validateur CSS du W3C (<a href=\"http:\/\/jigsaw.w3.org\/css-validator\/\">http:\/\/jigsaw.w3.org\/css-validator\/<\/a>) qui avertit alors en cas d'absence de familles de police g\u00e9n\u00e9rique.<\/p>",
+    "solution": "<p>Dans chaque feuille de style CSS, indiquer la famille g\u00e9n\u00e9rique de police appropri\u00e9e dans les propri\u00e9t\u00e9s <code>font-family<\/code> ou <code>font<\/code>&nbsp;:<\/p><ul><li>Pour les polices serif, ou \u00e0 empattements (du type Times Roman), sp\u00e9cifier en dernier la famille de police g\u00e9n\u00e9rique serif. Dans l'exemple suivant, le terme \u00ab&nbsp;serif&nbsp;\u00bb a \u00e9t\u00e9 correctement ajout\u00e9 comme dernier \u00e9l\u00e9ment de la liste des polices <code>font-family: Georgia, \"Bookman Old Style\", serif<\/code>.<\/li><li>Pour les polices sans serif, ou sans empattements (du type Arial), sp\u00e9cifier en dernier la famille de police g\u00e9n\u00e9rique sans-serif. Par exemple&nbsp;: <code>font-family: Optima, \"Trebuchet MS\", sans-serif<\/code>; <\/li><li>Pour les polices monospace (du type Courier), sp\u00e9cifier en dernier la famille de police g\u00e9n\u00e9rique monospace. Par exemple, <code>font-family: Courier, monospace <\/code>; <\/li><li>De m\u00eame, utiliser les familles g\u00e9n\u00e9riques cursive et fantasy pour les polices manuscrites et fantaisies.<\/li><\/ul><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/font\"><code>font<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/font-family\"><code>font-family<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Pr\u00e9sentation"
+  },
+  "93": {
+    "objectif": "<ul><li>Permettre l\u2019utilisation des claviers virtuels adapt\u00e9s aux diff\u00e9rents types de saisie sur les terminaux mobiles.<\/li><li>Faciliter la validation de la saisie.<\/li><li>Am\u00e9liorer la compatibilit\u00e9 avec les terminaux mobiles.<\/li><\/ul>",
+    "titre": "Les champs de saisie de type mail, URL, t\u00e9l\u00e9phone, nombre, recherche, mots de passe, heure et date sont dot\u00e9s du type appropri\u00e9.",
+    "controle": "<div>V\u00e9rifier, pour chaque \u00e9l\u00e9ment input concern\u00e9, la pr\u00e9sence de l\u2019attribut type dot\u00e9 de la valeur correspondant au type de saisie attendue : <code>email<\/code>, <code>url<\/code>, <code>tel<\/code>, <code>number<\/code>, <code>search<\/code>, <code>password<\/code>, <code>date<\/code>, <code>time<\/code>.<\/div>",
+    "solution": "<div>Doter chaque \u00e9l\u00e9ment input concern\u00e9 d\u2019un attribut type correspondant \u00e0 la saisie attendue : <code>email<\/code>, <code>url<\/code>, <code>tel<\/code>, <code>number<\/code>, <code>search<\/code>, <code>password<\/code>, <code>date<\/code>, <code>time<\/code>.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Mobile",
+    "theme": "Formulaires"
+  },
+  "237": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'aides techniques (lecteurs d'\u00e9cran) d'identifier ais\u00e9ment la nature des informations fournies par un tableau.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les titres des tableaux de donn\u00e9es sont renseign\u00e9s.",
+    "controle": "<p>Pour chaque tableau de donn\u00e9es&nbsp;:<\/p><ul><li>V\u00e9rifier la pr\u00e9sence de l'\u00e9l\u00e9ment <code>caption<\/code>. Si cet \u00e9l\u00e9ment est masqu\u00e9 \u00e0 l'affichage \u00e0 l'aide d'une classe CSS, v\u00e9rifier qu'il reste accessible pour les lecteurs d'\u00e9cran ; <\/li><li>Contr\u00f4ler la pertinence de l'\u00e9l\u00e9ment <code>caption<\/code> qui doit permettre d'identifier la nature des informations apport\u00e9es par le tableau.<\/li><\/ul><p>Cette v\u00e9rification peut \u00eatre partiellement automatis\u00e9e pour ce qui est de la pr\u00e9sence de l'\u00e9l\u00e9ment de titre <code>caption<\/code> mais le contr\u00f4le de sa pertinence n\u00e9cessite un examen manuel.<\/p>",
+    "solution": "<p>Utiliser et renseigner l'\u00e9l\u00e9ment HTML <code>caption<\/code> pour chaque tableau de donn\u00e9es.<\/p><p>Le cas \u00e9ch\u00e9ant, recourir \u00e0 un \u00e9l\u00e9ment <code>caption<\/code> masqu\u00e9 \u00e0 l'affichage.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/caption\"><code>caption<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Structure et code"
+  },
+  "39": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier la p\u00e9riode au cours de laquelle ils peuvent b\u00e9n\u00e9ficier des offres propos\u00e9es.<\/li><\/ul>",
+    "titre": "La p\u00e9riode et les conditions de validit\u00e9 des offres sp\u00e9ciales et promotions sont indiqu\u00e9es.",
+    "controle": "<p>Dans les pages produits, ou dans la page d'accueil, ou dans la page des mentions l\u00e9gales, la page d'aide, ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente :<\/p><ul><li>V\u00e9rifier la pr\u00e9sence des informations relatives \u00e0 la p\u00e9riode et aux conditions de validit\u00e9 des offres sp\u00e9ciales et de promotions propos\u00e9es.<\/li><\/ul>",
+    "solution": "<p>Indiquer sur le site les informations relatives \u00e0 la p\u00e9riode et aux conditions de validit\u00e9 des offres sp\u00e9ciales et des promotions propos\u00e9es.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "188": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d\u2019adapter le rendu \u00e0 leurs besoins ou \u00e0 leurs pr\u00e9f\u00e9rences en recourant au zoom graphique.<\/li><li>Am\u00e9liorer la compatibilit\u00e9 avec les terminaux mobiles. <\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Le site ne bloque pas les fonctionnalit\u00e9s de zoom du navigateur.",
+    "controle": "<div>V\u00e9rifier sur un p\u00e9riph\u00e9rique tactile qu\u2019il est possible d\u2019agrandir la vue avec la commande de zoom tactile du navigateur.<\/div>",
+    "solution": "<div>Ne pas utiliser de m\u00e9canisme bloquant le zoom, et en particulier, ne pas utiliser les attributs minimum-scale, maximum-scale et user-scalable de l\u2019\u00e9l\u00e9ment meta viewport.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Mobile",
+    "theme": "Pr\u00e9sentation"
+  },
+  "56": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de faire livrer un achat sur le lieu de leur choix. <\/li><li>Permettre aux utilisateurs de faire livrer un achat sans facture, pour un cadeau, par exemple.<\/li><\/ul>",
+    "titre": "Une adresse de livraison diff\u00e9rente de l'adresse de facturation peut \u00eatre sp\u00e9cifi\u00e9e.",
+    "controle": "<p>Dans un site de vente en ligne&nbsp;: <\/p><ul><li>Entreprendre une proc\u00e9dure de commande ou modifier les donn\u00e9es d'un compte client (\u00e0 l'aide d'un compte de test ou compte r\u00e9el cr\u00e9\u00e9 pour l'occasion) ;<\/li><li>Puis, v\u00e9rifier la possibilit\u00e9 de saisir une adresse de livraison diff\u00e9rente de l'adresse de facturation.<\/li><\/ul>",
+    "solution": "<p>Proposer au client, sur le formulaire r\u00e9capitulatif de la commande, la possibilit\u00e9 d'indiquer une adresse de livraison diff\u00e9rente de l'adresse de facturation.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "124": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier imm\u00e9diatement le pays associ\u00e9 \u00e0 l'adresse postale, sans ambigu\u00eft\u00e9 et sans avoir recours \u00e0 d'autres \u00e9l\u00e9ments (ville, r\u00e9gion, code postal, num\u00e9ro de t\u00e9l\u00e9phone).<\/li><\/ul>",
+    "titre": "Le pays est pr\u00e9cis\u00e9 pour toutes les adresses postales.",
+    "controle": "<p>Pour chaque adresse postale indiqu\u00e9e dans le site&nbsp;:<\/p><ul><li>V\u00e9rifier la pr\u00e9sence de la mention textuelle et explicite du pays dans toutes les adresses postales.<\/li><\/ul>",
+    "solution": "<p>Indiquer explicitement le pays dans l'adresse postale sous forme textuelle.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Internationalisation"
+  },
+  "48": {
+    "objectif": "<ul><li>Fournir aux utilisateurs des informations sur les partenaires tiers impliqu\u00e9s dans la transaction.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "L'identit\u00e9 des prestataires impliqu\u00e9s dans les transactions est pr\u00e9cis\u00e9e.",
+    "controle": "<p>Dans la page du panier (aussi appel\u00e9 caddie), dans les mentions l\u00e9gales, la FAQ et\/ou une page d'aide d'un site de e-commerce&nbsp;:<\/p><ul><li>Identifier la pr\u00e9sence d'informations relatives \u00e0 l'identit\u00e9 des prestataires bancaires et\/ou des solutions de paiement utilis\u00e9es pour les transactions \u00e9lectroniques. Au minimum, on identifiera la banque ou le prestataire par la pr\u00e9sence d'un logo.<\/li><\/ul>",
+    "solution": "<p>Indiquer sur le site les informations relatives \u00e0 l'identit\u00e9 des prestataires bancaires et\/ou des solutions de paiement utilis\u00e9es pour les transactions \u00e9lectroniques.<\/p>",
+    "etape": "Editorial",
+    "tag": "Privacy",
+    "theme": "E-Commerce"
+  },
+  "132": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier pr\u00e9cis\u00e9ment la nature du lien et d'\u00e9viter des actions erron\u00e9es. <\/li><li>Permettre aux outils d'indexation d'associer un libell\u00e9 \u00e0 une ressource. <\/li><li>Permettre aux lecteurs d'\u00e9cran d'en indiquer la cible de fa\u00e7on explicite et d'\u00e9viter de d\u00e9sorienter les utilisateurs.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Le libell\u00e9 de chaque lien d\u00e9crit sa fonction ou la nature du contenu vers lequel il pointe.",
+    "controle": "<p>Dans le code source de chaque lien texte ou image-lien<\/p><ul><li>V\u00e9rifier que le libell\u00e9 du lien d\u00e9signe explicitement la nature ou la fonction du contenu vis\u00e9, ou encore la fonction sp\u00e9cifique du lien ;<\/li><li>Contr\u00f4ler, dans le cas d'images-liens, que l'attribut <code>alt<\/code> de l'image joue ce r\u00f4le.<\/li><\/ul>",
+    "solution": "<p>Indiquer sans ambigu\u00eft\u00e9 le contenu de la page cible du lien, la fonction du lien ou son comportement, le cas \u00e9ch\u00e9ant, dans le libell\u00e9 des liens (portion de texte situ\u00e9e entre les balises &lt;a href=\"URL\"&gt; et &lt;\/a&gt; ou dans l'alternative textuelle de l'image plac\u00e9e entre ces balises, \u00e9ventuellement combin\u00e9e au libell\u00e9 textuel).<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/a\">\u00e9l\u00e9ment <code>a<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/img\"><code>img<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Liens"
+  },
+  "25": {
+    "objectif": "<ul><li>Pr\u00e9venir la transmission de donn\u00e9es personnelles.<\/li><li>Pr\u00e9venir l\u2019ex\u00e9cution de code malicieux.<\/li><li>Pr\u00e9venir les baisses de performance li\u00e9es au partage de ressources dans de multiples fen\u00eatres.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Les liens externes qui ouvrent une nouvelle fen\u00eatre ne partagent pas d'information de contexte",
+    "controle": "<p>v\u00e9rifier pour chaque lien ayant un attribut <code>target=\"_blank\"<\/code> la pr\u00e9sence de l'attribut <code>rel=\"noreferrer noopener\"<\/code>.<\/p>",
+    "solution": "<p>Doter chaque lien ayant un attribut <code>target=\"_blank\"<\/code> d'un attribut <code>rel=\"noreferrer noopener\"<\/code>.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "1": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier imm\u00e9diatement les nouveaux contenus ou services en ligne.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation.<\/li><\/ul>",
+    "titre": "Le site fournit aux utilisateurs la possibilit\u00e9 de conna\u00eetre les nouveaux contenus ou services.",
+    "controle": "<p>Dans l'ensemble du site, v\u00e9rifier que les nouveaux contenus ou services sont accessibles par exemple gr\u00e2ce \u00e0 un canal d'information interne au site (flux RSS des actualit\u00e9s, rubrique du type \u00ab&nbsp;Actualit\u00e9s du site&nbsp;\u00bb, etc.) ou un canal externe lui-m\u00eame accessible depuis le site (obligatoirement via sa page d'accueil) tel qu'un compte Twitter.<\/p>",
+    "solution": "<p>\u00c0 titre d'exemple, les diff\u00e9rentes solutions ci-dessous peuvent \u00eatre d\u00e9ploy\u00e9es seules ou conjointement&nbsp;: <\/p><ul><li>Publier un flux RSS des actualit\u00e9s du site.<\/li><li>Publier une rubrique du type \u00ab&nbsp;Actualit\u00e9s du site&nbsp;\u00bb ou \u00ab&nbsp;Quoi de neuf ?&nbsp;\u00bb<\/li><li>Indiquer un compte de type Twitter, Facebook ou autre, o\u00f9 sont publi\u00e9es les actualit\u00e9s concernant le site.<\/li><\/ul>",
+    "etape": "Editorial",
+    "tag": "Mobile",
+    "theme": "Contenus"
+  },
+  "59": {
+    "objectif": "<ul><li>Pr\u00e9venir les risques de fraude en permettant la suppression pr\u00e9ventive des donn\u00e9es.<\/li><li>Donner aux utilisateurs la ma\u00eetrise de leurs donn\u00e9es bancaires.<\/li><li>Pr\u00e9venir les erreurs de paiement en permettant la mise \u00e0 jour pr\u00e9ventive des donn\u00e9es bancaires.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Les donn\u00e9es bancaires m\u00e9moris\u00e9es par le site peuvent \u00eatre modifi\u00e9es ou supprim\u00e9es.",
+    "controle": "<p>V\u00e9rifier apr\u00e8s m\u00e9morisation de donn\u00e9es bancaires qu'il est possible, dans le compte utilisateur, de modifier et supprimer celles-ci.<\/p>",
+    "solution": "<p>Si le site m\u00e9morise les donn\u00e9es bancaires de l'utilisateur permettant un paiement (identit\u00e9, num\u00e9ro de carte bancaire, etc.), permettre dans la gestion de son compte de modifier toutes les donn\u00e9es m\u00e9moris\u00e9es et de les supprimer.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "E-Commerce"
+  },
+  "131": {
+    "objectif": "<ul><li>\u00c9viter aux utilisateurs d'avoir uniquement une URL peu compr\u00e9hensible en guise de libell\u00e9. <\/li><li>\u00c9viter les liens qui deviennent invisibles lorsque les styles CSS ou les images d'arri\u00e8re-plan ne sont pas pris en compte.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Chaque lien est dot\u00e9 d'un intitul\u00e9 dans le code source.",
+    "controle": "<p>La d\u00e9tection des liens vides n\u00e9cessite l'examen du code g\u00e9n\u00e9r\u00e9 afin de contr\u00f4ler le contenu effectivement pr\u00e9sent dans la balise <code>a<\/code>, dans l'alternative de la balise <code>img<\/code> en cas d'image-lien ou encore dans l'alternative des \u00e9l\u00e9ments <code>object<\/code> et <code>embed<\/code>, etc. <\/p><p>Dans chaque page examin\u00e9e&nbsp;: <\/p><ul><li>V\u00e9rifier que chaque lien texte a un libell\u00e9 affich\u00e9 lorsque les styles CSS sont d\u00e9sactiv\u00e9s.<\/li><li>Contr\u00f4ler que chaque lien image a un libell\u00e9 affich\u00e9 lorsque les images sont d\u00e9sactiv\u00e9es ; <\/li><\/ul><p>Dans le cas des liens HTML, il faut \u00e9galement v\u00e9rifier que le libell\u00e9 est affich\u00e9 lorsque les couleurs seules sont d\u00e9sactiv\u00e9es.<\/p>",
+    "solution": "<p>Donner \u00e0 chaque lien un libell\u00e9 textuel (entre les balises ouvrantes et fermantes de l'\u00e9l\u00e9ment <code>a<\/code>) ou, si n\u00e9cessaire, via l'alternative textuelle d'un \u00e9l\u00e9ment <code>img<\/code> ou <code>object<\/code>, etc. <\/p><p>Ne pas masquer \u00e0 l'affichage le libell\u00e9 textuel de l'\u00e9l\u00e9ment <code>a<\/code> pour le remplacer par un effet de style CSS (image d'arri\u00e8re-plan).<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/a\">\u00e9l\u00e9ment <code>a<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Liens"
+  },
+  "221": {
+    "objectif": "<ul><li>Permettre au navigateur de choisir le bon encodage des caract\u00e8res pour afficher la page.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Les en-t\u00eates envoy\u00e9s par le serveur contiennent les informations relatives au jeu de caract\u00e8res employ\u00e9.",
+    "controle": "<p>Pour chaque page examin\u00e9e&nbsp;: <\/p><ul><li>V\u00e9rifier la pr\u00e9sence du <code>charset<\/code> dans le champ content-type renvoy\u00e9 par le serveur avec un outil d\u00e9di\u00e9 ; <\/li><li>V\u00e9rifier que le jeu de caract\u00e8res d\u00e9clar\u00e9 correspond effectivement au jeu de caract\u00e8res utilis\u00e9 par le document. En pr\u00e9sence de caract\u00e8res non corrects \u00e0 la place des accents ou autres, la bonne pratique sera certainement invalid\u00e9e. <\/li><\/ul>",
+    "solution": "<p>Le param\u00e8tre <code>charset<\/code> de l'en-t\u00eate HTTP content-type est renseign\u00e9 sous la forme : <code>Content-Type: text\/html; charset=utf-8<\/code> (utf-8 \u00e9tant ici un exemple), en fonction du jeu de caract\u00e8res effectivement utilis\u00e9 par le document et de son type MIME.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Serveur et performances"
+  },
+  "144": {
+    "objectif": "<ul><li>\u00c9viter aux utilisateurs des t\u00e9l\u00e9chargements inutiles. <\/li><li>Informer les utilisateurs du contenu des fichiers en t\u00e9l\u00e9chargement.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "La langue des fichiers en t\u00e9l\u00e9chargement est pr\u00e9cis\u00e9e lorsqu'elle diff\u00e8re de celle de la page d'origine.",
+    "controle": "<p>Pour chaque lien de t\u00e9l\u00e9chargement menant \u00e0 un document r\u00e9dig\u00e9 dans une autre langue que celle de la page concern\u00e9, v\u00e9rifier qu'il est possible de conna\u00eetre la langue du fichier \u00e0 t\u00e9l\u00e9charger&nbsp;:<\/p><ul><li>Via une information donn\u00e9e dans le libell\u00e9 du lien ; <\/li><li>Via l'attribut <code>title<\/code> du lien reprenant et compl\u00e9tant le libell\u00e9 de celui-ci ;<\/li><li>Via une information donn\u00e9e dans le contexte du lien&nbsp;: paragraphe ou \u00e9l\u00e9ment de liste <code>li<\/code> o\u00f9 il est inclus, titre de section qui le pr\u00e9c\u00e8de, cellule d'en-t\u00eate de tableau associ\u00e9e \u00e0 celle o\u00f9 il est pr\u00e9sent ; <\/li><li>Ou via une information g\u00e9n\u00e9rique donn\u00e9e dans une page d'aide. <\/li><\/ul>",
+    "solution": "<p>Indiquer la langue du contenu du document&nbsp;:<\/p><ul><li>Soit dans le libell\u00e9 du lien ;<\/li><li>Soit via l'attribut <code>title<\/code> du lien.<\/li><\/ul><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/a\">\u00e9l\u00e9ment <code>a<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Liens"
+  },
+  "195": {
+    "objectif": "<ul><li>Pr\u00e9venir les alertes de type \"site non s\u00e9curis\u00e9\" dans les outils de consultation.<\/li><li>Am\u00e9liorer la s\u00e9curit\u00e9 pour l\u2019ensemble des ressources du site.<\/li><\/ul>",
+    "titre": "Les pages utilisant le protocole HTTPS ne proposent pas de ressources HTTP.",
+    "controle": "<p>Pour chaque page du site envoy\u00e9e par le serveur en HTTPS, v\u00e9rifier qu'aucune des ressources qui la composent (images, fichiers CSS, JS, etc.) n'est fournie via le protocole HTTP.<\/p>",
+    "solution": "<p>Pour chaque page du site envoy\u00e9e par le serveur en HTTPS, fournir toutes les ressources qui la composent (images, fichiers CSS, JS, etc.) via le protocole HTTPS et non via HTTP.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "16": {
+    "objectif": "<ul><li>Laisser l\u2019utilisateur libre de son choix d\u2019utiliser ou non un service tiers. <\/li><li>Fournir un moyen alternatif d\u2019acc\u00e8s au service. <\/li><li>Fournir un moyen d\u2019acc\u00e8s ma\u00eetris\u00e9 par les administrateurs du service. <\/li><li>Limiter la d\u00e9pendance \u00e0 un acteur tiers dont la politique et la strat\u00e9gie commerciale ou technique ne manquera pas d\u2019\u00e9voluer dans le temps.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "La cr\u00e9ation de compte est possible sans recours \u00e0 un syst\u00e8me d'identification tiers.",
+    "controle": "<div>V\u00e9rifier qu\u2019il est possible de cr\u00e9er un compte sans avoir recours \u00e0 un service tiers, par la saisie ou le choix d\u2019un identifiant et d\u2019un mot de passe propres.<\/div>",
+    "solution": "<div>Mettre en place une proc\u00e9dure de cr\u00e9ation de compte par saisie ou cr\u00e9ation d\u2019un identifiant et d\u2019un mot de passe propres au service.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "22": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur de prot\u00e9ger ses donn\u00e9es et contenus personnels.<\/li><li>Limiter les risques d\u2019usurpation d\u2019identit\u00e9.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Il est possible de se d\u00e9connecter des espaces priv\u00e9s.",
+    "controle": "<p>Se connecter au service ou \u00e0 l'espace priv\u00e9 \u00e0 partir de plusieurs p\u00e9riph\u00e9riques diff\u00e9rents, et v\u00e9rifier que le site permet de d\u00e9sactiver globalement toutes les connexions actives.<\/p>",
+    "solution": "<p>Fournir \u00e0 l'utilisateur un m\u00e9canisme lui permettant de d\u00e9sactiver globalement toutes les connexions actives de ses diff\u00e9rents appareils au service ou \u00e0 l'espace priv\u00e9.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "224": {
+    "objectif": "<ul><li>Fournir une date de publication aux moteurs de recherche et outils d\u2019indexation.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "La date de publication ou de mise \u00e0 jour des contenus est mise \u00e0 disposition sous forme programmatique.",
+    "controle": "<p>V\u00e9rifier que chaque date de publication ou de mise \u00e0 jour du contenu affich\u00e9e sur le site est balis\u00e9e avec l'\u00e9l\u00e9ment HTML<code>time<\/code>, dot\u00e9 d'un attribut <code>datetime<\/code> indiquant la date au format standard requis par la sp\u00e9cification HTML5.<\/p>",
+    "solution": "<p>Utiliser l'\u00e9l\u00e9ment HTML <code>time<\/code> pour baliser les dates de publication et de mise \u00e0 jour du contenu affich\u00e9es sur le site, et son attribut <code>datetime<\/code> pour indiquer celles-ci au format standard requis par la sp\u00e9cification HTML5.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/time\"><code>time<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Structure et code"
+  },
+  "107": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de s'adresser ou d'adresser directement leurs r\u00e9clamations au bon interlocuteur. <\/li><li>Rassurer les internautes sur le fait qu'ils pourront facilement interagir avec le service des r\u00e9clamations en cas de probl\u00e8me.<\/li><\/ul>",
+    "titre": "Le site propose au moins un moyen de contacter le responsable des r\u00e9clamations.",
+    "controle": "<p>Dans au moins une des pages suivantes&nbsp;: la page d'accueil, la page des mentions l\u00e9gales, la page d'\u00e0 propos, d'aide, ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales de vente ou d'utilisation&nbsp;:<\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'informations permettant d'entrer en contact (e-mail, t\u00e9l\u00e9phone, fax\u2026) avec le responsable des r\u00e9clamations.<\/li><\/ul><p>La nature du moyen de contact en question n'est pas \u00e9valu\u00e9e ici seule sa pr\u00e9sence et sa mention sont contr\u00f4l\u00e9es.<\/p>",
+    "solution": "<p>Indiquer dans la page d'accueil, ou au sein de la page des mentions l\u00e9gales, dans la page d'\u00e0 propos, d'aide, ou encore dans les conditions g\u00e9n\u00e9rales, un moyen de contacter (e-mail, t\u00e9l\u00e9phone, fax\u2026) le responsable des r\u00e9clamations.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "208": {
+    "objectif": "<ul><li>Pr\u00e9venir les risques d\u2019intrusion sur le serveur. <\/li><li>Pr\u00e9venir l\u2019apparition de contenus ou scripts malveillants sur le site.<\/li><\/ul>",
+    "titre": "Le serveur ne communique pas d'informations sur les logiciels et langages utilis\u00e9s.",
+    "controle": "<p>V\u00e9rifier que les les ent\u00eates HTTP envoy\u00e9s par le serveur ne donnent aucune information sur les logiciels et langages utilis\u00e9s c\u00f4t\u00e9 serveur.<\/p>",
+    "solution": "<p>Ne communiquer via les ent\u00eates HTTP envoy\u00e9s par le serveur aucune information sur les logiciels et langages utilis\u00e9s c\u00f4t\u00e9 serveur, en particulier via les ent\u00eates Server, X-Powered-By et X-AspNet-Version.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "106": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur de r\u00e9pondre aux mails ou de prendre contact.<\/li><li>Maintenir ou am\u00e9liorer l\u2019image de marque du service.<\/li><\/ul>",
+    "titre": "Tous les mails fournissent au moins un moyen de contact.",
+    "controle": "<p>V\u00e9rifier pour chaque mail envoy\u00e9 \u00e0 l'utilisateur par le site, y compris ceux en \"no-reply\", qu'il fournit \u00e0 celui-ci au moins un moyen de contact : adresse, t\u00e9l\u00e9phone, formulaire en ligne, mail, etc.<\/p>",
+    "solution": "<p>Dans chaque mail adress\u00e9 \u00e0 l'utilisateur, y compris ceux en \"no-reply\", indiquer \u00e0 l'utilisateur au moins un moyen de contact : adresse, t\u00e9l\u00e9phone, formulaire en ligne, mail, etc.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "84": {
+    "objectif": "<ul><li>Augmenter le taux de r\u00e9ussite du processus complexe. <\/li><li>Maintenir et am\u00e9liorer l\u2019image de marque.<\/li><li>Permettre \u00e0 l'utilisateur de pr\u00e9parer les \u00e9ventuels documents n\u00e9c\u00e9ssaires.<\/li><\/ul>",
+    "titre": "L'utilisateur est averti au d\u00e9but d'un processus complexe de la nature des donn\u00e9es et documents exig\u00e9s.",
+    "controle": "<p>V\u00e9rifier pour chaque processus complexe que la liste des documents ou informations sp\u00e9cifiques n\u00e9cessaires pour finaliser le processus est indiqu\u00e9e \u00e0 l'utilisateur avant la premi\u00e8re \u00e9tape de celui-ci.<\/p>",
+    "solution": "<p>Pour tout processus complexe, par exemple un formulaire de commande, afficher avant la premi\u00e8re \u00e9tape de celui-ci la liste des documents ou informations sp\u00e9cifiques qui devront \u00eatre fournis par l'utilisateur pour finaliser le processus.<\/p>",
+    "etape": "Conception",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "23": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d\u2019utiliser des comptes mails d\u00e9di\u00e9s \u00e0 un usage sp\u00e9cifique.<\/li><li>Permettre aux utilisateurs de tracer la diffusion de leur adresses mail. <\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Le site accepte les alias mail contenant le signe +",
+    "controle": "<p>V\u00e9rifier, pour chaque saisie d'une adresse mail saisie par l'utilisateur, que les  adresses du type <code>foo.bar+truc@machin.com<\/code> sont accept\u00e9es et sont fonctionnelles (utilisation comme identifiant, r\u00e9ception d'un mail envoy\u00e9 par le site, etc.)<\/p>",
+    "solution": "<p>Pour toute validation d'une adresse mail saisie par l'utilisateur, accepter les adresses du type <code>foo.bar+truc@machin.com<\/code><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "145": {
+    "objectif": "<ul><li>Am\u00e9liorer l\u2019identification des fichiers internes. <\/li><li>\u00c9viter les confusions pour l\u2019utilisateur.<\/li><\/ul>",
+    "titre": "Le nommage des fichiers internes propos\u00e9s en t\u00e9l\u00e9chargement permet d'en identifier le contenu et la provenance.",
+    "controle": "<p>V\u00e9rifier, pour chaque fichier interne qui peut \u00eatre t\u00e9l\u00e9charg\u00e9 par l'utilisateur, que le nom du fichier mentionne explicitement le site ou le service ainsi que la nature du contenu.<\/p>",
+    "solution": "<p>Pour chaque fichier interne t\u00e9l\u00e9chargeable par l'utilisateur, utiliser un nom de fichier mentionnant explicitement le site ou le service de mani\u00e8re \u00e0 permettre de l'identifier, ainsi que la nature du contenu (facture, contrat, etc).<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Liens"
+  },
+  "167": {
+    "objectif": "<ul><li>Avertir des utilisateurs ayant des contraintes sp\u00e9cifiques de manipulation ou de temps. <\/li><li>\u00c9viter les pertes de donn\u00e9es et de temps pour l\u2019utilisateur. <\/li><li>Pr\u00e9venir les \u00e9checs de commande.<\/li><\/ul>",
+    "titre": "Les limites de temps impos\u00e9es \u00e0 une action ou un acc\u00e8s sont indiqu\u00e9es.",
+    "controle": "<p>Pour toute action que l'utilisateur doit ex\u00e9cuter dans une limite de temps impos\u00e9e, ou toute action ou information mises \u00e0 disposition pendant un temps limit\u00e9, v\u00e9rifier que l'utilisateur est inform\u00e9 de cette limite et de sa dur\u00e9e,  avant le d\u00e9clenchement de l'action ou la mise \u00e0 disposition.<\/p>",
+    "solution": "<p>Pour toute action que l'utilisateur doit ex\u00e9cuter dans une limite de temps impos\u00e9e, ou toute action ou information mises \u00e0 disposition pendant un temps limit\u00e9, informer l'utilisateur de cette limite et de sa dur\u00e9e, avant le d\u00e9clenchement de l'action ou la mise \u00e0 disposition.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Navigation"
+  },
+  "177": {
+    "objectif": "<ul><li>Permettre une bonne lisibilit\u00e9 des contenus. <\/li><li>Limiter la charge mentale lors de la consultation.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les contenus sont pr\u00e9sent\u00e9s avec un contraste suffisant par rapport \u00e0 leur arri\u00e8re-plan.",
+    "controle": "<p>Dans l'ensemble des pages&nbsp;:<\/p><ul><li>Rep\u00e9rer les contenus dont la diff\u00e9rence de contraste\/luminosit\u00e9 avec leur arri\u00e8re-plan est potentiellement insuffisante<\/li><li>Utiliser un outil du type Colour Contrast Analyzer pour calculer le ratio de contraste&nbsp;: cliquer sur Luminosit\u00e9 et relever la couleur du premier plan puis celle du second plan dans les champs d\u00e9di\u00e9s ;<\/li><li>V\u00e9rifier que le ratio de contraste relev\u00e9 est sup\u00e9rieur ou \u00e9gal \u00e0 3:1<\/li><\/ul><p>Dans le cas de textes plac\u00e9s sur un arri\u00e8re-plan en d\u00e9grad\u00e9, en motif ou photographique, la mesure de couleur de l'arri\u00e8re-plan est prise au point le plus d\u00e9favorable jouxtant le texte (pour un texte noir, le pixel le plus sombre). Il est conseill\u00e9 de tenir \u00e9galement compte de l'agrandissement \u00e9ventuel de la taille de caract\u00e8re par l'utilisateur (Zoom texte seulement), qui peut entra\u00eener un changement dans la superposition texte\/arri\u00e8re-plan.<\/p>",
+    "solution": "<p>Veiller \u00e0 conserver un ratio de contraste minimal de 3:1 entre le texte et son arri\u00e8re-plan, tel qu'il peut \u00eatre mesur\u00e9 via l'algorithme WCAG2.0.<\/p>",
+    "etape": "Conception",
+    "tag": "Accessibility",
+    "theme": "Pr\u00e9sentation"
+  },
+  "64": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur d'identifier imm\u00e9diatement et sans confusion possible les produits indisponibles. <\/li><li>\u00c9viter l'effet de d\u00e9ception si un utilisateur d\u00e9bute une proc\u00e9dure de commande et s'aper\u00e7oit tardivement de l'indisponibilit\u00e9 du produit d\u00e9sir\u00e9.<\/li><\/ul>",
+    "titre": "Les produits indisponibles font l'objet d'une diff\u00e9renciation visuelle et textuelle.",
+    "controle": "<p>Dans les pages produits : <\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'une mention textuelle sur la disponibilit\u00e9 des produits ; <\/li><li>Ou contr\u00f4ler la pr\u00e9sence d'une indication graphique diff\u00e9renciant les produits disponibles de ceux qui ne le sont pas (ic\u00f4ne, couleur, etc.) accompagn\u00e9e d'une alternative textuelle appropri\u00e9e.<\/li><\/ul>",
+    "solution": "<p>Pr\u00e9ciser, dans le contenu pr\u00e9sentant chaque produit, une mention textuelle ou graphique du type \u00ab&nbsp;indisponible&nbsp;\u00bb ou \u00ab&nbsp;disponible&nbsp;\u00bb.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "181": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur de cliquer sur les \u00e9l\u00e9ments interactifs. Limiter les fausses manipulations et les manipulations inutiles.<\/li><li>Am\u00e9liorer la compatibilit\u00e9 avec les terminaux mobiles. <\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "La taille des \u00e9l\u00e9ments cliquables est suffisante.",
+    "controle": "<p>v\u00e9rifier que la taille par d\u00e9faut de chaque \u00e9l\u00e9ment cliquable (boutons, liens) est au moins de 44 par 44 pixels.<\/p>",
+    "solution": "<p>Donner \u00e0 chaque \u00e9l\u00e9ment cliquable (boutons, liens) une taille par d\u00e9faut d'au moins 44 par 44 pixels.<\/p>",
+    "etape": "Conception",
+    "tag": "Mobile",
+    "theme": "Pr\u00e9sentation"
+  },
+  "184": {
+    "objectif": "<ul><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation.<\/li><\/ul>",
+    "titre": "Les pictogrammes typographiques sont dot\u00e9s d'une alternative appropri\u00e9e.",
+    "controle": "<div>Examiner directement le code pour v\u00e9rifier que chaque ic\u00f4ne affich\u00e9e via une police de caract\u00e8res est dot\u00e9e d\u2019une alternative dans le contenu HTML.<\/div>",
+    "solution": "<p>Fournir un contenu masqu\u00e9 \u00e0 l\u2019affichage via CSS pour chaque information port\u00e9e par le recours \u00e0 une police de caract\u00e8res sp\u00e9cifique.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Pr\u00e9sentation"
+  },
+  "227": {
+    "objectif": "<ul><li>Permettre aux utilisateurs qui le souhaitent de visualiser la structure du contenu de la page et d\u2019y naviguer. <\/li><li>Permettre aux machines et aux outils d\u2019indexation d\u2019extraire le plan de chaque page. <\/li><li>Am\u00e9liorer le r\u00e9f\u00e9rencement en facilitant l\u2019interpr\u00e9tation du contenu par les robots d\u2019indexation.<\/li><\/ul>",
+    "titre": "Le contenu de chaque page est organis\u00e9 selon une structure de titres et sous-titres hi\u00e9rarchis\u00e9e.",
+    "controle": "<p>Dans chaque page, contr\u00f4ler successivement :<\/p><ul><li>la pr\u00e9sence d\u2019au moins un \u00e9l\u00e9ment h1 correspondant au titre de la section principale du contenu de la page ;<\/li><li>la pr\u00e9sence de sous-titres h2 \u00e0 h6 (si n\u00e9cessaire) correspondant aux titres des sous-sections de contenu principal de la page ;<\/li><li>l\u2019absence d\u2019interruption dans la succession descendante des titres h1 \u00e0 h6, c\u2019est-\u00e0-dire par exemple l\u2019absence de titre h1 suivi d\u2019un titre h3.<\/li><\/ul><p>La v\u00e9rification doit s\u2019effectuer en tenant compte d\u2019\u00e9ventuels \u00e9l\u00e9ments de titres masqu\u00e9s \u00e0 l\u2019affichage ou bien de titres g\u00e9n\u00e9r\u00e9s par JavaScript. On peut, \u00e0 cet effet, utiliser la fonction d\u2019affichage de la table des mati\u00e8res de la page disponible dans certains outils de d\u00e9veloppement.<\/p>",
+    "solution": "<p>Structurer le document en titres et sous-titres \u00e0 l\u2019aide des \u00e9l\u00e9ments HTML h1 \u00e0 h6.<\/p><p>Veiller \u00e0 ce que la structure ne comporte pas de \u00ab trous \u00bb : un titre de niveau h2 ne doit pas \u00eatre suivi d\u2019un titre h4, h5 ou h6, par exemple.<\/p><p>Veiller \u00e0 ce que chaque page comporte au moins un titre de niveau 1 avec l\u2019\u00e9l\u00e9ment h1.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/Heading_Elements\"><code>h1<\/code>... <code>h6<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Structure et code"
+  },
+  "24": {
+    "objectif": "<ul><li>Prot\u00e9ger les utilisateurs de la divulgation d\u2019\u00e9ventuelles informations sensibles concernant leur navigation. <\/li><li>S\u00e9curiser le chargement des ressources externes. <\/li><li>Ma\u00eetriser les informations transmises par le serveur.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Les en-t\u00eates envoy\u00e9s par le serveur sp\u00e9cifient la politique de communication des referrers.",
+    "controle": "<p>V\u00e9rifier pour chaque page du site, la pr\u00e9sence de l'ent\u00eate HTTP Referrer-Policy avec comme valeur, par ordre de pr\u00e9f\u00e9rence :<\/p><ul><li> <code>no-referrer<\/code><\/li><li> <code>same-origin<\/code><\/li><li> <code>strict-origin<\/code><\/li><li> <code>strict-origin-when-cross-origin<\/code><\/li><\/ul>",
+    "solution": "<p>Pour chaque page du site, configurer le serveur pour envoyer l'ent\u00eate HTTP Referrer-Policy avec comme valeur, par ordre de pr\u00e9f\u00e9rence :<\/p><ul><li> <code>no-referrer<\/code><\/li><li> <code>same-origin<\/code><\/li><li> <code>strict-origin<\/code><\/li><li> <code>strict-origin-when-cross-origin<\/code><\/li><\/ul>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "209": {
+    "objectif": "<ul><li>Pr\u00e9venir les risques de diffusion de code malveillant. <\/li><li>Limiter les risques associ\u00e9s \u00e0 la diffusion de code malveillant d\u00e9sindexation, plaintes\u2026<\/li><\/ul>",
+    "titre": "Le contr\u00f4le d'int\u00e9grit\u00e9 des ressources tierces est pr\u00e9sent et valide",
+    "controle": "<p>V\u00e9rifier pour chaque \u00e9l\u00e9ment <code>link <\/code>et <code>script<\/code> (appelant un fichier externe) la pr\u00e9sence de l'attribut <code>integrity<\/code> indiquant le hachage cryptographique (hachage SRI) auquel le fichier concern\u00e9 doit correspondre.<\/p>",
+    "solution": "<p>Utiliser l'attribut integrity de chaque \u00e9l\u00e9ment <code>link<\/code> et <code>script<\/code> (appelant un fichier externe) pour fournir au navigateur le hachage cryptographique (hachage SRI) auquel le fichier doit correspondre.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/link\"><code>link<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/script\"><code>script<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "192": {
+    "objectif": "<ul><li>Pr\u00e9venir le risque d\u2019interception et de vol de donn\u00e9es. <\/li><li>Am\u00e9liorer la s\u00e9curit\u00e9 du site Web. <\/li><li>Rassurer les utilisateurs.<\/li><\/ul>",
+    "titre": "Toutes les pages utilisent le protocole HTTPS.",
+    "controle": "<p>V\u00e9rifier que chaque page et ressource de page du site utilise le protocole HTTPS et non HTTP.<\/p>",
+    "solution": "<p>Ne pas utiliser le protocole HTTP,  mais uniquement HTTPS pour toutes les ressources de chaque page du site.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "19": {
+    "objectif": "<ul><li>Faciliter la gestion des comptes utilisateurs. <\/li><li>\u00c9viter \u00e0 l'utilisateur une recherche de contact. <\/li><li>Conforter la confiance dans le site ou le service.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Les comptes ou abonnements ouverts en ligne peuvent \u00eatre ferm\u00e9s par le m\u00eame moyen.",
+    "controle": "<p>Dans tout site proposant la cr\u00e9ation d'un compte utilisateur&nbsp;:<\/p><ul><li>Cr\u00e9er un compte puis contr\u00f4ler la possibilit\u00e9 de le clore ou de demander sa cl\u00f4ture en ligne, via un processus similaire.<\/li><\/ul><p><br><\/p>",
+    "solution": "<p>Fournir dans le site une proc\u00e9dure (formulaire) de cl\u00f4ture de compte automatis\u00e9e si la cr\u00e9ation de compte est elle-m\u00eame automatis\u00e9e.<\/p><p>Fournir sur le site un formulaire de demande de cl\u00f4ture si la cr\u00e9ation de compte est diff\u00e9r\u00e9e.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "152": {
+    "objectif": "<ul><li>Donner aux utilisateurs un moyen suppl\u00e9mentaire de se rep\u00e9rer dans l'architecture du site.<\/li><\/ul>",
+    "titre": "Les items actifs de menu sont signal\u00e9s.",
+    "controle": "<p>V\u00e9rifier pour chaque menu de navigation que l'item actif de menu correspondant \u00e0 la section ou la page affich\u00e9e se diff\u00e9rencie au moins visuellement des autres liens du menu.<\/p>",
+    "solution": "<p>Diff\u00e9rencier l'item actif de menu correspondant \u00e0 la section ou la page en cours des autres lien du menu, au moins visuellement.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Navigation"
+  },
+  "61": {
+    "objectif": "<ul><li>Faciliter les op\u00e9rations de gestion et de rapprochement par les utilisateurs.<\/li><li>Fournir une sauvegarde des donn\u00e9es n\u00e9cessaires \u00e0 la comptabilit\u00e9.<\/li><\/ul>",
+    "titre": "Les factures \u00e9mises sont \u00e9galement disponibles en ligne.",
+    "controle": "<p>V\u00e9rifier apr\u00e8s un achat que la facture est disponible dans le compte utilisateur et qu'il est possible de la t\u00e9l\u00e9charger.<\/p>",
+    "solution": "<p>Permettre \u00e0 l'utilisateur d'acc\u00e9der, dans son compte utilisateur, \u00e0 l'ensemble des factures correspondant \u00e0 ses achats sur le site et de les t\u00e9l\u00e9charger.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "211": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de rejoindre la page d'accueil du site m\u00eame lorsqu'ils oublient de taper le pr\u00e9fixe www.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site<\/li><\/ul>",
+    "titre": "L'adresse du site fonctionne avec et sans pr\u00e9fixe www.",
+    "controle": "<p>Sur quelques unes des pages examin\u00e9es&nbsp;:<\/p><ul><li>Enlever le pr\u00e9fixe \u00abwww\u00bb dans l'adresse de la page, au sein de la barre d'URL de votre navigateur ;<\/li><li>V\u00e9rifier que vous avez toujours acc\u00e8s au site. <\/li><\/ul><p>Attention : certains navigateurs masquent par d\u00e9faut le pr\u00e9fixe www. Le test devra donc se faire en ajoutant http:\/\/ ou https:\/\/devant l'adresse tout en omettant le pr\u00e9fixe, par exemple : https:\/\/opquast.com. <\/p>",
+    "solution": "<p>Configurer le serveur de fa\u00e7on \u00e0 ce qu'il g\u00e8re les adresses sans www (acheminement).<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Ecodesign",
+    "theme": "Serveur et performances"
+  },
+  "76": {
+    "objectif": "<ul><li>Faciliter l'utilisation des formulaires dans tous les contextes utilisateurs, notamment les utilisateurs de loupe d'\u00e9cran ou ceux qui doivent grossir le texte de fa\u00e7on importante. <\/li><li>Pr\u00e9venir les erreurs de saisie.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "Les informations contextuelles se rapportant \u00e0 un champ de formulaire lui sont visuellement rattach\u00e9es.",
+    "controle": "<p>V\u00e9rifier pour chaque champ de formulaire :<\/p><ul><li>Que les \u00e9ventuelles informations compl\u00e9tant l'\u00e9tiquette du champ (aide \u00e0 la saisie, signalement des erreurs, etc.) sont affich\u00e9es \u00e0 proximit\u00e9 imm\u00e9diate du champ et de son \u00e9tiquette.<\/li><li>Qu'il n'y a pas d'espace vide important entre ces \u00e9l\u00e9ments.<\/li><\/ul>",
+    "solution": "<ul><li>Afficher les informations qui viennent compl\u00e9ter l'\u00e9tiquette du champ (aide \u00e0 la saisie, signalement des erreurs, etc.) \u00e0 proximit\u00e9 imm\u00e9diate du champ et de son \u00e9tiquette, afin que le rapport entre ceux-ci puisse \u00eatre per\u00e7u sans ambigu\u00eft\u00e9.<\/li><li>\u00c9viter les mises en forme de formulaire entra\u00eenant la pr\u00e9sence d'un espace vide important entre ces \u00e9l\u00e9ments.<\/li><\/ul>",
+    "etape": "Conception",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "203": {
+    "objectif": "<ul><li>Contribuer \u00e0 l'information des utilisateurs sur la s\u00e9curisation des \u00e9changes de donn\u00e9es sensibles.<\/li><\/ul>",
+    "titre": "Les informations sur la s\u00e9curit\u00e9 des transactions sont indiqu\u00e9es.",
+    "controle": "<p>Dans un site proposant d'effectuer des transactions en ligne : contr\u00f4ler que les informations sur le niveau et le mode de cryptage des donn\u00e9es sont facilement accessibles depuis une page d'aide ou une FAQ, par exemple. Si la proc\u00e9dure indique comment retrouver l'information dans l'interface d'un navigateur, elle doit faire r\u00e9f\u00e9rence aux principaux navigateurs du march\u00e9.<\/p>",
+    "solution": "<p>Indiquer le mode (SSL, TLS) et le niveau de cryptage des donn\u00e9es (128 ou 256 bits, etc.) sur les pages concern\u00e9es. Il est aussi possible d'indiquer comment retrouver l'information par le biais de son navigateur dans la mesure o\u00f9 la plupart offrent cette possibilit\u00e9.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "47": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'anticiper le mode et les conditions de paiement et de v\u00e9rifier avant la commande s'ils pourront la mener \u00e0 son terme.<\/li><\/ul>",
+    "titre": "Les moyens de paiement accept\u00e9s et les proc\u00e9dures correspondantes sont indiqu\u00e9s.",
+    "controle": "<p>Dans un site de vente en ligne, notamment dans la page d'accueil, ou dans la page des mentions l\u00e9gales, ou la page d'\u00e0 propos, d'aide, ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente&nbsp;: <\/p><ul><li>V\u00e9rifier que les informations sur les moyens de paiement accept\u00e9s ainsi que les proc\u00e9dures correspondantes sont disponibles.<\/li><\/ul>",
+    "solution": "<p>Indiquer dans le site les informations sur les modes de paiement accept\u00e9s ainsi que les proc\u00e9dures correspondantes.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "72": {
+    "objectif": "<ul><li>Pr\u00e9venir les erreurs d\u2019envoi de formulaires. <\/li><li>Pr\u00e9venir les pertes de donn\u00e9es.<\/li><li>\u00c9viter l'agacement et l'incompr\u00e9hension de l'utilisateur.<\/li><\/ul>",
+    "titre": "L'\u00e9tiquette de chaque champ de formulaire qui le n\u00e9cessite indique les limites de nombre de caract\u00e8res",
+    "controle": "<p>V\u00e9rifier, pour chaque champ faisant l'objet d'une limitation sp\u00e9cifique du nombre de caract\u00e8res qui peuvent \u00eatre saisis, que le nombre de caract\u00e8res autoris\u00e9s est indiqu\u00e9 dans l'\u00e9tiquette du champ, ou via une mention explicitement associ\u00e9e \u00e0 celle-ci dans le code HTML.<\/p>",
+    "solution": "<p>Pour chaque champ faisait l'objet d'une limitation sp\u00e9cifique du nombre de caract\u00e8res qui peuvent \u00eatre saisis, indiquer le nombre de caract\u00e8res maximum dans l'\u00e9tiquette du champ, ou dans une mention explicitement associ\u00e9e \u00e0 celle-ci dans le code HTML.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "58": {
+    "objectif": "<ul><li>Laisser l\u2019utilisateur ma\u00eetre de ses choix en mati\u00e8re de m\u00e9morisation de donn\u00e9es bancaires.<\/li><li>Pr\u00e9venir d\u2019\u00e9ventuels probl\u00e8mes juridiques en cas de plainte ou de vol de donn\u00e9es.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es.<\/li><\/ul>",
+    "titre": "Les donn\u00e9es bancaires ne sont m\u00e9moris\u00e9es qu'apr\u00e8s consentement explicite de l'utilisateur.",
+    "controle": "<p>V\u00e9rifier qu'au cours du processus de commande, le moyen de paiement utilis\u00e9 n'est pas m\u00e9moris\u00e9 automatiquement par le service, et que son enregistrement \u00e9ventuel pour une r\u00e9utilisation automatique n\u00e9cessite une validation explicite (opt-in et non opt-out).<\/p>",
+    "solution": "<ul><li>Ne pas enregistrer automatiquement les donn\u00e9es permettant d'utiliser un moyen de paiement sans consentement explicite de l\u2019utilisateur. <\/li><li>Recueillir le consentement explicite de l'utilisateur pour la m\u00e9morisation d'un moyen de paiement destin\u00e9 \u00e0 \u00eatre automatiquement r\u00e9utilis\u00e9 par le service (opt-in et non opt-out). <\/i><\/ul>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "E-Commerce"
+  },
+  "119": {
+    "objectif": "<ul><li>Laisser \u00e0 l\u2019utilisateur le contr\u00f4le de l\u2019interface visuelle lors de la consultation du site. <\/li><li>Ne pas imposer \u00e0 l\u2019utilisateur le d\u00e9clenchement d\u2019un contenu anim\u00e9.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les vid\u00e9os sont d\u00e9clench\u00e9es par l'utilisateur.",
+    "controle": "<p>Dans chaque page comportant un contenu vid\u00e9o : <\/p><ul><li>V\u00e9rifier l'absence de contenus vid\u00e9o activ\u00e9s automatiquement au chargement de la page ;<\/li><li>V\u00e9rifier l'absence de contenus vid\u00e9os activ\u00e9s de mani\u00e8re impr\u00e9visibles suite \u00e0 une action de l'utilisateur.<\/li><\/ul>",
+    "solution": "<p>Ne pas mettre en place des contenus audio dont le d\u00e9marrage est automatique et sans action explicite de l'utilisateur en ce sens.<\/p><p>Ne pas incorporer dans la page d'\u00e9l\u00e9ments d\u00e9clenchant la lecture d'une vid\u00e9o non contr\u00f4lable par exemple avec l'\u00e9l\u00e9ment html <code>vid\u00e9o<\/code> dot\u00e9 de l'attribut <code>autoplay<\/code> ou sans l'attribut <code>controls<\/code>.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Images et m\u00e9dias"
+  },
+  "138": {
+    "objectif": "<ul><li>\u00c9viter aux utilisateurs des clics inutiles et une perte de temps.<\/li><li>Pr\u00e9venir la d\u00e9ception des utilisateurs.<\/li><\/ul>",
+    "titre": "Les liens internes vers les contenus \u00e0 acc\u00e8s limit\u00e9 sont diff\u00e9renci\u00e9s",
+    "controle": "<p>Dans chaque page examin\u00e9e&nbsp;:<\/p><li>Identifier les liens  internes vers des contenus dont l'acc\u00e8s n\u00e9cessite une authentification.<\/li><li>V\u00e9rifier que ces liens se diff\u00e9rencient visuellement des autres liens internes.<\/li><\/ul>",
+    "solution": "<p>Les liens internes vers des contenus dont l'acc\u00e8s n\u00e9cessite une authentification peuvent \u00eatre diff\u00e9renci\u00e9s \u00e0 l'aide de pictogrammes ou des propri\u00e9t\u00e9s CSS de couleur de texte, de couleur d'arri\u00e8re-plan, de mise en gras, de bordures, de police de caract\u00e8res, etc. <\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Liens"
+  },
+  "128": {
+    "objectif": "<ul><li>Donner un acc\u00e8s direct et imm\u00e9diat aux traductions de la page courante.<\/li><\/ul>",
+    "titre": "Les liens d'acc\u00e8s aux versions traduites pointent directement vers la traduction de la page courante.",
+    "controle": "<p>Dans le cas d'un site internationalis\u00e9&nbsp;: <\/p><ul><li>S'assurer que les liens vers les traductions du contenu conduisent imm\u00e9diatement \u00e0 la traduction du contenu de la page en cours, sans retour en page d'accueil.<\/li><\/ul>",
+    "solution": "<p>Fournir sur chaque page dont le contenu a \u00e9t\u00e9 traduit un lien ou un formulaire de navigation donnant imm\u00e9diatement acc\u00e8s \u00e0 la version traduite de la page courante, sans retour \u00e0 la page d''accueil de la version linguistique concern\u00e9e.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Internationalisation"
+  },
+  "238": {
+    "objectif": "<ul><li>Fournir un contenu compr\u00e9hensible aux utilisateurs dont l'agent utilisateur ou l'aide technique (lecteur d'\u00e9cran) ne permet pas de restituer la mise en forme initialement pr\u00e9vue \u00e0 l'aide d'un tableau.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "La lin\u00e9arisation des tableaux utilis\u00e9s pour la mise en page ne nuit pas \u00e0 la compr\u00e9hension des contenus.",
+    "controle": "<p>Pour chaque tableau de mise en forme, c'est-\u00e0-dire pour chaque tableau ne comportant pas de donn\u00e9e reli\u00e9e \u00e0 des en-t\u00eates de ligne ou de colonne : <\/p><ul><li>Proc\u00e9der \u00e0 la lin\u00e9arisation de l'affichage \u00e0 l'aide d'un outils de d\u00e9veloppement.<\/li><li>V\u00e9rifier que le contenu lin\u00e9aris\u00e9 reste compr\u00e9hensible, sans incoh\u00e9rence ni perte d'information.<\/li><\/ul>",
+    "solution": "<p>Regrouper dans une m\u00eame cellule <code>td<\/code> les informations qui doivent \u00eatre verticalement associ\u00e9es (ne pas les r\u00e9partir dans des cellules plac\u00e9es dans des lignes successives du tableau).<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/td\"><code>td<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Structure et code"
+  },
+  "231": {
+    "objectif": "<ul><li>Faciliter la navigation et l'acc\u00e8s aux fonctionnalit\u00e9s des outils de consultations.<\/li><li>Laisser aux utilisateurs le contr\u00f4le de leurs menus et actions.<\/li><\/ul>",
+    "titre": "Le site ne bloque pas l'acc\u00e8s au menu contextuel",
+    "controle": "<p>V\u00e9rifier pour chaque page du site que le menu contextuel du navigateur peut \u00eatre ouvert \u00e0 partir de l'ensemble des contenus affich\u00e9s.<\/p>",
+    "solution": "<p>Ne pas utiliser JavaScript ou toute autre technique, pour bloquer la fonctionnalit\u00e9 \"menu contextuel\" (clic droit) du navigateur dans les pages du site.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Structure et code"
+  },
+  "230": {
+    "objectif": "<ul><li>Faciliter l'utilisation du contenu par les utilisateurs (traduction, r\u00e9f\u00e9rence, citation etc.) <\/li><li>Laisser aux utilisateurs la ma\u00eetrise de leur navigateur.<\/li><\/ul>",
+    "titre": "Le site ne bloque pas la copie de contenu",
+    "controle": "<p>V\u00e9rifier pour chaque page du site que la copie du contenu est possible \u00e0 l'aide de la fonctionnalit\u00e9 courante du navigateur.<\/p>",
+    "solution": "<p>Ne pas utiliser JavaScript ou CSS, ou toute autre technique, pour bloquer la fonctionnalit\u00e9 \"copier\" du navigateur dans les pages du site.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Structure et code"
+  },
+  "15": {
+    "objectif": "<ul><li>Informer l'utilisateur sur l'utilisation de ses donn\u00e9es personnelles. Faciliter la gestion des demandes li\u00e9es aux donn\u00e9es personnelles. <\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "La proc\u00e9dure d'acc\u00e8s et de rectification des donn\u00e9es personnelles est d\u00e9crite.",
+    "controle": "<p>Dans la page d'accueil, la page des mentions l\u00e9gales, la page d'\u00e0 propos, d'aide, ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou \u00e0 la politique de confidentialit\u00e9&nbsp;: <\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'informations sur la proc\u00e9dure d'acc\u00e8s ou de rectification des donn\u00e9es personnelles.<\/li><\/ul><p>La nature de la proc\u00e9dure en question n'est pas \u00e9valu\u00e9e ici : seule sa pr\u00e9sence est contr\u00f4l\u00e9e.<\/p>",
+    "solution": "<p>Indiquer \u00e0 l'utilisateur dans une section de contenu d\u00e9di\u00e9e par quelles proc\u00e9dures ou moyens de contact il peut effectuer une demande d'acc\u00e8s, de suppression ou de rectification de ses donn\u00e9es personnelles.<\/p>",
+    "etape": "Editorial",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "18": {
+    "objectif": "<ul><li>Renforcer la s\u00e9curit\u00e9 et la confiance de l\u2019utilisateur <\/li><li>Pr\u00e9venir les risques d\u2019usurpation d\u2019identit\u00e9.<\/li><li>Limiter les co\u00fbts de traitement des usurpations pour l\u2019utilisateur et le service en ligne.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Le site propose un m\u00e9canisme de pr\u00e9vention des usurpations de compte ou d'identit\u00e9",
+    "controle": "V\u00e9rifier lors de la connexion aux espaces priv\u00e9s la pr\u00e9sence d'un m\u00e9canisme de type authentification \u00e0 double facteur ou ou autre authentification forte.",
+    "solution": "Mettre en place un syst\u00e8me de type authentification \u00e0 double facteur ou autre authentification forte, et non une identification simple de type identifiant\/mot de passe.",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "194": {
+    "objectif": "<ul><li>Am\u00e9liorer la s\u00e9curit\u00e9 des \u00e9changes. <\/li><li>Pr\u00e9venir les risques d\u2019attaques.<\/li><\/ul>",
+    "titre": "Les pages utilisant HTTPS ont un en-t\u00eate de transport strict.",
+    "controle": "<p>v\u00e9rifier que le serveur envoie pour chaque page l'ent\u00eate HTTP Strict Transport Security avec le param\u00e8tre max-age sp\u00e9cifiant la dur\u00e9e pendant laquelle le navigateur doit doit convertir toutes les requ\u00eates en HTTP en requ\u00eates HTTPS<\/p>",
+    "solution": "<p>Utiliser pour chaque page l'ent\u00eate HTTP Strict Transport Security et son param\u00e8tre max-age pour sp\u00e9cifier que le navigateur doit convertir toutes les requ\u00eates en HTTP en requ\u00eates HTTPS. <\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "154": {
+    "objectif": "<ul><li>Limiter le temps d'apprentissage de l'interface. <\/li><li>Faciliter la compr\u00e9hension des ic\u00f4nes. <\/li><li>Limiter le risque d'erreurs.<\/li><\/ul>",
+    "titre": "Les ic\u00f4nes de navigation sont accompagn\u00e9es d'une l\u00e9gende explicite.",
+    "controle": "<p>V\u00e9rifier que chaque ic\u00f4ne de navigation ou d'action sans contenu textuel associ\u00e9 est dot\u00e9e&nbsp;:<\/p><ul><li>D'un attribut <code>alt<\/code> pertinent pour l'\u00e9l\u00e9ment <code>img<\/code> ;<\/li><li>D'un attribut <code>title<\/code> ou <code>aria-label<\/code> pertinent pour l'\u00e9l\u00e9ment <code>a<\/code>, <code>button<\/code> ou <code>input<\/code> ;<\/li><\/ul>",
+    "solution": "<p>La nature de la cible de chaque ic\u00f4ne-lien lorsqu'elle n'est pas accompagn\u00e9e d'un contenu textuel est pr\u00e9cis\u00e9e par l'attribut <code>alt<\/code> de l'image et par l'attribut <code>title<\/code> ou <code>aria-label<\/code> du lien.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/Img\"><code>img<\/code> sur MDN<\/a><\/p>",
+    "etape": "Conception",
+    "tag": "Accessibility",
+    "theme": "Navigation"
+  },
+  "34": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier la date r\u00e9elle \u00e0 laquelle le bien command\u00e9 sera effectivement en leur possession.<\/li><\/ul>",
+    "titre": "Le d\u00e9lai de livraison estim\u00e9 est indiqu\u00e9 avant la validation d\u00e9finitive de la commande.",
+    "controle": "<p>Dans la page pr\u00e9sentant le r\u00e9capitulatif de la commande, v\u00e9rifier la pr\u00e9sence, avant validation d\u00e9finitive de la commande, des informations relatives aux d\u00e9lais de livraison estim\u00e9s. <\/p>",
+    "solution": "<p>Indiquer, sur le r\u00e9capitulatif de la commande et avant validation d\u00e9finitive, les informations relatives aux d\u00e9lais de livraison estim\u00e9s.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "12": {
+    "objectif": "<ul><li>Permettre ou am\u00e9liorer la compr\u00e9hension du graphique.<\/li><li>Faciliter le partage des donn\u00e9es.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Chaque graphique est accompagn\u00e9 de ses donn\u00e9es num\u00e9riques.",
+    "controle": "<p>V\u00e9rifier la pr\u00e9sence, pour chaque graphique, d\u2019un contenu structur\u00e9 indiquant toutes les donn\u00e9es num\u00e9riques qu'il repr\u00e9sente, ou d\u2019un lien vers une page fournissant celles-ci.<\/p>",
+    "solution": "<ul><li>Afficher de mani\u00e8re structur\u00e9e, dans le contexte imm\u00e9diat du graphique, toutes les donn\u00e9es num\u00e9riques qu\u2019il repr\u00e9sente, par exemple sous forme de tableau de donn\u00e9es.<\/li><li>Ou fournir dans le le contexte imm\u00e9diat du graphique un lien vers un contenu du m\u00eame type.<\/li><\/ul>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Contenus"
+  },
+  "86": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur d'identifier le degr\u00e9 d'avancement dans un processus. <\/li><li>Rassurer l'utilisateur lors de la r\u00e9alisation d'un processus complexe.<\/li><\/ul>",
+    "titre": "L'\u00e9tape en cours d'un processus complexe est indiqu\u00e9e.",
+    "controle": "<p>Dans le cas de processus complexes, v\u00e9rifier, pour chaque page concern\u00e9e, que l'\u00e9tape en cours y est indiqu\u00e9e<\/p><ul><li>Dans le titre de page ;<\/li><li>Dans le contenu de page, sous la forme d'une mise en \u00e9vidence dans le chemin d'\u00e9tapes en t\u00eate de page ou de formulaire, par exemple \u00ab&nbsp;\u00c9tape 2 \u2013 Coordonn\u00e9es&nbsp;\u00bb ou \u00ab&nbsp;\u00c9tape 4 \u2013 Paiement&nbsp;\u00bb.<\/li><\/ul>",
+    "solution": "<p>Pr\u00e9ciser sur chaque page du processus l'\u00e9tape correspondant \u00e0 la page en cours.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "159": {
+    "objectif": "<ul><li>Permettre aux utilisateurs qui consultent les pages de mani\u00e8re lin\u00e9aire (mode vocal) ou semi-lin\u00e9aire (\u00e9cran de faible largeur) de ne pas avoir \u00e0 d\u00e9filer l'ensemble des \u00e9l\u00e9ments sur chaque page pour acc\u00e9der aux contenus. <\/li><li>Fournir des raccourcis acc\u00e9l\u00e9rant la navigation au clavier et \u00e9vitant des actions au clavier r\u00e9p\u00e9t\u00e9es pour parcourir la page et atteindre la zone souhait\u00e9e.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Chaque page contient des liens d'acc\u00e8s rapide plac\u00e9s au d\u00e9but du code source.",
+    "controle": "<p>Cette bonne pratique gagne \u00e0 \u00eatre v\u00e9rifi\u00e9e en association avec l'ensemble des bonnes pratiques concernant la navigation au clavier puisque si ces liens d'acc\u00e8s rapide sont pr\u00e9sents, ils doivent au minimum appara\u00eetre d\u00e8s la premi\u00e8re tabulation dans la page. <\/p><p>Lors de la navigation dans le site ou de l'inspection des templates (sous r\u00e9serve de tenir compte des pages d\u00e9pendants de services tiers)&nbsp;: <\/p><ul><li>V\u00e9rifier la pr\u00e9sence des liens d'acc\u00e8s rapide au menu, au contenu et \u00e0 la recherche selon l'organisation de la page ; <\/li><li>V\u00e9rifier qu'ils sont bien plac\u00e9s dans le code de mani\u00e8re \u00e0 appara\u00eetre d\u00e8s la premi\u00e8re tabulation dans la page ; <\/li><li>V\u00e9rifier qu'en cas de masquage par d\u00e9faut, ils sont affich\u00e9s lisiblement lors de la premi\u00e8re tabulation, \u00e0 un emplacement pr\u00e9visible par l'utilisateur ; <\/li><li>V\u00e9rifier que leur fonctionnement est effectif, c'est-\u00e0-dire qu'ils permettent d'acc\u00e9der au menu ou \u00e0 la zone de contenu et d'y poursuivre imm\u00e9diatement la navigation au clavier, ou au champ de saisie du formulaire de recherche et de proc\u00e9der \u00e0 la saisie.<\/li><\/ul>",
+    "solution": "<p>Fournir en d\u00e9but de code HTML, avant tout autre lien ou formulaire pr\u00e9sent dans la page, les liens visant des ancres correspondantes&nbsp;:<\/p><ul><li>Vers le menu principal si celui-ci n'est pas imm\u00e9diatement plac\u00e9 apr\u00e8s l'en-t\u00eate de page ;<\/li><li>Vers le contenu principal si celui-ci n'est pas imm\u00e9diatement plac\u00e9 apr\u00e8s l'en-t\u00eate de page ;<\/li><li>Vers le formulaire du moteur de recherche si celui-ci n'est pas imm\u00e9diatement plac\u00e9 apr\u00e8s l'en-t\u00eate de page.<\/li><\/ul><p>Le cas \u00e9ch\u00e9ant, ce menu d'acc\u00e8s rapide peut \u00eatre masqu\u00e9 au chargement de la page et s'afficher lors de la premi\u00e8re tabulation entrant dans celle-ci (via Javascript ou CSS).<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Navigation"
+  },
+  "121": {
+    "objectif": "<ul><li>Laisser \u00e0 l'utilisateur le contr\u00f4le des animations lors de la consultation du contenu. <\/li><li>Ne pas perturber l'attention en imposant des \u00e9l\u00e9ments pouvant g\u00eaner celle-ci. <\/li><li>Permettre la consultation pas \u00e0 pas d'animations s\u00e9quentielles ou de contenus sonores.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les animations, sons et clignotements peuvent \u00eatre mis en pause.",
+    "controle": "<p>Dans chaque page contenant une animation visuelle d'une dur\u00e9e de plus de 5 secondes ou un son d'une dur\u00e9e de plus de 3 secondes :<\/p><ul><li>Contr\u00f4ler la possibilit\u00e9 de stopper l'animation, le son ou le clignotement (pause, red\u00e9marrage, volume sonore le cas \u00e9ch\u00e9ant).<\/li><\/ul><p>Il existe une grande vari\u00e9t\u00e9 de moyens techniques permettant d'inclure une animation dans une page : balisage, propri\u00e9t\u00e9 CSS, images anim\u00e9es, Javascript, SVG, etc. La v\u00e9rification de cette bonne pratique n\u00e9cessite donc un examen au cas par cas de chaque page concern\u00e9e.<\/p>",
+    "solution": "<p>D\u00e8s lors qu'une animation visuelle a une dur\u00e9e de plus de 5 secondes ou qu'un son a une dur\u00e9e de plus de 3 secondes, doter syst\u00e9matiquement l'objet multim\u00e9dia des moyens de contr\u00f4le n\u00e9cessaires&nbsp;: d\u00e9marrage, arr\u00eat, muet ou volume.<\/p><p>Ne pas utiliser de graphismes anim\u00e9s non contr\u00f4lables, ou encore partiellement contr\u00f4lables par l'utilisateur (images gif anim\u00e9es en particulier).<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Images et m\u00e9dias"
+  },
+  "104": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de conna\u00eetre les services mis \u00e0 leur disposition et leur fonctionnement.<\/li><\/ul>",
+    "titre": "Les horaires et tarifs de fonctionnement des services mis \u00e0 la disposition des utilisateurs sont indiqu\u00e9s.",
+    "controle": "<p>Dans au moins une des pages suivantes&nbsp;: la page d'accueil, la page consacr\u00e9e aux mentions l\u00e9gales, la page d'aide ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente&nbsp;:<\/p><ul><li>V\u00e9rifier que les horaires et tarifs de fonctionnement des services mis \u00e0 la disposition des utilisateurs sont indiqu\u00e9s. <\/li><\/ul>",
+    "solution": "<p>Indiquer les horaires et tarifs de fonctionnement des services mis \u00e0 la disposition des utilisateurs.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "126": {
+    "objectif": "<ul><li>Permettre aux utilisateurs et outils de navigation d'anticiper le changement de langue en cours de navigation. <\/li><li>\u00c9viter aux utilisateurs de se rendre sur une page dont ils ne comprennent pas la langue.<\/li><\/ul>",
+    "titre": "La langue principale de la page cible d'un lien est identifiable lorsqu'elle diff\u00e8re de celle de la page d'origine.",
+    "controle": "<p>Dans le site&nbsp;:<\/p><ul><li>Identifier manuellement les liens dont le contenu de la page cible n'est pas r\u00e9dig\u00e9 dans la m\u00eame langue que celle de la page courante ;<\/li><li>V\u00e9rifier, pour chacun de ces liens, que l'utilisateur est imm\u00e9diatement inform\u00e9 de la nature de la langue concern\u00e9e soit \u00e0 la lecture du libell\u00e9 (r\u00e9dig\u00e9 dans la langue cible), soit via une ic\u00f4ne, soit via une information donn\u00e9e dans le contexte du lien.<\/li><\/ul>",
+    "solution": "<p>La langue cible d'un lien peut \u00eatre indiqu\u00e9e&nbsp;:<\/p><ul><li>Simplement via le libell\u00e9 du lien qui sera r\u00e9dig\u00e9 dans la langue cible ;<\/li><li>\u00c9ventuellement \u00e0 l'aide d'une ic\u00f4ne appropri\u00e9e (drapeau) ;<\/li><li>\u00c9ventuellement de mani\u00e8re explicite dans le libell\u00e9 du lien ou dans son contexte imm\u00e9diat, en mentionnant la langue directement.<\/li><\/ul>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Internationalisation"
+  },
+  "200": {
+    "objectif": "<ul><li>Limiter les risques d\u2019interception des mots de passe.<\/li><\/ul>",
+    "titre": "Le site ne communique pas de mot de passe par mail",
+    "controle": "<p>V\u00e9rifier qu'aucun mot de passe n'est envoy\u00e9 \u00e0 l'utilisateur par mail lors de la cr\u00e9ation de compte ou en cas de demande de r\u00e9initialisation ou de rappel du mot passe.<\/p>",
+    "solution": "<p>Lors d'une cr\u00e9ation de compte ou en cas de demande de r\u00e9initialisation ou de rappel du mot passe, ne pas adresser celui-ci \u00e0 l'utilisateur par mail. Fournir le mot de passe ou sa proc\u00e9dure de r\u00e9initialisation uniquement en ligne.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "80": {
+    "objectif": "<ul><li>Pr\u00e9venir les difficult\u00e9s de saisie et am\u00e9liorer la compr\u00e9hension des messages d\u2019erreur.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les messages d'erreur personnalis\u00e9s sont exprim\u00e9s dans la langue du formulaire.",
+    "controle": "<p>V\u00e9rifier que tous les messages d'erreur affich\u00e9s lors de la saisie dans un formulaire sont dans la m\u00eame langue que les autres libell\u00e9s du formulaire (\u00e9tiquettes, etc.)<\/p>",
+    "solution": "<p>S'assurer que tous les messages d'erreur pr\u00e9vus par les outils de gestion d'erreur de saisie sont traduits et d\u00e9livr\u00e9s dans la m\u00eame langue que les autres libell\u00e9s du formulaire (\u00e9tiquettes, etc.)<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "165": {
+    "objectif": "<ul><li>Am\u00e9liorer et acc\u00e9l\u00e9rer les op\u00e9rations de recherche par les utilisateurs en \u00e9vitant les retours \u00e0 la page de recherche initiale.<\/li><\/ul>",
+    "titre": "Il est possible de relancer une recherche depuis sa page de r\u00e9sultats.",
+    "controle": "<p>V\u00e9rifier, pour chaque page de r\u00e9sultat de recherche, que l'utilisateur peut valider imm\u00e9diatement une nouvelle recherche \u00e0 l'aide du formulaire de recherche pr\u00e9-rempli avec sa saisie pr\u00e9c\u00e9dente, modifiable.<\/p>",
+    "solution": "<p>Dans chaque page de r\u00e9sultat de recherche, afficher le formulaire de recherche avec la saisie pr\u00e9c\u00e9dente de l'utilisateur, de mani\u00e8re \u00e0 ce qu'il puisse modifier celle-ci et valider imm\u00e9diatement une nouvelle recherche.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Navigation"
+  },
+  "178": {
+    "objectif": "<ul><li>Permettre la compr\u00e9hension des contenus par les utilisateurs dont le navigateur n'appliquera pas les feuilles de styles du site ou dont le mode d'acc\u00e8s n'est pas visuel.<\/li><li>S\u00e9parer rigoureusement les contenus de la pr\u00e9sentation pour am\u00e9liorer leur interop\u00e9rabilit\u00e9.<\/li><li>Favoriser le r\u00e9f\u00e9rencement du contenu.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Le contenu et le sens de chaque page ne sont pas alt\u00e9r\u00e9s lorsque les styles sont d\u00e9sactiv\u00e9s.",
+    "controle": "<p>Comparer visuellement les pages avec et sans application des styles CSS. L\u2019op\u00e9ration n\u00e9cessite de recourir, pour chaque page, \u00e0 l\u2019ensemble de ces m\u00e9thodes :<\/p><ul><li>D\u00e9sactiver les styles CSS dans le navigateur ;<\/li><li>V\u00e9rifier l\u2019absence de perte d\u2019informations dont la cause peut alors \u00eatre confirm\u00e9e en examinant les styles appliqu\u00e9s \u00e0 l\u2019\u00e9l\u00e9ment concern\u00e9 \u00e0 l\u2019aide d\u2019un inspecteur de code.<\/li><li>V\u00e9rifier que les contenus restent lisibles, par exemple dans le cas d\u2019une image HTML transparente dont la lisibilit\u00e9 d\u00e9pendra de la couleur d\u2019arri\u00e8re-plan appliqu\u00e9e avec la propri\u00e9t\u00e9 background-color.<\/li><li>V\u00e9rifier la coh\u00e9rence du contenu affich\u00e9 sans CSS, qui doit rester logiquement organis\u00e9 et parfaitement compr\u00e9hensible. Par exemple, un organigramme constitu\u00e9 de diff\u00e9rents blocs de texte mis en forme via des propri\u00e9t\u00e9s CSS de positionnement pourra apparaitre comme une succession de blocs de texte d\u00e9nu\u00e9e de sens en l\u2019absence de CSS.<\/li><\/ul>",
+    "solution": "<p>Dans l\u2019usage de CSS (y compris via JavaScript), veiller \u00e0 conserver la coh\u00e9rence des contenus pour les pr\u00e9senter dans le m\u00eame ordre avec ou sans mise en forme CSS. On \u00e9vitera ainsi de se retrouver, par exemple, avec un menu coup\u00e9 en deux si les feuilles de styles sont d\u00e9sactiv\u00e9es.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Pr\u00e9sentation"
+  },
+  "196": {
+    "objectif": "<ul><li>Fournir une solution imm\u00e9diate au probl\u00e8me de l\u2019utilisateur. <\/li><li>Limiter les difficult\u00e9s li\u00e9es \u00e0 l\u2019utilisation d\u2019autres modes de communication.<\/li><\/ul>",
+    "titre": "Les op\u00e9rations relatives aux mots de passe peuvent \u00eatre effectu\u00e9es int\u00e9gralement en ligne.",
+    "controle": "<p>V\u00e9rifier qu'il est possible d'effectuer int\u00e9gralement en ligne toutes les actions li\u00e9es au mot de passe (r\u00e9initialisation de mot de passe perdu, modification, etc.).<\/p>",
+    "solution": "<p>Permettre \u00e0 l'utilisateur d'effectuer toutes les actions li\u00e9es au mot de passe (r\u00e9initialisation  de passe perdu, modification, etc.) int\u00e9gralement en ligne. Par exemple : pas d'envoi d'un rappel de mot de passe ou d'un nouveau mot de passe par courrier postal.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "30": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur de v\u00e9rifier sa commande.<\/li><li>Pr\u00e9venir les erreurs de commande<\/li><\/ul>",
+    "titre": "Le d\u00e9tail de chaque article est consultable depuis le panier.",
+    "controle": "<p>V\u00e9rifier apr\u00e8s avoir s\u00e9lectionn\u00e9 des produits qu'il est possible de revenir \u00e0 la fiche produit de chacun d'entre eux depuis le panier, ou d'acc\u00e9der d'une autre mani\u00e8re \u00e0 l'ensemble des informations pr\u00e9sentes dans celle-ci.<\/p>",
+    "solution": "<p>Permettre \u00e0 l'utilisateur d'acc\u00e9der directement depuis le panier soit \u00e0 la fiche de chaque produit s\u00e9lectionn\u00e9, par un lien, soit d'une autre mani\u00e8re \u00e0 l'ensemble des informations pr\u00e9sentes dans celle-ci.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "213": {
+    "objectif": "<ul><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site.<\/li><\/ul>",
+    "titre": "Le site propose un fichier sitemap indiquant les contenus \u00e0 explorer.",
+    "controle": "<p>Via l'adresse url du site examin\u00e9&nbsp;: <\/p><ul><li>V\u00e9rifier qu'un fichier <code>sitemap.xml<\/code> existe \u00e0 la racine du site, en y acc\u00e9dant directement dans le navigateur avec une URL du type http:\/\/example.com\/sitemap.xml ; <\/li><li>\u00c0 d\u00e9faut, consulter le fichier <code>robots.txt<\/code> pour y rechercher une URL sp\u00e9cifique mentionn\u00e9e sous la forme <code>sitemap: http:\/\/example.com\/adresse\/du\/fichier.xml<\/code>.<\/li><\/ul>",
+    "solution": "<p>Cr\u00e9er un fichier <code>sitemap.xml<\/code> contenant la liste des pages du site \u00e0 la racine du site. \u00c0 d\u00e9faut de respecter le format XML, une simple liste d'URL est accept\u00e9e par les moteurs.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Serveur et performances"
+  },
+  "160": {
+    "objectif": "<ul><li>Permettre la navigation au clavier ou via des p\u00e9riph\u00e9riques d'entr\u00e9es ou des dispositifs qui ne reposent pas sur la souris.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "Le focus clavier n'est ni supprim\u00e9 ni masqu\u00e9.",
+    "controle": "<p>Ce contr\u00f4le s'effectue sur l'ensemble des \u00e9l\u00e9ments interactifs, prioritairement \u00e0 l'aide de la touche tabulation et, dans l'interface de certains widgets, \u00e0 l'aide de touches de d\u00e9placement sp\u00e9cifiques (touches fl\u00e8ches). <\/p><p>Pour chaque \u00e9l\u00e9ment interactif contenu dans les pages examin\u00e9es&nbsp;: <\/p><ul><li>V\u00e9rifier que l'indication visuelle du focus par d\u00e9faut du navigateur est au moins pr\u00e9sente ou qu'une indication visuelle sp\u00e9cifique a \u00e9t\u00e9 am\u00e9nag\u00e9e.<\/li><\/ul>",
+    "solution": "<p>Veiller \u00e0 ne pas masquer ou supprimer l'effet visuel de prise de focus qui indique quel est l'\u00e9l\u00e9ment atteint lors de la navigation au clavier. En particulier, ne pas annuler la valeur par d\u00e9faut de la propri\u00e9t\u00e9 CSS <code>outline<\/code> sans la remplacer par une autre valeur personnalis\u00e9e ou un effet visuel suffisamment perceptible.<\/p><p>Ne pas supprimer via Javascript la prise de focus clavier (exploitation de l'\u00e9v\u00e9nement <code>onblur<\/code>).<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Navigation"
+  },
+  "35": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur de d\u00e9cider en connaissance de cause. Faire gagner du temps \u00e0 l\u2019utilisateur.<\/li><li>Limiter les abandons de commande et la frustration de l'utilisateur.<\/li><\/ul>",
+    "titre": "Les frais de livraison estim\u00e9s sont indiqu\u00e9s avant la validation d\u00e9finitive de la commande.",
+    "controle": "<p>V\u00e9rifier que, pour chaque produit, le tarif ou un estimation du co\u00fbt de livraison en fonction du type ou du poids des produits et du lieu de livraison est disponible dans la page produit ou dans une page disponible avant la commande (conditions g\u00e9n\u00e9rales de vente, conditions de livraison).<\/p>",
+    "solution": "<p>Proposer pour chaque produit, dans la page de celui-ci ou dans une page disponible avant la commande (conditions g\u00e9n\u00e9rales de vente, conditions de livraison) le tarif ou un estimation du co\u00fbt de livraison en fonction du type ou du poids des produits et du lieu de livraison.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "112": {
+    "objectif": "<ul><li>Permettre aux utilisateurs plac\u00e9s dans des contextes o\u00f9 les images ne sont pas perceptibles (navigateur texte, lecteur d\u2019\u00e9cran, navigateur avec images d\u00e9sactiv\u00e9es) de comprendre le sens des liens pr\u00e9sents sur des images qu\u2019ils ne peuvent voir. <\/li><li>Permettre aux robots d\u2019exploiter l\u2019information v\u00e9hicul\u00e9e par les images-liens (pour le r\u00e9f\u00e9rencement, l\u2019indexation, la traduction automatique des alternatives d\u2019images-texte). <\/li><li>Permettre l\u2019affichage d\u2019un texte pertinent pendant le chargement des images.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Chaque image-lien est dot\u00e9e d'une alternative textuelle appropri\u00e9e.",
+    "controle": "<ul><li>V\u00e9rifier que l\u2019attribut alt de chaque \u00e9l\u00e9ment img concern\u00e9 indique la cible ou le r\u00f4le du lien.<\/li><li>V\u00e9rifier que l\u2019attribut alt de chaque \u00e9l\u00e9ment area concern\u00e9 indique la cible ou le r\u00f4le du lien.<\/li><li>V\u00e9rifier que le contenu de chaque \u00e9l\u00e9ment object concern\u00e9 indique la cible ou le r\u00f4le du lien.<\/li><li>V\u00e9rifier que le contenu de chaque \u00e9l\u00e9ment canvas concern\u00e9 indique la cible ou le r\u00f4le du lien.<\/li><li>V\u00e9rifier le libell\u00e9 textuel de tout autre \u00e9l\u00e9ment ayant le r\u00f4le d\u2019un lien.<\/li><\/ul>",
+    "solution": "<div>Les images-liens sont ais\u00e9es \u00e0 identifier (elles sont le seul contenu qui est plac\u00e9 entre des balises &lt;a&gt; et &lt;\/a&gt;). Il faut toutefois penser aussi aux liens g\u00e9n\u00e9r\u00e9s avec JavaScript sur d\u2019autres \u00e9l\u00e9ments.<\/div><div>D\u2019une mani\u00e8re g\u00e9n\u00e9rale, il faut :<\/div><div><ul><li>donner \u00e0 chaque \u00e9l\u00e9ment img concern\u00e9 un attribut alt indiquant la cible ou le r\u00f4le du lien ;<\/li><li>donner \u00e0 chaque \u00e9l\u00e9ment area concern\u00e9 un attribut alt indiquant la cible ou le r\u00f4le du lien ;<\/li><li>indiquer la cible ou le r\u00f4le du lien dans le contenu de chaque \u00e9l\u00e9ment object concern\u00e9 ;<\/li><li>indiquer la cible ou le r\u00f4le du lien dans le contenu de chaque \u00e9l\u00e9ment canvas concern\u00e9.<\/li><\/ul><\/div>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Images et m\u00e9dias"
+  },
+  "28": {
+    "objectif": "<ul><li>Informer l'utilisateur sur les cookies.<\/li><li>Expliquer leur r\u00f4le et leur utilit\u00e9.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "L'objectif des cookies et les limitations inh\u00e9rentes \u00e0 leur refus sont expliqu\u00e9s.",
+    "controle": "<p>Dans la page des mentions l\u00e9gales, dans la politique de confidentialit\u00e9 ou encore dans la page d'accueil, la page d'\u00e0 propos, d'aide, ou dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation&nbsp;: <\/p><ul><li>Contr\u00f4ler que l'objectif de l'utilisation des cookies et les cons\u00e9quences de leur d\u00e9sactivation sont bien pr\u00e9sents.<\/li><\/ul>",
+    "solution": "<p>Pr\u00e9ciser dans la politique de confidentialit\u00e9 du site si la navigation dans le site n\u00e9cessite l'acceptation des cookies. Si oui, expliquer la raison de leur utilisation, la nature des donn\u00e9es conserv\u00e9es et \u00e9ventuellement, fournir les liens permettant leur d\u00e9sactivation.<\/p>",
+    "etape": "Editorial",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "27": {
+    "objectif": "<ul><li>\u00c9viter que des donn\u00e9es sensibles ne soient publiques et stock\u00e9es en clair aux diff\u00e9rentes \u00e9tapes de l'acc\u00e8s \u00e0 la page (FAI, proxy, serveur Web, historique du navigateur, services tiers\u2026). <\/li><li>Permettre \u00e0 l'utilisateur de saisir des donn\u00e9es sensibles en sachant qu'elles seront prot\u00e9g\u00e9es et confidentielles.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Les donn\u00e9es sensibles ne sont pas transmises en clair dans les url.",
+    "controle": "<p>Lors de manipulations dans le site telles que connexion \u00e0 un compte, saisie de donn\u00e9es personnelles, achat, etc., v\u00e9rifier qu'aucune des donn\u00e9es saisies n'appara\u00eet en clair dans l'URL via les trois contr\u00f4les suivants&nbsp;:<\/p><ul><li>V\u00e9rifier que l'identification n'aboutit pas \u00e0 une page du typelogin.php?user=machin@password=123 ;<\/li><li>Contr\u00f4ler aussi que les pages ne comportent pas de liens contenant ce type d'informations. Il est en effet possible de faire un lien du type http:\/\/user:pass@example.com\/ ou ftp:\/\/user:pass@example.com\/. Ceci est bien \u00e9videmment tr\u00e8s fortement d\u00e9conseill\u00e9 et doit \u00eatre banni. <\/li><li>Examiner \u00e9galement que l'identifiant de la session n'est pas transmis dans l'URL, ce qui donne des URL du type page.php?SESSIONID=123abc456def. Toute personne r\u00e9cup\u00e9rant cet identifiant, y compris en lisant par dessus l'\u00e9paule de l'utilisateur, aurait acc\u00e8s \u00e0 son compte. <\/li><\/ul><p>Il est important de faire ces tests en activant et d\u00e9sactivant les cookies du navigateur, certains outils (frameworks, CMS) ayant la f\u00e2cheuse habitude de transmettre les informations en clair dans le second cas.<\/p>",
+    "solution": "<p>Envoyer les donn\u00e9es de formulaire sensibles par la m\u00e9thode <code>POST<\/code>.<\/p><p>Ne pas inscrire de donn\u00e9es sensibles dans l'URL d'un lien.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "186": {
+    "objectif": "<ul><li>Faciliter la lecture \u00e0 l\u2019\u00e9cran, notamment pour les personnes dyslexiques.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "Les styles ne justifient pas le texte.",
+    "controle": "<div>V\u00e9rifier dans le code CSS l\u2019absence de r\u00e8gles text-align : justify.<\/div><div>V\u00e9rifier dans le code HTML l\u2019absence d\u2019attributs HTML align=\"justify\".<\/div>",
+    "solution": "<div>Ne pas utiliser la propri\u00e9t\u00e9 CSS text-align avec la valeur justify, ou tout autre \u00e9quivalent.<\/div><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/text-align\"><code>text-align<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Pr\u00e9sentation"
+  },
+  "140": {
+    "objectif": "<ul><li>Faciliter l\u2019utilisation des num\u00e9ros de t\u00e9l\u00e9phone, notamment sur les terminaux mobiles.<\/li><\/ul>",
+    "titre": "Les num\u00e9ros de t\u00e9l\u00e9phone sont activables via le protocole appropri\u00e9.",
+    "controle": "<p>V\u00e9rifier, dans le code HTML g\u00e9n\u00e9r\u00e9, le balisage des num\u00e9ros de t\u00e9l\u00e9phone sous la forme a <code>href=\"tel:+xx x xx xx xx xx\"<\/code>.<\/p>",
+    "solution": "<p>Baliser les num\u00e9ros de t\u00e9l\u00e9phone avec un lien <code>a<\/code> dot\u00e9 d\u2019un attribut <code>href<\/code> du type <code>href=\"tel:+xx x xx xx xx xx\"<\/code>.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/a\">\u00e9l\u00e9ment <code>a<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Mobile",
+    "theme": "Liens"
+  },
+  "62": {
+    "objectif": "<ul><li>Pr\u00e9venir les pertes d\u2019information et de factures.<\/li><li>Am\u00e9liorer la tra\u00e7abilit\u00e9 des op\u00e9rations.<\/li><\/ul>",
+    "titre": "Chaque facturation fait l'objet d'un mail de confirmation.",
+    "controle": "<p>v\u00e9rifier que chaque facture \u00e9tablie \u00e0 l'issue d'un processus de commande est envoy\u00e9e par mail \u00e0 l'utilisateur.<\/p>",
+    "solution": "<p>Envoyer chaque facture \u00e9tablie \u00e0 l'issue d'un processus de commande par mail \u00e0 l'utilisateur.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "32": {
+    "objectif": "<ul><li>Laisser \u00e0 l\u2019utilisateur le libre choix de ses actions. <\/li><li>Pr\u00e9venir les commandes involontaires et les r\u00e9clamations associ\u00e9es. <\/li><\/ul>",
+    "titre": "L'inscription \u00e0 des services annexes n'est pas activ\u00e9e par d\u00e9faut.",
+    "controle": "<p>V\u00e9rifier que, lors du processus de commande, les \u00e9ventuels services annexes ajout\u00e9s au panier de l'utilisateur (inscription \u00e0 une newsletter, extension de garantie, service ou produit compl\u00e9mentaire) ne sont pas valid\u00e9s par d\u00e9faut (opt-out) mais sont \u00e0 valider par l'utilisateur (opt-in).<\/p>",
+    "solution": "<p>Les \u00e9ventuels services annexes ajout\u00e9s au panier de l'utilisateur (inscription \u00e0 une newsletter, extension de garantie, service ou produit compl\u00e9mentaire) ne sont pas valid\u00e9s par d\u00e9faut (opt-out) mais doivent \u00eatre explicitement valid\u00e9s par l'utilisateur (opt-in).<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "36": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur d\u2019anticiper les conditions et les moyens d\u2019acc\u00e8s au service ou au bien d\u00e9mat\u00e9rialis\u00e9. <\/li><li>\u00c9viter les d\u00e9ceptions et le traitement de r\u00e9clamations.<\/li><\/ul>",
+    "titre": "Les modalit\u00e9s de r\u00e9cup\u00e9ration d'un bien d\u00e9mat\u00e9rialis\u00e9 sont pr\u00e9cis\u00e9es avant la commande. ",
+    "controle": "<div>Contr\u00f4ler manuellement la pr\u00e9sence des informations sur les modalit\u00e9s de r\u00e9cup\u00e9ration du produit, accessibles avant le d\u00e9but de la commande.<\/div>",
+    "solution": "<div>Pr\u00e9ciser dans la fiche produit ou dans une page d\u00e9di\u00e9e accessible avant le d\u00e9but de la commande par quel moyen l\u2019utilisateur acc\u00e9dera-t-il au bien concern\u00e9 : d\u00e9lai, dur\u00e9e de disponibilit\u00e9, format, canal (e-mail, t\u00e9l\u00e9chargement, acc\u00e8s en ligne, etc.).<\/div>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "6": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur de remettre l\u2019information en contexte. <\/li><li>Pr\u00e9venir la diffusion d\u2019informations obsol\u00e8tes. <\/li><li>Renforcer la confiance dans les informations et faciliter les citations<\/li><\/ul>",
+    "titre": "La date de publication des contenus qui le n\u00e9cessitent est indiqu\u00e9e.",
+    "controle": "<p>V\u00e9rifier que les contenus qui le n\u00e9cessitent sont tous associ\u00e9s \u00e0 une date de publication affich\u00e9e.<\/p>",
+    "solution": "<p>Associer \u00e0 chaque contenu qui le n\u00e9cessite (article, actualit\u00e9, produit, etc.) sa date de publication affich\u00e9e.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Contenus"
+  },
+  "205": {
+    "objectif": "<ul><li>R\u00e9duire les risques de t\u00e9l\u00e9chargement d\u2019un contenu dangereux dissimul\u00e9.<\/li><\/ul>",
+    "titre": "Le serveur envoie les informations d'activation de protection cross site scripting.",
+    "controle": "<div>V\u00e9rifier, \u00e0 l\u2019aide d\u2019un outil d\u2019inspection des en-t\u00eates HTTP, la pr\u00e9sence de X-XSS-Protection avec la valeur 1; mode=block.<\/div>",
+    "solution": "<div>Configurer le serveur pour l\u2019envoi de l\u2019en-t\u00eate HTTP X-XSS-Protection avec la valeur 1; mode=block.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "202": {
+    "objectif": "<ul><li>R\u00e9duire les risques de t\u00e9l\u00e9chargement d\u2019un contenu dangereux dissimul\u00e9.<\/li><\/ul>",
+    "titre": "Le serveur indique le type MIME de chaque ressource.",
+    "controle": "<div>V\u00e9rifier, \u00e0 l\u2019aide d\u2019un outil d\u2019inspection des en-t\u00eates HTTP, la pr\u00e9sence de ContentType avec la valeur correspondant au type de ressource.<\/div>",
+    "solution": "<div>Configurer le serveur pour adresser pour chaque ressource (texte, image, script, etc.) l\u2019en-t\u00eate ContentType renseign\u00e9 avec le type MIME appropri\u00e9, par exemple :<\/div><div><ul><li>text\/html ;<\/li><li>application\/pdf.<\/li><\/ul><\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "164": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur de partager ou de conserver dans ses signets un r\u00e9sultat de recherche.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site.<\/li><\/ul>",
+    "titre": "Chaque page de r\u00e9sultats de recherche peut \u00eatre atteint via une adresse Web.",
+    "controle": "<div>Faire une recherche et contr\u00f4ler que l\u2019Url de la page de r\u00e9sultats permet d\u2019acc\u00e9der \u00e0 ceux-ci.<\/div>",
+    "solution": "<div>G\u00e9rer les requ\u00eates du formulaire de recherche en utilisant la m\u00e9thode GET.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Ecodesign",
+    "theme": "Navigation"
+  },
+  "17": {
+    "objectif": "<ul><li>R\u00e9duire les risques d\u2019inscription de l\u2019utilisateur \u00e0 son insu.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "La cr\u00e9ation d'un compte est soumise \u00e0 un processus de confirmation.",
+    "controle": "<div>Cr\u00e9er un compte en ligne et contr\u00f4ler qu\u2019il n\u2019est activ\u00e9 qu\u2019\u00e0 partir de l\u2019e-mail de demande de confirmation qui suit l\u2019envoi du formulaire d\u2019inscription.<\/div>",
+    "solution": "<div>Avant activation du compte cr\u00e9\u00e9 en ligne, envoyer une demande de confirmation automatique \u00e0 l\u2019adresse e-mail correspondant \u00e0 celui-ci.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "234": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d\u2019acc\u00e9der directement \u00e0 diff\u00e9rentes sections d\u2019un document PDF. <\/li><li>Fournir une structure de titres aux utilisateurs qui en ont besoin. <\/li><li>Permettre la consultation d\u2019un PDF via une aide technique.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Les documents PDF internes sont dot\u00e9s d'une structure de titres.",
+    "controle": "<p>Pour chaque document PDF interne, v\u00e9rifier la pr\u00e9sence des \u00e9l\u00e9ments de structure de titre :<\/p><ul><li>\u00e0 l\u2019aide d\u2019un outil d\u2019inspection du code ;<\/li><li>en ouvrant le document dans un lecteur PDF permettant d\u2019afficher les signets ;<\/li><li>ou en consultant le document dans un lecteur d\u2019\u00e9cran.<\/li><\/ul>",
+    "solution": "<p>Lorsque le document PDF est issu d\u2019une suite bureautique telle que Word ou OpenOffice, il faut utiliser les styles et formatages propos\u00e9s par le logiciel de mani\u00e8re \u00e0 g\u00e9n\u00e9rer un PDF structur\u00e9, en appliquant les styles de texte tels que Titre 1, Titre 2, Titre 3 pour les diff\u00e9rents niveaux de titre.Ces styles peuvent ensuite \u00eatre modifi\u00e9s pour les adapter \u00e0 la pr\u00e9sentation souhait\u00e9e. Enfin, l\u2019option Exporter en PDF balis\u00e9 ou tagu\u00e9 doit \u00eatre activ\u00e9e au moment de l\u2019export PDF. Pour plus d\u2019informations, consulter la rubrique accessibilit\u00e9 du site <a href=\"http:\/\/www.adobe.com\">http:\/\/www.adobe.com<\/a>.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Structure et code"
+  },
+  "155": {
+    "objectif": "<ul><li>Limiter le temps d\u2019apprentissage de l\u2019interface. <\/li><li>Acc\u00e9l\u00e9rer l\u2019acc\u00e8s aux contenus. <\/li><li>Faciliter la navigation.<\/li><\/ul>",
+    "titre": "Les m\u00e9canismes de fermeture de fen\u00eatres sont visuellement rattach\u00e9es \u00e0 leur contenu.",
+    "controle": "<p>V\u00e9rifier que chaque bouton de fermeture de fen\u00eatre est plac\u00e9 dans le bloc concern\u00e9 ou contigu.<\/p>",
+    "solution": "<p>Positionner chaque bouton de fermeture de fen\u00eatre modale ou similaire dans le bloc visuel de celle-ci (g\u00e9n\u00e9ralement dans le coin sup\u00e9rieur droit) ou de mani\u00e8re contigu\u00eb.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Navigation"
+  },
+  "108": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de contacter le mod\u00e9rateur pour demander une correction, poser une question ou signaler des abus.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Le site propose au moins un moyen de contacter le mod\u00e9rateur des espaces publics.",
+    "controle": "<p>Dans chaque espace public du site (zone de commentaire, forum, etc.) ou, \u00e0 d\u00e9faut, dans une page g\u00e9n\u00e9rique telle que la page des mentions l\u00e9gales, la page contact, la rubrique d'aide ou encore dans les conditions d'utilisation :<\/p><ul><li>Identifier un moyen de contacter le mod\u00e9rateur ; <\/li><li>V\u00e9rifier qu'il est effectivement possible de contacter le mod\u00e9rateur via le(s) mode(s) de contact propos\u00e9(s). <\/li><\/ul>",
+    "solution": "<p>Par exemple, indiquer l'adresse e-mail du mod\u00e9rateur ou mettre en place un formulaire permettant de le contacter.<\/p>",
+    "etape": "Editorial",
+    "tag": "Privacy",
+    "theme": "Identification et contact"
+  },
+  "134": {
+    "objectif": "<ul><li>\u00c9viter les clics inutiles sur des contenus soulign\u00e9s per\u00e7us comme des hyperliens. <\/li><li>Faciliter l\u2019identification des liens.<\/li><\/ul>",
+    "titre": "Le soulignement est r\u00e9serv\u00e9 aux liens.",
+    "controle": "<p>Dans chaque page contenant des contenus soulign\u00e9s&nbsp;: <\/p><ul><li>Identifier les textes soulign\u00e9s dans le site ;<\/li><li>Contr\u00f4ler la nature de ces contenus pour v\u00e9rifier s'il s'agit effectivement d'hyperliens. <\/li><\/ul>",
+    "solution": "<p>Ne pas utiliser le soulignement pour des textes simples ou des \u00e9l\u00e9ments qui ne constituent pas des liens.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/text-decoration\"><code>text-decoration<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/border\"><code>border<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Liens"
+  },
+  "136": {
+    "objectif": "<ul><li>Faciliter l'identification des contenus d\u00e9j\u00e0 visit\u00e9s. <\/li><li>Faciliter l'identification des contenus restant \u00e0 d\u00e9couvrir. <\/li><li>Inciter \u00e0 la d\u00e9couverte de nouveaux contenus<\/li><\/ul>",
+    "titre": "Le site n'applique pas le m\u00eame style aux liens visit\u00e9s et non visit\u00e9s.",
+    "controle": "<p>Dans chaque page contenant des hyperliens&nbsp;:<\/p><ul><li>Contr\u00f4ler la pr\u00e9sence et l'utilisation du s\u00e9lecteur <code>:visited<\/code> dans les feuilles de style CSS et l'utilisation d'un style diff\u00e9rent de celui appliqu\u00e9 \u00e0 <code>a<\/code> ou <code>a:link<\/code> ou bien ;<\/li><li>Contr\u00f4ler l'absence du s\u00e9lecteur <code>:visited<\/code> dans les feuilles de style CSS pour laisser le style par d\u00e9faut du navigateur s'appliquer<\/li><\/ul>",
+    "solution": "<p>En dehors des menus de navigation, ne pas appliquer les m\u00eames styles CSS par d\u00e9faut pour les liens non visit\u00e9s (s\u00e9lecteurs <code>a<\/code> ou <code>a:link<\/code>) et pour les liens visit\u00e9s (s\u00e9lecteur <code>a:visited<\/code>). Pour ce faire&nbsp;: soit pr\u00e9voir un rendu sp\u00e9cifique pour les liens visit\u00e9s, soit ne pas indiquer de r\u00e8gle de rendu pour ceux-ci (le style par d\u00e9faut du navigateur pourra alors s'appliquer sans difficult\u00e9).<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/:visited\"><code>:visited<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/:link\"><code>:link<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Liens"
+  },
+  "11": {
+    "objectif": "<ul><li>Faciliter le signalement de contenus ill\u00e9gaux ou inappropri\u00e9s. <\/li><li>Acc\u00e9l\u00e9rer la d\u00e9tection de ces contenus. <\/li><li>Limiter les risques de consultation de contenus ill\u00e9gaux ou inappropri\u00e9s.<\/li><\/ul>",
+    "titre": "Les espaces publics proposent au moins un moyen de signaler les abus.",
+    "controle": "<p>Dans chaque espace public (zone de commentaire, forum etc.) ou \u00e0 d\u00e9faut, dans la page Contact ou celle des Mentions l\u00e9gales o\u00f9 figureraient les conditions de mod\u00e9ration&nbsp;: v\u00e9rifier qu'il existe une proc\u00e9dure permettant de signaler directement un abus. <\/p>",
+    "solution": "<p>Par exemple, faire figurer un lien \u00ab&nbsp;Signaler un abus&nbsp;\u00bb \u00e0 proximit\u00e9 de chaque contenu publi\u00e9 par les internautes, qui m\u00e8ne vers un formulaire permettant de pr\u00e9ciser les raisons du signalement. \u00c0 d\u00e9faut, indiquer l'adresse e-mail du mod\u00e9rateur.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Contenus"
+  },
+  "118": {
+    "objectif": "<ul><li>Informer l'utilisateur afin qu'il puisse d\u00e9cider en connaissance de cause de consulter ou de t\u00e9l\u00e9charger ou non le contenu concern\u00e9.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "La dur\u00e9e des contenus vid\u00e9o ou audio est indiqu\u00e9e.",
+    "controle": "<p>Dans chaque page comportant un contenu multim\u00e9dia :<\/p><ul><li>V\u00e9rifier que la dur\u00e9e de chaque contenu audio ou vid\u00e9o est indiqu\u00e9e avant la consultation de celui-ci, c'est-\u00e0-dire dans le contexte imm\u00e9diat du player. <\/li><li>Contr\u00f4ler que la dur\u00e9e indiqu\u00e9e correspond \u00e0 la dur\u00e9e r\u00e9elle, ou qu'il s'agit d'un ordre de grandeur suffisant.<\/li><\/ul>",
+    "solution": "<p>Accompagner chaque contenu vid\u00e9o ou audio, \u00e0 t\u00e9l\u00e9charger ou \u00e0 consulter en ligne, de la mention de sa dur\u00e9e. Celle-ci peut \u00eatre \u00e9ventuellement indiqu\u00e9e de mani\u00e8re g\u00e9n\u00e9rique, sous forme d'un ordre de grandeur commun \u00e0 un ensemble de contenus.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Images et m\u00e9dias"
+  },
+  "122": {
+    "objectif": "<ul><li>Fournir aux utilisateurs un acc\u00e8s direct et imm\u00e9diat aux contenus, m\u00eame lorsque l'administrateur du site d\u00e9cide de proposer une animation ou une publicit\u00e9 pr\u00e9alable.<\/li><\/ul>",
+    "titre": "Le d\u00e9roulement des animations ne bloque pas la navigation ou l'acc\u00e8s aux contenus.",
+    "controle": "<p>Pour chaque page dont l'acc\u00e8s est pr\u00e9c\u00e9d\u00e9 par une animation&nbsp;: <\/p><ul><li>V\u00e9rifier qu'il est possible d'outrepasser l'animation sans devoir attendre la fin de son d\u00e9roulement, soit par le biais d'un lien d'acc\u00e8s direct au site, soit par un contr\u00f4le permettant son arr\u00eat. <\/li><\/ul><p>Cette bonne pratique concerne, en r\u00e8gle g\u00e9n\u00e9rale, la page d'accueil du site mais elle peut \u00e9galement \u00eatre en jeu dans des pages internes.<\/p>",
+    "solution": "<p>En cas d'animation propos\u00e9e dans un splash screen, celle-ci doit comporter un lien permettant d'acc\u00e9der directement aux contenus sans devoir attendre la fin de l'animation.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Images et m\u00e9dias"
+  },
+  "215": {
+    "objectif": "<ul><li>Permettre la d\u00e9tection automatis\u00e9e des URL erron\u00e9es.<\/li><li> Transmettre au navigateur une information s\u00fbre.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Le serveur envoie un code HTTP 404 pour les ressources non trouv\u00e9es.",
+    "controle": "<p>Pour chaque site examin\u00e9&nbsp;:<\/p><ul><li>Taper l'adresse URL du site suivie de caract\u00e8res al\u00e9atoires (du type http:\/\/www.example.com\/lsghlshdgkjsdgk).<\/li><li>V\u00e9rifier \u00e0 l'aide d'un outil de d\u00e9veloppement que le statut indiqu\u00e9 est bien <code>404 not found<\/code>. <\/li><\/ul>",
+    "solution": "<p>Modifier la configuration du serveur web pour renvoyer l'utilisateur vers une page personnalis\u00e9e lorsque la ressource demand\u00e9e n'existe pas.<\/p><p>Si la configuration principale du serveur n'est pas directement accessible et si l'environnement le permet, utiliser une configuration locale par r\u00e9pertoire. Par exemple, l'environnement Apache autorise la cr\u00e9ation d'un fichier <code>.htaccess<\/code> contenant des directives relatives aux traitements des erreurs : <code>ErrorDocument 404 \/mapage.html<\/code>.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Serveur et performances"
+  },
+  "116": {
+    "objectif": "<ul><li>Permettre aux utilisateurs qui ne peuvent acc\u00e9der au son ou \u00e0 l\u2019image propos\u00e9s de diposer d'une transcription textuelle servant d\u2019alternative.<\/li><li>Permettre aux utilisateurs d\u2019acc\u00e9der \u00e0 l\u2019information contenue dans la vid\u00e9o. <\/li><li>Permettre l\u2019exploitation de l\u2019information par des robots pour am\u00e9liorer son indexation et son r\u00e9f\u00e9rencement.<\/li><li>Permettre la traduction par des outils linguistiques en ligne.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><\/ul>",
+    "titre": "Chaque contenu audio et vid\u00e9o est accompagn\u00e9 de sa transcription textuelle.",
+    "controle": "<p>Identifier chaque page comportant un contenu multim\u00e9dia et, dans le contexte imm\u00e9diat de chaque contenu audio ou vid\u00e9o, s\u2019assurer de la pr\u00e9sence d\u2019une transcription ou d\u2019un lien y donnant imm\u00e9diatement acc\u00e8s.&nbsp;<\/p>",
+    "solution": "<p>Accompagner chaque contenu audio ou vid\u00e9o d'une transcription :<\/p><ul><li>Soit int\u00e9grale (contenant les paroles et une description des sons et \u00e9l\u00e9ments visuels n\u00e9cessaires \u00e0 la compr\u00e9hension) ;&nbsp;<br><\/li><li>Soit synth\u00e9tique (mais refl\u00e9tant la totalit\u00e9 de l'information).<\/li><\/ul><p>La transcription peut :<\/p><ul><li>Figurer dans la page o\u00f9 se trouve le contenu vid\u00e9o ou audio ;<\/li><li>Ou \u00eatre imm\u00e9diatement accessible par un lien pr\u00e9sent dans la page o\u00f9 se trouve le contenu vid\u00e9o ou audio.<\/li><\/ul>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Images et m\u00e9dias"
+  },
+  "5": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur d\u2019acc\u00e9der rapidement \u00e0 la signification d\u2019un sigle. <\/li><li>Permettre l\u2019exploitation du contenu par un robot (pour l\u2019\u00e9tablissement d\u2019un index des sigles). <\/li><li>Favoriser le r\u00e9f\u00e9rencement du contenu.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "La premi\u00e8re occurrence d'une abr\u00e9viation ou d'un acronyme dans le corps de chaque page donne acc\u00e8s \u00e0 sa signification.",
+    "controle": "<p>Dans chaque page examin\u00e9e, identifier visuellement chaque sigle, abr\u00e9viation ou acronyme pr\u00e9sent dans la page, puis v\u00e9rifier, pour sa premi\u00e8re occurence dans la page, la pr\u00e9sence, au moins :<\/p><ul><li>de sa signification imm\u00e9diatement indiqu\u00e9e dans le contexte, par exemple entre parenth\u00e8ses.<\/li><li>d\u2019un lien sur le sigle donnant acc\u00e8s \u00e0 sa signification, par exemple dans un glossaire.<\/li><li>ou de l\u2019\u00e9l\u00e9ment <code>abbr<\/code> dot\u00e9 d\u2019un attribut <code>title<\/code> explicitant sa signification.<\/li><\/ul>",
+    "solution": "<p>Au moins lors de la premi\u00e8re apparition d\u2019un sigle, acronyme ou abr\u00e9viation dans la page, il s\u2019agira de veiller \u00e0 recourir \u00e0 au moins l\u2019une des m\u00e9thodes ci-dessous :<\/p><p><\/p><ul><li>Expliciter sa signification au sein m\u00eame du texte, par exemple : \u00ab une DTD (d\u00e9claration de type de document) \u00bb.<\/li><li>Fournir un lien donnant acc\u00e8s \u00e0 sa signification dans une page de glossaire ou via un affichage dynamique (bulle d\u2019aide JavaScript).<\/li><li>Baliser avec l\u2019\u00e9l\u00e9ment HTML <code>abbr<\/code> et renseigner l\u2019attribut <code>title<\/code> de celui-ci pour indiquer sa signification.<\/li><\/ul><p>La bonne pratique ne fait cette exigence que pour la premi\u00e8re occurence dans la page : cela peut \u00eatre fait ou non pour les suivantes.<\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Contenus"
+  },
+  "49": {
+    "objectif": "<ul><li>Rassurer l'internaute avant l'achat. <\/li><li>Donner \u00e0 l'acheteur toutes les informations li\u00e9es \u00e0 son achat, que celui-ci se passe bien ou non.<\/li><\/ul>",
+    "titre": "Les recours en cas de litige sont indiqu\u00e9s dans les conditions g\u00e9n\u00e9rales de vente ou d'utilisation.",
+    "controle": "<p>Dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente : <\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'informations relatives aux recours possibles en cas de litige.<\/li><\/ul>",
+    "solution": "<p>Indiquer les recours en cas de litige dans les conditions de vente et\/ou d'utilisation.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "70": {
+    "objectif": "<ul><li>Limiter le risque d'erreurs de saisie. <\/li><li>Limiter les risques associ\u00e9s \u00e0 l'envoi de donn\u00e9es erron\u00e9es ou impossibles \u00e0 exploiter. <\/li><li>\u00c9viter que l'utilisateur ne renonce \u00e0 poursuivre faute d'information sur la saisie attendue.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Le format de saisie des champs de formulaire qui le n\u00e9cessitent est indiqu\u00e9",
+    "controle": "<p>Pour chaque formulaire&nbsp;:<\/p><ul><li>Soumettre diff\u00e9rentes erreurs possibles dans chaque formulaire : non-respect d\u2019un format demand\u00e9 ou pr\u00e9visible (format d\u2019adresse e-mail, de date, etc.), afin de d\u00e9tecter les champs pour lesquels un format de saisie sp\u00e9cifique est impos\u00e9.<\/li><li>V\u00e9rifier, \u00e0 l\u2019aide d\u2019un inspecteur de code, que l\u2019\u00e9tiquette associ\u00e9e \u00e0 chaque champ concern\u00e9 en indique le format attendu dans l\u2019\u00e9l\u00e9ment label ou via un attribut ARIA.<\/li><\/ul>",
+    "solution": "<p>Indiquer quel est le format de saisie attendue via l'\u00e9tiquette associ\u00e9e au champ. Par exemple : <code>&lt;label for=\"mail\"&gt;<\/code>Adresse email (du type mail@exemple.com)<code>&lt;\/label&gt;<\/code><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "50": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'anticiper d'\u00e9ventuelles difficult\u00e9s d'utilisation et\/ou de fonctionnement du bien ou du service propos\u00e9. <\/li><li>R\u00e9duire le nombre de sollicitations du service client.<\/li><\/ul>",
+    "titre": "L'adresse et les conditions de retour des produits sont indiqu\u00e9es.",
+    "controle": "<p>Dans au moins une des pages suivantes : les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente, la page d'accueil, la page des mentions l\u00e9gales, la page produit, la page d'\u00e0 propos ou encore la page d'aide :<\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'informations relatives aux conditions de retour des produits vendus (adresse, de retour prise en charge des frais d'envoi, type de colis attendu).<\/li><\/ul>",
+    "solution": "<p>Indiquer, au moins dans les conditions g\u00e9n\u00e9rales de vente, les informations relatives aux conditions de retour des produits vendus (adresse, prise en charge des frais d'envoi, type de colis attendu).<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "78": {
+    "objectif": "<ul><li>Aider l'internaute \u00e0 comprendre ce qu'on attend et, ainsi, faciliter le passage \u00e0 l'\u00e9tape suivante. <\/li><li>\u00c9viter la frustration de l'utilisateur face \u00e0 une erreur dont il n'aurait pas la solution imm\u00e9diate.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "En cas de rejet des donn\u00e9es saisies dans un formulaire, les raisons du rejet sont indiqu\u00e9es \u00e0 l'utilisateur.",
+    "controle": "<p>Pour chaque formulaire examin\u00e9&nbsp;:<\/p><ul><li>Soumettre les diff\u00e9rentes erreurs possibles dans chaque formulaire absence de saisie d'un champ, non-respect d'un format demand\u00e9 ou pr\u00e9visible (format d'adresse mail, de date, etc.), sensibilit\u00e9 \u00e0 la casse, etc.<\/li><li>V\u00e9rifier, si la saisie est rejet\u00e9e, que la nature de l'erreur est pr\u00e9cis\u00e9e de mani\u00e8re \u00e0 fournir l'aide n\u00e9cessaire \u00e0 sa correction, par l'un des moyens indiqu\u00e9s dans le paragraphe de mise en oeuvre.<\/li><\/ul>",
+    "solution": "<p>Pour chaque champ contenant des donn\u00e9es rejet\u00e9es, indiquer la nature de l'erreur et fournir une aide \u00e0 la correction<\/p><ul><li>Soit en d\u00e9but de formulaire, dans une liste des champs erron\u00e9s ;<\/li><li>Soit dans le contexte de chaque champ, autant que possible via leur \u00e9tiquette <code>label<\/code>.<\/li><\/ul>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "14": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de conna\u00eetre les conditions de conservation de leurs donn\u00e9es personnelles.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "La politique de confidentialit\u00e9 et de respect de la vie priv\u00e9e est disponible depuis toutes les pages.",
+    "controle": "<p>Dans chaque page du site&nbsp;:<\/p><ul><li>V\u00e9rifier que les informations relatives \u00e0 la politique de confidentialit\u00e9 et de respect de la vie priv\u00e9e du site sont disponibles depuis chaque page&nbsp;: soit via un lien pr\u00e9sent dans toutes les pages du site (par exemple, dans le pied de page), soit au sein des mentions l\u00e9gales, soit inscrites directement dans toutes les pages. <\/li><\/ul>",
+    "solution": "<p>Indiquer ou rendre disponible sur chaque page du site la politique de confidentialit\u00e9 du site.<\/p>",
+    "etape": "Editorial",
+    "tag": "Privacy",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "81": {
+    "objectif": "<ul><li>Donner \u00e0 l'utilisateur une vue globale de ce qu'il a saisi dans les pages pr\u00e9c\u00e9dentes. <\/li><li>Permettre \u00e0 l'utilisateur de v\u00e9rifier l'ensemble des informations d'une proc\u00e9dure complexe avant la soumission d\u00e9finitive.<\/li><\/ul>",
+    "titre": "Lors de la saisie d'un formulaire r\u00e9parti sur plusieurs pages, un r\u00e9capitulatif global est affich\u00e9 avant l'envoi d\u00e9finitif.",
+    "controle": "<p>Pour chaque formulaire r\u00e9parti sur plusieurs pages :<\/p><ul><li>Soumettre compl\u00e8tement le formulaire.<\/li><li>V\u00e9rifier que la soumission finale donne lieu \u00e0 l'affichage d'un r\u00e9capitulatif des saisies successives, affich\u00e9 avant la validation finale du processus par l'utilisateur.<\/li><\/ul>",
+    "solution": "<p>Stocker les informations saisies dans des variables de session afin de pouvoir en afficher un r\u00e9capitulatif global avant validation.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "175": {
+    "objectif": "<ul><li>Permettre une homog\u00e9n\u00e9it\u00e9 et une continuit\u00e9 dans la visite et la navigation. <\/li><li>Permettre une identification permanente du service en ligne visit\u00e9.<\/li><\/ul>",
+    "titre": "La charte graphique est coh\u00e9rente sur l'ensemble du site.",
+    "controle": "<p>Au fil des contr\u00f4les de bonnes pratiques&nbsp;:<\/p><ul><li>S'assurer que le site utilise des \u00e9l\u00e9ments graphiques communs \u00e0 toutes les pages, en portant notamment une attention particuli\u00e8re \u00e0 la pr\u00e9sence et \u00e0 l'emplacement des menus de navigation, \u00e0 la couleur des sections du site, \u00e0 la largeur des pages et \u00e0 la coh\u00e9rence de la charte graphique globale utilis\u00e9e pour les titres et pour les textes. <\/li><\/ul><p>La v\u00e9rification peut \u00e9galement \u00eatre men\u00e9e en amont du projet, lors de la conception des maquettes graphiques, ou en aval du projet lors de l'int\u00e9gration finale pour v\u00e9rifier l'absence d'une d\u00e9gradation de cette homog\u00e9n\u00e9it\u00e9 graphique due, par exemple, \u00e0 la mise en place de services tiers.<\/p>",
+    "solution": "<p>Utiliser des feuilles de styles communes \u00e0 tout le site, ce qui par rebond am\u00e9liore la coh\u00e9rence globale de tout le site.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Pr\u00e9sentation"
+  },
+  "83": {
+    "objectif": "<ul><li>Fournir \u00e0 l'utilisateur un retour imm\u00e9diat et explicite sur l'action qu'il vient d'effectuer. <\/li><li>\u00c9viter la frustration d'un utilisateur qui pense que le processus s'est d\u00e9roul\u00e9 avec succ\u00e8s alors qu'il y a eu un probl\u00e8me.<\/li><\/ul>",
+    "titre": "La soumission d'un formulaire est suivie d'un message indiquant la r\u00e9ussite ou non de l'action souhait\u00e9e.",
+    "controle": "<p>Pour chaque formulaire<\/p><ul><li>Soumettre compl\u00e8tement le formulaire ;<\/li><li>V\u00e9rifier que la soumission finale du formulaire donne lieu \u00e0 l'affichage d'une page de confirmation indiquant explicitement la r\u00e9ussite ou l'\u00e9chec de l'op\u00e9ration concern\u00e9e. <\/li><\/ul>",
+    "solution": "<p>Retourner une page de confirmation explicite apr\u00e8s soumission d'un formulaire.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "100": {
+    "objectif": "<ul><li>Donner aux utilisateurs qui le souhaitent la possibilit\u00e9 d'acc\u00e9der sans difficult\u00e9 aux moyens de contact t\u00e9l\u00e9phoniques et postaux.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "L'adresse compl\u00e8te et le num\u00e9ro de t\u00e9l\u00e9phone des soci\u00e9t\u00e9s et organisations sont disponibles depuis toutes les pages du site.",
+    "controle": "<p>Dans chaque page du site ou dans au moins une page directement disponible depuis toutes les pages du site <\/p><ul><li>V\u00e9rifier la pr\u00e9sence de l'adresse postale compl\u00e8te et du num\u00e9ro de t\u00e9l\u00e9phone de la soci\u00e9t\u00e9 ou de l'organisme.<\/li><\/ul>",
+    "solution": "<p>Indiquer l'adresse postale compl\u00e8te et le num\u00e9ro de t\u00e9l\u00e9phone de la soci\u00e9t\u00e9 ou de l'organisme <\/p><ul><li>Dans chaque page du site ;<\/li><li>Ou dans une page Contact ou \u00c0 propos, accessible directement depuis chaque page du site. <\/li><\/ul>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Identification et contact"
+  },
+  "13": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'avoir l'ensemble des informations essentielles relatives \u00e0 la recherche qu'ils ont effectu\u00e9e.<\/li><\/ul>",
+    "titre": "La page des r\u00e9sultats de recherche indique le nombre de r\u00e9sultats, le nombre de pages de r\u00e9sultats, et le nombre de r\u00e9sultats par page.",
+    "controle": "<p>Via le moteur de recherche du site examin\u00e9&nbsp;:<\/p><ul><li>Effectuer une ou plusieurs requ\u00eates sur le ou les formulaire(s) de recherche (en fonction de la configuration des r\u00e9sultats, il peut \u00eatre n\u00e9cessaire de tester des requ\u00eates ayant successivement un nombre r\u00e9duit de r\u00e9sultat, un nombre important et aucun r\u00e9sultat) ; <\/li><li>V\u00e9rifier, dans chaque page de r\u00e9sultats, la pr\u00e9sence du nombre global de r\u00e9sultats ;<\/li><li>Contr\u00f4ler, en cas de r\u00e9sultats pagin\u00e9s, que le nombre total de pages de r\u00e9sultats et le nombre de r\u00e9sultats par page sont pr\u00e9sents dans chaque page de r\u00e9sultats.<\/li><\/ul>",
+    "solution": "<ul><li>Le nombre global de r\u00e9sultats est g\u00e9n\u00e9ralement annonc\u00e9 et rappel\u00e9 dans le titre de chaque page de r\u00e9sultats (par exemple : 246 r\u00e9sultats correspondent \u00e0 votre requ\u00eate \u00ab&nbsp;Exemple&nbsp;\u00bb).<\/li><li>Le nombre de pages de r\u00e9sultats est g\u00e9n\u00e9ralement indiqu\u00e9 dans le menu de navigation entre les pages de r\u00e9sultats.<\/li><li>Le nombre de r\u00e9sultats par page est g\u00e9n\u00e9ralement indiqu\u00e9 avant la liste des r\u00e9sultats.<\/li><\/ul>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Contenus"
+  },
+  "218": {
+    "objectif": "<ul><li>\u00c9viter aux utilisateurs les ruptures de navigation, l'arriv\u00e9e sur des pages cul-de-sac ou l'obligation d'utiliser le bouton Pr\u00e9c\u00e9dent du navigateur.<\/li><\/ul>",
+    "titre": "Le menu principal de navigation figure sur les pages d'erreur personnalis\u00e9es.",
+    "controle": "<p>Pour chaque site examin\u00e9e:<\/p><ul><li>Modifier l'adresse URL afin d'obtenir une page d'erreur 404, par exemple, en ajoutant une s\u00e9rie de trois ou quatre caract\u00e8res al\u00e9atoires en fin d'adresse tel que : https:\/\/www.exemple.com\/dbvdjb.<\/li><li>Valider que la page retourn\u00e9e contient les \u00e9l\u00e9ments du menu principal de navigation.<\/li><\/ul>",
+    "solution": "<p>La page d'erreur 404 reprend soit de fa\u00e7on dynamique soit de fa\u00e7on statique l'ensemble de la navigation principale du site.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Serveur et performances"
+  },
+  "174": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de conna\u00eetre avant leur inscription la fr\u00e9quence \u00e0 laquelle ils recevront la newsletter.<\/li><\/ul>",
+    "titre": "La fr\u00e9quence d'envoi des newsletters est consultable avant l'abonnement.",
+    "controle": "<p>Cette v\u00e9rification s'effectue le plus souvent dans la page d'abonnement \u00e0 la newsletter, ou \u00e9ventuellement dans une page satellite du type Aide, \u00c0 propos, etc.&nbsp;: <\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'une indication explicite et si possible chiffr\u00e9e de la fr\u00e9quence d'envoi des newsletters.<\/li><\/ul>",
+    "solution": "<p>Indiquer la fr\u00e9quence d'envoi \u2013 si possible chiffr\u00e9e \u2013 des newsletters.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Newsletter"
+  },
+  "150": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de revenir en page d'accueil en cas de d\u00e9sorientation. <\/li><li>Identifier le lien principal permettant d'acc\u00e9der au site.<\/li><\/ul>",
+    "titre": "Il est possible de revenir \u00e0 la page d'accueil depuis toutes les pages.",
+    "controle": "<p>Cette v\u00e9rification gagne \u00e0 \u00eatre effectu\u00e9e, si possible, \u00e0 partir des templates et en tenant compte des \u00e9ventuels services tiers susceptibles de produire des pages qui ne correspondraient pas \u00e0 ces templates. <\/p><p>Dans chacune des pages du site&nbsp;:<\/p><ul><li>V\u00e9rifier qu'il est possible de revenir directement \u00e0 la page d'accueil depuis toutes les pages, \u00e0 partir d'un lien explicite distinct de l'\u00e9ventuel lien sur le logo principal.<\/li><\/ul>",
+    "solution": "<p>Pr\u00e9voir un lien vers la page d'accueil sur chaque page du site.<\/p><p>Veiller \u00e0 ce que ce lien soit de pr\u00e9f\u00e9rence toujours au m\u00eame endroit (d\u00e9but du fil d'Ariane, menu de navigation, etc.).<\/p><p>Le cas \u00e9ch\u00e9ant, utiliser l'URL correspondant \u00e0 l'adresse g\u00e9n\u00e9rique du site (URL du domaine) du type http:\/\/exemple.com plut\u00f4t que l'URL interne de la page, par exemple http:\/\/exemple.com\/V1\/accueil.html.<\/p><p>Si un logo de site est pr\u00e9sent dans les pages, il doit \u00eatre cliquable et permettre de revenir vers l'accueil.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Navigation"
+  },
+  "10": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019utilisateur de v\u00e9rifier sa saisie en contexte et, si n\u00e9cessaire, de la corriger avant envoi. <\/li><li>Diminuer le nombre de demandes de rectification ou de suppression.<\/li><\/ul>",
+    "titre": "Les contenus ou fichiers destin\u00e9s \u00e0 des espaces publics peuvent \u00eatre v\u00e9rifi\u00e9s avant leur envoi d\u00e9finitif.",
+    "controle": "<p>Pour chaque espace public du site (zone de commentaire, forum, page personnelle publique, avatar, portfolio de documents, etc.)&nbsp;:<\/p><ul><li>Saisir des informations destin\u00e9es \u00e0 \u00eatre rendues publiques telles que des images associ\u00e9es \u00e0 un compte ou un commentaire.<\/li><li>V\u00e9rifier que la soumission d\u00e9finitive du formulaire de saisie est pr\u00e9c\u00e9d\u00e9e d'une \u00e9tape permettant, si l'utilisateur le souhaite, de contr\u00f4ler et de modifier le r\u00e9sultat de sa saisie avant publication. <\/li><\/ul>",
+    "solution": "<p>Mettre en place une pr\u00e9visualisation des informations saisies avant la soumission d\u00e9finitive du formulaire, avec possibilit\u00e9 de les modifier.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Contenus"
+  },
+  "89": {
+    "objectif": "<ul><li>Faciliter la saisie et sa correction dans les formulaires r\u00e9partis par \u00e9tapes. <\/li><li>Limiter les risques d\u2019abandon en cours de proc\u00e9dure.<\/li><\/ul>",
+    "titre": "La navigation dans un processus complexe ne provoque pas la perte des donn\u00e9es pr\u00e9c\u00e9demment soumises.",
+    "controle": "Utiliser le m\u00e9canisme de navigation dans les \u00e9tapes pr\u00e9c\u00e9dentes de la saisie et v\u00e9rifier manuellement que les donn\u00e9es saisies \u00e0 chaque \u00e9tape sont conserv\u00e9es et affich\u00e9es \u00e0 nouveau par la suite.",
+    "solution": "Pr\u00e9voir, au niveau de la gestion de la navigation dans les \u00e9tapes du processus, l\u2019enregistrement des donn\u00e9es saisies \u00e0 chaque \u00e9tape, de mani\u00e8re \u00e0 pouvoir afficher \u00e0 nouveau celle-ci sans perte de donn\u00e9es apr\u00e8s que l\u2019utilisateur a utilis\u00e9 le m\u00e9canisme de navigation dans les \u00e9tapes.",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "79": {
+    "objectif": "<ul><li>Laisser la main \u00e0 l'utilisateur sur la totalit\u00e9 des informations qu'il donne. <\/li><li>Faciliter la correction des erreurs commises par l'utilisateur. <\/li><li>Permettre \u00e0 l'utilisateur de modifier des informations sur lesquelles il voudrait revenir. <\/li><li>\u00c9viter que l'utilisateur ne quitte le formulaire avant validation d\u00e9finitive.<\/li><\/ul>",
+    "titre": "En cas de rejet des donn\u00e9es saisies dans un formulaire, toutes les donn\u00e9es saisies peuvent \u00eatre modifi\u00e9es par l'utilisateur.",
+    "controle": "<p>Pour chaque formulaire audit\u00e9<\/p><ul><li>Provoquer le rejet de la saisie en soumettant les diff\u00e9rentes erreurs possibles : absence de saisie d'un champ, non-respect d'un format demand\u00e9 ou pr\u00e9visible (format d'adresse mail, de date, etc.), sensibilit\u00e9 \u00e0 la casse ;<\/li><li>Puis, v\u00e9rifier que le formulaire est affich\u00e9 de nouveau tel qu'il a \u00e9t\u00e9 rempli, ceci afin de pouvoir \u00e9ventuellement de le corriger.<\/li><\/ul>",
+    "solution": "<p>Stocker toutes les donn\u00e9es saisies dans des variables de session afin de pouvoir les afficher de nouveau telles qu'elles ont \u00e9t\u00e9 saisies dans les champs.<\/p><p>Rendre possible la modification des champs apr\u00e8s rejet des donn\u00e9es.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "143": {
+    "objectif": "<ul><li>Informer de fa\u00e7on pr\u00e9ventive les utilisateurs sur la quantit\u00e9 de donn\u00e9es \u00e0 t\u00e9l\u00e9charger. <\/li><li>Permettre aux utilisateurs de diff\u00e9rer le t\u00e9l\u00e9chargement en connexion bas d\u00e9bit ou mobile.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "La taille des fichiers internes propos\u00e9s en t\u00e9l\u00e9chargement est indiqu\u00e9e.",
+    "controle": "<p>Pour chaque lien de t\u00e9l\u00e9chargement, v\u00e9rifier qu'il est possible d'en conna\u00eetre le poids&nbsp;:<\/p><ul><li>Via une information g\u00e9n\u00e9rique donn\u00e9e dans une page d'aide ; <\/li><li>Via une information donn\u00e9e dans le contexte du lien&nbsp;: paragraphe ou \u00e9l\u00e9ment de liste <code>li<\/code> o\u00f9 il est inclus, titre de section qui le pr\u00e9c\u00e8de, cellule d'en-t\u00eate de tableau associ\u00e9e \u00e0 celle o\u00f9 il est pr\u00e9sent ; <\/li><li>Via l'attribut <code>title<\/code> du lien reprenant et compl\u00e9tant le libell\u00e9 de celui-ci ; <\/li><li>Ou via une information donn\u00e9e dans le libell\u00e9 du lien. <\/li><\/ul>",
+    "solution": "<p>Au minimum, pr\u00e9voir une page d'aide indiquant le poids moyen ou maximum pour l'ensemble des fichiers propos\u00e9s.<\/p><p>Au mieux, indiquer le poids lors de chaque lien permettant de t\u00e9l\u00e9charger un fichier.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/a\">\u00e9l\u00e9ment <code>a<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Liens"
+  },
+  "210": {
+    "objectif": "<ul><li>Pr\u00e9venir les risques d\u2019\u00e9chec des op\u00e9rations.<\/li><li>\u00c9viter l'exclusion d'utilisateurs pour des raisons techniques ou mat\u00e9rielles.<\/li><\/ul>",
+    "titre": "Le site propose au moins deux m\u00e9canismes pour valider une op\u00e9ration s\u00e9curis\u00e9e.",
+    "controle": "<p>V\u00e9rifier pour toute op\u00e9ration s\u00e9curis\u00e9e par un syst\u00e8me de type authentification \u00e0 double facteur ou autre authentification forte, que l'utilisateur a le choix entre au moins deux m\u00e9canismes (par exemple, authentification par SMS ou par  terminal de validation).<p>",
+    "solution": "<p>Pour toute op\u00e9ration s\u00e9curis\u00e9e par un syst\u00e8me de type authentification \u00e0 double facteur ou autre authentification forte, fournir \u00e0 l'utilisateur au moins deux m\u00e9canismes au choix pour l'utiliser (par exemple, authentification par SMS ou par  terminal de validation).<p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "220": {
+    "objectif": "<ul><li>Acc\u00e9l\u00e9rer l'affichage des contenus et permettre une navigation plus fluide. <\/li><li>R\u00e9duire les co\u00fbts de bande passante.<\/li><\/ul>",
+    "titre": "Le serveur envoie les informations permettant la mise en cache des contenus.",
+    "controle": "<p>Pour chaque page : v\u00e9rifier la possible mise en cache des \u00e9l\u00e9ments de la page \u00e0 l\u2019aide d\u2019un outil d\u00e9di\u00e9 (outils de d\u00e9veloppement, service en ligne, etc.) Attention \u00e0 bien v\u00e9rifier tous les \u00e9l\u00e9ments li\u00e9s (CSS, JS, images) et pas seulement la page en elle-m\u00eame.<\/p>",
+    "solution": "<p>Configurer le serveur web pour qu\u2019il puisse g\u00e9rer la mise en cache des \u00e9l\u00e9ments statiques et g\u00e9rer \u2013 au niveau applicatif \u2013 la possible mise en cache des \u00e9l\u00e9ments dynamiques.<\/p><p>En pratique, et en accord avec les sp\u00e9cifications HTTP, le serveur devra envoyer les en-t\u00eates etag, date et last-modified correspondant, respectivement, \u00e0 l\u2019identifiant de la ressource, \u00e0 la date de traitement de la requ\u00eate et \u00e0 la date de derni\u00e8re modification de la ressource demand\u00e9e. L\u2019ensemble des dates est au format GMT. Ces informations peuvent \u00eatre compl\u00e9t\u00e9es par les champs content-length et expires si la taille en octets et la date d\u2019expiration exacte du contenu sont connues.<\/p><p>Afin d\u2019informer les proxys et les clients finaux sur le comportement \u00e0 adopter vis-\u00e0-vis des contenus mis en cache, les auteurs devront utiliser l\u2019en-t\u00eate HTTP cache-control en accord avec les d\u00e9lais de r\u00e9actualisation n\u00e9cessaires et le caract\u00e8re priv\u00e9 de la diffusion.<\/p><p>La possible mise en cache pourra \u00eatre ainsi finalis\u00e9e par la soumission d\u2019un message 304 Not Modified (sans la ressource demand\u00e9e dans le corps de la requ\u00eate) lorsque le serveur recevra un en-t\u00eate if-modified-since contenant une date ant\u00e9rieure \u00e0 la date de modification de ladite ressource.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Serveur et performances"
+  },
+  "219": {
+    "objectif": "<ul><li>Am\u00e9liorer la vitesse de rendu de la page. <\/li><li>Diminuer les co\u00fbts de bande passante.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site<\/li><\/ul>",
+    "titre": "Le serveur transmet des contenus compress\u00e9s aux clients qui les acceptent.",
+    "controle": "<p>Pour chaque page examin\u00e9e&nbsp;: <\/p><ul><li>V\u00e9rifier la compression des contenus (Gzip) \u00e0 l'aide d'un outil d\u00e9di\u00e9. <\/li><\/ul><p>Attention \u00e0 bien v\u00e9rifier tous les \u00e9l\u00e9ments li\u00e9s (CSS, JS, HTML) et pas seulement la page en elle-m\u00eame. Les formats d\u00e9j\u00e0 compress\u00e9s comme les images JPEG ou PNG ou les archives zip, par exemple, ne doivent pas \u00eatre recompress\u00e9s.<\/p><p>Si la taille avant compression d'un \u00e9l\u00e9ment est inf\u00e9rieure \u00e0 1 Ko, il n'est pas n\u00e9cessaire de le compresser, au risque de voir son poids augmenter.<\/p>",
+    "solution": "<p>Activer le module Gzip ou Deflate du serveur pour compresser les ressources Javascript, CSS et HTML.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Ecodesign",
+    "theme": "Serveur et performances"
+  },
+  "147": {
+    "objectif": "<ul><li>\u00c9viter les erreurs 404 en cours de navigation. <\/li><li>Faciliter un acc\u00e8s rapide \u00e0 tous les contenus.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Tous les liens internes du site sont valides.",
+    "controle": "<p>Dans l'ensemble du site&nbsp;:<\/p><ul><li>V\u00e9rifier l'absence de liens internes menant \u00e0 des erreurs de type 404.<\/li><\/ul>",
+    "solution": "<p>S'assurer que l'outil utilis\u00e9 pour la r\u00e9daction des contenus poss\u00e8de une gestion satisfaisante et coh\u00e9rente des hyperliens internes.<\/p><p>Si ce n'est pas le cas, lancer r\u00e9guli\u00e8rement un contr\u00f4le de la validit\u00e9 de l'ensemble des liens du site.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Liens"
+  },
+  "168": {
+    "objectif": "<ul><li>\u00c9viter l'inscription \u00e0 une newsletter par un tiers usurpant une identit\u00e9. <\/li><li>V\u00e9rifier que l'adresse e-mail a \u00e9t\u00e9 saisie sans erreur.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es.<\/li><\/ul>",
+    "titre": "L'inscription aux newsletters est soumise \u00e0 un processus de confirmation.",
+    "controle": "<p>Cette v\u00e9rification n\u00e9cessite de s'abonner \u00e0 la newsletter concern\u00e9e.<\/p><p>Pour chaque site proposant de s'abonner \u00e0 une newsletter :<\/p><ul><li>Effectuer une inscription de test et v\u00e9rifier la r\u00e9ception d'un mail de confirmation.<\/li><\/ul>",
+    "solution": "<p>Envoyer un e-mail permettant l'inscription d\u00e9finitive via la saisie d'un mot de passe, un clic sur un hyperlien, etc.<\/p>",
+    "etape": "Editorial",
+    "tag": "Privacy",
+    "theme": "Newsletter"
+  },
+  "171": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur de se d\u00e9sinscrire sans n\u00e9cessairement passer par un mail.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es.<\/li><\/ul>",
+    "titre": "La d\u00e9sinscription aux newsletters est possible depuis le site.",
+    "controle": "<p>Pour chaque site proposant une newsletter&nbsp;:<\/p><ul><li>V\u00e9rifier la pr\u00e9sence dans le site d'une page proposant un formulaire de d\u00e9sabonnement ;<\/li><li>V\u00e9rifier que cette page est accessible depuis la navigation du site ;<\/li><li>V\u00e9rifier que la d\u00e9sinscription est effective.<\/li><\/ul>",
+    "solution": "<p>Fournir une page d\u00e9di\u00e9e \u00e0 la newsletter, dans laquelle le formulaire d'abonnement est accompagn\u00e9 d'un formulaire de d\u00e9sabonnement.<\/p><p>Faire figurer le lien de d\u00e9sabonnement dans les autres \u00e9ventuels formulaires d'inscription \u00ab rapides \u00bb int\u00e9gr\u00e9s \u00e0 d'autres pages du site.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Newsletter"
+  },
+  "198": {
+    "objectif": "<ul><li>Informer les utilisateurs sur le niveau de s\u00e9curit\u00e9 du mot de passe choisi et donc sur les risques de d\u00e9tournement.<\/li><\/ul>",
+    "titre": "Un dispositif sensibilise l'utilisateur sur le degr\u00e9 de s\u00e9curisation du mot de passe qu'il choisit",
+    "controle": "<div>Pour tout formulaire d\u2019inscription ou de changement de mot de passe :<\/div><div><ul><li>Saisir un mot de passe et s\u2019assurer que cette saisie donne lieu \u00e0 une validation et \u00e0 un retour indiquant son degr\u00e9 de s\u00e9curit\u00e9, et ce, avant la soumission d\u00e9finitive du formulaire.<br><\/li><\/ul><\/div><div>Cette validation peut \u00eatre plus ou moins exigeante : contr\u00f4le du nombre de caract\u00e8res, de l\u2019absence de l\u2019identifiant du compte dans le mot de passe, du type de caract\u00e8res pr\u00e9sents, etc.&nbsp;<\/div>",
+    "solution": "<div>La saisie du mot de passe donne lieu \u00e0 une validation et \u00e0 un retour indiquant son degr\u00e9 de s\u00e9curit\u00e9, avant soumission d\u00e9finitive du formulaire d\u2019inscription ou de changement de mot de passe.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "26": {
+    "objectif": "<ul><li>Conforter la confiance de l'utilisateur. <\/li><li>Permettre \u00e0 l'utilisateur de saisir des donn\u00e9es sensibles en sachant qu'elles seront prot\u00e9g\u00e9es. <\/li><li>Minimiser les risques d'utilisation frauduleuse des donn\u00e9es des utilisateurs.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "Les \u00e9changes de donn\u00e9es sensibles sont s\u00e9curis\u00e9s et signal\u00e9s comme tels.",
+    "controle": "<p>Une page s\u00e9curis\u00e9e se reconna\u00eet \u00e0 son URL qui commence par https:\/\/ ou \u00e0 la pr\u00e9sence d'un \u00e9l\u00e9ment visuel dans le navigateur (apparition d'un cadenas, changement de couleur de la barre de saisie de l'URL).<\/p><p>Pour tout site proposant d'\u00e9changer des donn\u00e9es sensibles&nbsp;:<\/p><ul><li>Saisir l'adresse URL du site en http (pas en https), sans \u00eatre identifi\u00e9, et v\u00e9rifier que vous \u00eates directement redirig\u00e9 vers la version HTTPS du site et que tous les \u00e9changes sont s\u00e9curis\u00e9s ; <\/li><li>Au minimum, v\u00e9rifier que les \u00e9changes de donn\u00e9es sensibles (pages de saisie d'identifiants, de donn\u00e9es personnelles ou bancaires, etc.) sont en HTTPS ;<\/li><li>Dans le cas o\u00f9 les donn\u00e9es sont saisies dans une page non s\u00e9curis\u00e9e, v\u00e9rifier dans le code source du formulaire qu'une adresse en HTTPS est pr\u00e9sente au sein de l'attribut action, ce qui prouve que les donn\u00e9es sont envoy\u00e9es vers une page s\u00e9curis\u00e9e. <\/li><\/ul><p>Attention, la troisi\u00e8me option n'offre pas un niveau de s\u00e9curit\u00e9 \u00e9quivalent aux deux premi\u00e8res et peut \u00eatre tol\u00e9r\u00e9e dans le cas de donn\u00e9es personnelles, voire d'identifiants mais jamais pour des donn\u00e9es tr\u00e8s sensibles (biom\u00e9triques ou bancaires, par exemple).<\/p>",
+    "solution": "<p>Recourir \u00e0 un certificat de s\u00e9curit\u00e9 informatique dans une version support\u00e9e par les versions r\u00e9centes des navigateurs.<\/p><p>Recourir \u00e0 un service tiers d'authentification d\u00e9centralis\u00e9 du type OpenID.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Donn\u00e9es personnelles"
+  },
+  "193": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de conna\u00eetre la validit\u00e9 du certificat et contribuer \u00e0 la s\u00e9curisation de la transaction.<\/li><\/ul>",
+    "titre": "Les certificats de s\u00e9curit\u00e9 sont sign\u00e9s et en cours de validit\u00e9.",
+    "controle": "<p>V\u00e9rifier la validit\u00e9 du certificat \u00e0 l'aide d'un outil en ligne, ou bien \u00e0 l'aide des outils fournis par les navigateurs<\/p><p>La plupart des navigateurs affichent \u00e9galement une alerte lorsqu'ils rencontrent un certificat non valide.<\/p>",
+    "solution": "<p>Faire un suivi rigoureux des certificats de s\u00e9curit\u00e9 utilis\u00e9s sur le site en anticipant les dates de renouvellement.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "201": {
+    "objectif": "<ul><li>R\u00e9duire les risques de t\u00e9l\u00e9chargement d\u2019un contenu dangereux dissimul\u00e9.<\/li><\/ul>",
+    "titre": "Les en-t\u00eates envoy\u00e9s par le serveur d\u00e9sactivent la d\u00e9tection automatique du type MIME de chaque ressource.",
+    "controle": "<div>V\u00e9rifier, \u00e0 l\u2019aide d\u2019un outil d\u2019inspection des en-t\u00eates HTTP, la pr\u00e9sence de l\u2019en-t\u00eate X-Content-Type-Options avec la valeur nosniff.<\/div>",
+    "solution": "<div>Configurer le serveur pour adresser l\u2019en-t\u00eate X-Content-Type-Options avec la valeur nosniff.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "99": {
+    "objectif": "<ul><li>Am\u00e9liorer l'identification visuelle du site et de ses pages. <\/li><li>Faciliter l'identification dans le navigateur et dans les favoris ou signets. <\/li><li>Permettre l'affichage, l'appel, et la m\u00e9morisation \u00e9ventuelle de l'ic\u00f4ne de favori par tous les navigateurs.<\/li><\/ul>",
+    "titre": "Le code source des pages contient un appel valide \u00e0 une ic\u00f4ne de favori.",
+    "controle": "<p>Dans le code source de chaque page examin\u00e9e&nbsp;:<\/p><ul><li>V\u00e9rifier, \u00e0 l'aide d'un outil de d\u00e9veloppement web ou d'un inspecteur de code, que l'\u00e9l\u00e9ment <code>link rel<\/code> est pr\u00e9sent dans l'en-t\u00eate de page <code>head<\/code> ;<\/li><li>V\u00e9rifier que sa syntaxe est de la forme : <\/li><\/ul><p>&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/img\/favicon.png\"\/&gt; pour les formats png, mais aussi jpg, gif, etc. ;<\/p><p>ou &lt;link rel=\"shortcut icon\" type=\"image\/x-icon\" href=\"\/img\/favicon.ico\" \/&gt; pour le format ico Microsoft.<\/p>",
+    "solution": "<p>Selon le format choisi pour l'ic\u00f4ne et son emplacement, utiliser un lien du type&nbsp;:<\/p><ul><li>&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/img\/favicon.png\"\/&gt; (format png, mais aussi jpg, gif, etc.) ;<\/li><li>&lt;link rel=\"shortcut icon\" type=\"image\/x-icon\" href=\"\/img\/favicon.ico\" \/&gt; (format ico Microsoft seul reconnu par Internet Explorer).<\/li><\/ul>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "123": {
+    "objectif": "<ul><li>Permettre l'utilisation imm\u00e9diate du contact t\u00e9l\u00e9phonique quel que soit le contexte utilisateur.<\/li><\/ul>",
+    "titre": "L'indicatif international est disponible pour tous les num\u00e9ros de t\u00e9l\u00e9phone.",
+    "controle": "<p>Pour chaque num\u00e9ro de t\u00e9l\u00e9phone indiqu\u00e9 dans le site&nbsp;: <\/p><ul><li>V\u00e9rifier que tous les num\u00e9ros sont pr\u00e9c\u00e9d\u00e9s de l'indicatif du pays sous la forme +indicatif international - num\u00e9ro de t\u00e9l\u00e9phone, par exemple +33 pour la France.<\/li><li>V\u00e9rifier que le premier 0 des num\u00e9ros a \u00e9t\u00e9 retir\u00e9. Exemple pour la France : +33 6 11 22 33 44.<\/li><\/ul>",
+    "solution": "<p>Ajouter \u00e0 chaque num\u00e9ro de t\u00e9l\u00e9phone l'indicatif du pays sous la forme +indicatif international - num\u00e9ro de t\u00e9l\u00e9phone.<\/p><p>Retirer pour chaque num\u00e9ro le premier 0. Exemple pour la France : +33 1 23 45 67 89.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Internationalisation"
+  },
+  "127": {
+    "objectif": "<ul><li>Permettre aux aides techniques d\u2019interpr\u00e9ter correctement les contenus exprim\u00e9s dans une autre langue. <\/li><li>Faciliter le travail des outils de traduction automatique. <\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Chaque changement de langue est signal\u00e9.",
+    "controle": "<p>Dans chaque page examin\u00e9e&nbsp;:<\/p><ul><li>Rep\u00e9rer tous les contenus r\u00e9dig\u00e9s dans une autre langue que la langue principale, sans oublier les contenus des attributs HTML restitu\u00e9s \u00e0 l'utilisateur (tel que celui de l'attribut <code>alt<\/code> des images)<\/li><li>Contr\u00f4ler que la langue de ces contenus est pr\u00e9cis\u00e9e via un attribut <code>lang<\/code> plac\u00e9 sur l'\u00e9l\u00e9ment concern\u00e9 par le changement de langue (titre, lien, item de liste) ou h\u00e9rit\u00e9 d'un \u00e9l\u00e9ment parent. <\/li><\/ul>",
+    "solution": "<p>Utiliser l'attribut <code>lang<\/code> et le code de langue adapt\u00e9 pour chaque contenu dont la langue diff\u00e8re de celle de la page courante. Par exemple : &lt;title lang=\"en\"&gt;<code>Open quality standards<\/code>&lt;\/title&gt; <\/p><p>Si le contenu dont la langue diff\u00e8re n'est pas d\u00e9j\u00e0 balis\u00e9 par un \u00e9l\u00e9ment de la structure HTML existante (titre, lien, citation etc.), il est alors n\u00e9cessaire d'ajouter un \u00e9l\u00e9ment sp\u00e9cifique (<code>div<\/code> ou <code>span<\/code>) pour sp\u00e9cifier la langue de cet \u00e9l\u00e9ment (\u00e0 l'exception du contenu de l'\u00e9l\u00e9ment <code>title<\/code> qui ne peut comporter de balisage interne).<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Attributs_universels\/lang\"><code>lang<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Internationalisation"
+  },
+  "161": {
+    "objectif": "<ul><li>Permettre la navigation au clavier pour les utilisateurs ayant une pr\u00e9f\u00e9rence pour cette pratique. <\/li><li>Permettre la consultation des contenus et l'utilisation des services ind\u00e9pendamment du p\u00e9riph\u00e9rique d'entr\u00e9e.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "Le site est int\u00e9gralement utilisable au clavier.",
+    "controle": "<p>Cette v\u00e9rification s'applique \u00e0 l'ensemble des \u00e9l\u00e9ments interactifs&nbsp;: hyperliens, boutons, champs de formulaires, widgets Javascript, etc. Le mode d'interaction par d\u00e9faut est la touche tabulation pour atteindre les liens, les champs et les contr\u00f4les, puis la touche entr\u00e9e pour les activer. Dans certains widgets, un mode d'interaction sp\u00e9cifique peut \u00eatre pr\u00e9sent : barre d'espace pour valider, touches fl\u00e8ches pour se d\u00e9placer, touche d'\u00e9chappement pour fermer ou sortir. Autant que possible dans ce cas, ces touches sp\u00e9cifiques devraient \u00eatre indiqu\u00e9es \u00e0 l'utilisateur.<\/p><p>Au sein de chaque page examin\u00e9e : <\/p><ul><li>V\u00e9rifier que l'ensemble des interactions, liens, boutons, champs de formulaires, pr\u00e9sents dans les pages sont utilisables au clavier, \u00e0 l'exception de ceux pour lesquels cela n'aurait pas de sens, comme une fonctionnalit\u00e9 de trac\u00e9 \u00e0 la souris. <\/li><\/ul>",
+    "solution": "<p>Recourir \u00e0 des gestionnaires d'\u00e9v\u00e9nements universels en cas d'interaction bas\u00e9e sur Javascript (par exemple, <code>onclick<\/code> pour un lien <code>a<\/code> ou pour un champ ou contr\u00f4le de formulaire) ou, \u00e0 d\u00e9faut, compl\u00e9ter les gestionnaires d'\u00e9v\u00e9nements non universels (<code>onmouseover<\/code> par exemple) par un second gestionnaire permettant l'acc\u00e8s clavier (<code>onfocus<\/code> par exemple) ou encore fournir un moyen d'acc\u00e8s alternatif.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Navigation"
+  },
+  "173": {
+    "objectif": "<ul><li>Faciliter la consultation des archives des newsletters. <\/li><li>Permettre aux utilisateurs de se faire une id\u00e9e de la newsletter envoy\u00e9e aux abonn\u00e9s. <\/li><li>Favoriser le r\u00e9f\u00e9rencement de vos contenus.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Les archives de newsletters sont disponibles en ligne.",
+    "controle": "<p>Pour chaque site proposant une newsletter :<\/p><ul><li>V\u00e9rifier que les archives des newsletters sont disponibles en ligne.<\/li><\/ul>",
+    "solution": "<p>Rendre publique la totalit\u00e9 des newsletters envoy\u00e9es en rendant leur contenu disponible sur le site.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "SEO",
+    "theme": "Newsletter"
+  },
+  "172": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de se faire une id\u00e9e de la newsletter envoy\u00e9e aux abonn\u00e9s. <\/li><li>Permettre aux utilisateurs de consulter la newsletter en dehors des contraintes de l'email. <\/li><li>Accro\u00eetre le r\u00e9f\u00e9rencement de vos contenus.<\/li><\/ul>",
+    "titre": "La derni\u00e8re newsletter envoy\u00e9e est disponible en ligne.",
+    "controle": "<p>Cette v\u00e9rification s'effectue le plus souvent dans la page comportant le formulaire d'abonnement&nbsp;:<\/p><ul><li>V\u00e9rifier qu'une version de la derni\u00e8re newsletter envoy\u00e9e est disponible en ligne (au format HTML ou \u00e9ventuellement PDF) via un lien accessible dans le contexte de l'abonnement.<\/li><\/ul>",
+    "solution": "<p>Rendre publique la derni\u00e8re newsletter envoy\u00e9e en rendant son contenu disponible sur le site et en faisant en sorte que l'acc\u00e8s \u00e0 ce contenu reste possible \u00e0 partir de la page d'accueil ou du plan de site.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Newsletter"
+  },
+  "191": {
+    "objectif": "<ul><li>Am\u00e9liorer la lisibilit\u00e9 et la pertinence des contenus imprim\u00e9s. <\/li><li>Rationaliser l'espace utilis\u00e9 par les contenus imprim\u00e9s pour \u00e9conomiser du papier.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site<\/li><\/ul>",
+    "titre": "Le contenu de chaque page est disponible \u00e0 l'impression sans blocs de navigation.",
+    "controle": "<p>Cette v\u00e9rification peut s'effectuer imm\u00e9diatement en utilisant l'aper\u00e7u avant impression du navigateur&nbsp;:<\/p><ul><li>V\u00e9rifier qu'aucun menu ou autre bloc de navigation ne s'affiche dans l'aper\u00e7u avant impression de la page. <\/li><\/ul><p>Les blocs de navigation peuvent \u00eatre l'ensemble des menus <code>nav<\/code>, des \u00e9l\u00e9ments de <code>header<\/code> ou de pied de page tels qu'un formulaire de recherche ou des liens annexes, un formulaire d'inscription \u00e0 une newsletter, etc.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/nav\"><code>nav<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/header\"><code>header<\/code> sur MDN<\/a><\/p>",
+    "solution": "<p>Fournir une feuille de style CSS pour le media print, qui masque les blocs de navigation via la propri\u00e9t\u00e9 <code>display<\/code>. <\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Ecodesign",
+    "theme": "Pr\u00e9sentation"
+  },
+  "236": {
+    "objectif": "<ul><li>Permettre aux aides techniques de restituer l'information contenue dans les tableaux de donn\u00e9es de mani\u00e8re compr\u00e9hensible, en indiquant \u00e0 l'utilisateur les relations logiques entre contenu et en-t\u00eates du tableau.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les cellules des tableaux de donn\u00e9es sont reli\u00e9es \u00e0 leurs en-t\u00eates.",
+    "controle": "<p>Dans le code g\u00e9n\u00e9r\u00e9 des tableaux de donn\u00e9es&nbsp;:<\/p><ul><li>V\u00e9rifier l'utilisation syst\u00e9matique de l'\u00e9l\u00e9ment <code>th<\/code> pour baliser les en-t\u00eates de ligne ou de colonne ;<\/li><li>Pour les en-t\u00eates s'appliquant \u00e0 la totalit\u00e9 d'une ligne ou d'une colonne, contr\u00f4ler la pr\u00e9sence syst\u00e9matique de l'attribut <code>scope<\/code> dot\u00e9 de la valeur appropri\u00e9e (<code>row<\/code> pour une ligne ou <code>col<\/code> pour une colonne) ;<\/li><li>Pour les en-t\u00eates qui ne s'appliquent qu'\u00e0 une partie d'une ligne ou d'une colonne, contr\u00f4ler la pr\u00e9sence syst\u00e9matique de l'attribut <code>id<\/code> pour l'\u00e9l\u00e9ment <code>th<\/code> et de l'attribut <code>headers<\/code> pour les \u00e9l\u00e9ments <code>td<\/code> avec les valeurs appropri\u00e9es&nbsp;:<\/li><li>Chaque en-t\u00eate (\u00e9l\u00e9ment <code>th<\/code>) doit \u00eatre dot\u00e9e d'un attribut <code>id<\/code> (par exemple, <code>id=\"foo\"<\/code>) ;<\/li><li>L'attribut headers doit \u00eatre utilis\u00e9e dans chaque cellule (\u00e9l\u00e9ment <code>td<\/code>) pour indiquer les en-t\u00eates associ\u00e9es (par exemple, <code>headers=\"foo\" <\/code>pour chaque cellule rattach\u00e9e \u00e0 l'en-t\u00eate ayant l'attribut <code>id=\"foo\"<\/code>).<\/li><\/ul>",
+    "solution": "<p>Utiliser l'\u00e9l\u00e9ment HTML <code>th<\/code> et son attribut <code>scope<\/code> pour baliser les cellules d'en-t\u00eates et expliciter leur port\u00e9e (<code>scope<\/code> de valeur <code>col<\/code> pour un en-t\u00eate de colonne, de valeur <code>row<\/code> pour un en-t\u00eate de ligne).<\/p><p>Pour les en-t\u00eates qui ne s'appliquent qu'\u00e0 une partie d'une ligne ou d'une colonne, contr\u00f4ler la pr\u00e9sence syst\u00e9matique de l'attribut <code>id<\/code> pour l'\u00e9l\u00e9ment <code>th<\/code> et de l'attribut <code>headers<\/code> pour les \u00e9l\u00e9ments <code>td<\/code> avec les valeurs appropri\u00e9es&nbsp;:<\/p><ul><li>Donner \u00e0 chaque en-t\u00eate (\u00e9l\u00e9ment <code>th<\/code>) un attribut <code>id<\/code> (par exemple, <code>id=\"foo\"<\/code>) ;<\/li><li>Utiliser l'attribut <code>headers<\/code> dans chaque cellule (\u00e9l\u00e9ment <code>td<\/code>) pour indiquer les en-t\u00eates associ\u00e9es (par exemple, <code>headers=\"foo\"<\/code> pour chaque cellule rattach\u00e9e \u00e0 l'en-t\u00eate ayant l'attribut <code>id=\"foo\"<\/code>).<\/li><\/ul><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/th\"><code>th<\/code> sur MDN<\/a> - <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/td\"><code>td<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Structure et code"
+  },
+  "91": {
+    "objectif": "<ul><li>Permettre aux aides techniques de restituer \u00e0 l\u2019utilisateur une liste dont l\u2019organisation est clairement perceptible et qui facilite le passage d\u2019un \u00e9l\u00e9ment de la liste \u00e0 un autre. <\/li><li>Favoriser un rendu appropri\u00e9 des listes d\u00e9roulantes complexes dans tous les navigateurs.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les \u00e9l\u00e9ments d'une liste d\u00e9roulante qui peuvent \u00eatre regroup\u00e9s le sont de mani\u00e8re appropri\u00e9e.",
+    "controle": "<p>Pour chaque liste d\u00e9roulante&nbsp;:<\/p><ul><li>Ouvrir chaque liste (<code>select<\/code>) pour d\u00e9tecter celles qui n\u00e9cessiteraient un regroupement d'\u00e9l\u00e9ments <code>option<\/code>, par exemple des regroupements de mod\u00e8les de voitures class\u00e9s par marques ou des regroupements de villes r\u00e9alis\u00e9s par d\u00e9partement ; <\/li><li>V\u00e9rifier, en examinant le code source \u00e0 l'aide de Firebug, que chaque s\u00e9rie d'\u00e9l\u00e9ments <code>option<\/code> qui devraient \u00eatre regroup\u00e9s est balis\u00e9e avec l'\u00e9l\u00e9ment <code>optgroup<\/code> ;<\/li><li>V\u00e9rifier que chaque \u00e9l\u00e9ment <code>optgroup<\/code> est dot\u00e9 d'un attribut <code>label<\/code> associant un libell\u00e9 pertinent au groupe d'options concern\u00e9.<\/li><\/ul>",
+    "solution": "<p>Utiliser l'\u00e9l\u00e9ment <code>optgroup<\/code> pour baliser les regroupements th\u00e9matiques d'\u00e9l\u00e9ments option dans les listes <code>select<\/code>.<\/p><p>Utiliser l'attribut <code>label<\/code> de l'\u00e9l\u00e9ment <code>optgroup<\/code> pour afficher l'\u00e9tiquette de chaque regroupement.<\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "141": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur d'anticiper le r\u00e9sultat de l'activation d'un lien. <\/li><li>\u00c9viter aux utilisateurs d'aides techniques d'\u00eatre d\u00e9sorient\u00e9s par l'ouverture d'une nouvelle fen\u00eatre qui n'est pas toujours perceptible et perturbe notamment l'utilisation de l'historique de navigation.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "L'utilisateur est averti des ouvertures de nouvelles fen\u00eatres.",
+    "controle": "<p>Dans les pages inspect\u00e9es&nbsp;:<\/p><ul><li>Identifier les liens et autres contr\u00f4les d'ouverture d'une nouvelle fen\u00eatre, c'est-\u00e0-dire&nbsp;: <\/li><ul><li>Les usages de l'attribut <code>target<\/code> dans la source g\u00e9n\u00e9r\u00e9e HTML ; <\/li><li>Les usages de la fonctionnalit\u00e9 <code>window.open<\/code> via une recherche dans les fichiers Javascript et dans la source HTML ; <\/li><\/ul><li>V\u00e9rifier, pour chacun de ces liens, quelle que soit la technologie utilis\u00e9e, la pr\u00e9sence d'un avertissement explicite consultable avant toute action sur celui-ci.<\/li><\/ul>",
+    "solution": "<p>Ajouter une mention du type \u00ab&nbsp;(nouvelle fen\u00eatre)&nbsp;\u00bb, soit directement dans le libell\u00e9 du lien, soit dans son attribut <code>title<\/code> qui doit alors reprendre et compl\u00e9ter le libell\u00e9.<\/p><p>Ajouter une mention du type \u00ab&nbsp;(nouvelle fen\u00eatre)&nbsp;\u00bb dans les \u00e9tiquettes de contr\u00f4le de formulaire, dans les libell\u00e9s de boutons ou dans tout autre objet provoquant l'ouverture d'une nouvelle fen\u00eatre.<\/p><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/a\">\u00e9l\u00e9ment <code>a<\/code> sur MDN<\/a><\/p>",
+    "etape": "Editorial",
+    "tag": "Accessibility",
+    "theme": "Liens"
+  },
+  "120": {
+    "objectif": "<ul><li>Laisser \u00e0 l'utilisateur le contr\u00f4le du son lors de la consultation du site. <\/li><li>Ne pas surprendre l'utilisateur par la diffusion inattendue d'un contenu audio. <\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les sons sont d\u00e9clench\u00e9s par l'utilisateur.",
+    "controle": "<p>Dans chaque page comportant un contenu audio : <\/p><ul><li>V\u00e9rifier l'absence de contenus audio activ\u00e9s automatiquement au chargement de la page ;<\/li><li>V\u00e9rifier l'absence de contenus audio activ\u00e9s de mani\u00e8re impr\u00e9visibles suite \u00e0 une action de l'utilisateur.<\/li><\/ul>",
+    "solution": "<p>Ne pas mettre en place des contenus audio dont le d\u00e9marrage est automatique et sans action explicite de l'utilisateur en ce sens.<\/p><p>Ne pas incorporer dans la page d'\u00e9l\u00e9ments d\u00e9clenchant la lecture d'un son non contr\u00f4lable par exemple avec l'\u00e9l\u00e9ment html <code>audio<\/code> dot\u00e9 de l'attribut <code>autoplay<\/code> ou sans l'attribut <code>controls<\/code>.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Images et m\u00e9dias"
+  },
+  "68": {
+    "objectif": "<ul><li>Optimiser le rendu dans les lecteurs d\u2019\u00e9cran en permettant d\u2019expliciter les \u00e9tiquettes des champs de formulaire.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les informations compl\u00e9tant l'\u00e9tiquette d'un champ sont associ\u00e9es \u00e0 celui-ci dans le code-source",
+    "controle": "<div>V\u00e9rifier dans le code source que chaque information venant compl\u00e9ter une \u00e9tiquette de champ de formulaire, ou venant informer l\u2019utilisateur en cas d\u2019erreur de saisie :<\/div><div><ul><li>est associ\u00e9e au champ en \u00e9tant balis\u00e9e par un \u00e9l\u00e9ment legend inclus dans un \u00e9l\u00e9ment fieldset regroupant les champs concern\u00e9s ;<\/li><li>ou est associ\u00e9e au champ via un attribut <code> aria-describedby<\/code>.<\/li><\/ul><\/div>",
+    "solution": "<div>Associer explicitement dans le code source chaque information venant compl\u00e9ter une \u00e9tiquette de champ de formulaire, ou venant informer l\u2019utilisateur en cas d\u2019erreur de saisie :<\/div><div><ul><li>soit \u00e0 l\u2019aide d\u2019un regroupement de champ fieldset et de l\u2019\u00e9l\u00e9ment legend ;<\/li><li>soit \u00e0 l\u2019aide de l'attribut <code> aria-describedby <\/code>.<\/li><\/ul><\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "69": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de savoir \u00e0 l'avance si un champ est obligatoire. <\/li><li>Pr\u00e9venir les erreurs avant qu'elles ne surviennent.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es. <\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "L'\u00e9tiquette de chaque champ de formulaire indique si la saisie est obligatoire.",
+    "controle": "<p>Pour chaque formulaire :<\/p><p><\/p><ul><li>V\u00e9rifier que l\u2019\u00e9tiquette associ\u00e9e \u00e0 chaque champ en indique le caract\u00e8re obligatoire, si besoin en contr\u00f4lant, avec un inspecteur de code, que l\u2019information est bien pr\u00e9sente dans l\u2019\u00e9l\u00e9ment <code>label<\/code>,  dans un attribut <code>aria-label,<\/code> ou bien qu\u2019elle est reli\u00e9e au champ via un attribut <code>aria-labelledby<\/code> ou <code>aria-describedby<\/code>.<\/li><li>V\u00e9rifier que les champs dont l\u2019\u00e9tiquette ne donne aucune information sur leur caract\u00e8re obligatoire sont bien facultatifs, en validant le formulaire sans les remplir. Si un message d\u2019erreur indique qu\u2019ils doivent \u00eatre remplis ou si le formulaire ne peut \u00eatre valid\u00e9 ainsi, la bonne pratique est invalid\u00e9e.<\/li><\/ul><p><\/p>",
+    "solution": "<p>Indiquer le caract\u00e8re obligatoire de la saisie dans l'\u00e9tiquette associ\u00e9e au champ. Si l'indication est faite avec un symbole graphique (ast\u00e9risque par exemple), faire pr\u00e9c\u00e9der le formulaire d'une l\u00e9gende explicitant ce symbole.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Formulaires"
+  },
+  "71": {
+    "objectif": "<ul><li>\u00c9viter le risque d'erreur et donc \u00e9viter \u00e0 l'utilisateur de devoir remplir plusieurs fois un m\u00eame champ. <\/li><li>\u00c9viter l'incompr\u00e9hension de l'utilisateur qui pense avoir rempli correctement le champ et qui le voit signal\u00e9 en erreur.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "L'utilisateur est averti lorsqu'une saisie est sensible \u00e0 la casse.",
+    "controle": "<p>Pour chaque formulaire<\/p><ul><li>D\u00e9tecter les champs dont la saisie est sensible \u00e0 la casse en inscrivant le texte demand\u00e9 en majuscules puis en minuscules et contr\u00f4ler si, dans l'un des deux cas, la saisie est rejet\u00e9e ;<\/li><li>En cas de rejet de la saisie \u00e0 cause de sa casse, v\u00e9rifier que l'\u00e9tiquette associ\u00e9e \u00e0 chaque champ, via l'\u00e9l\u00e9ment <code>label<\/code> ou dans l'attribut <code>aria-label<\/code>, informe l'utilisateur de cette sensibilit\u00e9.<\/li><\/ul>",
+    "solution": "<p>Si la saisie attendue est sensible \u00e0 la casse, pr\u00e9ciser dans l'\u00e9tiquette associ\u00e9e au champ qu'elle doit \u00eatre r\u00e9alis\u00e9e en majuscules ou en minuscules selon le cas.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Formulaires"
+  },
+  "85": {
+    "objectif": "<ul><li>Donner de la visibilit\u00e9 \u00e0 l'utilisateur sur les actions qu'il va r\u00e9aliser (temps, ordre des \u00e9tapes, informations n\u00e9cessaires pour les accomplir, etc.). <\/li><li>\u00c9viter que l'utilisateur ne se sente pi\u00e9g\u00e9 dans un processus dont il n'avait pas pr\u00e9vu la dur\u00e9e.<\/li><\/ul>",
+    "titre": "Les processus complexes sont accompagn\u00e9s de la liste de leurs \u00e9tapes.",
+    "controle": "<p>Dans le cas de processus complexes&nbsp;: <\/p><ul><li>V\u00e9rifier, pour chaque page concern\u00e9e, que la liste des \u00e9tapes y est indiqu\u00e9e, en r\u00e8gle g\u00e9n\u00e9rale sous forme d'un chemin d'\u00e9tapes en t\u00eate de page ou de formulaire.<\/li><\/ul>",
+    "solution": "<p>Pour tout processus complexe, par exemple un formulaire de commande, afficher \u00e0 chaque \u00e9tape la liste int\u00e9grale de toutes ses \u00e9tapes.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "135": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d\u2019identifier facilement les liens au fil du texte ainsi que les blocs de navigation. <\/li><li>Am\u00e9liorer la visibilit\u00e9 et l\u2019affordance des liens.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les liens sont visuellement diff\u00e9renci\u00e9s du reste du contenu.",
+    "controle": "<p>Dans chaque page examin\u00e9e&nbsp;:<\/p><ul><li>Identifier les liens pr\u00e9sents au fil du texte ;<\/li><li>V\u00e9rifier que ces liens se diff\u00e9rencient visuellement du reste du texte au sein duquel ils se trouvent plac\u00e9s.<\/li><li>V\u00e9rifier que les liens diff\u00e9renci\u00e9s par la couleur pr\u00e9sentent un ratio de contraste minimal de 3 avec le texte environnant et qu\u2019ils sont identifiables au survol ou \u00e0 la prise de focus clavier.<\/li><\/ul><p>Cette v\u00e9rification ne s'applique pas aux blocs de navigation dont la nature est par ailleurs \u00e9vidente pour l'utilisateur (menus).<\/p>",
+    "solution": "<p>Les hyperliens peuvent \u00eatre diff\u00e9renci\u00e9s \u00e0 l'aide des propri\u00e9t\u00e9s CSS de couleur de texte, de couleur d'arri\u00e8re-plan, de soulignement, de mise en gras, de bordures, de police de caract\u00e8res, etc.<\/p>",
+    "etape": "Conception",
+    "tag": "Accessibility",
+    "theme": "Liens"
+  },
+  "96": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d\u2019identifier sans ambigu\u00eft\u00e9 un interlocuteur physique capable de r\u00e9pondre aux questions \u00e9ventuelles sur les contenus propos\u00e9s, ou d\u2019assumer les responsabilit\u00e9s li\u00e9es \u00e0 ces contenus.<\/li><li>Rassurer l'utilisateur en lui permettant d'identifier directement l'auteur (au sens large).<\/li><li>Limiter les risques de d\u00e9fiance.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "L'identit\u00e9 de l'auteur, de la soci\u00e9t\u00e9 ou de l'organisation est indiqu\u00e9e.",
+    "controle": "<p>Au sein de la page d'accueil ou au moins dans une page accessible depuis la page d'accueil (fr\u00e9quemment, la page des mentions l\u00e9gales) ou encore dans chacune des pages du site (souvent en pied de page)&nbsp;:<\/p><ul><li>V\u00e9rifier manuellement que le nom de l'auteur, de l'entit\u00e9 ou de la soci\u00e9t\u00e9 proposant le service est mentionn\u00e9 dans au moins une de ces pages.<\/li><\/ul>",
+    "solution": "<p>Indiquer, au moins sur une page et id\u00e9alement sur chaque page, le nom de l'auteur, de l'entit\u00e9 ou de la soci\u00e9t\u00e9 qui propose le service. <\/p><p>Si le nom du site est identique \u00e0 celui de l'entit\u00e9 qui le propose, ce qui est relativement fr\u00e9quent, notamment pour les entreprises, la mention de ce nom dans le logo ou la baseline suffit \u00e0 respecter la bonne pratique.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Identification et contact"
+  },
+  "94": {
+    "objectif": "<ul><li>Donner aux utilisateurs une vision imm\u00e9diate de la nature du site et des contenus propos\u00e9s.<\/li><li>\u00c9viter les recherches inutiles.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "La page d'accueil expose la nature des contenus et services propos\u00e9s.",
+    "controle": "<p>Dans la page d'accueil&nbsp;:<\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'une information, d'une phrase ou d'un contenu r\u00e9sumant les contenus et services propos\u00e9s dans le site. <\/li><\/ul><p><br><\/p>",
+    "solution": "<p>Pr\u00e9voir sur la page d'accueil une information, une phrase, un contenu r\u00e9sumant les contenus et services propos\u00e9s dans le site.<\/p>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Identification et contact"
+  },
+  "95": {
+    "objectif": "<ul><li>\u00c9viter des consultations inutiles. <\/li><li>D\u00e9livrer un avertissement aux utilisateurs.<\/li><\/ul>",
+    "titre": "Si le site est r\u00e9serv\u00e9 ou destin\u00e9 \u00e0 un public sp\u00e9cifique, ce public est mentionn\u00e9 au moins sur la page d'accueil.",
+    "controle": "<p>Pour tout site dont la consultation peut choquer ou n'\u00eatre pas adapt\u00e9e \u00e0 une certaine cat\u00e9gorie de la population (mineurs, etc.)<\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'un message d'avertissement explicite en page d'accueil, sur la nature des contenus propos\u00e9s et sur le public auquel ils sont destin\u00e9s ou r\u00e9serv\u00e9s. <\/li><\/ul>",
+    "solution": "<p>Faire figurer sur la page d'accueil un message d'avertissement explicite sur la nature des contenus et le public auquel ils sont destin\u00e9s ou r\u00e9serv\u00e9s.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "110": {
+    "objectif": "<ul><li>Faciliter la compr\u00e9hension par l'utilisateur des r\u00e8gles de qualit\u00e9, d'accessibilit\u00e9 ou autres appliqu\u00e9es sur le site. <\/li><li>Accro\u00eetre la confiance dans les informations d\u00e9livr\u00e9es sur le site.<\/li><\/ul>",
+    "titre": "Si le site d\u00e9clare respecter un ou plusieurs standards ou r\u00e9f\u00e9rentiels, un lien est propos\u00e9 vers chacun d'entre eux.",
+    "controle": "<p>Dans l'ensemble du site, et notamment dans la page d'accueil, la page des mentions l\u00e9gales, la page d'\u00e0 propos, d'aide ou d'accessibilit\u00e9 ou encore dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales de vente ou aux conditions de livraison ou de remboursement&nbsp;: <\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'un lien vers chaque standard ou r\u00e9f\u00e9rentiel que le site ou le service d\u00e9clare respecter. <\/li><\/ul>",
+    "solution": "<p>Fournir un lien vers chaque standard ou r\u00e9f\u00e9rentiel concern\u00e9.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Identification et contact"
+  },
+  "149": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur de naviguer sur le site sans avoir d'op\u00e9ration sp\u00e9cifique \u00e0 effectuer pendant la navigation.<\/li><li>\u00c9viter \u00e0 des utilisateurs d'aides techniques d'\u00eatre d\u00e9sorient\u00e9s par l'ouverture d'une nouvelle fen\u00eatre qui ne sera pas toujours ais\u00e9ment perceptible et qui perturbe notamment l'utilisation de l'historique de navigation ou qui masquera dans un lecteur d'\u00e9cran la fen\u00eatre principale.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><\/ul>",
+    "titre": "La navigation sur le site ne provoque pas l'ouverture de popups.",
+    "controle": "<p>Cette bonne pratique est \u00e0 v\u00e9rifier manuellement \u00e0 l'occasion de l'ensemble des autres tests, en prenant soin de d\u00e9sactiver toute \u00e9ventuelle fonctionnalit\u00e9 de blocage des popups dans le navigateur utilis\u00e9.<\/p><p>Dans toutes les pages internes du site&nbsp;:<\/p><ul><li>V\u00e9rifier que la navigation dans les pages internes du site ne d\u00e9clenche pas l'ouverture automatique de nouvelles fen\u00eatres.<\/li><\/ul>",
+    "solution": "<p>Ne pas utiliser d'ouverture automatique de fen\u00eatres popup (\u00e9v\u00e9nement d'ouverture de fen\u00eatre lors du chargement d'une page) sur les pages internes du site.<\/p>",
+    "etape": "Conception",
+    "tag": "Accessibility",
+    "theme": "Navigation"
+  },
+  "156": {
+    "objectif": "<ul><li>Limiter le temps d\u2019apprentissage de l\u2019interface. <\/li><li>Acc\u00e9l\u00e9rer l\u2019acc\u00e8s aux contenus. <\/li><li>R\u00e9duire le taux de rebond.<\/li><\/ul>",
+    "titre": "Les m\u00e9canismes de fermetures de fen\u00eatres sont imm\u00e9diatement disponibles.",
+    "controle": "<div>S\u2019assurer que chaque fen\u00eatre modale ou similaire peut \u00eatre ferm\u00e9e d\u00e8s son affichage.<\/div>",
+    "solution": "<div>\u00c9viter tout contenu temporaire de type publicit\u00e9 qui retarde l\u2019acc\u00e8s \u00e0 la possibilit\u00e9 de fermer une fen\u00eatre modale ou similaire.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Navigation"
+  },
+  "157": {
+    "objectif": "<ul><li>Donner aux utilisateurs des indications explicites pour fermer une fen\u00eatre ou une bo\u00eete modale. <\/li><li>Acc\u00e9l\u00e9rer l\u2019acc\u00e8s aux contenus.<\/li><\/ul>",
+    "titre": "Les nouvelles fen\u00eatres dimensionn\u00e9es et les fen\u00eatres modales sont dot\u00e9es d'un bouton de fermeture explicite.",
+    "controle": "<p>Pour chaque fen\u00eatre \u00ab&nbsp;r\u00e9elle&nbsp;\u00bb (popup dimensionn\u00e9e) ou chaque fen\u00eatre simul\u00e9e affich\u00e9e en surimpression du contenu (fen\u00eatre modale), et ce, quelle que soit la technologie utilis\u00e9e : <\/p><ul><li>V\u00e9rifier que le corps des fen\u00eatres dimensionn\u00e9es et des fen\u00eatres modales contient un bouton ou un lien permettant de les fermer ; <\/li><li>V\u00e9rifier que le libell\u00e9 du bouton ou du lien de fermeture est explicite.<\/li><\/ul><p>Les fen\u00eatres dont la fermeture ne se fait qu'implicitement, par exemple via la touche d'\u00e9chappement, invalident cette bonne pratique.<\/p>",
+    "solution": "<p>Placer, dans chaque fen\u00eatre dimensionn\u00e9e ou modale, un bouton ou un lien avec un libell\u00e9 explicite pour la fermeture et associer ce bouton \u00e0 une action de fermeture.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Navigation"
+  },
+  "151": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur de d\u00e9terminer son emplacement dans le site. <\/li><li>Simplifier le passage des moteurs de recherche. <\/li><li>Faciliter la navigation dans l'arborescence des contenus.<\/li><\/ul>",
+    "titre": "Chaque page affiche une information permettant de conna\u00eetre son emplacement dans l'arborescence du site.",
+    "controle": "<p>La v\u00e9rification n\u00e9cessite une inspection manuelle contr\u00f4lant la pr\u00e9sence et la pertinence du fil d'Ariane sur les diff\u00e9rentes pages ou, le cas \u00e9ch\u00e9ant, dans les templates sous r\u00e9serve de services tiers produisant un contenu sp\u00e9cifique. <\/p><p>Dans les pages examin\u00e9es ou les templates du site&nbsp;:<\/p><ul><li>V\u00e9rifier la pr\u00e9sence syst\u00e9matique du fil d'Ariane sur toutes les pages, \u00e0 l'exception \u00e9ventuelle de la page d'accueil du site ; <\/li><li>S'assurer que le fil d'Ariane est imm\u00e9diatement identifiable gr\u00e2ce \u00e0 une mise en forme pr\u00e9visible par l'utilisateur.<\/li><\/ul>",
+    "solution": "<p>Fournir un fil d'Ariane au d\u00e9but de la zone de contenu principal de la page.<\/p>",
+    "etape": "Conception",
+    "tag": "",
+    "theme": "Navigation"
+  },
+  "166": {
+    "objectif": "<ul><li>Fournir aux utilisateurs une solution en cas de d\u00e9sorientation, pour naviguer et se rep\u00e9rer dans le site, pour visualiser l'ensemble des contenus et la taille du site.<\/li><li>Inciter les responsables du contenu \u00e0 repr\u00e9senter graphiquement et \u00e0 rationaliser leur contenu.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es.<\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Un plan du site est disponible depuis chaque page.",
+    "controle": "<p>Cette v\u00e9rification gagne \u00e0 \u00eatre effectu\u00e9e si possible \u00e0 partir des templates, en tenant compte des \u00e9ventuels services tiers. Dans le site : <\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'une page de plan de site ; <\/li><li>Contr\u00f4ler qu'un lien vers celui-ci est disponible dans chaque page du site. <\/li><\/ul><p>L'emplacement du lien vers le plan de site est indiff\u00e9rent (en-t\u00eate, menu, pied de page) mais il est pr\u00e9f\u00e9rable qu'il soit constant sur l'ensemble du site. La pr\u00e9sence du lien \u00ab&nbsp;plan de site&nbsp;\u00bb est particuli\u00e8rement pertinente dans les pages 404 et 403.<\/p>",
+    "solution": "<p>Cr\u00e9er un plan de site qui donne acc\u00e8s, directement ou indirectement, \u00e0 la totalit\u00e9 des pages du site sous la forme d'une liste de liens textuels explicites. <\/p><p>Structurer cette liste de mani\u00e8re \u00e0 refl\u00e9ter l'organisation des rubriques du site, \u00e0 l'aide d'\u00e9l\u00e9ments de titre et d'\u00e9l\u00e9ments de liste imbriqu\u00e9s. <\/p><p>La profondeur de l'arborescence \u00e0 repr\u00e9senter varie en fonction des contenus, mais elle est en g\u00e9n\u00e9ral limit\u00e9e aux trois premiers niveaux. Les pages satellites telles que la page Contact et les mentions l\u00e9gales doivent figurer dans le plan de site.<\/p>",
+    "etape": "Conception",
+    "tag": "SEO",
+    "theme": "Navigation"
+  },
+  "153": {
+    "objectif": "<ul><li>Faciliter l'apprentissage de la navigation sur l'interface. <\/li><li>Faciliter le rep\u00e9rage de l'information.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Les blocs de navigation de m\u00eame nature sont affich\u00e9s aux m\u00eames emplacements sur toutes les pages.",
+    "controle": "<p>Au fil des autres contr\u00f4les&nbsp;:<\/p><ul><li>V\u00e9rifier que les menus de navigation sont affich\u00e9s au m\u00eame endroit \u00e0 l'\u00e9cran. <\/li><\/ul><p>La v\u00e9rification peut \u00e9galement \u00eatre men\u00e9e en amont du projet, lors de la conception des maquettes graphiques et en aval du projet lors de l'int\u00e9gration finale pour v\u00e9rifier l'absence d'une d\u00e9gradation de cette bonne pratique due, par exemple, \u00e0 la mise en place de services tiers.<\/p>",
+    "solution": "<p>Conserver le m\u00eame positionnement \u00e0 l'\u00e9cran des menus de navigation sur l'ensemble du site.<\/p>",
+    "etape": "Conception",
+    "tag": "Accessibility",
+    "theme": "Navigation"
+  },
+  "169": {
+    "objectif": "<ul><li>Permettre aux abonn\u00e9s de ne plus recevoir une newsletter.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es.<\/li><\/ul>",
+    "titre": "Un lien de d\u00e9sinscription est pr\u00e9sent dans chaque newsletter.",
+    "controle": "<p>Cette v\u00e9rification n\u00e9cessite de s'abonner \u00e0 la newsletter concern\u00e9e et d'en recevoir un exemplaire. <\/p><p>Pour chaque site proposant de s'abonner \u00e0 une newsletter : <\/p><ul><li>V\u00e9rifier la pr\u00e9sence de l'hyperlien de d\u00e9sinscription dans les newsletters ;<\/li><li>V\u00e9rifier que le processus se d\u00e9roule correctement et m\u00e8ne effectivement \u00e0 une d\u00e9sinscription. <\/li><\/ul>",
+    "solution": "<p>Faire figurer dans chaque newsletter un hyperlien permettant de se d\u00e9sinscrire.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "Newsletter"
+  },
+  "199": {
+    "objectif": "<ul><li>Permette \u00e0 l'utilisateur d'acc\u00e9der \u00e0 son compte en cas de perte du mot de passe. <\/li><li>Simplifier la gestion des comptes utilisateurs. <\/li><li>Renforcer la s\u00e9curit\u00e9 en \u00e9vitant le stockage de mots de passe non crypt\u00e9s afin de pouvoir les communiquer de nouveau \u00e0 l'utilisateur.<\/li><\/ul>",
+    "titre": "Le site propose une proc\u00e9dure de r\u00e9initialisation du mot de passe.",
+    "controle": "<p>Dans un site proposant un compte personnel prot\u00e9g\u00e9 par mot de passe&nbsp;:<\/p><ul><li>Sans \u00eatre identifi\u00e9 sur le site, v\u00e9rifier la pr\u00e9sence d'un lien du type \u00ab&nbsp;Mot de passe oubli\u00e9 ?&nbsp;\u00bb \u00e0 proximit\u00e9 du formulaire de connexion ; <\/li><li>V\u00e9rifier la pr\u00e9sence d'une proc\u00e9dure permettant la cr\u00e9ation d'un nouveau mot de passe sur la page point\u00e9e par le lien \u00ab&nbsp;Mot de passe oubli\u00e9 ?&nbsp;\u00bb ;<\/li><li>V\u00e9rifier qu'il s'agit bien d'une proc\u00e9dure de r\u00e9initialisation et non pas d'un simple renvoi du mot de passe actuel.<\/li><\/ul>",
+    "solution": "<p>Fournir un lien permettant l'envoi d'un mail \u00e0 l'adresse associ\u00e9e au compte indiquant la proc\u00e9dure de r\u00e9initialisation.<\/p><p>Placer de pr\u00e9f\u00e9rence ce lien dans le formulaire de connexion.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "216": {
+    "objectif": "<ul><li>Informer l'utilisateur sur l'erreur rencontr\u00e9e, sur la continuit\u00e9 de fonctionnement du serveur<\/li><li>Lever le doute sur un \u00e9ventuel probl\u00e8me li\u00e9 \u00e0 sa connexion.<\/li><\/ul>",
+    "titre": "Le serveur envoie une page d'erreur 404 personnalis\u00e9e.",
+    "controle": "<p>\u00c0 partir de n'importe quelle adresse url du site examin\u00e9 :<\/p><ul><li>Modifier l'adresse URL afin d'obtenir une erreur 404, par exemple, en ajoutant une s\u00e9rie caract\u00e8res al\u00e9atoires en fin d'adresse tel que : https:\/\/www.exemple.com\/dbvdjb <\/li><li>V\u00e9rifier que la page retourn\u00e9e correspond \u00e0 une page personnalis\u00e9e, coh\u00e9rente avec le reste du site, et non pas \u00e0 la page 404 envoy\u00e9e par d\u00e9faut par le serveur (Apache, IIS, Nginx) ; <\/li><li>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\u00e9faut, il faudra donc effectuer la m\u00eame v\u00e9rification via l'adresse URL d'une image ou d'un fichier CSS ou encore JS pour valider d\u00e9finitivement cette bonne pratique. <\/li><\/ul>",
+    "solution": "<p>Modifier la configuration du serveur web pour renvoyer l'utilisateur vers une page personnalis\u00e9e lorsque la ressource demand\u00e9e n'existe pas.<\/p><p>Si la configuration principale du serveur n'est pas directement accessible et si l'environnement le permet, utiliser une configuration locale par r\u00e9pertoire. Par exemple, l'environnement Apache autorise la cr\u00e9ation d'un fichier <code>.htaccess<\/code> contenant des directives relatives aux traitements des erreurs : <code>ErrorDocument 404 \/mapage404.html<\/code>.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Serveur et performances"
+  },
+  "217": {
+    "objectif": "<ul><li>Rassurer l'internaute sur le fait qu'il est toujours dans le m\u00eame site. <\/li><li>Permettre \u00e0 l'administrateur du site de mettre des \u00e9l\u00e9ments de guidage pour l'utilisateur. <\/li><li>Informer l'utilisateur sur l'erreur rencontr\u00e9e, sur la continuit\u00e9 de fonctionnement du serveur et mettre hors de cause sa connexion.<\/li><\/ul>",
+    "titre": "Le serveur envoie une page d'interdiction 403 personnalis\u00e9e.",
+    "controle": "<p>Pour chaque site audit\u00e9 :<\/p><ul><li>Obtenir une page d'erreur 403, pour cela, vous pouvez retirer la derni\u00e8re partie de l'adresse url d'une des images du site pour ne garder que le nom des r\u00e9pertoires pr\u00e9sents entre les slashs de cette adresse, par exemple : https:\/\/www.exemple\/com\/img\/. La page affich\u00e9e devrait alors \u00eatre une page d'erreur 403.<\/li><li>V\u00e9rifier que la page retourn\u00e9e ne correspond pas \u00e0 la page 403 renvoy\u00e9e par d\u00e9faut par le serveur (Apache, IIS, Nginx) mais bien \u00e0 une page d'erreur personnalis\u00e9e, dont le graphisme est coh\u00e9rent avec l'ensemble du site.<\/li><\/ul>",
+    "solution": "<p>Modifier la configuration du serveur web pour renvoyer l'utilisateur vers une page personnalis\u00e9e lorsque l'acc\u00e8s \u00e0 la ressource demand\u00e9e n'est pas autoris\u00e9.<\/p><p>Si la configuration principale du serveur n'est pas directement accessible et si l'environnement le permet, utiliser une configuration locale par r\u00e9pertoire. Par exemple, l'environnement Apache autorise la cr\u00e9ation d'un fichier <code>.htaccess<\/code> contenant des directives relatives aux traitements des erreurs : <code>ErrorDocument 403 \/mapage403.html<\/code>.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Serveur et performances"
+  },
+  "235": {
+    "objectif": "<ul><li>Permettre au navigateur d'indiquer dans son interface la pr\u00e9sence d'un fil de syndication associ\u00e9 \u00e0 la page en cours de consultation.<\/li><\/ul>",
+    "titre": "Les fils de syndication sont d\u00e9tectables par les agents utilisateurs.",
+    "controle": "<p>Dans le code source des pages du site&nbsp;:<\/p><ul><li>Identifier les diff\u00e9rents fils de syndication ;<\/li><li>Contr\u00f4ler, par exemple \u00e0 l'aide de Firebug, la pr\u00e9sence de l'\u00e9l\u00e9ment <code>link<\/code> appropri\u00e9 (<code>type=\"application\/rss+xml\"<\/code>) dans l'en-t\u00eate de la page HTML ; <\/li><li>V\u00e9rifier que l'adresse URL pr\u00e9sente dans l'\u00e9l\u00e9ment <code>link<\/code> affiche bien un contenu RSS.<\/li><\/ul>",
+    "solution": "<p>Indiquer les fils RSS dans la section <code>head<\/code> de la page, \u00e0 l'aide d'un \u00e9l\u00e9ment <code>link<\/code> du type&nbsp;:<\/p><p>&lt;link title=\"La bonne pratique du jour\" href=\"https:\/\/checklists.opquast.com\/dailybp\/feed\" type=\"application\/rss+xml\" rel=\"alternate\"&gt;.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Structure et code"
+  },
+  "111": {
+    "objectif": "<ul><li>\u00c9viter aux utilisateurs plac\u00e9s dans des contextes o\u00f9 les images ne sont pas perceptibles (navigateur texte, lecteur d\u2019\u00e9cran, navigateur avec images d\u00e9sactiv\u00e9es) d\u2019\u00eatre perturb\u00e9s par des informations sur des images qui leur sont inutiles. <\/li><li>Fournir aux robots d\u2019indexation uniquement des informations pertinentes.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Chaque image d\u00e9corative est dot\u00e9e d'une alternative textuelle appropri\u00e9e.",
+    "controle": "<div>Cette v\u00e9rification s\u2019effectue dans le code HTML g\u00e9n\u00e9r\u00e9 \u00e0 l\u2019aide d\u2019un inspecteur de code ou d\u2019une barre d\u2019outils d\u00e9di\u00e9e :<\/div><div><ul><li>Tester au pr\u00e9alable la pr\u00e9sence des attributs alt en v\u00e9rifiant la validit\u00e9 du code HTML g\u00e9n\u00e9r\u00e9, par exemple avec le validateur du W3C (le validateur HTML signale les images priv\u00e9es d\u2019alternative) : chaque image d\u00e9corative doit avoir un attribut alt (pr\u00e9sent mais vide).<\/li><li>V\u00e9rifier que chaque image img ne v\u00e9hiculant pas d\u2019information n\u00e9cessaire \u00e0 la compr\u00e9hension du contenu a bien un alt vide.<\/li><li>V\u00e9rifier les \u00e9ventuels autres objets graphiques du type object, canvas dont le contenu (entre les balises ouvrantes et fermantes) doit \u00eatre vide.<\/li><li>V\u00e9rifier les \u00e9ventuels autres \u00e9l\u00e9ments du type svg susceptibles de recevoir une alternative via un attribut ARIA.<\/li><\/ul><\/div>",
+    "solution": "<div>D\u2019une mani\u00e8re g\u00e9n\u00e9rale, si un code (un attribut HTML, par exemple) est pr\u00e9vu pour l\u2019alternative, il doit \u00eatre pr\u00e9sent, mais en restant vide. Pour les cas les plus courants :<\/div><div><ul><li>Donner \u00e0 chaque \u00e9l\u00e9ment img d\u00e9coratif un attribut alt vide (alt=\"\").<\/li><li>Donner \u00e0 chaque \u00e9l\u00e9ment area d\u00e9coratif un attribut alt vide.<\/li><li>Laisser vide le contenu de chaque \u00e9l\u00e9ment object concern\u00e9 (entre les balises &lt;object&gt; et &lt;\/object&gt;).<\/li><li>Laisser vide le contenu de chaque \u00e9l\u00e9ment canvas concern\u00e9.<\/li><li>Ne donner \u00e0 chaque \u00e9l\u00e9ment svg concern\u00e9 aucun attribut ARIA qui lui conf\u00e8re un label (aria-labelledby, aria-describedby, etc.).<\/li><\/ul><\/div>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Images et m\u00e9dias"
+  },
+  "229": {
+    "objectif": "<ul><li>\u00c9viter les erreurs de restitution du contenu ou d\u2019interaction via les scripts. <\/li><li>Limiter les risques d\u2019interpr\u00e9tation hasardeuse du Document Object Model (DOM) par des agents utilisateurs diff\u00e9rents.<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es<\/li><\/ul>",
+    "titre": "Chaque identifiant HTML n'est utilis\u00e9 qu'une seule fois par page.",
+    "controle": "<div>Soumettre la page au validateur HTML du W3C (validator.w3.org) ou un autre outil de validation de code et v\u00e9rifier que chaque valeur d\u2019attribut <code>id<\/code> est unique dans la page.<\/div>",
+    "solution": "<div>La solution la plus radicale consiste \u00e0 s\u2019assurer de la validit\u00e9 compl\u00e8te du code source des pages, \u00e0 l\u2019aide d\u2019un validateur tel que http:\/\/validator.w3.org. Cette solution conduit cependant \u00e0 tenir compte de l\u2019ensemble des erreurs de validation du code source qui n\u2019entrent pas dans le champ de cette bonne pratique. Pour s\u2019en tenir au seul champ de cette bonne pratique, on veillera \u00e0 \u00e9viter toute valeur dupliqu\u00e9e d\u2019un attribut <code>id<\/code> dans une m\u00eame page HTML.<\/div><p>En savoir plus: <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Attributs_universels\/id\"><code>id<\/code> sur MDN<\/a><\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Accessibility",
+    "theme": "Structure et code"
+  },
+  "90": {
+    "objectif": "<ul><li>Faciliter la saisie dans les formulaires.<\/li><\/ul>",
+    "titre": "Le copier coller est possible dans les champs de formulaire.",
+    "controle": "<div>V\u00e9rifier qu\u2019il est possible de copier le contenu de chaque champ y compris les champs de type <code>password<\/code> (en utilisant le menu contextuel du navigateur ou \u00e0 d\u00e9faut un m\u00e9canisme propre au formulaire).<\/div><div>V\u00e9rifier qu\u2019il est possible de coller un contenu dans chaque champ y compris dans les champs de type <code>password<\/code> (en utilisant le menu contextuel du navigateur ou \u00e0 d\u00e9faut un m\u00e9canisme propre au formulaire).<\/div>",
+    "solution": "<ul><li>Ne pas intercepter les \u00e9v\u00e9nements JavaScript <code>onpaste<\/code> ou <code>keydown<\/code> pour bloquer le coller dans un champ de formulaire.<\/li><li>Ne pas intercepter les \u00e9v\u00e9nements JavaScript <code>oncopy<\/code> ou<code> oncut<\/code> pour bloquer le copier dans un champ de formulaire.<\/li><\/ul>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "87": {
+    "objectif": "<ul><li>Faciliter l\u2019utilisation des formulaires r\u00e9partis sur plusieurs pages successives. <\/li><li>R\u00e9duire les risques d\u2019erreurs de saisie. Limiter les risques d\u2019abandon en cours de processus.<\/li><\/ul>",
+    "titre": "Chaque \u00e9tape d'un processus complexe permet de revenir \u00e0 l'\u00e9tape pr\u00e9c\u00e9dente.",
+    "controle": "<div>V\u00e9rifier manuellement la possibilit\u00e9 de revenir \u00e0 chaque \u00e9tape pr\u00e9c\u00e9dente du processus.<\/div>",
+    "solution": "<div>Fournir \u00e0 chaque \u00e9tape du formulaire un bouton de navigation permettant de retourner \u00e0 l\u2019\u00e9tape pr\u00e9c\u00e9dente.<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "Formulaires"
+  },
+  "4": {
+    "objectif": "<ul><li>\u00c9viter aux utilisateurs les risques de m\u00e9prise sur le sens d\u2019une date. <\/li><li>Faciliter la compr\u00e9hension et la r\u00e9utilisation des contenus concern\u00e9s.<\/li><\/ul>",
+    "titre": "Les dates sont pr\u00e9sent\u00e9es dans des formats explicites.",
+    "controle": "<p>Identifier les pages comportant des dates, et pour chacune des dates trouv\u00e9es :<\/p><ul><li>V\u00e9rifier que le mois n\u2019est pas indiqu\u00e9 dans un format num\u00e9rique, mais en lettre (complet ou abr\u00e9g\u00e9).<\/li><li>V\u00e9rifier que l\u2019ann\u00e9e est indiqu\u00e9e sur quatre chiffres et non deux.<\/li><\/ul><p>Les dates \u00e0 saisir par l\u2019utilisateur final dans les formulaires ne sont pas concern\u00e9es par cette bonne pratique : leur format, quel qu'il soit, est consid\u00e9r\u00e9 comme suffisamment explicite, d\u00e8s lors que la saisie s\u2019effectue via un datepicker ou bien manuellement mais avec une indication du format attendu (du type \"JJ\/MM\/AA\").<\/p>",
+    "solution": "<ul><li>S\u2019assurer que le mois est \u00e9crit en toutes lettres (\u00ab d\u00e9cembre \u00bb) ou en abr\u00e9g\u00e9 (\u00ab d\u00e9c. \u00bb), mais pas au format num\u00e9rique.<\/li><li>Indiquer les 4 chiffres de l\u2019ann\u00e9e.<\/li><\/ul><p>Cette exigence doit \u00eatre pr\u00e9vue dans les syst\u00e8mes de gestion de contenu o\u00f9 la datation est automatis\u00e9e.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Contenus"
+  },
+  "197": {
+    "objectif": "<ul><li>Permettre aux utilisateurs de choisir un mot de passe personnalis\u00e9. <\/li><li>\u00c9viter aux utilisateurs de rechercher leur mot de passe \u00e0 chaque connexion.<\/li><\/ul>",
+    "titre": "Les mots de passe peuvent \u00eatre choisis ou chang\u00e9s par l'utilisateur.",
+    "controle": "<p>Dans tout site proposant un acc\u00e8s par mot de passe&nbsp;:<\/p><ul><li>V\u00e9rifier qu'il est possible de saisir le mot de passe de son choix \u00e0 la cr\u00e9ation du compte ou, dans le cas o\u00f9 le mot de passe est automatiquement g\u00e9n\u00e9r\u00e9 par le service en ligne, contr\u00f4ler qu'il est possible de le modifier apr\u00e8s l'inscription.<\/li><\/ul>",
+    "solution": "<p>Fournir une proc\u00e9dure en ligne permettant le choix d'un mot de passe personnalis\u00e9 d\u00e8s la cr\u00e9ation du compte ou la modification ult\u00e9rieure des mots de passe automatiquement g\u00e9n\u00e9r\u00e9s.<\/p><p>Fournir un acc\u00e8s \u00e0 la modification du mot de passe depuis la gestion du compte utilisateur ou \u00e0 d\u00e9faut dans le contexte du formulaire d'identification.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "204": {
+    "objectif": "<ul><li>\u00c9viter l'affichage de listes de fichiers contenus dans un r\u00e9pertoire. <\/li><li>Am\u00e9liorer la s\u00e9curit\u00e9 du serveur. <\/li><li>Limiter les risques d'intrusion.<\/li><\/ul>",
+    "titre": "Le serveur n'envoie pas la liste des fichiers des r\u00e9pertoires n'ayant pas de page d'index.",
+    "controle": "<p>Pour chaque site audit\u00e9&nbsp;:<\/p><ul><li>Contr\u00f4ler que l'appel \u00e0 un r\u00e9pertoire sans page par d\u00e9faut \u2013 comme le r\u00e9pertoire des images, des scripts JS ou des feuilles de style \u2013 ne renvoie pas la liste du contenu de ce dossier (cette action peut en revanche mener \u00e0 une page d'erreur ou \u00e0 une redirection).<\/li><\/ul>",
+    "solution": "<p>Configurer le serveur pour qu'il ne renvoie pas la liste des fichiers pr\u00e9sents dans un r\u00e9pertoire. Pour Apache, ajouter par exemple <code>options \u2013indexes<\/code> dans le <code>.htaccess<\/code>.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "",
+    "theme": "S\u00e9curit\u00e9"
+  },
+  "223": {
+    "objectif": "<ul><li>Acc\u00e9l\u00e9rer la vitesse d'affichage des pages. <\/li><li>Am\u00e9liorer les performances. <\/li><li>Diminuer la quantit\u00e9 de donn\u00e9es \u00e0 t\u00e9l\u00e9charger.<\/li><li>Diminuer l'impact \u00e9nerg\u00e9tique li\u00e9 \u00e0 la consultation du site<\/li><\/ul>",
+    "titre": "Les scripts du site sont minifi\u00e9s.",
+    "controle": "<p>Pour l'ensemble du site&nbsp;:<\/p><ul><li>V\u00e9rifier manuellement au sein de tous les fichiers Javascript qu'aucun retour ligne, indentation ou saut de ligne n'est pr\u00e9sent.<\/li><li>Ou identifier la liste des scripts Javascript non minifi\u00e9s \u00e0 l'aide d'outils de d\u00e9veloppement (navigateurs, outils en ligne, etc.).<\/li><\/ul>",
+    "solution": "<p>Supprimer les espaces non n\u00e9cessaires ainsi que les commentaires dans les fichiers Javascript, en recourant \u00e0 des outils d\u00e9di\u00e9s.<\/p>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Ecodesign",
+    "theme": "Serveur et performances"
+  },
+  "29": {
+    "objectif": "<ul><li>Permettre \u00e0 l\u2019acheteur de commander imm\u00e9diatement.<\/li><li>Lever la barri\u00e8re de la cr\u00e9ation de compte. <\/li><li>Augmenter le taux de conversion.<\/li><li>Renforcer la confiance des utilisateurs sur l\u2019utilisation de leurs donn\u00e9es<\/li><\/ul>",
+    "titre": "L'achat d'un produit ou service est possible sans cr\u00e9ation de compte.",
+    "controle": "<div>D\u00e9marrer une commande et contr\u00f4ler si celle-ci peut \u00eatre men\u00e9e \u00e0 terme sans cr\u00e9ation de compte sur le site.<\/div>",
+    "solution": "<div>Proposer deux options lors de la commande : commande sans cr\u00e9ation de compte et commande avec cr\u00e9ation d\u2019un compte (ou avec un compte existant).&nbsp;<\/div>",
+    "etape": "D\u00e9veloppement",
+    "tag": "Privacy",
+    "theme": "E-Commerce"
+  },
+  "41": {
+    "objectif": "<ul><li>Permettre \u00e0 l'utilisateur d'identifier le montant total qu'il aura \u00e0 payer et les diff\u00e9rentes composantes de ce montant.<\/li><\/ul>",
+    "titre": "Les conditions de financement sont indiqu\u00e9es.",
+    "controle": "<p>Dans la page d'accueil ou dans les pages consacr\u00e9es aux conditions g\u00e9n\u00e9rales d'utilisation ou de vente ou toute autre page du site&nbsp;: <\/p><ul><li>V\u00e9rifier la pr\u00e9sence d'informations relatives aux conditions de financement des cr\u00e9dits propos\u00e9s aux clients.<\/li><\/ul>",
+    "solution": "<p>Indiquer dans le site les conditions de financement des cr\u00e9dits propos\u00e9s aux clients.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "55": {
+    "objectif": "<ul><li>Permettre aux utilisateurs d'identifier pr\u00e9cis\u00e9ment et avant l'achat le montant total qu'ils auront \u00e0 payer. <\/li><li>Permettre aux utilisateurs d'identifier pr\u00e9cis\u00e9ment les montants d\u00e9ductibles et les diff\u00e9rentes imputations.<\/li><\/ul>",
+    "titre": "Les prix affich\u00e9s mentionnent le d\u00e9tail des taxes et suppl\u00e9ments \u00e9ventuels ainsi que le montant hors taxes.",
+    "controle": "<p>Dans le formulaire r\u00e9capitulatif de la commande et au sein de la facture envoy\u00e9e au client, v\u00e9rifier la pr\u00e9sence du d\u00e9tail de toutes les taxes int\u00e9gr\u00e9es au co\u00fbt des produits et services propos\u00e9s.<\/p>",
+    "solution": "<p>Indiquer sur le formulaire r\u00e9capitulatif de la commande, ainsi que sur la facture envoy\u00e9e au client, le d\u00e9tail de toutes les taxes int\u00e9gr\u00e9es au co\u00fbt des produits et services propos\u00e9s.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "9": {
+    "objectif": "<ul><li>Expliquer aux utilisateurs pour quelles raisons et dans quelle mesure leurs publications peuvent \u00eatre mod\u00e9r\u00e9es. <\/li><li>Limiter le nombre de r\u00e9clamations des utilisateurs ne voyant pas leur publication appara\u00eetre.<\/li><\/ul>",
+    "titre": "Les conditions de mod\u00e9ration des espaces publics sont indiqu\u00e9es.",
+    "controle": "<p>Pour chaque espace public du site n\u00e9cessitant mod\u00e9ration (zone de commentaire, forum etc.) v\u00e9rifier la pr\u00e9sence des conditions de mod\u00e9ration ou, \u00e0 d\u00e9faut, d'un lien vers une page sp\u00e9cifique ou une page g\u00e9n\u00e9rique telle que la page des mentions l\u00e9gales, la rubrique d'aide  o\u00f9 elles sont indiqu\u00e9es.<\/p>",
+    "solution": "<p>Pour chaque espace public du site n\u00e9cessitant mod\u00e9ration  (zone de commentaire, forum etc.) : indiquer les conditions de mod\u00e9ration des espaces publics, dans le contexte de ceux-ci, ou bien dans une page sp\u00e9cifique disponible depuis-ceux-ci.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "Contenus"
+  },
+  "63": {
+    "objectif": "<ul><li>Donner un acc\u00e8s imm\u00e9diat \u00e0 l'utilisateur pour lui permettre de comprendre de quoi il s'agit. <\/li><li>Permettre \u00e0 l'utilisateur de v\u00e9rifier par lui-m\u00eame l'information. <\/li><li>Accro\u00eetre le degr\u00e9 de confiance ou de cr\u00e9dibilit\u00e9.<\/li><\/ul>",
+    "titre": "Les mentions d'appartenance \u00e0 un ordre ou groupe professionnel, d'un label ou d'une r\u00e9compense sont accompagn\u00e9es d'un lien vers la source.",
+    "controle": "<p>Dans toutes les pages o\u00f9 il est fait r\u00e9f\u00e9rence \u00e0 l'une de ces mentions, v\u00e9rifier la pr\u00e9sence, pour chaque mention concern\u00e9e, d'un lien explicite vers la source de r\u00e9f\u00e9rence du standard concern\u00e9. <\/p>",
+    "solution": "<p>Fournir pour chaque mention concern\u00e9e un lien explicite vers la source de r\u00e9f\u00e9rence.<\/p>",
+    "etape": "Editorial",
+    "tag": "",
+    "theme": "E-Commerce"
+  },
+  "115": {
+    "objectif": "<ul><li>Fournir un acc\u00e8s \u00e0 l'information pour les utilisateurs dont le navigateur ou la plateforme ne supporte pas l'inclusion d'objets ou les technologies utilis\u00e9es dans les objets inclus. <\/li><li>Faciliter l'exploitation de ces contenus par les robots (r\u00e9f\u00e9rencement en particulier).<\/li><li>Am\u00e9liorer l\u2019accessibilit\u00e9 des contenus aux personnes handicap\u00e9es. <\/li><li>Am\u00e9liorer la prise en compte des contenus par les moteurs de recherche et outils d\u2019indexation<\/li><\/ul>",
+    "titre": "Les objets inclus sont dot\u00e9s d'une alternative textuelle appropri\u00e9e.",
+    "controle": "<p>Cette v\u00e9rification n\u00e9cessite la d\u00e9tection des \u00e9l\u00e9ments <code>object<\/code> et <code>embed<\/code>, en tenant compte de leur \u00e9ventuelle g\u00e9n\u00e9ration via Javascript. Pour chaque page contenant un de ces \u00e9l\u00e9ments : <\/p><ul><li>D\u00e9sactiver le support des technologies tierces dans le navigateur.<\/li><li>S'assurer que l'information alternative est pr\u00e9sente et affich\u00e9e, ou qu'elle est accessible gr\u00e2ce \u00e0 un lien pr\u00e9sent dans le contexte imm\u00e9diat de chaque objet.<\/li><\/ul>",
+    "solution": "<p>Indiquer l'alternative des objets inclus via l'une des solutions suivantes :<\/p><ul><li>Le contenu de l'\u00e9l\u00e9ment HTML <code>object<\/code> ;<\/li><li>Le contenu de l'\u00e9l\u00e9ment HTML <code>noembed<\/code> ;<\/li><li>Un contenu pr\u00e9sent imm\u00e9diatement avant ou apr\u00e8s l'objet ;<\/li><li>Un lien vers une page fournissant le contenu alternatif, plac\u00e9 imm\u00e9diatement avant ou apr\u00e8s l'objet.<\/li><\/ul>",
+    "etape": "Editorial",
+    "tag": "SEO",
+    "theme": "Images et m\u00e9dias"
+  }
+}
\ No newline at end of file
diff --git a/opquast_administrations.php b/opquast_administrations.php
index f1c97a3..f4acfdf 100644
--- a/opquast_administrations.php
+++ b/opquast_administrations.php
@@ -33,11 +33,30 @@ function opquast_upgrade($nom_meta_base_version, $version_cible) {
 				'spip_opquast_criteres',
 				'spip_opquast_criteres_liens',
 				'spip_opquast_tags',
+				'spip_opquast_themes',
+				'spip_opquast_etapes',
 			),
 		),
 		array('populate_opquast_criteres'),
 	);
 
+	$maj['1.1.0'] = array(
+		array(
+			'maj_tables',
+			array(
+				'spip_opquast_criteres',
+				'spip_opquast_criteres_liens',
+				'spip_opquast_tags',
+				'spip_opquast_themes',
+				'spip_opquast_etapes',
+			),
+		),
+	);
+
+	$maj['2.0.0'] = array(
+		array('populate_opquast_criteres_v4'),
+	);
+
 	include_spip('base/upgrade');
 	maj_plugin($nom_meta_base_version, $version_cible, $maj);
 }
@@ -54,6 +73,8 @@ function opquast_vider_tables($nom_meta_base_version) {
 	sql_drop_table('spip_opquast_criteres');
 	sql_drop_table('spip_opquast_criteres_liens');
 	sql_drop_table('spip_opquast_tags');
+	sql_drop_table('spip_opquast_themes');
+	sql_drop_table('spip_opquast_etapes');
 
 	effacer_meta($nom_meta_base_version);
 }
@@ -71,22 +92,81 @@ function populate_opquast_criteres() {
 		$content = json_decode($content, true);
 	}
 	foreach ($data as $row) {
-		$texte = (isset($content[ $row['id'] ]) ? $content[ $row['id'] ] : '');
-		$texte = str_replace('<ul>', '<ul class="spip">', $texte);
+		$texte              = (isset($content[$row['id']]) ? $content[$row['id']] : '');
+		$texte              = str_replace('<ul>', '<ul class="spip">', $texte);
+		$critere            = array(
+			'titre'  => $row['title'],
+			'lien'   => $row['link'],
+			'texte'  => $texte,
+			'statut' => 'non_verifie',
+		);
+		$id_opquast_critere = sql_insertq('spip_opquast_criteres', $critere);
+
+		$tags = explode(',', $row['tags']);
+		foreach ($tags as $tag) {
+			if (!$id_opquast_tag = sql_getfetsel('id_opquast_tag', 'spip_opquast_tags', 'titre = ' . sql_quote($tag))) {
+				$id_opquast_tag = sql_insertq('spip_opquast_tags', array('titre' => $tag));
+			}
+			sql_insertq('spip_opquast_criteres_liens', array('id_opquast_critere' => $id_opquast_critere, 'objet' => 'opquast_tag', 'id_objet' => $id_opquast_tag));
+		}
+	}
+}
+
+function populate_opquast_criteres_v4() {
+	include_spip('action/editer_objet');
+	include_spip('action/editer_liens');
+
+	sql_update('spip_opquast_criteres', array('numero' => 'id_opquast_critere', 'version' => sql_quote('v3')));
+
+	// utiliser la nouvelle liste par défaut
+	ecrire_config('opquast/version','v4');
+	
+	if ($data = file_get_contents(__DIR__ . '/data/data-fr-v4.json')) {
+		$data = json_decode($data, true);
+	}
+	foreach ($data as $key => $row) {
+		$texte   = '<p><strong>' . _T('opquast_critere:champ_objectif_label') . '</strong></p>' . $row['objectif'];
+		$texte   .= '<p><strong>' . _T('opquast_critere:champ_solution_label') . '</strong></p>' . $row['solution'];
+		$texte   .= '<p><strong>' . _T('opquast_critere:champ_controle_label') . '</strong></p>' . $row['controle'];
+		$texte   = str_replace('<ul>', '<ul class="spip">', $texte);
 		$critere = array(
-			'titre' => $row['title'],
-			'lien'  => $row['link'],
-			'texte' => $texte,
-			'statut' => 'non_verifie'
+			'titre'   => $row['titre'],
+			'texte'   => $texte,
+			'numero'  => $key,
+			'version' => 'v4',
+			'statut'  => 'non_verifie',
 		);
-		$id_opquast_critere = sql_insertq('spip_opquast_criteres',$critere);
-		
-		$tags = explode(',',$row['tags']);
+
+		$id_opquast_critere = objet_inserer('opquast_criteres', null, $critere);
+
+		$tags = explode(',', $row['tag']);
 		foreach ($tags as $tag) {
-			if(!$id_opquast_tag = sql_getfetsel('id_opquast_tag','spip_opquast_tags','titre = '.sql_quote($tag))) {
-				$id_opquast_tag = sql_insertq('spip_opquast_tags', array('titre'=> $tag));
+			if($tag) {
+				if (!$id_opquast_tag = sql_getfetsel('id_opquast_tag', 'spip_opquast_tags', 'titre = ' . sql_quote($tag))) {
+					$id_opquast_tag = sql_insertq('spip_opquast_tags', array('titre' => $tag));
+				}
+				objet_associer(array('opquast_critere' => $id_opquast_critere), array('opquast_tag' => $id_opquast_tag));
+			}
+		}
+
+		$etapes = explode(',', $row['etape']);
+		foreach ($etapes as $etape) {
+			if($etape) {
+				if (!$id_opquast_etape = sql_getfetsel('id_opquast_etape', 'spip_opquast_etapes', 'titre = ' . sql_quote($etape))) {
+					$id_opquast_etape = sql_insertq('spip_opquast_etapes', array('titre' => $etape));
+				}
+				objet_associer(array('opquast_critere' => $id_opquast_critere), array('opquast_etape' => $id_opquast_etape));
+			}
+		}
+
+		$themes = explode(',', $row['theme']);
+		foreach ($themes as $theme) {
+			if($theme) {
+				if (!$id_opquast_theme = sql_getfetsel('id_opquast_theme', 'spip_opquast_themes', 'titre = ' . sql_quote($theme))) {
+					$id_opquast_theme = sql_insertq('spip_opquast_themes', array('titre' => $theme));
+				}
+				objet_associer(array('opquast_critere' => $id_opquast_critere), array('opquast_theme' => $id_opquast_theme));
 			}
-			sql_insertq('spip_opquast_criteres_liens', array('id_opquast_critere' => $id_opquast_critere,'objet' => 'opquast_tag', 'id_objet'=> $id_opquast_tag));
 		}
 	}
 }
\ No newline at end of file
diff --git a/paquet.xml b/paquet.xml
index ecf2a0c..82451be 100644
--- a/paquet.xml
+++ b/paquet.xml
@@ -1,12 +1,12 @@
 <paquet
 	prefix="opquast"
 	categorie="outil"
-	version="1.1.2"
+	version="2.0.0"
 	etat="test"
 	compatibilite="[3.2.0;3.3.*]"
 	logo="prive/themes/spip/images/opquast-64.png"
 	documentation=""
-	schema="1.0.0"
+	schema="2.0.0"
 >
 
 	<nom>Check-list Opquast</nom>