Browse Source

Traduction FR

master v2.0.0
nicod_ 10 months ago
parent
commit
a12dee7ba7
  1. 136
      data/data-fr-v4.json

136
data/data-fr-v4.json

@ -14,7 +14,7 @@
"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><p>Utiliser :<\/p><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",
"tag": "Accessibilité",
"theme": "Pr\u00e9sentation"
},
"182": {
@ -68,7 +68,7 @@
"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",
"tag": "Accessibilité",
"theme": "Liens"
},
"42": {
@ -113,7 +113,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"75": {
@ -122,7 +122,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"73": {
@ -167,7 +167,7 @@
"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",
"tag": "Accessibilité",
"theme": "Navigation"
},
"163": {
@ -194,7 +194,7 @@
"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",
"tag": "Accessibilité",
"theme": "Pr\u00e9sentation"
},
"206": {
@ -302,7 +302,7 @@
"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",
"tag": "Accessibilité",
"theme": "Structure et code"
},
"101": {
@ -329,7 +329,7 @@
"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",
"tag": "Accessibilité",
"theme": "Structure et code"
},
"51": {
@ -392,7 +392,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"214": {
@ -419,7 +419,7 @@
"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",
"tag": "Accessibilité",
"theme": "Liens"
},
"222": {
@ -527,7 +527,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"102": {
@ -554,7 +554,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"117": {
@ -563,7 +563,7 @@
"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",
"tag": "Accessibilité",
"theme": "Images et m\u00e9dias"
},
"57": {
@ -608,7 +608,7 @@
"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",
"tag": "Accessibilité",
"theme": "Pr\u00e9sentation"
},
"20": {
@ -617,7 +617,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"45": {
@ -698,7 +698,7 @@
"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",
"tag": "Accessibilité",
"theme": "Structure et code"
},
"39": {
@ -743,7 +743,7 @@
"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",
"tag": "Vie privée",
"theme": "E-Commerce"
},
"132": {
@ -761,7 +761,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"1": {
@ -779,7 +779,7 @@
"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",
"tag": "Vie privée",
"theme": "E-Commerce"
},
"131": {
@ -788,7 +788,7 @@
"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",
"tag": "Accessibilité",
"theme": "Liens"
},
"221": {
@ -806,7 +806,7 @@
"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",
"tag": "Accessibilité",
"theme": "Liens"
},
"195": {
@ -824,7 +824,7 @@
"controle": "<p>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.<\/p>",
"solution": "<p>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.<\/p>",
"etape": "D\u00e9veloppement",
"tag": "Privacy",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"22": {
@ -833,7 +833,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"224": {
@ -878,7 +878,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"23": {
@ -887,7 +887,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"145": {
@ -914,7 +914,7 @@
"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",
"tag": "Accessibilité",
"theme": "Pr\u00e9sentation"
},
"64": {
@ -959,7 +959,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"209": {
@ -986,7 +986,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"152": {
@ -995,7 +995,7 @@
"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",
"tag": "Accessibilité",
"theme": "Navigation"
},
"61": {
@ -1022,7 +1022,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"203": {
@ -1058,7 +1058,7 @@
"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",
"tag": "Vie privée",
"theme": "E-Commerce"
},
"119": {
@ -1067,7 +1067,7 @@
"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",
"tag": "Accessibilité",
"theme": "Images et m\u00e9dias"
},
"138": {
@ -1094,7 +1094,7 @@
"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",
"tag": "Accessibilité",
"theme": "Structure et code"
},
"231": {
@ -1121,7 +1121,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"18": {
@ -1130,7 +1130,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"194": {
@ -1148,7 +1148,7 @@
"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",
"tag": "Accessibilité",
"theme": "Navigation"
},
"34": {
@ -1184,7 +1184,7 @@
"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",
"tag": "Accessibilité",
"theme": "Navigation"
},
"121": {
@ -1193,7 +1193,7 @@
"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",
"tag": "Accessibilité",
"theme": "Images et m\u00e9dias"
},
"104": {
@ -1229,7 +1229,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"165": {
@ -1247,7 +1247,7 @@
"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",
"tag": "Accessibilité",
"theme": "Pr\u00e9sentation"
},
"196": {
@ -1283,7 +1283,7 @@
"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",
"tag": "Accessibilité",
"theme": "Navigation"
},
"35": {
@ -1310,7 +1310,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"27": {
@ -1328,7 +1328,7 @@
"controle": "<p>V\u00e9rifier dans le code CSS l\u2019absence de r\u00e8gles text-align : justify.<\/p><p>V\u00e9rifier dans le code HTML l\u2019absence d\u2019attributs HTML align=\"justify\".<\/p>",
"solution": "<p>Ne pas utiliser la propri\u00e9t\u00e9 CSS text-align avec la valeur justify, ou tout autre \u00e9quivalent.<\/p><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",
"tag": "Accessibilité",
"theme": "Pr\u00e9sentation"
},
"140": {
@ -1409,7 +1409,7 @@
"controle": "<p>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.<\/p>",
"solution": "<p>Avant activation du compte cr\u00e9\u00e9 en ligne, envoyer une demande de confirmation automatique \u00e0 l\u2019adresse e-mail correspondant \u00e0 celui-ci.<\/p>",
"etape": "D\u00e9veloppement",
"tag": "Privacy",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"234": {
@ -1436,7 +1436,7 @@
"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",
"tag": "Vie privée",
"theme": "Identification et contact"
},
"134": {
@ -1472,7 +1472,7 @@
"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",
"tag": "Accessibilité",
"theme": "Images et m\u00e9dias"
},
"122": {
@ -1508,7 +1508,7 @@
"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",
"tag": "Accessibilité",
"theme": "Contenus"
},
"49": {
@ -1526,7 +1526,7 @@
"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><label for=\"mail\"><\/code>Adresse email (du type mail@exemple.com)<code><\/label><\/code><\/p>",
"etape": "D\u00e9veloppement",
"tag": "Accessibility",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"50": {
@ -1544,7 +1544,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"14": {
@ -1553,7 +1553,7 @@
"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",
"tag": "Vie privée",
"theme": "Donn\u00e9es personnelles"
},
"81": {
@ -1661,7 +1661,7 @@
"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",
"tag": "Accessibilité",
"theme": "Liens"
},
"210": {
@ -1706,7 +1706,7 @@
"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",
"tag": "Vie privée",
"theme": "Newsletter"
},
"171": {
@ -1715,7 +1715,7 @@
"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",
"tag": "Vie privée",
"theme": "Newsletter"
},
"198": {
@ -1778,7 +1778,7 @@
"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",
"tag": "Accessibilité",
"theme": "Internationalisation"
},
"161": {
@ -1787,7 +1787,7 @@
"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",
"tag": "Accessibilité",
"theme": "Navigation"
},
"173": {
@ -1823,7 +1823,7 @@
"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",
"tag": "Accessibilité",
"theme": "Structure et code"
},
"91": {
@ -1832,7 +1832,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"141": {
@ -1841,7 +1841,7 @@
"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",
"tag": "Accessibilité",
"theme": "Liens"
},
"120": {
@ -1850,7 +1850,7 @@
"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",
"tag": "Accessibilité",
"theme": "Images et m\u00e9dias"
},
"68": {
@ -1859,7 +1859,7 @@
"controle": "<p>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 :<\/p><p><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><\/p>",
"solution": "<p>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 :<\/p><p><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><\/p>",
"etape": "D\u00e9veloppement",
"tag": "Accessibility",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"69": {
@ -1868,7 +1868,7 @@
"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",
"tag": "Vie privée",
"theme": "Formulaires"
},
"71": {
@ -1877,7 +1877,7 @@
"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",
"tag": "Accessibilité",
"theme": "Formulaires"
},
"85": {
@ -1895,7 +1895,7 @@
"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",
"tag": "Accessibilité",
"theme": "Liens"
},
"96": {
@ -1940,7 +1940,7 @@
"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",
"tag": "Accessibilité",
"theme": "Navigation"
},
"156": {
@ -1985,7 +1985,7 @@
"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",
"tag": "Accessibilité",
"theme": "Navigation"
},
"169": {
@ -1994,7 +1994,7 @@
"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",
"tag": "Vie privée",
"theme": "Newsletter"
},
"199": {
@ -2048,7 +2048,7 @@
"controle": "<p>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.<\/p>",
"solution": "<p>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.<\/p><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",
"tag": "Accessibilité",
"theme": "Structure et code"
},
"90": {
@ -2111,7 +2111,7 @@
"controle": "<p>D\u00e9marrer une commande et contr\u00f4ler si celle-ci peut \u00eatre men\u00e9e \u00e0 terme sans cr\u00e9ation de compte sur le site.<\/p>",
"solution": "<p>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;<\/p>",
"etape": "D\u00e9veloppement",
"tag": "Privacy",
"tag": "Vie privée",
"theme": "E-Commerce"
},
"41": {

Loading…
Cancel
Save