-
Notifications
You must be signed in to change notification settings - Fork 1
/
Calculateur RGAA.html
18 lines (18 loc) · 331 KB
/
Calculateur RGAA.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html><html lang="fr"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Calculateur RGAA 3</title><script>var RGAA={chapters:[{title:"1. Images",rules:[{id:"1.1",level:"[A]",text:"Chaque image a-t-elle une alternative textuelle ?",description:'\n \n\n\n <ul><li> Test 1.1.1 : Chaque image (balise <code lang="en" xml:lang="en">img</code>) a-t-elle un attribut <code lang="en" xml:lang="en">alt</code> ?</li>\n<li> Test 1.1.2 : Chaque <a href="#zone-dune-image-ractive">zone</a> (balise <code lang="en" xml:lang="en">area</code>) d'une <a href="#image-ractive">image réactive</a> a-t-elle un attribut <code lang="en" xml:lang="en">alt</code> ?</li>\n<li> Test 1.1.3 : Chaque bouton de formulaire (balise <code lang="en" xml:lang="en">input</code> avec l'attribut <code lang="en" xml:lang="en">type="image"</code>) a-t-il un attribut <code lang="en" xml:lang="en">alt</code> ?</li>\n<li> Test 1.1.4 : Chaque <a href="#zone-dune-image-ractive">zone</a> (balise <code lang="en" xml:lang="en">area</code>) d'une <a href="#image-ractive">image réactive</a> coté serveur est-t-elle doublée d'un lien dans la page ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H36.html" title="H36, nouvelle fenêtre" target="_blank">H36</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H37.html" title="H37, nouvelle fenêtre" target="_blank">H37</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H53.html" title="H53, nouvelle fenêtre" target="_blank">H53</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H24.html" title="H24, nouvelle fenêtre" target="_blank">H24</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H65.html" title="F65, nouvelle fenêtre" target="_blank">F65</a></p>\n\n\n'},{id:"1.2",level:"[A]",text:"Pour chaque image de décoration ayant une alternative textuelle, cette alternative est-elle vide ?",description:'\n \n\n\n <ul><li> Test 1.2.1 : Chaque <a href="#image-de-dcoration">image de décoration</a> sans <a href="#lgende-dimage">légende</a> (balise <code lang="en" xml:lang="en">img</code>) et ayant un attribut <code lang="en" xml:lang="en">alt</code> vérifie-t-elle ces conditions :\n\n<ul><li> le contenu de l'attribut alt est vide (<code lang="en" xml:lang="en">alt=""</code>)</li>\n<li> l'image de décoration ne possède pas d'attribut <code lang="en" xml:lang="en">title</code></li>\n</ul></li>\n<li> Test 1.2.2 : Chaque <a href="#zone-non-cliquable">zone non cliquable</a> (balise <code lang="en" xml:lang="en">area</code> sans attribut <code lang="en" xml:lang="en">href</code>), non porteuse d'information et ayant un attribut <code lang="en" xml:lang="en">alt</code> vérifie-t-elle ces conditions ?\n\n<ul><li> le contenu de l'attribut <code lang="en" xml:lang="en">alt</code> est vide (<code lang="en" xml:lang="en">alt=""</code>)</li>\n<li> la zone cliquable ne possède pas d'attribut <code lang="en" xml:lang="en">title</code></li>\n</ul></li>\n<li> Test 1.2.3 : Pour chaque image objet sans <a href="#lgende-dimage">légende</a> (balise <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) non porteuse d'information, l'alternative textuelle entre <code lang="en" xml:lang="en"><object></code> et <code lang="en" xml:lang="en"></object></code> est-elle vide ?</li>\n<li> Test 1.2.4 : Chaque image vectorielle de décoration (balise <code lang="en" xml:lang="en">svg</code>) non porteuse d'information et possédant une alternative vérifie-t-elle ces conditions ?\n\n<ul><li> La balise <code lang="en" xml:lang="en">svg</code> possède un <code lang="en" xml:lang="en">role="img"</code></li>\n<li> La balise <code lang="en" xml:lang="en">svg</code> ou l'un de ses enfants est dépourvue de role, propriété ou état ARIA visant à labelliser l'image vectorielle (<code lang="en" xml:lang="en">aria-label</code>, <code lang="en" xml:lang="en">aria-describedby</code>, <code lang="en" xml:lang="en">aria-labelledby</code> par exemple).</li>\n<li> Les balises <code lang="en" xml:lang="en">title</code> et <code lang="en" xml:lang="en">desc</code> sont absentes ou vides</li>\n<li> La balise <code lang="en" xml:lang="en">svg</code> ou l'un de ses enfants est dépourvue d'attribut <code lang="en" xml:lang="en">title</code></li>\n</ul></li>\n<li> Test 1.2.5 : Pour chaque image bitmap de décoration (balise <code lang="en" xml:lang="en">canvas</code>), le contenu entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code> doit être dépourvu de contenus textuels, cette règle est-elle respectée ?</li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-12-a">Consulter la note technique au sujet du role "présentation"</a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H67.html" title="H67, nouvelle fenêtre" target="_blank">H67</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G196.html" title="G196, nouvelle fenêtre" target="_blank">G196</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C9.html" title="C9, nouvelle fenêtre" target="_blank">C9</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F39.html" title="F39, nouvelle fenêtre" target="_blank">F39</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F38.html" title="F38, nouvelle fenêtre" target="_blank">F38</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA4.html" title="ARIA4, nouvelle fenêtre" target="_blank">ARIA4</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA10.html" title="ARIA10, nouvelle fenêtre" target="_blank">ARIA10</a></p>\n\n\n'},{id:"1.3",level:"[A]",text:"Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 1.3.1 : Chaque <a href="#image-porteuse-dinformation">image porteuse d'information</a> (balise <code lang="en" xml:lang="en">img</code>) ayant un attribut <code lang="en" xml:lang="en">alt</code> vérifie-t-elle ces conditions (hors <a href="#critre-13">cas particuliers</a>) ?\n\n<ul><li> Le contenu de l'attribut <code lang="en" xml:lang="en">alt</code> est pertinent</li>\n<li> S'il est présent, le contenu de l'attribut <code lang="en" xml:lang="en">title</code> est identique au contenu de l'attribut <code lang="en" xml:lang="en">alt</code></li>\n</ul></li>\n<li> Test 1.3.2 : Chaque <a href="#zone-dune-image-ractive">zone</a> (balise area) d'une <a href="#image-ractive">image réactive</a>, porteuse d'information et ayant un attribut <code lang="en" xml:lang="en">alt</code>, vérifie-t-elle ces conditions (hors <a href="#critre-13">cas particuliers</a>) ?\n\n<ul><li> Le contenu de l'attribut <code lang="en" xml:lang="en">alt</code> est pertinent</li>\n<li> S'il est présent, le contenu de l'attribut <code lang="en" xml:lang="en">title</code> est identique au contenu de l'attribut <code lang="en" xml:lang="en">alt</code></li>\n</ul></li>\n<li> Test 1.3.3 : Pour chaque bouton associé à une image (balise <code lang="en" xml:lang="en">input</code> avec l'attribut <code lang="en" xml:lang="en">type="image"</code>) ayant un attribut <code lang="en" xml:lang="en">alt</code>, le contenu de cet attribut est-il pertinent (hors <a href="#critre-13">cas particuliers</a>) ?</li>\n<li> Test 1.3.4 : Chaque image objet (balise <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) porteuse d'information vérifie-t-elle une de ces conditions(hors <a href="#critre-13">cas particuliers</a>) ?\n\n<ul><li> L'image objet est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente.</li>\n<li> Un mécanisme permet à l'utilisateur de remplacer l'image objet par un texte alternatif pertinent</li>\n<li> Un mécanisme permet à l'utilisateur de remplacer l'image objet par une image possédant une alternative pertinente.</li>\n</ul></li>\n<li> Test 1.3.5 : Chaque image embarquée (balise <code lang="en" xml:lang="en">embed</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) porteuse d'information vérifie-t-elle une de ces conditions (hors <a href="#critre-13">cas particuliers</a>) ?\n\n<ul><li> L'image embarquée est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente.</li>\n<li> Un mécanisme permet à l'utilisateur de remplacer l'image embarquée par un texte alternatif pertinent</li>\n<li> Un mécanisme permet à l'utilisateur de remplacer l'image embarquée par une image possédant une alternative pertinente.</li>\n</ul></li>\n<li> Test 1.3.6 : Chaque image vectorielle porteuse d'information (balise <code lang="en" xml:lang="en">svg</code>) et possédant une alternative vérifie-t-elle une de ces conditions (hors <a href="#critre-13">cas particuliers</a>) ?\n\n<ul><li> La balise <code lang="en" xml:lang="en">svg</code> possède un <code lang="en" xml:lang="en">role="img"</code></li>\n<li> La balise <code lang="en" xml:lang="en">svg</code> possède une propriété <code lang="en" xml:lang="en">aria-label</code> dont le contenu est pertinent et identique à l'attribut <code lang="en" xml:lang="en">title</code> s'il est présent</li>\n<li> La balise <code lang="en" xml:lang="en">svg</code> possède une balise <code lang="en" xml:lang="en">desc</code> dont le contenu est pertinent et identique à l'attribut <code lang="en" xml:lang="en">title</code> de la balise <code lang="en" xml:lang="en">svg</code> s'il est présent</li>\n<li> Un lien adjacent permet d'accéder à une alternative dont le contenu est pertinent et identique à l'attribut <code lang="en" xml:lang="en">title</code> de la balise <code lang="en" xml:lang="en">svg</code> s'il est présent</li>\n</ul></li>\n<li> Test 1.3.7 : Pour chaque image vectorielle porteuse d'information (balise <code lang="en" xml:lang="en">svg</code>) et possédant une alternative, cette alternative est-elle <a href="#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>\n<li> Test 1.3.8 : Pour chaque image bitmap porteuse d'information (balise <code lang="en" xml:lang="en">canvas</code>) et possédant une alternative (contenu entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code>), cette alternative est-elle <a href="#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>\n<li> Test 1.3.9 : Pour chaque image bitmap porteuse d'information (balise <code lang="en" xml:lang="en">canvas</code>) et possédant une alternative (contenu entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code>), cette alternative est-elle pertinente ?</li>\n<li> Test 1.3.10 : Pour chaque image porteuse d'information et ayant une alternative textuelle, l'alternative textuelle est-elle <a href="#alternative-courte-et-concise">courte et concise</a> (hors <a href="#critre-13">cas particuliers</a>) ?</li>\n</ul><p><strong>Note technique :</strong><a href="#critre-13-a">Consulter la note technique au sujet de l'attribut title et des des images vectorielles</a></p>\n\n<p><strong>Note technique :</strong> <a href="#critre-11-a">Consulter la note technique au sujet des images vectorielles</a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G94.html" title="G94, nouvelle fenêtre" target="_blank">G94</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G95.html" title="G95, nouvelle fenêtre" target="_blank">G95</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F30.html" title="F30, nouvelle fenêtre" target="_blank">F30</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F71.html" title="F71, nouvelle fenêtre" target="_blank">F71</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G196.html" title="G196, nouvelle fenêtre" target="_blank">G196</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA4.html" title="ARIA4, nouvelle fenêtre" target="_blank">ARIA4</a></p>\n\n\n'},{id:"1.4",level:"[A]",text:"Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d'identifier la nature et la fonction de l'image ?",description:'\n \n\n\n <ul><li> Test 1.4.1 : Chaque image (balise <code lang="en" xml:lang="en">img</code>) utilisée comme <a href="#captcha">CAPTCHA</a> ou comme <a href="#imagetest">image-test</a>, ayant un attribut <code lang="en" xml:lang="en">alt</code>, vérifie-t-elle ces conditions ?\n\n<ul><li> le contenu de l'attribut <code lang="en" xml:lang="en">alt</code> permet d'identifier la nature et la fonction de l'image</li>\n<li> s'il est présent, le contenu de l'attribut <code lang="en" xml:lang="en">title</code> est identique au contenu de l'attribut <code lang="en" xml:lang="en">alt</code></li>\n</ul></li>\n<li> Test 1.4.2 : Chaque <a href="#zone-dune-image-ractive">zone</a> (balise <code lang="en" xml:lang="en">area</code>) d'une <a href="#image-ractive">image réactive</a>, utilisée comme <a href="#captcha">CAPTCHA</a> ou comme <a href="#imagetest">image-test</a>, et ayant un attribut <code lang="en" xml:lang="en">alt</code> vérifie-t-elle ces conditions ?\n\n<ul><li> le contenu de l'attribut <code lang="en" xml:lang="en">alt</code> permet d'identifier la nature et la fonction de la zone</li>\n<li> s'il est présent, le contenu de l'attribut <code lang="en" xml:lang="en">title</code> est identique au contenu de l'attribut <code lang="en" xml:lang="en">alt</code></li>\n</ul></li>\n<li> Test 1.4.3 : Chaque bouton associé à une image (balise <code lang="en" xml:lang="en">input</code> avec l'attribut <code lang="en" xml:lang="en">type="image"</code>) utilisée comme <a href="#captcha">CAPTCHA</a> ou comme <a href="#imagetest">image-test</a>, ayant un attribut <code lang="en" xml:lang="en">alt</code> vérifie-t-il ces conditions ?\n\n<ul><li> le contenu de l'attribut <code lang="en" xml:lang="en">alt</code> permet d'identifier la nature et la fonction du bouton</li>\n<li> s'il est présent, le contenu de l'attribut <code lang="en" xml:lang="en">title</code> est identique au contenu de l'attribut <code lang="en" xml:lang="en">alt</code></li>\n</ul></li>\n<li> Test 1.4.4 : Pour chaque <a href="#image-objet">image objet</a> (balise <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) utilisée comme <a href="#captcha">CAPTCHA</a> ou comme <a href="#imagetest">image-test</a>, et ayant une <a href="#alternative-textuelle-image">alternative textuelle</a>, l'<a href="#alternative-textuelle-image">alternative textuelle</a> permet-elle d'identifier la nature et la fonction de l'image ?</li>\n<li> Test 1.4.5 : Pour chaque image embarquée (balise <code lang="en" xml:lang="en">embed</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) utilisée comme <a href="#captcha">CAPTCHA</a> ou comme <a href="#imagetest">image-test</a>, et ayant une <a href="#alternative-textuelle-image">alternative textuelle</a>, l'<a href="#alternative-textuelle-image">alternative textuelle</a> permet-elle d'identifier la nature et la fonction de l'image ?</li>\n<li> Test 1.4.6 : Chaque image vectorielle (balise <code lang="en" xml:lang="en">svg</code>) utilisée comme <a href="#captcha">CAPTCHA</a> ou comme <a href="#imagetest">image-test</a> et ayant une <a href="#alternative-textuelle-image">alternative textuelle</a> via la propriété <code lang="en" xml:lang="en">aria-label</code> ou la balise <code lang="en" xml:lang="en">desc</code> vérifie-t-elle ces conditions ?\n\n<ul><li> l'alternative textuelle implémentée via la propriété <code lang="en" xml:lang="en">aria-label</code> permet d'identifier la nature et la fonction de l'image et est identique à l'attribut <code lang="en" xml:lang="en">title</code> s'il est présent</li>\n<li> l'alternative textuelle implémentée via la balise <code lang="en" xml:lang="en">desc</code> permet d'identifier la nature et la fonction de l'image et est identique à l'attribut <code lang="en" xml:lang="en">title</code> de la balise <code lang="en" xml:lang="en">svg</code> s'il est présent</li>\n</ul></li>\n<li> Test 1.4.7 : Pour chaque image vectorielle (balise <code lang="en" xml:lang="en">svg</code>) utilisée comme <a href="#captcha">CAPTCHA</a> ou comme image-test et ayant une alternative textuelle , l'alternative textuelle est-elle <a href="#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>\n<li> Test 1.4.8 : Pour chaque image bitmap (balise <code lang="en" xml:lang="en">canvas</code>) utilisée comme <a href="#captcha">CAPTCHA</a> ou comme image-test et ayant une alternative textuelle, l'alternative textuelle permet-elle d'identifier la nature et la fonction de l'image ?</li>\n<li> Test 1.4.9 : Pour chaque image bitmap (balise <code lang="en" xml:lang="en">canvas</code>) utilisée comme <a href="#captcha">CAPTCHA</a> ou comme image-test et ayant une alternative textuelle , l'alternative textuelle est-elle <a href="#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G143.html" title="G143, nouvelle fenêtre" target="_blank">G143</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G100.html" title="G100, nouvelle fenêtre" target="_blank">G100</a></p>\n\n\n'},{id:"1.5",level:"[A]",text:"Pour chaque image utilisée comme CAPTCHA, une solution d'accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?",description:'\n \n\n\n <ul><li> Test 1.5.1 : Chaque image (balises <code lang="en" xml:lang="en">img</code>, <code lang="en" xml:lang="en">area</code>, <code lang="en" xml:lang="en">object</code>, <code lang="en" xml:lang="en">embed</code>, <code lang="en" xml:lang="en">svg</code>, <code lang="en" xml:lang="en">canvas</code>) utilisée comme <a href="#captcha">CAPTCHA</a> vérifie-t-elle une de ces conditions ?\n\n<ul><li> Il existe une autre forme de <a href="#captcha">CAPTCHA</a> non graphique, au moins</li>\n<li> Il existe une autre solution d'accès à la fonctionnalité sécurisée par le <a href="#captcha">CAPTCHA</a></li>\n</ul></li>\n<li> Test 1.5.2 : Chaque bouton associé à une image (balise <code lang="en" xml:lang="en">input</code> avec l'attribut <code lang="en" xml:lang="en">type="image"</code>) utilisée comme <a href="#captcha">CAPTCHA</a> vérifie-t-il une de ces conditions ?\n\n<ul><li> Il existe une autre forme de <a href="#captcha">CAPTCHA</a> non graphique, au moins</li>\n<li> Il existe une autre solution d'accès à la fonctionnalité sécurisée par le <a href="#captcha">CAPTCHA</a></li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G144.html" title="G144, nouvelle fenêtre" target="_blank">G144</a></p>\n\n\n'},{id:"1.6",level:"[A]",text:"Chaque image porteuse d'information a-t-elle, si nécessaire, une description détaillée ?",description:'\n \n\n\n <ul><li> Test 1.6.1 : Chaque <a href="#image-porteuse-dinformation">image porteuse d'information</a> (balise <code lang="en" xml:lang="en">img</code>) qui nécessite une <a href="#description-dtaille-image">description détaillée</a>, vérifie-t-elle une de ces conditions ?\n\n<ul><li> Il existe un attribut <code lang="en" xml:lang="en">longdesc</code> qui donne l'adresse (<code lang="en" xml:lang="en">url</code>) d'une page contenant la <a href="#description-dtaille-image">description détaillée</a></li>\n<li> Il existe un attribut <code lang="en" xml:lang="en">alt</code> contenant la référence à une description détaillée adjacente à l'image</li>\n<li> Il existe un lien adjacent (via une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>) permettant d'accéder au contenu de la description détaillée</li>\n</ul></li>\n<li> Test 1.6.2 : Chaque image objet porteuse d'information (balise <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>), qui nécessite une <a href="#description-dtaille-image">description détaillée</a>, vérifie-t-elle une de ces conditions ?\n\n<ul><li> Il existe un lien adjacent (via une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>) permettant d'accéder au contenu de la <a href="#description-dtaille-image">description détaillée</a></li>\n<li> Il existe une <a href="#description-dtaille-image">description détaillée</a> clairement identifiable adjacente à l'image objet</li>\n</ul></li>\n<li> Test 1.6.3 : Chaque image embarquée porteuse d'information (balise <code lang="en" xml:lang="en">embed</code>), qui nécessite une <a href="#description-dtaille-image">description détaillée</a>, vérifie-t-elle une de ces conditions ?\n\n<ul><li> Il existe un lien adjacent (via une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>) permettant d'accéder au contenu de la <a href="#description-dtaille-image">description détaillée</a></li>\n<li> Il existe une <a href="#description-dtaille-image">description détaillée</a> clairement identifiable adjacente à l'image embarquée</li>\n</ul></li>\n<li> Test 1.6.4 : Chaque bouton de formulaire de type image (balise <code lang="en" xml:lang="en">input</code> avec l'attribut <code lang="en" xml:lang="en">type="image"</code>), qui nécessite une <a href="#description-dtaille-image">description détaillée</a>, vérifie-t-il une de ces conditions ?\n\n<ul><li> Il existe un attribut <code lang="en" xml:lang="en">alt</code> contenant la référence à une description détaillée adjacente à l'image</li>\n<li> Il existe un <a href="#lien-adjacent">lien adjacent</a> (via une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>) permettant d'accéder au contenu de la <a href="#description-dtaille-image">description détaillée</a></li>\n</ul></li>\n<li> Test 1.6.5 : Chaque image vectorielle (balise <code lang="en" xml:lang="en">svg</code>) qui nécessite une <a href="#description-dtaille-image">description détaillée</a> vérifie-t-elle une de ces conditions ?\n\n<ul><li> Il existe une propriété <code lang="en" xml:lang="en">aria-label</code> contenant une référence à une description détaillée adjacente à l'image vectorielle</li>\n<li> Il existe une balise <code lang="en" xml:lang="en">desc</code> contenant une référence à une <a href="#description-dtaille-image">description détaillée</a> adjacente à l'image vectorielle</li>\n<li> Il existe une balise <code lang="en" xml:lang="en">desc</code> contenant la <a href="#description-dtaille-image">description détaillée</a></li>\n<li> Il existe un lien adjacent (via une balise <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>) permettant d'accéder au contenu de la <a href="#description-dtaille-image">description détaillée</a></li>\n</ul></li>\n<li> Test 1.6.6: Pour chaque image vectorielle (balise <code lang="en" xml:lang="en">svg</code>) qui implémente une référence à une <a href="#description-dtaille-image">description détaillée</a> adjacente via une propriété <code lang="en" xml:lang="en">aria-label</code> ou une balise <code lang="en" xml:lang="en">desc</code>, cette référence est-elle <a href="#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>\n<li> Test 1.6.7: Chaque image bitmap (balise <code lang="en" xml:lang="en">canvas</code>) qui nécessite une <a href="#description-dtaille-image">description détaillée</a> vérifie-t-elle une de ces conditions ?\n\n<ul><li> Il existe un passage de texte entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code> contenant une référence à une <a href="#description-dtaille-image">description détaillée</a> adjacente à l'image bitmap</li>\n<li> Il existe un contenu textuel entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code> faisant office de <a href="#description-dtaille-image">description détaillée</a>.</li>\n<li> Il existe un lien adjacent (via une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>) permettant d'accéder au contenu de la <a href="#description-dtaille-image">description détaillée</a></li>\n</ul></li>\n<li> Test 1.6.8: Pour chaque image bitmap (balise <code lang="en" xml:lang="en">canvas</code>) qui implémente une référence à une <a href="#description-dtaille-image">description détaillée</a> adjacente, cette référence est-elle <a href="#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-16-a">Consulter la note technique au sujet des images vectorielle et de l'utilisation de la propriété <code lang="en" xml:lang="en">aria-describedby</code></a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a>\nTechnique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G92.html" title="G92, nouvelle fenêtre" target="_blank">G92</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G74.html" title="G74, nouvelle fenêtre" target="_blank">G74</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G73.html" title="G73, nouvelle fenêtre" target="_blank">G73</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H45.html" title="H45, nouvelle fenêtre" target="_blank">H45</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA6.html" title="ARIA6, nouvelle fenêtre" target="_blank">ARIA6</a></p>\n\n\n'},{id:"1.7",level:"[A]",text:"Pour chaque image porteuse d'information ayant une description détaillée, cette description est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 1.7.1 : Chaque <a href="glossaire.htm#mimgInfo">image porteuse d'information</a> (balise <code lang="en" xml:lang="en">img</code> ou <code lang="en" xml:lang="en">input</code> avec l'attribut <code lang="en" xml:lang="en">type="image"</code>) ayant une <a href="#description-dtaille-image">description détaillée</a> vérifie-t-elle une de ces conditions ?\n\n<ul><li> La <a href="#description-dtaille-image">description détaillée</a> via l'adresse référencée dans l'attribut <code lang="en" xml:lang="en">longdesc</code> est pertinente</li>\n<li> La <a href="#description-dtaille-image">description détaillée</a> dans la page et signalée dans l'attribut <code lang="en" xml:lang="en">alt</code> est pertinente</li>\n<li> La <a href="#description-dtaille-image">description détaillée</a> via un <a href="#lien">lien adjacent</a> est pertinente</li>\n</ul></li>\n<li> Test 1.7.2 : Chaque <a href="glossaire.htm#mimgObj">image objet</a> (balise <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) ayant une <a href="#description-dtaille-image">description détaillée</a> vérifie-t-elle une de ces conditions ?\n\n<ul><li> La <a href="#description-dtaille-image">description détaillée</a> adjacente à l'image objet est pertinente</li>\n<li> La <a href="#description-dtaille-image">description détaillée</a> via un <a href="#lien">lien adjacent</a> est pertinente</li>\n</ul></li>\n<li> Test 1.7.3 : Chaque image embarquée (balise <code lang="en" xml:lang="en">embed</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) ayant une <a href="#description-dtaille-image">description détaillée</a> vérifie-t-elle une de ces conditions ?\n\n<ul><li> La <a href="#description-dtaille-image">description détaillée</a> adjacente à l'image embarquée est pertinente</li>\n<li> La <a href="#description-dtaille-image">description détaillée</a> via un <a href="#lien">lien adjacent</a> est pertinente</li>\n</ul></li>\n<li> Test 1.7.4 : Chaque image vectorielle (balise <code lang="en" xml:lang="en">svg</code>) ayant une <a href="#description-dtaille-image">description détaillée</a> vérifie-t-elle une de ces conditions ?\n\n<ul><li> La <a href="#description-dtaille-image">description détaillée</a> adjacente à l'image vectorielle est pertinente</li>\n<li> La <a href="#description-dtaille-image">description détaillée</a> contenue dans la balise <code lang="en" xml:lang="en">desc</code> est pertinente</li>\n<li> La <a href="#description-dtaille-image">description détaillée</a> via un <a href="#lien">lien adjacent</a> est pertinente</li>\n</ul></li>\n<li> Test 1.7.5: Pour chaque image vectorielle (balise <code lang="en" xml:lang="en">svg</code>) ayant une description détaillée implémentée via la balise <code lang="en" xml:lang="en">desc</code>, cette description détaillée est-elle <a href="#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>\n<li> Test 1.7.6: Chaque image bitmap (balise <code lang="en" xml:lang="en">canvas</code>) ayant une description détaillée vérifie-t-elle une de ces conditions ?\n\n<ul><li> La description détaillée adjacente à l'image bitmap est pertinente</li>\n<li> La description détaillée contenue entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code> est pertinente</li>\n<li> La description détaillée via un lien adjacent est pertinente</li>\n</ul></li>\n<li> Test 1.7.7: Pour chaque image bitmap (balise <code lang="en" xml:lang="en">canvas</code>) ayant une description détaillée entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code>, cette description détaillée est-elle <a href="#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G92.html" title="G92, nouvelle fenêtre" target="_blank">G92</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F67.html" title="F67, nouvelle fenêtre" target="_blank">F67</a></p>\n\n\n'},{id:"1.8",level:"[AA]",text:"Chaque image texte porteuse d'information, en l'absence d'un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 1.8.1 : Chaque <a href="#image-texte">image texte</a> (balise <code lang="en" xml:lang="en">img</code>) porteuse d'information, en l'absence d'un <a href="#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-18">hors cas particuliers</a>) ?</li>\n<li> Test 1.8.2 : Pour chaque <a href="glossaire.htm#mimgReactive">image réactive</a> (balise <code lang="en" xml:lang="en">img</code> ou <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">usemap</code> ou l'attribut <code lang="en" xml:lang="en">ismap</code>), chaque <a href="#zone-dune-image-ractiveTexte">zone texte</a> (balise <code lang="en" xml:lang="en">area</code> ou <a href="#zone-dune-image-ractiveCliquable">zone cliquable</a>) porteuse d'information, en l'absence d'un <a href="#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-18">hors cas particuliers</a>) ?</li>\n<li> Test 1.8.3 : Pour chaque balise <code lang="en" xml:lang="en">form</code>, chacun de ses boutons "image texte" (balise <code lang="en" xml:lang="en">input</code> avec l'attribut <code lang="en" xml:lang="en">type="image"</code>) porteuse d'information, en l'absence d'un <a href="#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacé par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-18">hors cas particuliers</a>) ?</li>\n<li> Test 1.8.4 : Chaque image texte objet (balise <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) porteuse d'information, en l'absence d'un <a href="#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-18">hors cas particuliers</a>) ?</li>\n<li> Test 1.8.5 : Chaque image texte embarquée (balise <code lang="en" xml:lang="en">embed</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) porteuse d'information, en l'absence d'un <a href="#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-18">hors cas particuliers</a>) ?</li>\n<li> Test 1.8.6 : Chaque image texte bitmap (balise <code lang="en" xml:lang="en">canvas</code>) porteuse d'information, en l'absence d'un <a href="#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-18">hors cas particuliers</a>) ?</li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-18-aa-et-19-aaa">Consulter la note technique au sujet des images vectorielles de type texte</a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-text-presentation" title="1.4.5, nouvelle fenêtre" target="_blank">1.4.5</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G136.html" title="G136, nouvelle fenêtre" target="_blank">G136</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G140.html" title="G140, nouvelle fenêtre" target="_blank">G140</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C22.html" title="C22, nouvelle fenêtre" target="_blank">C22</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C30.html" title="C30, nouvelle fenêtre" target="_blank">C30</a></p>\n\n\n'},{id:"1.9",level:"[AAA]",text:"Chaque image texte porteuse d'information, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 1.9.1 : Chaque <a href="#image-texte">image texte</a> (balise <code lang="en" xml:lang="en">img</code>) doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-19" title="Cas particuliers pour le critère 1.9">hors cas particuliers</a>) ?</li>\n<li> Test 1.9.2 : Pour chaque <a href="glossaire.htm#mimgReactive">image réactive</a> (balise <code lang="en" xml:lang="en">img</code> ou <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">usemap</code>), chaque <a href="#zone-dune-image-ractiveTexte">zone texte</a> (balise <code lang="en" xml:lang="en">area</code>) doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-19" title="Cas particuliers pour le critère 1.9">hors cas particuliers</a>) ?</li>\n<li> Test 1.9.3 : Pour chaque balise <code lang="en" xml:lang="en">form</code>, chacun de ses boutons "image texte" (balise <code lang="en" xml:lang="en">input</code> avec l'attribut <code lang="en" xml:lang="en">type="image"</code>) doit si possible être remplacé par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-19" title="Cas particuliers pour le critère 1.9">hors cas particuliers</a>) ?</li>\n<li> Test 1.9.4 : Chaque <a href="#image-texteObj">image texte objet</a> (balise <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-19" title="Cas particuliers pour le critère 1.9">hors cas particuliers</a>) ?</li>\n<li> Test 1.9.5 : Chaque image texte embarquée (balise <code lang="en" xml:lang="en">embed</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code>) doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-19" title="Cas particuliers pour le critère 1.9">hors cas particuliers</a>) ?</li>\n<li> Test 1.9.6 : Chaque image texte bitmap (balise <code lang="en" xml:lang="en">canvas</code>) doit si possible être remplacée par du <a href="#texte-styl">texte stylé</a>. Cette règle est-elle respectée (<a href="#critre-19" title="Cas particuliers pour le critère 1.9">hors cas particuliers</a>) ?</li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-18%20aa%20et%2019%20aaa">Consulter la note technique au sujet des images vectorielles de type texte</a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-text-images" title="1.4.9, nouvelle fenêtre" target="_blank">1.4.9</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G140.html" title="G140, nouvelle fenêtre" target="_blank">G140</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C22.html" title="C22, nouvelle fenêtre" target="_blank">C22</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C30.html" title="C30, nouvelle fenêtre" target="_blank">C30</a></p>\n\n\n'},{id:"1.10",level:"[A]",text:"Chaque légende d'image est-elle, si nécessaire, correctement reliée à l'image correspondante ?",description:'\n \n\n\n <ul><li> Test 1.10.1 : Chaque image légendée (balise <code lang="en" xml:lang="en">img</code> ou <code lang="en" xml:lang="en">input</code> avec l'attribut <code lang="en" xml:lang="en">type="image"</code> associée à une légende adjacente) vérifie-t-elle, si nécessaire, ces conditions ?\n\n<ul><li> L'image (balise <code lang="en" xml:lang="en">img</code>) et sa légende sont contenues dans une balise <code lang="en" xml:lang="en">figure</code></li>\n<li> la balise <code lang="en" xml:lang="en">figure</code> possède un attribut <code lang="en" xml:lang="en">role="group"</code></li>\n<li> Le contenu de l'attribut <code lang="en" xml:lang="en">alt</code> de l'image contient une référence à la légende adjacente</li>\n<li> L'attribut <code lang="en" xml:lang="en">title</code> de l'image s'il est présent, est strictement identique au contenu de l'attribut <code lang="en" xml:lang="en">alt</code></li>\n</ul></li>\n<li> Test 1.10.2 : Chaque image objet (balise <code lang="en" xml:lang="en">object</code> avec l'attribut <code lang="en" xml:lang="en">type="image/..."</code> associée à une légende adjacente) vérifie-t-elle, si nécessaire, ces conditions ?\n\n<ul><li> L'image (balise <code lang="en" xml:lang="en">object</code>) et sa légende sont contenues dans une balise <code lang="en" xml:lang="en">figure</code></li>\n<li> la balise <code lang="en" xml:lang="en">figure</code> possède un attribut <code lang="en" xml:lang="en">role="group"</code></li>\n</ul></li>\n<li> Test 1.10.3 : Chaque image embarquée légendée (balise <code lang="en" xml:lang="en">embed</code> associée à une légende adjacente) vérifie-t-elle, si nécessaire, ces conditions ?\n\n<ul><li> L'image embarquée (balise <code lang="en" xml:lang="en">embed</code>) et sa légende sont contenues dans une balise <code lang="en" xml:lang="en">figure</code></li>\n<li> la balise <code lang="en" xml:lang="en">figure</code> possède un attribut <code lang="en" xml:lang="en">role="group"</code></li>\n<li> Le contenu de l'attribut <code lang="en" xml:lang="en">alt</code> de l'image contient une référence à la légende adjacente</li>\n<li> L'attribut <code lang="en" xml:lang="en">title</code> de l'image s'il est présent, est strictement identique au contenu de l'attribut <code lang="en" xml:lang="en">alt</code></li>\n</ul></li>\n<li> Test 1.10.4 : Chaque image vectorielle légendée (balise <code lang="en" xml:lang="en">svg</code> associée à une légende adjacente) vérifie-t-elle, si nécessaire, ces conditions ?\n\n<ul><li> L'image (balise <code lang="en" xml:lang="en">svg</code>) et sa légende sont contenues dans une balise <code lang="en" xml:lang="en">figure</code></li>\n<li> la balise <code lang="en" xml:lang="en">figure</code> possède un <code lang="en" xml:lang="en">role="group"</code></li>\n<li> Le contenu de la propriété <code lang="en" xml:lang="en">aria-label</code> ou de la balise <code lang="en" xml:lang="en">desc</code> de l'image vectorielle contient une référence à la légende adjacente</li>\n<li> L'attribut <code lang="en" xml:lang="en">title</code> de l'image vectorielle (balise <code lang="en" xml:lang="en">svg</code>) s'il est présent, est strictement identique au contenu de la propriété <code lang="en" xml:lang="en">aria-label</code> ou de la balise <code lang="en" xml:lang="en">desc</code> utilisé comme alternative.</li>\n</ul></li>\n<li> Test 1.10.5 : Chaque image bitmap légendée (balise <code lang="en" xml:lang="en">canvas</code> associée à une légende adjacente) vérifie-t-elle, si nécessaire, ces conditions ?\n\n<ul><li> L'image (balise <code lang="en" xml:lang="en">canvas</code>) et sa légende sont contenues dans une balise <code lang="en" xml:lang="en">figure</code></li>\n<li> la balise <code lang="en" xml:lang="en">figure</code> possède un attribut <code lang="en" xml:lang="en">role="group"</code></li>\n<li> Le contenu entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code> de l'image bitmap contient une référence à la légende adjacente</li>\n</ul></li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-11-a0">Consulter la note technique au sujet des légendes d'images</a>\n<strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G140.html" title="G140, nouvelle fenêtre" target="_blank">G140</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA4.html" title="ARIA4, nouvelle fenêtre" target="_blank">ARIA4</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA6.html" title="ARIA6, nouvelle fenêtre" target="_blank">ARIA6</a></p>\n\n\n'}]},{title:"2. Cadres",rules:[{id:"2.1",level:"[A]",text:"Chaque cadre en ligne a-t-il un titre de cadre ?",description:'\n \n\n\n <ul><li> Test 2.1.1 : Chaque <a href="#cadre-en-ligne">cadre en ligne</a> (balise <code lang="en" xml:lang="en">iframe</code>) a-t-il un attribut <code lang="en" xml:lang="en">title</code> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H64.html" title="H64, nouvelle fenêtre" target="_blank">H64</a></p>\n\n\n'},{id:"2.2",level:"[A]",text:"Pour chaque cadre en ligne ayant un titre de cadre, ce titre de cadre est-il pertinent ?",description:'\n \n\n\n <ul><li> Test 2.2.1 : Pour chaque <a href="#cadre-en-ligne">cadre en ligne</a> (balise <code lang="en" xml:lang="en">iframe</code>) ayant un attribut <code lang="en" xml:lang="en">title</code>, le contenu de cet attribut est-il pertinent ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H64.html" title="H64, nouvelle fenêtre" target="_blank">H64</a></p>\n\n\n'}]},{title:"3. Couleurs",rules:[{id:"3.1",level:"[A]",text:"Dans chaque page Web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?",description:'\n \n\n\n <ul><li> Test 3.1.1 : Pour chaque mot ou ensemble de mots dont la mise en couleur est porteuse d'<a href="#information-donne-par-la-couleur">information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>\n<li> Test 3.1.2 : Pour chaque indication de couleur donnée par un texte, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>\n<li> Test 3.1.3 : Pour chaque image <a href="#image-vhiculant-une-information-donne-par-la-couleur">véhiculant une information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>\n<li> Test 3.1.4 : Pour chaque <a href="#proprit-css-dterminant-une-couleur">propriété CSS déterminant une couleur</a> et véhiculant une <a href="#information-donne-par-la-couleur">information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>\n<li> Test 3.1.5 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> véhiculant une <a href="#information-donne-par-la-couleur">information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>\n<li> Test 3.1.6 : Pour chaque <a href="#mdia-non-temporel">média non temporel</a> véhiculant une <a href="#information-donne-par-la-couleur">information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-without-color" title="1.4.1, nouvelle fenêtre" target="_blank">1.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G14.html" title="G14, nouvelle fenêtre" target="_blank">G14</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G182.html" title="G182, nouvelle fenêtre" target="_blank">G182</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G111.html" title="G111, nouvelle fenêtre" target="_blank">G111</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G117.html" title="G117, nouvelle fenêtre" target="_blank">G117</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G138.html" title="G138, nouvelle fenêtre" target="_blank">G138</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G205.html" title="G205, nouvelle fenêtre" target="_blank">G205</a></p>\n\n\n'},{id:"3.2",level:"[A]",text:"Dans chaque page Web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon pertinente ?",description:'\n \n\n\n <ul><li> Test 3.2.1 : Pour chaque mot ou ensemble de mots dont la mise en couleur est porteuse d'<a href="#information-donne-par-la-couleur">information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>\n<li> Test 3.2.2 : Pour chaque indication de couleur donnée par un texte, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>\n<li> Test 3.2.3 : Pour chaque image <a href="#image-vhiculant-une-information-donne-par-la-couleur">véhiculant une information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>\n<li> Test 3.2.4 : Pour chaque <a href="#proprit-css-dterminant-une-couleur">propriété CSS déterminant une couleur</a> et véhiculant une <a href="#information-donne-par-la-couleur">information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>\n<li> Test 3.2.5 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> véhiculant une <a href="#information-donne-par-la-couleur">information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>\n<li> Test 3.2.6 : Pour chaque <a href="#mdia-non-temporel">média non temporel</a> véhiculant une <a href="#information-donne-par-la-couleur">information</a>, l'<a href="#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-without-color" title="1.4.1, nouvelle fenêtre" target="_blank">1.4.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G138.html" title="G138, nouvelle fenêtre" target="_blank">G138</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F13.html" title="F13, nouvelle fenêtre" target="_blank">F13</a></p>\n\n\n'},{id:"3.3",level:"[AA]",text:"Dans chaque page Web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 3.3.1 : Dans chaque page Web, <a href="glossaire.htm#mTailleCaract%C3%A8re"><strong>jusqu'à 150%</strong> de la taille de police par défaut</a> (ou 1.5em), le texte et le texte en image sans effet de graisse vérifient-ils une de ces conditions (<a href="#critres-33--34" title="Cas particuliers pour le critère 3.3">hors cas particuliers</a>) ?\n\n<ul><li> le rapport de contraste entre le texte et son arrière-plan est de 4,5:1, au moins</li>\n<li> un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4,5:1, au moins</li>\n</ul></li>\n<li> Test 3.3.2 : Dans chaque page Web, <a href="glossaire.htm#mTailleCaract%C3%A8re"><strong>jusqu'à 120%</strong> de la taille de police par défaut</a> (ou 1.2em), le texte et le texte en image en gras vérifient-ils une de ces conditions (<a href="#critres-33--34" title="Cas particuliers pour le critère 3.3">hors cas particuliers</a>) ?\n\n<ul><li> le rapport de contraste entre le texte et son arrière-plan est de 4,5:1, au moins</li>\n<li> un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4,5:1, au moins</li>\n</ul></li>\n<li> Test 3.3.3 : Dans chaque page Web, <a href="glossaire.htm#mTailleCaract%C3%A8re"><strong>à partir de 150%</strong> de la taille de police par défaut</a> (ou 1.5em), le texte et le texte en image sans effet de graisse vérifient-ils une de ces conditions (<a href="#critres-33--34" title="Cas particuliers pour le critère 3.3">hors cas particuliers</a>) ?\n\n<ul><li> le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins</li>\n<li> un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 3:1, au moins</li>\n</ul></li>\n<li> Test 3.3.4 : Dans chaque page Web, <a href="glossaire.htm#mTailleCaract%C3%A8re"><strong>à partir de 120%</strong> de la taille de police par défaut</a> (ou 1.2em), le texte et le texte en image en gras vérifient-ils une de ces conditions (<a href="#critres-33--34" title="Cas particuliers pour le critère 3.3">hors cas particuliers</a>) ?\n\n<ul><li> le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins</li>\n<li> un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 3:1, au moins</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-contrast" title="1.4.3, nouvelle fenêtre" target="_blank">1.4.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G18.html" title="G18, nouvelle fenêtre" target="_blank">G18</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G136.html" title="G136, nouvelle fenêtre" target="_blank">G136</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G148.html" title="G148, nouvelle fenêtre" target="_blank">G148</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G174.html" title="G174, nouvelle fenêtre" target="_blank">G174</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G145.html" title="G145, nouvelle fenêtre" target="_blank">G145</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C29.html" title="C29, nouvelle fenêtre" target="_blank">C29</a></p>\n\n\n'},{id:"3.4",level:"[AAA]",text:"Dans chaque page Web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il amélioré (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 3.4.1 : Dans chaque page Web, <a href="glossaire.htm#mTailleCaract%C3%A8re"><strong>jusqu'à 150%</strong> de la taille de police par défaut</a> (ou 1.5em), le texte et le texte en image sans effet de graisse vérifient-ils une de ces conditions (<a href="#critres-33--34" title="Cas particuliers pour le critère 3.4">hors cas particuliers</a>) ?\n\n<ul><li> le rapport de contraste entre le texte et son arrière-plan est de 7:1, au moins</li>\n<li> un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 7:1, au moins</li>\n</ul></li>\n<li> Test 3.4.2 : Dans chaque page Web, <a href="glossaire.htm#mTailleCaract%C3%A8re"><strong>jusqu'à 120%</strong> de la taille de police par défaut</a> (ou 1.2em), le texte et le texte en image en gras vérifient-ils une de ces conditions (<a href="#critres-33--34" title="Cas particuliers pour le critère 3.4">hors cas particuliers</a>) ?\n\n<ul><li> le rapport de contraste entre le texte et son arrière-plan est de 7:1, au moins</li>\n<li> un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 7:1, au moins</li>\n</ul></li>\n<li> Test 3.4.3 : Dans chaque page Web, <a href="glossaire.htm#mTailleCaract%C3%A8re"><strong>à partir de 150%</strong> de la taille de police par défaut</a> (ou 1.5em), le texte et le texte en image sans effet de graisse vérifient-ils une de ces conditions (<a href="#critres-33--34" title="Cas particuliers pour le critère 3.4">hors cas particuliers</a>) ?\n\n<ul><li> le rapport de contraste entre le texte et son arrière-plan est de 4,5:1, au moins</li>\n<li> un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4,5:1, au moins</li>\n</ul></li>\n<li> Test 3.4.4 : Dans chaque page Web, <a href="glossaire.htm#mTailleCaract%C3%A8re"><strong>à partir de 120%</strong> de la taille de police par défaut</a> (ou 1.2em), le texte et le texte en image en gras vérifient-ils une de ces conditions (<a href="#critres-33--34" title="Cas particuliers pour le critère 3.4">hors cas particuliers</a>) ?\n\n<ul><li> le rapport de contraste entre le texte et son arrière-plan est de 4,5:1, au moins</li>\n<li> un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4,5:1, au moins</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast7" title="1.4.6, nouvelle fenêtre" target="_blank">1.4.6</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G148.html" title="G148, nouvelle fenêtre" target="_blank">G148</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G17.html" title="G17, nouvelle fenêtre" target="_blank">G17</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G18.html" title="G18, nouvelle fenêtre" target="_blank">G18</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G174.html" title="G174, nouvelle fenêtre" target="_blank">G174</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F83.html" title="F83, nouvelle fenêtre" target="_blank">F83</a></p>\n\n\n'}]},{title:"4. Multimédia",rules:[{id:"4.1",level:"[A]",text:"Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audio-description (hors cas particuliers) ?",description:'\n \n\n\n <p>Donner si nécessaire à chaque media temporel une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a>, des <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> et une audio-description synchronisée pertinents. Donner à chaque média non-temporel une alternative textuelle pertinente.<br>\n Rendre possible le <a href="#contrle-de-la-consultation-dun-media-temporel">contrôle de la consultation</a> de chaque media temporel et non-temporel au clavier et s'assurer de leur compatibilité avec les technologies d'assistance.</p>\n\n<ul><li> Test 4.1.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement audio, vérifie-t-il, si nécessaire, l'une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.1">hors cas particuliers</a>) ?\n\n<ul><li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n<li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> adjacente clairement identifiable</li>\n</ul></li>\n<li> Test 4.1.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo vérifie-t-il, si nécessaire, une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.1">hors cas particuliers</a>) ?\n\n<ul><li> Il existe une <a href="#version-alternative-audio-seulement">version alternative <q>audio seulement</q></a> accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n<li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> adjacente clairement identifiable</li>\n<li> Il existe une <a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée</li>\n<li> Il existe une version alternative avec une <a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n</ul></li>\n<li> Test 4.1.3 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il, si nécessaire, une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.1">hors cas particuliers</a>) ?\n\n<ul><li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n<li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> adjacente clairement identifiable</li>\n<li> Il existe une <a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée</li>\n<li> Il existe une version alternative avec une <a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-av-only-alt" title="1.2.1, nouvelle fenêtre" target="_blank">1.2.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-audio-desc" title="1.2.3, nouvelle fenêtre" target="_blank">1.2.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G58.html" title="G58, nouvelle fenêtre" target="_blank">G58</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G69.html" title="G69, nouvelle fenêtre" target="_blank">G69</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G78.html" title="G78, nouvelle fenêtre" target="_blank">G78</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G158.html" title="G158, nouvelle fenêtre" target="_blank">G158</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G159.html" title="G159, nouvelle fenêtre" target="_blank">G159</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G173.html" title="G173, nouvelle fenêtre" target="_blank">G173</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G8.html" title="G8, nouvelle fenêtre" target="_blank">G8</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G166.html" title="G166, nouvelle fenêtre" target="_blank">G166</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H96.html" title="H96, nouvelle fenêtre" target="_blank">H96</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM6.html" title="SM6, nouvelle fenêtre" target="_blank">SM6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM7.html" title="SM7, nouvelle fenêtre" target="_blank">SM7</a></p>\n\n\n'},{id:"4.2",level:"[A]",text:"Pour chaque média temporel pré-enregistré ayant une transcription textuelle ou une audio-description synchronisée, celles-ci sont-elles pertinentes (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.2.1 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement audio, ayant une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a>, celle-ci est-elle pertinente (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.2">hors cas particuliers</a>) ?</li>\n<li> Test 4.2.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo vérifie-t-il une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.2">hors cas particuliers</a>) ?\n\n<ul><li> La <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> est pertinente</li>\n<li> L'<a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée est pertinente</li>\n<li> L'<a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée de la version alternative est pertinente</li>\n<li> La <a href="#version-alternative-audio-seulement">version alternative <q>audio seulement</q></a> est pertinente</li>\n</ul></li>\n<li> Test 4.2.3 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.2">hors cas particuliers</a>) ?\n\n<ul><li> La <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> est pertinente</li>\n<li> L'<a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée est pertinente</li>\n<li> L'<a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée de la version alternative est pertinente</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-av-only-alt" title="1.2.1, nouvelle fenêtre" target="_blank">1.2.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-audio-desc" title="1.2.3, nouvelle fenêtre" target="_blank">1.2.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F30.html" title="F30, nouvelle fenêtre" target="_blank">F30</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F67.html" title="F67, nouvelle fenêtre" target="_blank">F67</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM6.html" title="SM6, nouvelle fenêtre" target="_blank">SM6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM7.html" title="SM7, nouvelle fenêtre" target="_blank">SM7</a></p>\n\n\n'},{id:"4.3",level:"[A]",text:"Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.3.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il, si nécessaire, l'une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.3">hors cas particuliers</a>) ?\n\n<ul><li> Le <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé possède des <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a></li>\n<li> Il existe une version alternative possédant des <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> accessible via un <a href="#lien">lien adjacent</a> (une url ou une ancre)</li>\n</ul></li>\n<li> Test 4.3.2: Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré possédant des <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> diffusés via une balise <code lang="en" xml:lang="en">track</code>, la balise <code lang="en" xml:lang="en">track</code> possède-t-elle un attribut <code lang="en" xml:lang="en">kind="captions"</code></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-captions" title="1.2.2, nouvelle fenêtre" target="_blank">1.2.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G58.html" title="G58, nouvelle fenêtre" target="_blank">G58</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G93.html" title="G93, nouvelle fenêtre" target="_blank">G93</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G87.html" title="G87, nouvelle fenêtre" target="_blank">G87</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H95.html" title="H95, nouvelle fenêtre" target="_blank">H95</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM11.html" title="SM11, nouvelle fenêtre" target="_blank">SM11</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM12.html" title="SM12, nouvelle fenêtre" target="_blank">SM12</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F74.html" title="F74, nouvelle fenêtre" target="_blank">F74</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F75.html" title="F75, nouvelle fenêtre" target="_blank">F75</a></p>\n\n\n'},{id:"4.4",level:"[A]",text:"Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, ces sous-titres sont-ils pertinents ?",description:'\n \n\n\n <ul><li> Test 4.4.1 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré ayant des <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a>, ces sous-titres sont-ils pertinents ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-captions" title="1.2.2, nouvelle fenêtre" target="_blank">1.2.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G87.html" title="G87, nouvelle fenêtre" target="_blank">G87</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G93.html" title="G93, nouvelle fenêtre" target="_blank">G93</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F8.html" title="F8, nouvelle fenêtre" target="_blank">F8</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F74.html" title="F74, nouvelle fenêtre" target="_blank">F74</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F75.html" title="F75, nouvelle fenêtre" target="_blank">F75</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM11.html" title="SM11, nouvelle fenêtre" target="_blank">SM11</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM12.html" title="SM12, nouvelle fenêtre" target="_blank">SM12</a></p>\n\n\n'},{id:"4.5",level:"[AA]",text:"Chaque média temporel en direct a-t-il, si nécessaire, des sous-titres synchronisés ou une transcription textuelle (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.5.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> seulement audio en direct vérifie-t-il, si nécessaire, une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.5">hors cas particuliers</a>) ?\n\n<ul><li> Il existe des <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a></li>\n<li> Il existe une version ayant des <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n<li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n<li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> adjacente clairement identifiable</li>\n</ul></li>\n<li> Test 4.5.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé en direct vérifie-t-il, si nécessaire, une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.5">hors cas particuliers</a>) ?\n\n<ul><li> Il existe des <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a></li>\n<li> Il existe une version ayant des <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n<li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n<li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> adjacente clairement identifiable</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-real-time-captions" title="1.2.4, nouvelle fenêtre" target="_blank">1.2.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-live-audio-only" title="1.2.9, nouvelle fenêtre" target="_blank">1.2.9</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G9.html" title="G9, nouvelle fenêtre" target="_blank">G9</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G150.html" title="G150, nouvelle fenêtre" target="_blank">G150</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G151.html" title="G151, nouvelle fenêtre" target="_blank">G151</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G157.html" title="G157, nouvelle fenêtre" target="_blank">G157</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H95.html" title="H95, nouvelle fenêtre" target="_blank">H95</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM11.html" title="SM11, nouvelle fenêtre" target="_blank">SM11</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM12.html" title="SM12, nouvelle fenêtre" target="_blank">SM12</a></p>\n\n\n'},{id:"4.6",level:"[AA]",text:"Pour chaque média temporel en direct ayant des sous-titres synchronisés ou une transcription textuelle, ceux-ci sont-ils pertinents ?",description:'\n \n\n\n <ul><li> Test 4.6.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> seulement audio en direct vérifie-t-il une de ces conditions ?\n\n<ul><li> Les <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> sont pertinents</li>\n<li> Les <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> de la version alternative sont pertinents</li>\n<li> La <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> est pertinente</li>\n</ul></li>\n<li> Test 4.6.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé en direct vérifie-t-il une de ces conditions ?\n\n<ul><li> Les <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> sont pertinents</li>\n<li> Les <a href="#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> de la version alternative sont pertinents</li>\n<li> La <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> est pertinente</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-real-time-captions" title="1.2.4, nouvelle fenêtre" target="_blank">1.2.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-live-audio-only" title="1.2.9, nouvelle fenêtre" target="_blank">1.2.9</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F8.html" title="F8, nouvelle fenêtre" target="_blank">F8</a></p>\n\n\n'},{id:"4.7",level:"[AA]",text:"Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audio-description synchronisée (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.7.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo vérifie-t-il, si nécessaire, une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.7">hors cas particuliers</a>) ?\n\n<ul><li> Il existe une <a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée</li>\n<li> Il existe une version alternative avec une <a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée</li>\n</ul></li>\n<li> Test 4.7.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il, si nécessaire, une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.7">hors cas particuliers</a>) ?\n\n<ul><li> Il existe une piste pour l'<a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée</li>\n<li> Il existe une version alternative avec une <a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-audio-desc-only" title="1.2.5, nouvelle fenêtre" target="_blank">1.2.5</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G58.html" title="G58, nouvelle fenêtre" target="_blank">G58</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G8.html" title="G8, nouvelle fenêtre" target="_blank">G8</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G78.html" title="G78, nouvelle fenêtre" target="_blank">G78</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G173.html" title="G173, nouvelle fenêtre" target="_blank">G173</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H96.html" title="H96, nouvelle fenêtre" target="_blank">H96</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM1.html" title="SM1, nouvelle fenêtre" target="_blank">SM1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM2.html" title="SM2, nouvelle fenêtre" target="_blank">SM2</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM6.html" title="SM6, nouvelle fenêtre" target="_blank">SM6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM7.html" title="SM7, nouvelle fenêtre" target="_blank">SM7</a></p>\n\n\n'},{id:"4.8",level:"[AA]",text:"Pour chaque média temporel pré-enregistré ayant une audio-description synchronisée, celle-ci est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 4.8.1 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo ayant une <a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée, celle-ci est-elle pertinente ?</li>\n<li> Test 4.8.2 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé ayant une <a href="#audiodescription-synchronise-media-temporel">audio-description</a> synchronisée, celle-ci est-elle pertinente ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-audio-desc-only" title="1.2.5, nouvelle fenêtre" target="_blank">1.2.5</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/SM1.html" title="SM1, nouvelle fenêtre" target="_blank">SM1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM2.html" title="SM2, nouvelle fenêtre" target="_blank">SM2</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM6.html" title="SM6, nouvelle fenêtre" target="_blank">SM6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM7.html" title="SM7, nouvelle fenêtre" target="_blank">SM7</a></p>\n\n\n'},{id:"4.9",level:"[AAA]",text:"Chaque média temporel pré-enregistré a-t-il, si nécessaire, une interprétation en langue des signes (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.9.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement audio a-t-il, si nécessaire, une interprétation en langue des signes adaptée à la langue du média (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.9">hors cas particuliers</a>) ?</li>\n<li> Test 4.9.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré a-t-il, si nécessaire, une interprétation en langue des signes adaptée à la langue du média (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.9">hors cas particuliers</a>) ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-sign" title="1.2.6, nouvelle fenêtre" target="_blank">1.2.6</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G54.html" title="G54, nouvelle fenêtre" target="_blank">G54</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G81.html" title="G81, nouvelle fenêtre" target="_blank">G81</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM13.html" title="SM13, nouvelle fenêtre" target="_blank">SM13</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM14.html" title="SM14, nouvelle fenêtre" target="_blank">SM14</a></p>\n\n\n'},{id:"4.10",level:"[AAA]",text:"Pour chaque média temporel pré-enregistré ayant une interprétation en langue des signes, celle-ci est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 4.10.1 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement audio ayant une interprétation en langue des signes, celle-ci est-elle pertinente ?</li>\n<li> Test 4.10.2 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré ayant une interprétation en langue des signes, celle-ci est-elle pertinente ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-sign" title="1.2.6, nouvelle fenêtre" target="_blank">1.2.6</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G54.html" title="G54, nouvelle fenêtre" target="_blank">G54</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G81.html" title="G81, nouvelle fenêtre" target="_blank">G81</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM13.html" title="SM13, nouvelle fenêtre" target="_blank">SM13</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM14.html" title="SM14, nouvelle fenêtre" target="_blank">SM14</a></p>\n\n\n'},{id:"4.11",level:"[AAA]",text:"Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audio-description étendue synchronisée (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.11.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il, si nécessaire, une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.11">hors cas particuliers</a>) ?\n\n<ul><li> Il existe une <a href="#audiodescription-tendue">audio-description étendue</a> synchronisée</li>\n<li> Il existe une version alternative avec une <a href="#audiodescription-tendue">audio-description étendue</a> synchronisée</li>\n</ul></li>\n<li> Test 4.11.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo vérifie-t-il, si nécessaire, une de ces conditions (<a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.11">hors cas particuliers</a>) ?\n\n<ul><li> Il existe une <a href="#audiodescription-tendue">audio-description étendue</a> synchronisée</li>\n<li> Il existe une version alternative avec une <a href="#audiodescription-tendue">audio-description étendue</a> synchronisée</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-extended-ad" title="1.2.7, nouvelle fenêtre" target="_blank">1.2.7</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G58.html" title="G58, nouvelle fenêtre" target="_blank">G58</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G8.html" title="G8, nouvelle fenêtre" target="_blank">G8</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H96.html" title="H96, nouvelle fenêtre" target="_blank">H96</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM1.html" title="SM1, nouvelle fenêtre" target="_blank">SM1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM2.html" title="SM2, nouvelle fenêtre" target="_blank">SM2</a></p>\n\n\n'},{id:"4.12",level:"[AAA]",text:"Pour chaque média temporel pré-enregistré ayant une audio-description étendue synchronisée, celle-ci est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 4.12.1 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré ayant une <a href="#audiodescription-tendue">audio-description étendue</a> synchronisée, celle-ci est-elle pertinente ?</li>\n<li> Test 4.12.2 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo ayant une <a href="#audiodescription-tendue">audio-description étendue</a> synchronisée, celle-ci est-elle pertinente ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-extended-ad" title="1.2.7, nouvelle fenêtre" target="_blank">1.2.7</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G8.html" title="G8, nouvelle fenêtre" target="_blank">G8</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM1.html" title="SM1, nouvelle fenêtre" target="_blank">SM1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM2.html" title="SM2, nouvelle fenêtre" target="_blank">SM2</a></p>\n\n\n'},{id:"4.13",level:"[AAA]",text:"Chaque média temporel synchronisé ou seulement vidéo a-t-il, si nécessaire, une transcription textuelle (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.13.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé vérifie-t-il si nécessaire une de ces conditions <a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.13">(hors cas particuliers</a>) ?\n\n<ul><li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n<li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> adjacente clairement identifiable</li>\n</ul></li>\n<li> Test 4.13.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> seulement vidéo vérifie-t-il si nécessaire une de ces conditions <a href="#critres-41--42--43--45--47--49--411--413" title="Cas particuliers pour le critère 4.13">(hors cas particuliers</a>) ?\n\n<ul><li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un <a href="#lien">lien adjacent</a> (une <code lang="en" xml:lang="en">url</code> ou une <code lang="en" xml:lang="en">ancre</code>)</li>\n<li> Il existe une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a> adjacente clairement identifiable</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-text-doc" title="1.2.8, nouvelle fenêtre" target="_blank">1.2.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G58.html" title="G58, nouvelle fenêtre" target="_blank">G58</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G69.html" title="G69, nouvelle fenêtre" target="_blank">G69</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G159.html" title="G159, nouvelle fenêtre" target="_blank">G159</a></p>\n\n\n'},{id:"4.14",level:"[AAA]",text:"Pour chaque média temporel synchronisé ou seulement vidéo, ayant une transcription textuelle, celle-ci est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 4.14.1 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> seulement vidéo ayant une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a>, celle-ci est-elle pertinente ?</li>\n<li> Test 4.14.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé ayant une <a href="#transcription-textuelle-media-temporel">transcription textuelle</a>, celle-ci est-elle pertinente ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-text-doc" title="1.2.8, nouvelle fenêtre" target="_blank">1.2.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F74.html" title="F74, nouvelle fenêtre" target="_blank">F74</a></p>\n\n\n'},{id:"4.15",level:"[A]",text:"Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.15.1 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> seulement son, seulement vidéo ou synchronisé, le contenu textuel adjacent permet-il d'identifier clairement le média temporel (<a href="#critre-415" title="Cas particuliers pour le critère 4.15">hors cas particuliers</a>) ?</li>\n<li> Test 4.15.2 : Pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> seulement son en direct, seulement vidéo en direct ou synchronisé en direct, le contenu textuel adjacent permet-il d'identifier clairement le média temporel (<a href="#critre-415" title="Cas particuliers pour le critère 4.15">hors cas particuliers</a>) ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G68.html" title="G68, nouvelle fenêtre" target="_blank">G68</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G100.html" title="G100, nouvelle fenêtre" target="_blank">G100</a></p>\n\n\n'},{id:"4.16",level:"[A]",text:"Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.16.1 : Chaque <a href="#mdia-non-temporel">média non temporel</a> vérifie-t-il, si nécessaire, une de ces conditions (<a href="#critre-416" title="Cas particuliers pour le critère 4.16">hors cas particuliers</a>) ?\n\n<ul><li> Un <a href="#lien">lien adjacent</a>, clairement identifiable, contient l'adresse (<code lang="en" xml:lang="en">url</code>) d'une page contenant une alternative</li>\n<li> Un <a href="#lien">lien adjacent</a>, clairement identifiable, permet d'accéder à une alternative dans la page</li>\n</ul></li>\n<li> Test 4.16.2 : Chaque média <a href="#mdia-non-temporel">non temporel</a> associé à une alternative vérifie-t-il une de ces conditions (<a href="#critre-416" title="Cas particuliers pour le critère 4.16">hors cas particuliers</a>) ?\n\n<ul><li> La page référencée par le <a href="#lien">lien adjacent</a> est accessible</li>\n<li> L'alternative dans la page, référencée par le <a href="#lien">lien adjacent</a>, est accessible.</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H35.html" title="H35, nouvelle fenêtre" target="_blank">H35</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H46.html" title="H46, nouvelle fenêtre" target="_blank">H46</a></p>\n\n\n'},{id:"4.17",level:"[A]",text:"Pour chaque média non temporel ayant une alternative, cette alternative est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 4.17.1 : Pour chaque <a href="#mdia-non-temporel">média non temporel</a> ayant une alternative, cette alternative permet-elle d'accéder au même contenu et à des fonctionnalités similaires ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H46.html" title="H46, nouvelle fenêtre" target="_blank">H46</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F30.html" title="F30, nouvelle fenêtre" target="_blank">F30</a></p>\n\n\n'},{id:"4.18",level:"[A]",text:"Chaque son déclenché automatiquement est-il contrôlable par l'utilisateur ?",description:'\n \n\n\n <ul><li> Test 4.18.1 : Chaque séquence sonore déclenchée automatiquement via une balise <code lang="en" xml:lang="en">object</code>, <code lang="en" xml:lang="en">video</code>, <code lang="en" xml:lang="en">audio</code>, <code lang="en" xml:lang="en">embed</code>, un <code lang="en" xml:lang="en">code JavaScript</code> ou une propriété <code lang="en" xml:lang="en">bgsound</code> vérifie-t-il une de ces conditions ?\n\n<ul><li> La séquence sonore a une durée inférieure ou égale à 3 secondes</li>\n<li> La séquence sonore peut être stoppée sur action de l'utilisateur</li>\n<li> Le volume de la séquence sonore peut être contrôlé par l'utilisateur indépendamment du contrôle de volume du système.</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-dis-audio" title="1.4.2, nouvelle fenêtre" target="_blank">1.4.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G60.html" title="G60, nouvelle fenêtre" target="_blank">G60</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G170.html" title="G170, nouvelle fenêtre" target="_blank">G170</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G171.html" title="G171, nouvelle fenêtre" target="_blank">G171</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F23.html" title="F23, nouvelle fenêtre" target="_blank">F23</a> - <a href="http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/F93.html" title="F93, nouvelle fenêtre" target="_blank">F93</a></p>\n\n\n'},{id:"4.19",level:"[AAA]",text:"Pour chaque média temporel seulement audio pré-enregistré, les dialogues sont-ils suffisamment audibles (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.19.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> audio pré-enregistré et diffusé via une balise <code lang="en" xml:lang="en">object</code>, <code lang="en" xml:lang="en">video</code>, <code lang="en" xml:lang="en">audio</code>, <code lang="en" xml:lang="en">embed</code> ou proposé en téléchargement vérifie-t-il une de ces conditions (<a href="#critre-419" title="Cas particuliers pour le critère 4.19">hors cas particuliers</a>) ?\n\n<ul><li> L'arrière-plan sonore peut être désactivé</li>\n<li> La ou les pistes de dialogue sont 20 décibels plus élevées que l'arrière-plan sonore.</li>\n<li> Il existe une version alternative pour laquelle l'arrière-plan sonore peut être désactivé</li>\n<li> Il existe une version alternative pour laquelle la ou les pistes de dialogue sont 20 décibels plus élevées que l'arrière-plan sonore</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-noaudio" title="1.4.7, nouvelle fenêtre" target="_blank">1.4.7</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G56.html" title="G56, nouvelle fenêtre" target="_blank">G56</a></p>\n\n\n'},{id:"4.20",level:"[A]",text:"La consultation de chaque média temporel est-elle, si nécessaire, contrôlable par le clavier et la souris ?",description:'\n \n\n\n <ul><li> Test 4.20.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> a-t-il, si nécessaire, les <a href="#fonctionnalits-de-contrle-media-temporel">fonctionnalités de contrôle</a> de sa consultation ?</li>\n<li> Test 4.20.2 : Pour chaque média temporel, chaque fonctionnalité vérifie-t-elle une de ces conditions :\n\n<ul><li> La fonctionnalité est <a href="#accessible-et-activable-par-le-clavier-et-la-souris">accessible par le clavier et la souris</a></li>\n<li> Une fonctionnalité <a href="#accessible-et-activable-par-le-clavier-et-la-souris">accessible par le clavier et la souris</a> permettant de réaliser la même action est présente dans la page</li>\n</ul></li>\n<li> Test 4.20.3 : Pour chaque média temporel, chaque fonctionnalité vérifie-t-elle une de ces conditions :\n\n<ul><li> La fonctionnalité est <a href="#accessible-et-activable-par-le-clavier-et-la-souris">activable par le clavier et la souris</a></li>\n<li> Une fonctionnalité <a href="#accessible-et-activable-par-le-clavier-et-la-souris">activable par le clavier et la souris</a> permettant de réaliser la même action est présente dans la page</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#keyboard-operation-keyboard-operable" title="2.1.1, nouvelle fenêtre" target="_blank">2.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#keyboard-operation-trapping" title="2.1.2, nouvelle fenêtre" target="_blank">2.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G90.html" title="G90, nouvelle fenêtre" target="_blank">G90</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G4.html" title="G4, nouvelle fenêtre" target="_blank">G4</a> <a href="http://www.w3.org/TR/WCAG-TECHS/G202.html" title="G202, nouvelle fenêtre" target="_blank">G202</a></p>\n\n\n'},{id:"4.21",level:"[A]",text:"La consultation de chaque média non temporel est-elle contrôlable par le clavier et la souris ?",description:'\n \n\n\n <ul><li> Test 4.21.1 : Pour chaque <a href="#mdia-non-temporel">média non temporel</a>, chaque fonctionnalité vérifie-t-elle une de ces conditions :\n\n<ul><li> La fonctionnalité est <a href="#accessible-et-activable-par-le-clavier-et-la-souris">accessible par le clavier et la souris</a></li>\n<li> Une fonctionnalité <a href="#accessible-et-activable-par-le-clavier-et-la-souris">accessible par le clavier et la souris</a> permettant de réaliser la même action est présente dans la page</li>\n</ul></li>\n<li> Test 4.21.2 : Pour chaque <a href="#mdia-non-temporel">média non temporel</a>, chaque fonctionnalité vérifie-t-elle une de ces conditions :\n\n<ul><li> La fonctionnalité est <a href="#accessible-et-activable-par-le-clavier-et-la-souris">activable par le clavier et la souris</a></li>\n<li> Une fonctionnalité <a href="#accessible-et-activable-par-le-clavier-et-la-souris">activable par le clavier et la souris</a> permettant de réaliser la même action est présente dans la page</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#keyboard-operation-keyboard-operable" title="2.1.1, nouvelle fenêtre" target="_blank">2.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#keyboard-operation-trapping" title="2.1.2, nouvelle fenêtre" target="_blank">2.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G90.html" title="G90, nouvelle fenêtre" target="_blank">G90</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G4.html" title="G4, nouvelle fenêtre" target="_blank">G4</a></p>\n\n\n'},{id:"4.22",level:"[A]",text:"Chaque média temporel et non temporel est-il compatible avec les technologies d'assistance (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 4.22.1 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> et non temporel inséré via une balise <code lang="en" xml:lang="en">object</code> ou <code lang="en" xml:lang="en">embed</code> vérifie-t-il une de ces conditions (<a href="#critre-422" title="Cas particuliers pour le critère 4.22">hors cas particuliers</a>) ?\n\n<ul><li> Le nom, le rôle, la valeur, le paramétrage et les changements d'états des composants d'interfaces sont accessibles aux technologies d'assistance via une API d'accessibilité</li>\n<li> Une alternative <a href="#compatible-avec-les-technologies-dassistance">compatible avec une API d'accessibilité</a> permet d'accéder aux mêmes fonctionnalités</li>\n</ul></li>\n<li> Test 4.22.2 : Chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> et non temporel inséré via une balise <code lang="en" xml:lang="en">object</code> ou <code lang="en" xml:lang="en">embed</code>, qui possède une alternative <a href="#compatible-avec-les-technologies-dassistance">compatible avec une API d'accessibilité</a>, vérifie-t-il une de ces conditions ?\n\n<ul><li> L' alternative est adjacente au média temporel ou non temporel</li>\n<li> L' alternative est accessible via un lien adjacent (une url ou une ancre)</li>\n<li> Un mécanisme permet de remplacer le média temporel ou non temporel par son alternative.</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G10.html" title="G10, nouvelle fenêtre" target="_blank">G10</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G135.html" title="G135, nouvelle fenêtre" target="_blank">G135</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F15.html" title="F15, nouvelle fenêtre" target="_blank">F15</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F54.html" title="F54, nouvelle fenêtre" target="_blank">F54</a></p>\n\n\n'}]},{title:"5. Tableaux",rules:[{id:"5.1",level:"[A]",text:"Chaque tableau de données complexe a-t-il un résumé ?",description:'\n \n\n\n <ul><li> Test 5.1.1 : Pour chaque <a href="#tableau-de-donnes">tableau de données complexe</a> (balise <code lang="en" xml:lang="en">table</code>) un résumé est-il disponible dans la balise <code lang="en" xml:lang="en">caption</code> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H73.html" title="H73, nouvelle fenêtre" target="_blank">H73</a></p>\n\n\n'},{id:"5.2",level:"[A]",text:"Pour chaque tableau de données complexe ayant un résumé, celui-ci est-il pertinent ?",description:'\n \n\n\n <ul><li> Test 5.2.1 : Pour chaque <a href="#tableau-de-donnes">tableau de donnée complexes</a> (balise <code lang="en" xml:lang="en">table</code>) ayant un résumé, celui-ci est-il pertinent ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H73.html" title="H73, nouvelle fenêtre" target="_blank">H73</a></p>\n\n\n'},{id:"5.3",level:"[A]",text:"Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible ?",description:'\n \n\n\n <ul><li> Test 5.3.1 : Chaque <a href="#tableau-de-mise-en-forme">tableau de mise en forme</a> vérifie-t-il ces conditions ?\n\n<ul><li> le contenu linéarisé reste compréhensible</li>\n<li> la balise <code lang="en" xml:lang="en">table</code> possède un attribut <code lang="en" xml:lang="en">role="presentation"</code></li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-sequence" title="1.3.2, nouvelle fenêtre" target="_blank">1.3.2</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F49.html" title="F49, nouvelle fenêtre" target="_blank">F49</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA4.html" title="ARIA4, nouvelle fenêtre" target="_blank">ARIA4</a></p>\n\n\n'},{id:"5.4",level:"[A]",text:"Chaque tableau de données a-t-il un titre ?",description:'\n \n\n\n <ul><li> 5.4.1 : Chaque <a href="#tableau-de-donnes%20complexe">tableau de données</a> (balise <code lang="en" xml:lang="en">table</code>) a-t-il une balise <code lang="en" xml:lang="en">caption</code> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H39.html" title="H39, nouvelle fenêtre" target="_blank">H39</a></p>\n\n\n'},{id:"5.5",level:"[A]",text:"Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ?",description:'\n \n\n\n <ul><li> Test 5.5.1 : Pour chaque <a href="#tableau-de-donnes%20complexe">tableau de données</a> (balise <code lang="en" xml:lang="en">table</code>) ayant une balise <code lang="en" xml:lang="en">caption</code>, le contenu de cette balise donne-t-il le <a href="#titreTab">titre</a> du tableau ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H39.html" title="H39, nouvelle fenêtre" target="_blank">H39</a></p>\n\n\n'},{id:"5.6",level:"[A]",text:"Pour chaque tableau de données, chaque en-tête de colonnes et chaque en-tête de lignes sont-ils correctement déclarés ?",description:'\n \n\n\n <ul><li> Test 5.6.1 : Pour chaque <a href="#tableau-de-donnes%20complexe">tableau de données</a> (balise <code lang="en" xml:lang="en">table</code>), chaque <a href="#entte-de-colonne-ou-de-ligne">en-tête de colonnes</a> a-t-il une balise <code lang="en" xml:lang="en">th</code> ?</li>\n<li> Test 5.6.2 : Pour chaque <a href="#tableau-de-donnes%20complexe">tableau de données</a> (balise <code lang="en" xml:lang="en">table</code>), chaque <a href="#entte-de-colonne-ou-de-ligne">en-tête de lignes</a> a-t-il une balise <code lang="en" xml:lang="en">th</code> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H51.html" title="H51, nouvelle fenêtre" target="_blank">H51</a> - <a href="http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/F91.html" title="F91, nouvelle fenêtre" target="_blank">F91</a></p>\n\n\n'},{id:"5.7",level:"[A]",text:"Pour chaque tableau de données, la technique appropriée permettant d'associer chaque cellule avec ses en-têtes est-elle utilisée ?",description:'\n \n\n\n <ul><li> Test 5.7.1 : Chaque en-tête (balise <code lang="en" xml:lang="en">th</code>) s'appliquant à la totalité de la ligne ou de la colonne possède-t-il un attribut <code lang="en" xml:lang="en">id</code> unique ou un attribut <code lang="en" xml:lang="en">scope</code> ?</li>\n<li> Test 5.7.2 : Chaque en-tête (balise <code lang="en" xml:lang="en">th</code>) s'appliquant à la totalité de la ligne ou de la colonne et possédant un attribut <code lang="en" xml:lang="en">scope</code> vérifie-t-il une de ces conditions ?\n\n<ul><li> L'en-tête possède un attribut <code lang="en" xml:lang="en">scope</code> avec la valeur <code lang="en" xml:lang="en">"row"</code> pour les en-têtes de ligne</li>\n<li> L'en-tête possède un attribut <code lang="en" xml:lang="en">scope</code> avec la valeur <code lang="en" xml:lang="en">"col"</code> pour les en-têtes de colonne</li>\n</ul></li>\n<li> Test 5.7.3 : Chaque en-tête (balise <code lang="en" xml:lang="en">th</code>) ne s'appliquant pas à la totalité de la ligne ou de la colonne vérifie-t-il ces conditions ?\n\n<ul><li> L'en-tête ne possède pas d'attribut <code lang="en" xml:lang="en">scope</code></li>\n<li> L'en-tête possède un attribut <code lang="en" xml:lang="en">id</code> unique</li>\n</ul></li>\n<li> Test 5.7.4 : Chaque cellule (balise <code lang="en" xml:lang="en">td</code> ou <code lang="en" xml:lang="en">th</code>) associée à un ou plusieurs en-têtes possédant un attribut <code lang="en" xml:lang="en">id</code> vérifie-t-elle ces conditions ?\n\n<ul><li> La cellule possède un attribut <code lang="en" xml:lang="en">headers</code></li>\n<li> L'attribut <code lang="en" xml:lang="en">headers</code> possède la liste des valeurs des en-têtes associés à la cellule.</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H63.html" title="H63, nouvelle fenêtre" target="_blank">H63</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H43.html" title="H43, nouvelle fenêtre" target="_blank">H43</a> - <a href="http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/F90.html" title="F90, nouvelle fenêtre" target="_blank">F90</a></p>\n\n\n'},{id:"5.8",level:"[A]",text:"Chaque tableau de mise en forme ne doit pas utiliser d'éléments propres aux tableaux de données. Cette règle est-elle respectée ?",description:'\n \n\n\n <ul><li> Test 5.8.1 : Chaque <a href="#tableau-de-mise-en-forme">tableau de mise en forme</a> (balise <code lang="en" xml:lang="en">table</code>) vérifie-t-il ces conditions ?\n\n<ul><li> Le <a href="#tableau-de-mise-en-forme">tableau de mise en forme</a> (balise <code lang="en" xml:lang="en">table</code>) ne possède pas de balises <code lang="en" xml:lang="en">caption</code>, <code lang="en" xml:lang="en">th</code>, <code lang="en" xml:lang="en">thead</code>, <code lang="en" xml:lang="en">tfoot</code></li>\n<li> Les cellules du <a href="#tableau-de-mise-en-forme">tableau de mise en forme</a> (balise <code lang="en" xml:lang="en">td</code>) ne possèdent pas d'attributs <code lang="en" xml:lang="en">scope</code>, <code lang="en" xml:lang="en">headers</code>, <code lang="en" xml:lang="en">colgroup</code>, <code lang="en" xml:lang="en">axis</code>.</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F46.html" title="F46, nouvelle fenêtre" target="_blank">F46</a></p>\n\n\n'}]},{title:"6. Liens",rules:[{id:"6.1",level:"[A]",text:"Chaque lien est-il explicite (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 6.1.1 : Chaque <a href="#lien-image">lien texte</a> vérifie-t-il une de ces conditions (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.1">hors cas particuliers</a>) ?\n\n<ul><li> L'<a href="#intitul-de-lien">intitulé de lien</a> seul permet d'en comprendre la fonction et la destination</li>\n<li> Le <a href="#contexte-du-lien">contexte du lien</a> permet d'en comprendre la fonction et la destination</li>\n</ul></li>\n<li> Test 6.1.2 : Chaque <a href="#lien-explicite-hors-contexte">lien image</a> (contenu de l'attribut <code lang="en" xml:lang="en">alt</code>, texte entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code> ou texte entre <code lang="en" xml:lang="en"><object></code> et <code lang="en" xml:lang="en"></object></code>) vérifie-t-il une de ces conditions (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.1">hors cas particuliers</a>) ?\n\n<ul><li> L'<a href="#intitul-de-lien">intitulé de lien</a> seul permet d'en comprendre la fonction et la destination</li>\n<li> Le <a href="#contexte-du-lien">contexte du lien</a> permet d'en comprendre la fonction et la destination</li>\n</ul></li>\n<li> Test 6.1.3 : Chaque lien doublant une <a href="#zone-dune-image-ractiveCliquable">zone cliquable</a> d'une <a href="#image-ractive">image réactive coté serveur</a> vérifie-t-il une de ces conditions (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.1">hors cas particuliers</a>) ?\n\n<ul><li> L'<a href="#intitul-de-lien">intitulé de lien</a> seul permet d'en comprendre la fonction et la destination</li>\n<li> Le <a href="#contexte-du-lien">contexte du lien</a> permet d'en comprendre la fonction et la destination</li>\n</ul></li>\n<li> Test 6.1.4 : Chaque <a href="#lien-adjacent">lien composite</a> vérifie-t-il une de ces conditions (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.1">hors cas particuliers</a>) ?\n\n<ul><li> L'<a href="#intitul-de-lien">intitulé de lien</a> seul permet d'en comprendre la fonction et la destination</li>\n<li> Le <a href="#contexte-du-lien">contexte du lien</a> permet d'en comprendre la fonction et la destination</li>\n</ul></li>\n<li> Test 6.1.5 : Chaque <a href="#lien-texte">lien vectoriel</a> vérifie-t-il une de ces conditions (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.1">hors cas particuliers</a>) ?\n\n<ul><li> L'<a href="#intitul-de-lien">intitulé de lien</a> seul permet d'en comprendre la fonction et la destination</li>\n<li> Le <a href="#contexte-du-lien">contexte du lien</a> permet d'en comprendre la fonction et la destination</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-refs" title="2.4.4, nouvelle fenêtre" target="_blank">2.4.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-link" title="2.4.9, nouvelle fenêtre" target="_blank">2.4.9</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H79.html" title="H79, nouvelle fenêtre" target="_blank">H79</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H78.html" title="H78, nouvelle fenêtre" target="_blank">H78</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H79.html" title="H79, nouvelle fenêtre" target="_blank">H79</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H80.html" title="H80, nouvelle fenêtre" target="_blank">H80</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H81.html" title="H81, nouvelle fenêtre" target="_blank">H81</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H30.html" title="H30, nouvelle fenêtre" target="_blank">H30</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F89.html" title="F89, nouvelle fenêtre" target="_blank">F89</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G91.html" title="G91, nouvelle fenêtre" target="_blank">G91</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G53.html" title="G53, nouvelle fenêtre" target="_blank">G53</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA7.html" title="ARIA7, nouvelle fenêtre" target="_blank">ARIA7</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA8.html" title="ARIA8, nouvelle fenêtre" target="_blank">ARIA8</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F63.html" title="F63, nouvelle fenêtre" target="_blank">F63</a></p>\n\n\n'},{id:"6.2",level:"[A]",text:"Pour chaque lien ayant un titre de lien, celui-ci est-il pertinent ?",description:'\n \n\n\n <ul><li> Test 6.2.1 : Pour chaque <a href="#lien-image">lien texte</a> ayant un <a href="#titreLien">titre de lien</a> (attribut <code lang="en" xml:lang="en">title</code>), le contenu de cet attribut est-il pertinent ?</li>\n<li> Test 6.2.2 : Pour chaque <a href="#lien-explicite-hors-contexte">lien image</a> ayant un <a href="#titreLien">titre de lien</a> (attribut <code lang="en" xml:lang="en">title</code>), le contenu de cet attribut est-il pertinent ?</li>\n<li> Test 6.2.3 : pour chaque <a href="#zone-dune-image-ractiveCliquable">zone cliquable</a> (balise <code lang="en" xml:lang="en">area</code>) ayant un <a href="#titreLien">titre de lien</a> (attribut <code lang="en" xml:lang="en">title</code>), le contenu de cet attribut est-il pertinent ?</li>\n<li> Test 6.2.4 : Pour chaque <a href="#lien-adjacent">lien composite</a> ayant un <a href="#titreLien">titre de lien</a> (attribut <code lang="en" xml:lang="en">title</code>), le contenu de cet attribut est-il pertinent ?</li>\n<li> Test 6.2.5 : Pour chaque <a href="#lien-texte">lien vectoriel</a> ayant un <a href="#titreLien">titre de lien</a> (attribut <code lang="en" xml:lang="en">title</code>), le contenu de cet attribut est-il pertinent ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-refs" title="2.4.4, nouvelle fenêtre" target="_blank">2.4.4</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H33.html" title="H33, nouvelle fenêtre" target="_blank">H33</a></p>\n\n\n'},{id:"6.3",level:"[AAA]",text:"Chaque intitulé de lien seul est-il explicite hors contexte (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 6.3.1 : Chaque <a href="#lien-image">lien texte</a> vérifie-t-il une de ces conditions (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.3">hors cas particuliers</a>) ?\n\n<ul><li> L'intitulé du lien est explicite hors contexte</li>\n<li> Un mécanisme permet à l'utilisateur d'obtenir un intitulé de lien explicite hors contexte</li>\n<li> Le contenu du titre de lien (attribut <code lang="en" xml:lang="en">title</code>) est explicite hors contexte</li>\n</ul></li>\n<li> Test 6.3.2 : Chaque intitulé de <a href="#lien-explicite-hors-contexte">lien image</a> (contenu de l'attribut <code lang="en" xml:lang="en">alt</code>, texte entre <code lang="en" xml:lang="en"><canvas></code> et <code lang="en" xml:lang="en"></canvas></code> ou texte entre <code lang="en" xml:lang="en"><object></code> et <code lang="en" xml:lang="en"></object></code>) est-il <a href="#lien-dont-la-nature-nest-pas-vidente">explicite hors contexte</a> (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.4">hors cas particuliers</a>) ?</li>\n<li> Test 6.3.3 : Chaque <a href="#intitul-de-lien">intitulé de lien</a> de type <a href="#zone-dune-image-ractiveCliquable">zone cliquable</a> (contenu de l'attribut <code lang="en" xml:lang="en">alt</code> d'une balise <code lang="en" xml:lang="en">area</code>) est-il <a href="#lien-dont-la-nature-nest-pas-vidente">explicite hors contexte</a> (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.4">hors cas particuliers</a>) ?</li>\n<li> Test 6.3.4 : Chaque <a href="#lien-adjacent">lien composite</a> (contenu texte et de l'attribut <code lang="en" xml:lang="en">alt</code>) est-il <a href="#lien-dont-la-nature-nest-pas-vidente">explicite hors contexte</a> (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.4">hors cas particuliers</a>)</li>\n<li> Test 6.3.5 : Chaque intitulé de <a href="#lien-texte">lien vectoriel</a> (contenu de l'alternative de l'image vectorielle, balise <code lang="en" xml:lang="en">svg</code>) est-il <a href="#lien-dont-la-nature-nest-pas-vidente">explicite hors contexte</a> (<a href="#critres-61-et-63" title="Cas particuliers pour le critère 6.3">hors cas particuliers</a>) ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-link" title="2.4.9, nouvelle fenêtre" target="_blank">2.4.9</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G91.html" title="G91, nouvelle fenêtre" target="_blank">G91</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G189.html" title="G189, nouvelle fenêtre" target="_blank">G189</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H33.html" title="H33, nouvelle fenêtre" target="_blank">H33</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR30.html" title="SCR30, nouvelle fenêtre" target="_blank">SCR30</a> - <a href="http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/F84.html" title="F84, nouvelle fenêtre" target="_blank">F84</a></p>\n\n\n'},{id:"6.4",level:"[A]",text:"Pour chaque page web, chaque lien identique a-t-il les mêmes fonction et destination ?",description:'\n \n\n\n <ul><li> Test 6.4.1 : Pour chaque page web, chaque <a href="#liens-identiques">lien identique</a> de <a href="#intitul-de-lien">type texte</a> a-t-il les mêmes fonction et destination ?</li>\n<li> Test 6.4.2 : Pour chaque page web, chaque <a href="#liens-identiques">lien identique</a> de <a href="#intitul-de-lien">type image</a> a-t-il les mêmes fonction et destination ?</li>\n<li> Test 6.4.3 : Pour chaque page web, chaque <a href="#liens-identiques">lien identique</a> de type <a href="#zone-dune-image-ractiveCliquable">zone cliquable</a> a-t-il les mêmes fonction et destination ?</li>\n<li> Test 6.4.4 : Pour chaque page web, chaque <a href="#liens-identiques">lien identique</a> de <a href="#intitul-de-lien">type composite</a> a-t-il les mêmes fonction et destination ?</li>\n<li> Test 6.4.5 : Pour chaque page web, chaque <a href="#liens-identiques">lien identique</a> de type <a href="#intitul-de-lien">vectoriel</a> a-t-il les mêmes fonction et destination ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-refs" title="2.4.4, nouvelle fenêtre" target="_blank">2.4.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-consistent-functionality" title="3.2.4, nouvelle fenêtre" target="_blank">3.2.4</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H79.html" title="H79, nouvelle fenêtre" target="_blank">H79</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H78.html" title="H78, nouvelle fenêtre" target="_blank">H78</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H79.html" title="H79, nouvelle fenêtre" target="_blank">H79</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H80.html" title="H80, nouvelle fenêtre" target="_blank">H80</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G91.html" title="G91, nouvelle fenêtre" target="_blank">G91</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G197.html" title="G197, nouvelle fenêtre" target="_blank">G197</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H30.html" title="H30, nouvelle fenêtre" target="_blank">H30</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H33.html" title="H33, nouvelle fenêtre" target="_blank">H33</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA7.html" title="ARIA7, nouvelle fenêtre" target="_blank">ARIA7</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA8.html" title="ARIA8, nouvelle fenêtre" target="_blank">ARIA8</a></p>\n\n\n'},{id:"6.5",level:"[A]",text:"Dans chaque page Web, chaque lien, à l'exception des ancres, a-t-il un intitulé ?",description:'\n \n\n\n <ul><li> Test 6.5.1 Dans chaque page Web, chaque lien (balise <code lang="en" xml:lang="en">a</code> avec un attribut <code lang="en" xml:lang="en">href</code>), à l'exception des <a href="#ancre">ancres</a>, a-t-il un <a href="#intitul-de-lien">intitulé</a> entre <code lang="en" xml:lang="en"><a></code> et <code lang="en" xml:lang="en"></a></code> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-refs" title="2.4.4, nouvelle fenêtre" target="_blank">2.4.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-link" title="2.4.9, nouvelle fenêtre" target="_blank">2.4.9</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G91.html" title="G91, nouvelle fenêtre" target="_blank">G91</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H30.html" title="H30, nouvelle fenêtre" target="_blank">H30</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F89.html" title="F89, nouvelle fenêtre" target="_blank">F89</a></p>\n\n\n'}]},{title:"7. Scripts",rules:[{id:"7.1",level:"[A]",text:"Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?",description:'\n \n\n\n <ul><li> Test 7.1.1 : Chaque <a href="#script">script</a> qui génère ou contrôle un composant d'interface vérifie-t-il, si nécessaire, une de ces conditions ?\n\n<ul><li> <a href="#le-nom-le-rle-la-valeur-le-paramtrage-et-les-changements-dtats">Le nom, le rôle, la valeur, le paramétrage et les changements d'états</a> sont accessibles aux technologies d'assistance via une API d'accessibilité</li>\n<li> un composant d'interface accessible permettant d'accéder aux mêmes fonctionnalités est présent dans la page ;</li>\n<li> une <a href="#alternative--script">alternative</a> accessible permet d'accéder aux mêmes fonctionnalités.</li>\n</ul></li>\n<li> Test 7.1.2 : Chaque fonctionnalité d'insertion de contenu contrôlée par un <a href="#script">script</a> utilise-t-elle des <a href="#proprits-et-mthodes-conformes--la-spcification-dom">propriétés et méthodes conformes à la spécification DOM (Document Object Model)</a> ?</li>\n<li> Test 7.1.3 :Chaque <a href="#script">script</a> qui génère, met à jour ou contrôle un composant d'interface qui comporte des rôles des états ou des propriétés correspondant à un <a href="#motif-de-conception">motif de conception</a> défini par l'API ARIA vérifie-t-il une de ces conditions ?\n\n<ul><li> Le composant d'interface est conforme au <a href="#motif-de-conception">motif de conception</a> défini par l'API ARIA</li>\n<li> Un composant d'interface présent sur la page, permettant d'accéder aux mêmes fonctionnalités, est conforme au <a href="#motif-de-conception">motif de conception</a> défini par l'API ARIA</li>\n<li> Le composant d'interface <a href="#adapter-un-motif-de-conception-aria">adapte un motif de conception</a> défini par l'API ARIA.</li>\n<li> Une <a href="#alternative--script">alternative</a> accessible permet d'accéder aux mêmes fonctionnalités.</li>\n</ul></li>\n<li> Test 7.1.4 : Chaque <a href="#modification-du-rle-natif-dun-lment-html">modification du rôle natif</a> d'un élément HTML respecte-t-elle les règles et préconisations indiquées dans la spécification HTML5 et les notes techniques associées ?</li>\n<li> Test 7.1.5 : Chaque <a href="#script">script</a> qui génère ou contrôle un composant d'interface via des rôles, des états ou des propriétés définis par l'API ARIA respecte-t-il une de ces conditions ?\n\n<ul><li> Le composant d'interface est <a href="#correctement-restitue-par-les-technologies-dassistance"></a><a href="#correctement-restitue-par-les-technologies-dassistance">correctement restitué</a> par les technologies d'assistance</li>\n<li> Une <a href="#alternative--script">alternative</a> accessible permet d'accéder aux mêmes fonctionnalités.</li>\n</ul></li>\n<li> Test 7.1.6 : Chaque composant d'interface qui utilise un role ARIA <code lang="en" xml:lang="en">application</code> respecte-t-il une de ces conditions ?\n\n<ul><li> Le composant d'interface est <a href="#correctement-restitue-par-les-technologies-dassistance"></a><a href="#correctement-restitue-par-les-technologies-dassistance">correctement restitué</a> par les technologies d'assistance</li>\n<li> Une <a href="#alternative--script">alternative</a> accessible permet d'accéder aux mêmes fonctionnalités.</li>\n</ul></li>\n</ul><p><strong>Note technique :</strong> <a href="#alternative--javascript-et-compatibilit-avec-les-technologies-dassistance-des-composants-dinterface">Consulter la note technique au sujet des alternatives à JavaScript</a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G10.html" title="G10, nouvelle fenêtre" target="_blank">G10</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G135.html" title="G135, nouvelle fenêtre" target="_blank">G135</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G136.html" title="G136, nouvelle fenêtre" target="_blank">G136</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA4.html" title="ARIA4, nouvelle fenêtre" target="_blank">ARIA4</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA5.html" title="ARIA5, nouvelle fenêtre" target="_blank">ARIA5</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA18.html" title="ARIA18, nouvelle fenêtre" target="_blank">ARIA18</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA19.html" title="ARIA19, nouvelle fenêtre" target="_blank">ARIA19</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR21.html" title="SCR21, nouvelle fenêtre" target="_blank">SCR21</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F15.html" title="F15, nouvelle fenêtre" target="_blank">F15</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F19.html" title="F19, nouvelle fenêtre" target="_blank">F19</a> - <a href="http://www.w3.org/TR/WCAG20-TECHS/F42.html" title="F42, nouvelle fenêtre" target="_blank">F42</a> - <a href="http://www.w3.org/TR/WCAG20-TECHS/F59.html" title="F59, nouvelle fenêtre" target="_blank">F59</a> - <a href="http://www.w3.org/TR/WCAG20-TECHS/F79.html" title="F79, nouvelle fenêtre" target="_blank">F79</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F20.html" title="F20, nouvelle fenêtre" target="_blank">F20</a></p>\n\n\n'},{id:"7.2",level:"[A]",text:"Pour chaque script ayant une alternative, cette alternative est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 7.2.1 : Chaque <a href="#script">script</a> débutant par la balise <code lang="en" xml:lang="en">script</code> et ayant une <a href="#alternative--script">alternative</a> vérifie-t-il une de ces conditions ?\n\n<ul><li> L'<a href="#alternative--script">alternative</a> entre <code lang="en" xml:lang="en"><noscript></code> et <code lang="en" xml:lang="en"></noscript></code> permet d'accéder à des contenus et des fonctionnalités similaires</li>\n<li> La page affichée, lorsque JavaScript est désactivé, permet d'accéder à des contenus et des fonctionnalités similaires</li>\n<li> La page <a href="#alternative--script">alternative</a> permet d'accéder à des contenus et des fonctionnalités similaires</li>\n<li> Le langage de <code lang="en" xml:lang="en">script</code> côté serveur permet d'accéder à des contenus et des fonctionnalités similaires</li>\n<li> L'alternative, présente dans la page, permet d'accéder à des contenus et des fonctionnalités similaires</li>\n</ul></li>\n<li> Test 7.2.2 : Chaque élément non textuel mis à jour par un <a href="#script">script</a> (dans la page, ou un cadre en ligne) et ayant une <a href="#alternative--script">alternative</a> vérifie-t-il ces conditions ?\n\n<ul><li> L'<a href="#alternative--script">alternative</a> de l'élément non textuel est mise à jour</li>\n<li> L'<a href="#alternative--script">alternative</a> mise à jour est pertinente</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G136.html" title="G136, nouvelle fenêtre" target="_blank">G136</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F19.html" title="F19, nouvelle fenêtre" target="_blank">F19</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F20.html" title="F20, nouvelle fenêtre" target="_blank">F20</a></p>\n\n\n'},{id:"7.3",level:"[A]",text:"Chaque script est-il contrôlable par le clavier et la souris (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 7.3.1 : Chaque élément possédant un gestionnaire d'événement contrôlé par un <a href="#script">script</a> vérifie-t-il une de ces conditions (<a href="#critre-73" title="Cas particuliers pour le critère 7.3">hors cas particuliers</a>) ?\n\n<ul><li> L'élément est <a href="#accessible-et-activable-par-le-clavier-et-la-souris">accessible par le clavier et la souris</a></li>\n<li> Un élément <a href="#accessible-et-activable-par-le-clavier-et-la-souris">accessible par le clavier et la souris</a> permettant de réaliser la même action est présent dans la page</li>\n</ul></li>\n<li> Test 7.3.2 : Chaque élément possédant un gestionnaire d'événement contrôlé par un <a href="#script">script</a> vérifie-t-il une de ces conditions (<a href="#critre-73" title="Cas particuliers pour le critère 7.3">hors cas particuliers</a>) ?\n\n<ul><li> L'élément est <a href="#accessible-et-activable-par-le-clavier-et-la-souris">activable par le clavier et la souris</a></li>\n<li> Un élément <a href="#accessible-et-activable-par-le-clavier-et-la-souris">activable par le clavier et la souris</a> permettant de réaliser la même action est présent dans la page</li>\n</ul></li>\n<li> Test 7.3.3 : Un <a href="#script">script</a> ne doit pas supprimer le <code lang="en" xml:lang="en">focus</code> d'un élément qui le reçoit. Cette règle est-elle respectée (<a href="#critre-73" title="Cas particuliers pour le critère 7.3">hors cas particuliers</a>) ?</li>\n<li> Test 7.3.4 : Chaque composant d'interface implémenté via un rôle défini par l'API ARIA et correspondant à un <a href="#motif-de-conception">motif de conception</a> respecte-t-il une de ces conditions ?\n\n<ul><li> Les interactions au clavier sont conformes au comportement défini par le <a href="#motif-de-conception">motif de conception</a> pour les touches <code lang="en" xml:lang="en">Echap</code>, <code lang="en" xml:lang="en">Barre d'espace</code>, <code lang="en" xml:lang="en">Tabulation</code> et <code lang="en" xml:lang="en">Flèches de direction</code> au moins</li>\n<li> Un composant d'interface présent sur la page, permettant de réaliser la même action, possède des interactions au clavier conformes au comportement défini par le <a href="#motif-de-conception">motif de conception</a> , pour les touches <code lang="en" xml:lang="en">Echap</code>, <code lang="en" xml:lang="en">Barre d'espace</code>, <code lang="en" xml:lang="en">Tabulation</code> et <code lang="en" xml:lang="en">Flèches de direction</code> au moins</li>\n<li> Une alternative permettant d'accéder aux mêmes fonctionnalités est contrôlable par le clavier et à la souris.</li>\n</ul></li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-73%20a">Consulter la note technique au sujet des interactions au clavier via l'API ARIA</a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#keyboard-operation-keyboard-operable" title="2.1.1, nouvelle fenêtre" target="_blank">2.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#keyboard-operation-all-funcs" title="2.1.3, nouvelle fenêtre" target="_blank">2.1.3</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-focus-visible" title="2.4.7, nouvelle fenêtre" target="_blank">2.4.7</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G202.html" title="G202, nouvelle fenêtre" target="_blank">G202</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR2.html" title="SCR2, nouvelle fenêtre" target="_blank">SCR2</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR20.html" title="SCR20, nouvelle fenêtre" target="_blank">SCR20</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR29.html" title="SCR29, nouvelle fenêtre" target="_blank">SCR29</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR35.html" title="SCR35, nouvelle fenêtre" target="_blank">SCR35</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G90.html" title="G90, nouvelle fenêtre" target="_blank">G90</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F42.html" title="F42, nouvelle fenêtre" target="_blank">F42</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F54.html" title="F54, nouvelle fenêtre" target="_blank">F54</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F55.html" title="F55, nouvelle fenêtre" target="_blank">F55</a></p>\n\n\n'},{id:"7.4",level:"[A]",text:"Pour chaque script qui initie un changement de contexte, l'utilisateur est-il averti ou en a-t-il le contrôle ?",description:'\n \n\n\n <ul><li> Test 7.4.1 : Chaque <a href="#script">script</a> qui initie un <a href="#changement-de-contexte">changement de contexte</a> vérifie-t-il une de ces conditions ?\n\n<ul><li> L'utilisateur est averti par un texte de l'action du <a href="#script">script</a> et du type de changement avant son déclenchement</li>\n<li> Le <a href="#changement-de-contexte">changement de contexte</a> est initié par un bouton (<code lang="en" xml:lang="en">input</code> de type <code lang="en" xml:lang="en">submit</code>, <code lang="en" xml:lang="en">button</code> ou <code lang="en" xml:lang="en">image</code> ou balise <code lang="en" xml:lang="en">button</code>) explicite</li>\n<li> Le <a href="#changement-de-contexte">changement de contexte</a> est initié par un lien explicite</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-receive-focus" title="3.2.1, nouvelle fenêtre" target="_blank">3.2.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-unpredictable-change" title="3.2.2, nouvelle fenêtre" target="_blank">3.2.2</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-no-extreme-changes-context" title="3.2.5, nouvelle fenêtre" target="_blank">3.2.5</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F9.html" title="F9, nouvelle fenêtre" target="_blank">F9</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F22.html" title="F22, nouvelle fenêtre" target="_blank">F22</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F36.html" title="F36, nouvelle fenêtre" target="_blank">F36</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F37.html" title="F37, nouvelle fenêtre" target="_blank">F37</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F41.html" title="F41, nouvelle fenêtre" target="_blank">F41</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G13.html" title="G13, nouvelle fenêtre" target="_blank">G13</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G76.html" title="G76, nouvelle fenêtre" target="_blank">G76</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G80.html" title="G80, nouvelle fenêtre" target="_blank">G80</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G107.html" title="G107, nouvelle fenêtre" target="_blank">G107</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H32.html" title="H32, nouvelle fenêtre" target="_blank">H32</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H84.html" title="H84, nouvelle fenêtre" target="_blank">H84</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR19.html" title="SCR19, nouvelle fenêtre" target="_blank">SCR19</a></p>\n\n\n'},{id:"7.5",level:"[AAA]",text:"Chaque script qui provoque une alerte non sollicitée est-il contrôlable par l'utilisateur (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 7.5.1 : Chaque <a href="#script">script</a> qui provoque une <a href="#alerte">alerte</a> non sollicitée est-il contrôlable par l'utilisateur (hors <a href="#critre-76" title="Cas particuliers pour le critère 7.6">cas particuliers</a>) ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#time-limits-postponed" title="2.2.4, nouvelle fenêtre" target="_blank">2.2.4</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/SCR14.html" title="SCR14, nouvelle fenêtre" target="_blank">SCR14</a></p>\n\n\n'}]},{title:"8. Éléments Obligatoires",rules:[{id:"8.1",level:"[A]",text:"Chaque page Web est-elle définie par un type de document ?",description:'\n \n\n\n <ul><li> Test 8.1.1 : Pour chaque page Web, le <a href="#type-de-document">type de document</a> (balise <code lang="en" xml:lang="en">doctype</code>) est-il présent ?</li>\n<li> Test 8.1.2 : Pour chaque page Web, le <a href="#type-de-document">type de document</a> (balise <code lang="en" xml:lang="en">doctype</code>) est-il valide ?</li>\n<li> Test 8.1.3 : Pour chaque page Web possédant une déclaration de <a href="#type-de-document">type de document</a>, celle-ci est-elle située avant la balise <code lang="en" xml:lang="en">html</code> dans le code source ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-parses" title="4.1.1, nouvelle fenêtre" target="_blank">4.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G134.html" title="G134, nouvelle fenêtre" target="_blank">G134</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G192.html" title="G192, nouvelle fenêtre" target="_blank">G192</a></p>\n\n\n'},{id:"8.2",level:"[A]",text:"Pour chaque page Web, le code source est-il valide selon le type de document spécifié hors cas particuliers ?",description:'\n \n\n\n <ul><li> Test 8.2.1 : Pour chaque déclaration de <a href="#type-de-document">type de document</a>, le code source de la page vérifie-t-il ces conditions ?\n\n<ul><li> Les balises respectent les règles d'écriture</li>\n<li> L'imbrication des balises est conforme</li>\n<li> L'ouverture et la fermeture des balises sont conformes</li>\n<li> Les attributs respectent les règles d'écriture</li>\n<li> Les valeurs des attributs respectent les règles d'écriture</li>\n</ul></li>\n<li> Test 8.2.2 : Pour chaque déclaration de <a href="#type-de-document">type de document</a>, le code source de la page ne doit pas utiliser d'éléments obsolètes. Cette règle est-elle respectée <a href="#critre-82">hors cas particuliers</a> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-parses" title="4.1.1, nouvelle fenêtre" target="_blank">4.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G134.html" title="G134, nouvelle fenêtre" target="_blank">G134</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G192.html" title="G192, nouvelle fenêtre" target="_blank">G192</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H74.html" title="H74, nouvelle fenêtre" target="_blank">H74</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H75.html" title="H75, nouvelle fenêtre" target="_blank">H75</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H88.html" title="H88, nouvelle fenêtre" target="_blank">H88</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H93.html" title="H93, nouvelle fenêtre" target="_blank">H93</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H94.html" title="H94, nouvelle fenêtre" target="_blank">H94</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F70.html" title="F70, nouvelle fenêtre" target="_blank">F70</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F77.html" title="F77, nouvelle fenêtre" target="_blank">F77</a> - <a href="http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/F62.html" title="F62, nouvelle fenêtre" target="_blank">F62</a></p>\n\n\n'},{id:"8.3",level:"[A]",text:"Dans chaque page Web, la langue par défaut est-elle présente ?",description:'\n \n\n\n <ul><li> Test 8.3.1 : Pour chaque page Web, l'indication de <a href="#langue-par-dfaut">langue par défaut</a> vérifie-t-elle une de ces conditions ?\n\n<ul><li> L'indication de la langue de la page (attribut <code lang="en" xml:lang="en">lang</code> et/ou <code lang="en" xml:lang="en">xml:lang</code>) est donnée pour l'élément <code lang="en" xml:lang="en">html</code></li>\n<li> L'indication de la langue de la page (attribut <code lang="en" xml:lang="en">lang</code> et/ou <code lang="en" xml:lang="en">xml:lang</code>) est donnée sur chaque élément de texte ou sur l'un des éléments parents</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-doc-lang-id" title="3.1.1, nouvelle fenêtre" target="_blank">3.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H57.html" title="H57, nouvelle fenêtre" target="_blank">H57</a></p>\n\n\n'},{id:"8.4",level:"[A]",text:"Pour chaque page Web ayant une langue par défaut, le code de langue est-il pertinent ?",description:'\n \n\n\n <ul><li> Test 8.4.1 : Pour chaque page Web ayant une <a href="#langue-par-dfaut">langue par défaut</a>, le <a href="#code-de-langue">code de langue</a> vérifie-t-il ces conditions ?\n\n<ul><li> Le <a href="#code-de-langue">code de langue</a> est valide</li>\n<li> Le <a href="#code-de-langue">code de langue</a> est pertinent</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-doc-lang-id" title="3.1.1, nouvelle fenêtre" target="_blank">3.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H57.html" title="H57, nouvelle fenêtre" target="_blank">H57</a></p>\n\n\n'},{id:"8.5",level:"[A]",text:"Chaque page Web a-t-elle un titre de page ?",description:'\n \n\n\n <ul><li> Test 8.5.1 : Chaque page Web a-t-elle un <a href="#titrePage">titre de page</a> (balise <code lang="en" xml:lang="en">title</code>) ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-title" title="2.4.2, nouvelle fenêtre" target="_blank">2.4.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G88.html" title="G88, nouvelle fenêtre" target="_blank">G88</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G127.html" title="G127, nouvelle fenêtre" target="_blank">G127</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H25.html" title="H25, nouvelle fenêtre" target="_blank">H25</a></p>\n\n\n'},{id:"8.6",level:"[A]",text:"Pour chaque page Web ayant un titre de page, ce titre est-il pertinent ?",description:'\n \n\n\n <ul><li> Test 8.6.1 : Pour chaque page Web ayant un <a href="#titrePage">titre de page</a> (balise <code lang="en" xml:lang="en">title</code>), le contenu de cette balise est-il pertinent ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-title" title="2.4.2, nouvelle fenêtre" target="_blank">2.4.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G88.html" title="G88, nouvelle fenêtre" target="_blank">G88</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G127.html" title="G127, nouvelle fenêtre" target="_blank">G127</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F25.html" title="F25, nouvelle fenêtre" target="_blank">F25</a></p>\n\n\n'},{id:"8.7",level:"[AA]",text:"Dans chaque page Web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 8.7.1 : Dans chaque page Web, chaque texte écrit dans une langue différente de la <a href="#langue-par-dfaut">langue par défaut</a> vérifie-t-il une de ces conditions (<a href="#critre-87" title="Cas particuliers pour le critère 8.7">hors cas particuliers</a>) ?\n\n<ul><li> L'indication de langue est donnée sur l'élément contenant le texte</li>\n<li> L'indication de langue est donnée sur un des éléments parents</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-other-lang-id" title="3.1.2, nouvelle fenêtre" target="_blank">3.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H58.html" title="H58, nouvelle fenêtre" target="_blank">H58</a></p>\n\n\n'},{id:"8.8",level:"[AA]",text:"Dans chaque page Web, chaque changement de langue est-il pertinent ?",description:'\n \n\n\n <ul><li> Test 8.8.1 : Dans chaque page Web, chaque changement de langue (attribut <code lang="en" xml:lang="en">lang</code> et/ou <code lang="en" xml:lang="en">xml:lang</code>) est-il valide ?</li>\n<li> Test 8.8.2 : Dans chaque page Web, chaque changement de langue (attribut <code lang="en" xml:lang="en">lang</code> et/ou <code lang="en" xml:lang="en">xml:lang</code>) est-il pertinent ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-other-lang-id" title="3.1.2, nouvelle fenêtre" target="_blank">3.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H58.html" title="H58, nouvelle fenêtre" target="_blank">H58</a></p>\n\n\n'},{id:"8.9",level:"[A]",text:"Dans chaque page Web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?",description:'\n \n\n\n <ul><li> Test 8.9.1 : Dans chaque page Web les balises (à l'exception de <code lang="en" xml:lang="en">div</code>, <code lang="en" xml:lang="en">span</code> et <code lang="en" xml:lang="en">table</code>) ne doivent pas être utilisées <a href="#uniquement--des-fins-de-prsentation">uniquement à des fins de présentation</a>. Cette règle est-elle respectée ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G115.html" title="G115, nouvelle fenêtre" target="_blank">G115</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H88.html" title="H88, nouvelle fenêtre" target="_blank">H88</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F43.html" title="F43, nouvelle fenêtre" target="_blank">F43</a> - <a href="http://www.w3.org/TR/WCAG20-TECHS/F92.html" title="F92, nouvelle fenêtre" target="_blank">F92</a></p>\n\n\n'},{id:"8.10",level:"[A]",text:"Dans chaque page Web, les changements du sens de lecture sont-ils signalés ?",description:'\n \n\n\n <ul><li> Test 8.10.1 : Dans chaque page Web, chaque texte dont le sens de lecture est différent du <a href="#sens-de-lecture">sens de lecture</a> par défaut vérifie-t-il ces conditions ?\n\n<ul><li> Le texte est contenu dans une balise possédant un attribut <code lang="en" xml:lang="en">dir</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">dir</code> est conforme (<code lang="en" xml:lang="en">rtl</code> ou <code lang="en" xml:lang="en">ltr</code>)</li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">dir</code> est pertinente</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-sequence" title="1.3.2, nouvelle fenêtre" target="_blank">1.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H56.html" title="H56, nouvelle fenêtre" target="_blank">H56</a></p>\n\n\n'}]},{title:"9. Structuration de l'information",rules:[{id:"9.1",level:"[A]",text:"Dans chaque page Web, l'information est-elle structurée par l'utilisation appropriée de titres ?",description:'\n \n\n\n <p><strong>Correspondances WCAG 2.0</strong></p>\n\n<ul><li> Test 9.1.1 : Dans chaque page Web, y a-t-il un <a href="#titre">titre</a> de niveau 1 (balise <code lang="en" xml:lang="en">h1</code> ou balise possédant un role ARIA <code lang="en" xml:lang="en">"heading"</code> associé à une propriété <code lang="en" xml:lang="en">aria-level="1"</code>) ?</li>\n<li> Test 9.1.2 : Dans chaque page Web, la hiérarchie entre les <a href="#titre">titres</a> (balises <code lang="en" xml:lang="en">h</code> ou balise possédant un role ARIA <code lang="en" xml:lang="en">"heading"</code> associé à une propriété <code lang="en" xml:lang="en">aria-level</code>) est-elle pertinente ?</li>\n<li> Test 9.1.3 : Dans chaque page Web, chaque <a href="#titre">titre</a> (balise <code lang="en" xml:lang="en">h</code> ou balise possédant un role ARIA <code lang="en" xml:lang="en">"heading"</code> associé à une propriété <code lang="en" xml:lang="en">aria-level</code>) nécessaire à la structure de l'information est-il présent ?</li>\n<li> Test 9.1.4 : Dans chaque page Web, chaque <a href="#titre">titre</a> (balise <code lang="en" xml:lang="en">h</code> ou balise possédant un role ARIA <code lang="en" xml:lang="en">"heading"</code> associé à une propriété <code lang="en" xml:lang="en">aria-level</code>) est-il pertinent ?</li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-91-a">Consulter la note technique au sujet du role ARIA <code lang="en" xml:lang="en">heading</code> et l'utilisation des titres <code lang="en" xml:lang="en">h1</code></a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-skip" title="2.4.1, nouvelle fenêtre" target="_blank">2.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-descriptive" title="2.4.6, nouvelle fenêtre" target="_blank">2.4.6</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-headings" title="2.4.10, nouvelle fenêtre" target="_blank">2.4.10</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H69.html" title="H69, nouvelle fenêtre" target="_blank">H69</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G115.html" title="G115, nouvelle fenêtre" target="_blank">G115</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G130.html" title="G130, nouvelle fenêtre" target="_blank">G130</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H42.html" title="H42, nouvelle fenêtre" target="_blank">H42</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G141.html" title="G141, nouvelle fenêtre" target="_blank">G141</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA4.html" title="ARIA4, nouvelle fenêtre" target="_blank">ARIA4</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA12.html" title="ARIA12, nouvelle fenêtre" target="_blank">ARIA12</a></p>\n\n\n'},{id:"9.2",level:"[A]",text:"Dans chaque page Web, la structure du document est-elle cohérente ?",description:'\n \n\n\n <ul><li> Test 9.2.1 : Dans chaque page Web, la structure du document vérifie-t-elle ces conditions ?\n\n<ul><li> La <a href="#zone-dune-image-ractiveHeader">zone d'en-tête de la page</a> est structurée via une balise <code lang="en" xml:lang="en">header</code></li>\n<li> Les <a href="#menu-de-navigation">zones de navigation principales et secondaires</a> sont structurées via une balise <code lang="en" xml:lang="en">nav</code></li>\n<li> La balise <code lang="en" xml:lang="en">nav</code> est réservée à la structuration des zones de navigations principales et secondaires</li>\n<li> La <a href="#zone-dune-image-ractiveMain">zone de contenu principal</a> est structurée via une balise <code lang="en" xml:lang="en">main</code></li>\n<li> La structure du document utilise une balise <code lang="en" xml:lang="en">main</code> unique</li>\n<li> La <a href="#zone-dune-image-ractiveFooter">zone de pied de page</a> est structurée via une balise <code lang="en" xml:lang="en">footer</code></li>\n</ul></li>\n<li> Test 9.2.2 : Dans chaque page Web, <a href="#arborescence-du-document">l'arborescence du document</a> est-elle cohérente ?</li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-92-a">Consulter la note technique au sujet de la structure du document et de l'<code lang="en" xml:lang="en">outline</code></a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G115.html" title="G115, nouvelle fenêtre" target="_blank">G115</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA11.html" title="ARIA11, nouvelle fenêtre" target="_blank">ARIA11</a></p>\n\n\n'},{id:"9.3",level:"[A]",text:"Dans chaque page Web, chaque liste est-elle correctement structurée ?",description:'\n \n\n\n <ul><li> Test 9.3.1 : Dans chaque page Web, les informations regroupées sous forme de listes non ordonnées vérifient-elles une de ces conditions ?\n\n<ul><li> La liste utilise les balises HTML <code lang="en" xml:lang="en">ul</code> et <code lang="en" xml:lang="en">li</code></li>\n<li> La liste utilise les roles ARIA <code lang="en" xml:lang="en">list</code> et <code lang="en" xml:lang="en">listitem</code></li>\n</ul></li>\n<li> Test 9.3.2 : Dans chaque page Web, les informations regroupées sous forme de listes ordonnées vérifient-elles une de ces conditions ?\n\n<ul><li> La liste utilise les balises HTML <code lang="en" xml:lang="en">ol</code> et <code lang="en" xml:lang="en">li</code></li>\n<li> La liste utilise les roles ARIA <code lang="en" xml:lang="en">list</code> et <code lang="en" xml:lang="en">listitem</code></li>\n</ul></li>\n<li> Test 9.3.3 : Dans chaque page Web, les informations regroupées sous forme de listes de définitions utilisent-elles les balises <code lang="en" xml:lang="en">dl</code> et <code lang="en" xml:lang="en">dt</code>/<code lang="en" xml:lang="en">dd</code> ?</li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-93-a">Consulter la note technique au sujet des roles <code lang="en" xml:lang="en">list</code> et <code lang="en" xml:lang="en">listitem</code></a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G153.html" title="G153, nouvelle fenêtre" target="_blank">G153</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G115.html" title="G115, nouvelle fenêtre" target="_blank">G115</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H40.html" title="H40, nouvelle fenêtre" target="_blank">H40</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H48.html" title="H48, nouvelle fenêtre" target="_blank">H48</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H97.html" title="H97, nouvelle fenêtre" target="_blank">H97</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F2.html" title="F2, nouvelle fenêtre" target="_blank">F2</a></p>\n\n\n'},{id:"9.4",level:"[AAA]",text:"Dans chaque page Web, la première occurrence de chaque abréviation permet-elle d'en connaître la signification ?",description:'\n \n\n\n <ul><li> Test 9.4.1 : Dans chaque page Web, la première occurrence de chaque abréviation vérifie-t-elle une de ces conditions ?\n\n<ul><li> L'abréviation est accompagnée de sa signification sous forme d'un texte adjacent</li>\n<li> L'abréviation est implémentée via un lien référençant une page ou un emplacement dans la page qui permet d'en connaître la signification</li>\n<li> L'abréviation fait partie d'un lien possédant un attribut <code lang="en" xml:lang="en">title</code> qui permet d'en connaître la signification</li>\n<li> La signification de l'abréviation est présente dans un glossaire présent sur le site</li>\n<li> L'abréviation est implémentée via une balise <code lang="en" xml:lang="en">abbr</code> possédant un attribut <code lang="en" xml:lang="en">title</code> qui permet d'en connaître la signification</li>\n</ul></li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-94-aaa">Consulter la note technique au sujet du role ARIA <code lang="en" xml:lang="en">definition</code></a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-located" title="3.1.4, nouvelle fenêtre" target="_blank">3.1.4</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G55.html" title="G55, nouvelle fenêtre" target="_blank">G55</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G70.html" title="G70, nouvelle fenêtre" target="_blank">G70</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G97.html" title="G97, nouvelle fenêtre" target="_blank">G97</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G102.html" title="G102, nouvelle fenêtre" target="_blank">G102</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H28.html" title="H28, nouvelle fenêtre" target="_blank">H28</a></p>\n\n\n'},{id:"9.5",level:"[AAA]",text:"Dans chaque page Web, la signification de chaque abréviation est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 9.5.1 : Dans chaque page Web, la signification de chaque abréviation est-elle pertinente ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-located" title="3.1.4, nouvelle fenêtre" target="_blank">3.1.4</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G55.html" title="G55, nouvelle fenêtre" target="_blank">G55</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G70.html" title="G70, nouvelle fenêtre" target="_blank">G70</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G97.html" title="G97, nouvelle fenêtre" target="_blank">G97</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G102.html" title="G102, nouvelle fenêtre" target="_blank">G102</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H28.html" title="H28, nouvelle fenêtre" target="_blank">H28</a></p>\n\n\n'},{id:"9.6",level:"[A]",text:"Dans chaque page Web, chaque citation est-elle correctement indiquée ?",description:'\n \n\n\n <ul><li> Test 9.6.1 : Dans chaque page Web, chaque citation courte utilise-t-elle une balise <code lang="en" xml:lang="en">q</code> ?</li>\n<li> Test 9.6.2 : Dans chaque page Web, chaque bloc de citation utilise-t-il une balise <code lang="en" xml:lang="en">blockquote</code> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G115.html" title="G115, nouvelle fenêtre" target="_blank">G115</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H49.html" title="H49, nouvelle fenêtre" target="_blank">H49</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F2.html" title="F2, nouvelle fenêtre" target="_blank">F2</a></p>\n\n\n'}]},{title:"10. Présentation de l'information",rules:[{id:"10.1",level:"[A]",text:"Dans le site Web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l'information ?",description:'\n \n\n\n <ul><li> Test 10.1.1 : Dans chaque page Web, les balises servant à la <a href="#prsentation-de-linformation">présentation de l'information</a> ne doivent pas être présentes dans le code source des pages. Cette règle est-elle respectée ?</li>\n<li> Test 10.1.2 : Dans chaque page Web, les attributs servant à la <a href="#prsentation-de-linformation">présentation de l'information</a> ne doivent pas être présents dans le code source des pages. Cette règle est-elle respectée ?</li>\n<li> Test 10.1.3 : Dans chaque page Web, l'utilisation des espaces vérifie-t-elle ces conditions ?\n\n<ul><li> Les espaces ne sont pas utilisés pour séparer les lettres d'un mot</li>\n<li> Les espaces ne sont pas utilisés pour simuler des tableaux</li>\n<li> Les espaces ne sont pas utilisés pour simuler des colonnes de texte</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-sequence" title="1.3.2, nouvelle fenêtre" target="_blank">1.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G140.html" title="G140, nouvelle fenêtre" target="_blank">G140</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F32.html" title="F32, nouvelle fenêtre" target="_blank">F32</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F33.html" title="F33, nouvelle fenêtre" target="_blank">F33</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F34.html" title="F34, nouvelle fenêtre" target="_blank">F34</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C6.html" title="C6, nouvelle fenêtre" target="_blank">C6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C8.html" title="C8, nouvelle fenêtre" target="_blank">C8</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C18.html" title="C18, nouvelle fenêtre" target="_blank">C18</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C22.html" title="C22, nouvelle fenêtre" target="_blank">C22</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F48.html" title="F48, nouvelle fenêtre" target="_blank">F48</a></p>\n\n\n'},{id:"10.2",level:"[A]",text:"Dans chaque page Web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?",description:'\n \n\n\n <ul><li> Test 10.2.1 : Dans chaque page Web, l'information reste-t-elle présente lorsque les <a href="#feuille-de-style">feuilles de styles</a> sont désactivées ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G140.html" title="G140, nouvelle fenêtre" target="_blank">G140</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F3.html" title="F3, nouvelle fenêtre" target="_blank">F3</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F87.html" title="F87, nouvelle fenêtre" target="_blank">F87</a></p>\n\n\n'},{id:"10.3",level:"[A]",text:"Dans chaque page Web, l'information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?",description:'\n \n\n\n <ul><li> Test 10.3.1 : Dans chaque page Web, l'information reste-t-elle <a href="#comprhensible-ordre-de-lecture">compréhensible</a> lorsque les <a href="#feuille-de-style">feuilles de styles</a> sont désactivées ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G140.html" title="G140, nouvelle fenêtre" target="_blank">G140</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-sequence" title="1.3.2, nouvelle fenêtre" target="_blank">1.3.2</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-focus-order" title="2.4.3, nouvelle fenêtre" target="_blank">2.4.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F1.html" title="F1, nouvelle fenêtre" target="_blank">F1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G59.html" title="G59, nouvelle fenêtre" target="_blank">G59</a></p>\n\n\n'},{id:"10.4",level:"[AA]",text:"Dans chaque page Web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200%, au moins ?",description:'\n \n\n\n <ul><li> Test 10.4.1 : Dans les <a href="#feuille-de-style">feuilles de styles</a> du <a href="#site-web--ensemble-de-toutes-les-pages-web">site Web</a>, les unités non relatives (<code lang="en" xml:lang="en">pt</code>, <code lang="en" xml:lang="en">pc</code>, <code lang="en" xml:lang="en">mm</code>, <code lang="en" xml:lang="en">cm</code>, <code lang="en" xml:lang="en">in</code>) ne doivent pas être utilisées pour les types de média <code lang="en" xml:lang="en">screen</code>, <code lang="en" xml:lang="en">tv</code>, <code lang="en" xml:lang="en">handheld</code>, <code lang="en" xml:lang="en">projection</code>. Cette règle est-elle respectée ?</li>\n<li> Test 10.4.2 : Dans les <a href="#feuille-de-style">feuilles de styles</a> du <a href="#site-web--ensemble-de-toutes-les-pages-web">site Web</a>, pour les types de média <code lang="en" xml:lang="en">screen</code>, <code lang="en" xml:lang="en">tv</code>, <code lang="en" xml:lang="en">handheld</code>, <code lang="en" xml:lang="en">projection</code>, les tailles de caractères utilisent-elles uniquement des <a href="#taille-des-caractres">unités relatives</a> ?</li>\n<li> Test 10.4.3 : Dans chaque page Web, l'augmentation de la <a href="#taille-des-caractres">taille des caractères</a> jusqu'à 200%, au moins, ne doit pas provoquer de perte d'information. Cette règle est-elle respectée ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-scale" title="1.4.4, nouvelle fenêtre" target="_blank">1.4.4</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G146.html" title="G146, nouvelle fenêtre" target="_blank">G146</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F80.html" title="F80, nouvelle fenêtre" target="_blank">F80</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F69.html" title="F69, nouvelle fenêtre" target="_blank">F69</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C14.html" title="C14, nouvelle fenêtre" target="_blank">C14</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C12.html" title="C12, nouvelle fenêtre" target="_blank">C12</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C13.html" title="C13, nouvelle fenêtre" target="_blank">C13</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C17.html" title="C17, nouvelle fenêtre" target="_blank">C17</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C28.html" title="C28, nouvelle fenêtre" target="_blank">C28</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G179.html" title="G179, nouvelle fenêtre" target="_blank">G179</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR34.html" title="SCR34, nouvelle fenêtre" target="_blank">SCR34</a></p>\n\n\n'},{id:"10.5",level:"[AA]",text:"Dans chaque page Web, les déclarations CSS de couleurs de fond d'élément et de police sont-elles correctement utilisées?",description:'\n \n\n\n <ul><li> Test 10.5.1 : Dans chaque page Web, chaque déclaration CSS de couleurs de police (<code lang="en" xml:lang="en">color</code>), d'un élément susceptible de contenir du texte, est-elle accompagnée d'une déclaration de couleur de fond (<code lang="en" xml:lang="en">background</code>, <code lang="en" xml:lang="en">background-color</code>), au moins, héritée d'un parent ?</li>\n<li> Test 10.5.2 : Dans chaque page Web, chaque déclaration de couleur de fond (<code lang="en" xml:lang="en">background</code>, <code lang="en" xml:lang="en">background-color</code>), d'un élément susceptible de contenir du texte, est-elle accompagnée d'une déclaration de couleur de police (<code lang="en" xml:lang="en">color</code>) au moins, héritée d'un parent ?</li>\n<li> Test 10.5.3 : Dans chaque page Web, chaque utilisation d'une image pour créer une couleur de fond d'un élément susceptible de contenir du texte, via CSS (<code lang="en" xml:lang="en">background</code>, <code lang="en" xml:lang="en">background-image</code>), est-elle accompagnée d'une déclaration de couleur de fond (<code lang="en" xml:lang="en">background</code>, <code lang="en" xml:lang="en">background-color</code>), au moins, héritée d'un parent ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-contrast" title="1.4.3, nouvelle fenêtre" target="_blank">1.4.3</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast7" title="1.4.6, nouvelle fenêtre" target="_blank">1.4.6</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-visual-presentation" title="1.4.8, nouvelle fenêtre" target="_blank">1.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F24.html" title="F24, nouvelle fenêtre" target="_blank">F24</a></p>\n\n\n'},{id:"10.6",level:"[A]",text:"Dans chaque page Web, chaque lien dont la nature n'est pas évidente est-il visible par rapport au texte environnant ?",description:'\n \n\n\n <ul><li> Test 10.6.1 : Dans chaque page Web, chaque <a href="#lien-image">lien texte</a> signalé uniquement par la couleur et dont la nature n'est pas évidente a-t-il un rapport de contraste supérieur ou égal à 3:1 par rapport au texte environnant ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-without-color" title="1.4.1, nouvelle fenêtre" target="_blank">1.4.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G183.html" title="G183, nouvelle fenêtre" target="_blank">G183</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F73.html" title="F73, nouvelle fenêtre" target="_blank">F73</a></p>\n\n\n'},{id:"10.7",level:"[A]",text:"Dans chaque page Web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?",description:'\n \n\n\n <ul><li> Test 10.7.1 : Pour chaque élément recevant le <code lang="en" xml:lang="en">focus</code>, l'indication visuelle du navigateur ne doit pas être supprimée (propriété CSS <code lang="en" xml:lang="en">outline</code>, <code lang="en" xml:lang="en">outline-color</code>, <code lang="en" xml:lang="en">outline-width</code>, <code lang="en" xml:lang="en">outline-style</code>). Cette règle est-elle respectée ?</li>\n<li> Test 10.7.2 : Pour chaque élément recevant le <code lang="en" xml:lang="en">focus</code>, l'indication visuelle du navigateur ne doit pas être dégradée (propriété CSS <code lang="en" xml:lang="en">outline-color</code>). Cette règle est-elle respectée ?</li>\n<li> Test 10.7.3 : Chaque lien dans un texte signalé par la couleur uniquement vérifie-t-il ces conditions ?\n\n<ul><li> Une indication visuelle autre que la couleur permet de signaler la <a href="#prise-de-focus">prise de <code lang="en" xml:lang="en">focus</code></a> au clavier.</li>\n<li> Une indication visuelle autre que la couleur permet de signaler le survol du lien à la souris.</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-without-color" title="1.4.1, nouvelle fenêtre" target="_blank">1.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-focus-visible" title="2.4.7, nouvelle fenêtre" target="_blank">2.4.7</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G149.html" title="G149, nouvelle fenêtre" target="_blank">G149</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G183.html" title="G183, nouvelle fenêtre" target="_blank">G183</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F73.html" title="F73, nouvelle fenêtre" target="_blank">F73</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F78.html" title="F78, nouvelle fenêtre" target="_blank">F78</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G165.html" title="G165, nouvelle fenêtre" target="_blank">G165</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C15.html" title="C15, nouvelle fenêtre" target="_blank">C15</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G195.html" title="G195, nouvelle fenêtre" target="_blank">G195</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR31.html" title="SCR31, nouvelle fenêtre" target="_blank">SCR31</a></p>\n\n\n'},{id:"10.8",level:"[AAA]",text:"Dans chaque page Web, le choix de la couleur de fond et de police du texte est-il contrôlable par l'utilisateur ?",description:'\n \n\n\n <ul><li> Test 10.8.1 : Pour chaque bloc de texte contenu dans une balise HTML, la couleur de fond est-elle contrôlable par l'utilisateur ?</li>\n<li> Test 10.8.2 : Pour chaque bloc de texte contenu dans une balise HTML, la couleur de police est-elle contrôlable par l'utilisateur ?</li>\n<li> Test 10.8.3 : Pour chaque bloc de texte contenu dans une balise <code lang="en" xml:lang="en">object</code>, <code lang="en" xml:lang="en">embed</code>, <code lang="en" xml:lang="en">svg</code> ou <code lang="en" xml:lang="en">canvas</code>, la couleur de fond est-elle contrôlable par l'utilisateur ?</li>\n<li> Test 10.8.4 : Pour chaque bloc de texte contenu dans une balise <code lang="en" xml:lang="en">object</code>, <code lang="en" xml:lang="en">embed</code>, <code lang="en" xml:lang="en">svg</code> ou <code lang="en" xml:lang="en">canvas</code>, la couleur de police est-elle contrôlable par l'utilisateur ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-visual-presentation" title="1.4.8, nouvelle fenêtre" target="_blank">1.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G156.html" title="G156, nouvelle fenêtre" target="_blank">G156</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G175.html" title="G175, nouvelle fenêtre" target="_blank">G175</a></p>\n\n\n'},{id:"10.9",level:"[AAA]",text:"Pour chaque page Web, le texte ne doit pas être justifié. Cette règle est-elle respectée ?",description:'\n \n\n\n <ul><li> Test 10.9.1 : Chaque page Web vérifie-t-elle une de ces conditions ?\n\n<ul><li> Le texte n'est pas justifié</li>\n<li> Un mécanisme permet à l'utilisateur de supprimer la justification du texte</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-visual-presentation" title="1.4.8, nouvelle fenêtre" target="_blank">1.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F88.html" title="F88, nouvelle fenêtre" target="_blank">F88</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G166.html" title="G166, nouvelle fenêtre" target="_blank">G166</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G172.html" title="G172, nouvelle fenêtre" target="_blank">G172</a></p>\n\n\n'},{id:"10.10",level:"[AAA]",text:"Pour chaque page Web, en affichage plein écran et avec une taille de police à 200%, chaque bloc de texte reste-t-il lisible sans l'utilisation de la barre de défilement horizontal ?",description:'\n \n\n\n <ul><li> Test 10.10.1 : Dans chaque page Web, l'augmentation de la <a href="#taille-des-caractres">taille des caractères</a> à 200% vérifie-t-elle une de ces conditions ?\n\n<ul><li> En affichage plein écran, pour lire un bloc de texte, l'utilisation de la barre de défilement horizontal n'est pas nécessaire</li>\n<li> Un mécanisme permet de rendre inutile l'utilisation de la barre de défilement horizontal pour lire un bloc de texte en affichage plein écran</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-visual-presentation" title="1.4.8, nouvelle fenêtre" target="_blank">1.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G146.html" title="G146, nouvelle fenêtre" target="_blank">G146</a> - <a href="http://www.w3.org/TR/WCAG20-TECHS/G206.html" title="G206, nouvelle fenêtre" target="_blank">G206</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C19.html" title="C19, nouvelle fenêtre" target="_blank">C19</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C24.html" title="C24, nouvelle fenêtre" target="_blank">C24</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C28.html" title="C28, nouvelle fenêtre" target="_blank">C28</a></p>\n\n\n'},{id:"10.11",level:"[AAA]",text:"Pour chaque page Web, les blocs de texte ont-ils une largeur inférieure ou égale à 80 caractères (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 10.11.1 : Pour chaque page Web, chaque bloc de texte vérifie-t-il une de ces conditions (<a href="#critre-1011" title="Cas particuliers pour le critère 10.11">hors cas particuliers</a>) ?\n\n<ul><li> Chaque bloc de texte a une largeur inférieure ou égale à 80 caractères</li>\n<li> L'utilisateur peut réduire la largeur de chaque bloc de texte à 80 caractères en redimensionnant la fenêtre de son navigateur</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-visual-presentation" title="1.4.8, nouvelle fenêtre" target="_blank">1.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG20-TECHS/G204.html" title="G204, nouvelle fenêtre" target="_blank">G204</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C20.html" title="C20, nouvelle fenêtre" target="_blank">C20</a></p>\n\n\n'},{id:"10.12",level:"[AAA]",text:"Pour chaque page Web, l'espace entre les lignes et les paragraphes est-il suffisant ?",description:'\n \n\n\n <ul><li> Test 10.12.1 : Pour chaque page Web, chaque bloc de texte vérifie-t-il une de ces conditions ?\n\n<ul><li> La valeur de l'interligne est égale à 1,5 fois la taille du texte, au moins</li>\n<li> Un mécanisme permet d'augmenter la valeur de l'interligne à 1,5 fois la taille du texte, au moins</li>\n</ul></li>\n<li> Test 10.12.2 : Pour chaque page Web, chaque bloc de texte vérifie-t-il une de ces conditions ?\n\n<ul><li> La valeur de l'espacement entre deux paragraphes est égale à 1,5 fois la valeur de l'interligne, au moins</li>\n<li> Un mécanisme permet d'augmenter la valeur de l'espacement entre deux paragraphes à 1,5 fois la valeur de l'interligne, au moins</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-visual-presentation" title="1.4.8, nouvelle fenêtre" target="_blank">1.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G188.html" title="G188, nouvelle fenêtre" target="_blank">G188</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C21.html" title="C21, nouvelle fenêtre" target="_blank">C21</a></p>\n\n\n'},{id:"10.13",level:"[A]",text:"Pour chaque page Web, les textes cachés sont-ils correctement affichés pour être restitués par les technologies d'assistance ?",description:'\n \n\n\n <ul><li> Test 10.13.1 : Dans chaque page Web, chaque <a href="#texte-cach">texte caché</a> vérifie-t-il une de ces conditions ?\n\n<ul><li> Le texte n'a pas vocation à être restitué par les technologies d'assistance</li>\n<li> Le texte est rendu visible sur action de l'utilisateur sur l'élément lui-même ou un élément précédant le <a href="#texte-cach">texte caché</a></li>\n<li> Le texte caché fait partie d'un composant d'interface piloté par l'API ARIA, prenant en charge l'état affiché ou masqué du contenu.</li>\n</ul></li>\n<li> Test 10.13.2 : Dans chaque page Web, chaque <a href="#texte-cach">texte caché</a> qui utilise une propriété ARIA <code lang="en" xml:lang="en">aria-hidden</code> vérifie-t-il une de ces conditions ?\n\n<ul><li> Le texte n'a pas vocation à être restitué par les technologies d'assistance</li>\n<li> La valeur de la propriété ARIA <code lang="en" xml:lang="en">aria-hidden</code> est cohérente avec l'état visible ou caché du texte</li>\n</ul></li>\n<li> Test 10.13.3 : Dans chaque page Web, chaque <a href="#texte-cach">texte caché</a> qui utilise un attribut <code lang="en" xml:lang="en">hidden</code> vérifie-t-il une de ces conditions ?\n\n<ul><li> Le texte n'a pas vocation à être restitué par les technologies d'assistance</li>\n<li> Le texte est rendu visible sur action de l'utilisateur sur l'élément lui-même ou un élément précédent le texte caché</li>\n<li> Le texte caché fait partie d'un composant d'interface piloté par l'API ARIA, prenant en charge l'état affiché ou masqué du contenu.</li>\n</ul></li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-1013-a">Consulter la note technique au sujet de la propriété <code lang="en" xml:lang="en">aria-hidden</code> et de l'attribut <code lang="en" xml:lang="en">hidden</code></a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-sequence" title="1.3.2, nouvelle fenêtre" target="_blank">1.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG20-TECHS/G57.html" title="G57, nouvelle fenêtre" target="_blank">G57</a></p>\n\n\n'},{id:"10.14",level:"[A]",text:"Dans chaque page Web, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?",description:'\n \n\n\n <ul><li> Test 10.14.1 : Dans chaque page Web, pour chaque texte ou ensemble de texte, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?</li>\n<li> Test 10.14.2 : Dans chaque page Web, pour chaque image ou ensemble d'image, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?</li>\n<li> Test 10.14.3 : Dans chaque page Web, pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a>, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?</li>\n<li> Test 10.14.4 : Dans chaque page Web, pour chaque <a href="#mdia-non-temporel">média non temporel</a>, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-without-color" title="1.4.1, nouvelle fenêtre" target="_blank">1.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-understanding" title="1.3.3, nouvelle fenêtre" target="_blank">1.3.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G96.html" title="G96, nouvelle fenêtre" target="_blank">G96</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G111.html" title="G111, nouvelle fenêtre" target="_blank">G111</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G140.html" title="G140, nouvelle fenêtre" target="_blank">G140</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F14.html" title="F14, nouvelle fenêtre" target="_blank">F14</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F26.html" title="F26, nouvelle fenêtre" target="_blank">F26</a></p>\n\n\n'},{id:"10.15",level:"[A]",text:"Dans chaque page Web, l'information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ?",description:'\n \n\n\n <ul><li> Test 10.15.1 : Dans chaque page Web, pour chaque texte ou ensemble de textes, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle implémentée de façon pertinente ?</li>\n<li> Test 10.15.2 : Dans chaque page Web, pour chaque image ou ensemble d'images, l'information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ?</li>\n<li> Test 10.15.3 : Dans chaque page Web, pour chaque <a href="#mdia-temporel-type-son-vido-et-synchronis">média temporel</a>, l'information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ?</li>\n<li> Test 10.15.4 : Dans chaque page Web, pour chaque <a href="#mdia-non-temporel">média non temporel</a>, l'information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-without-color" title="1.4.1, nouvelle fenêtre" target="_blank">1.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-understanding" title="1.3.3, nouvelle fenêtre" target="_blank">1.3.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G96.html" title="G96, nouvelle fenêtre" target="_blank">G96</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G111.html" title="G111, nouvelle fenêtre" target="_blank">G111</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G140.html" title="G140, nouvelle fenêtre" target="_blank">G140</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F14.html" title="F14, nouvelle fenêtre" target="_blank">F14</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F26.html" title="F26, nouvelle fenêtre" target="_blank">F26</a></p>\n\n\n'}]},{title:"11. Formulaires",rules:[{id:"11.1",level:"[A]",text:"Chaque champ de formulaire a-t-il une étiquette ?",description:'\n \n\n\n <ul><li> Test 11.1.1 : Chaque <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> vérifie-t-il une de ces conditions ?\n\n<ul><li> Le champ de formulaire possède un attribut <code lang="en" xml:lang="en">title</code></li>\n<li> Une <a href="#tiquette-de-champs-de-formulaire">étiquette</a> (balise <code lang="en" xml:lang="en">label</code>) est associée au champ de formulaire</li>\n<li> Le <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> possède une propriété <code lang="en" xml:lang="en">aria-label</code></li>\n<li> Le <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> possède une propriété <code lang="en" xml:lang="en">aria-labelledby</code> référençant un passage de texte identifié</li>\n</ul></li>\n<li> Test 11.1.2 : Chaque <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a>, associé à une <a href="#tiquette-de-champs-de-formulaire">étiquette</a> (balise <code lang="en" xml:lang="en">label</code>), vérifie-t-il ces conditions ?\n\n<ul><li> Le <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> possède un attribut <code lang="en" xml:lang="en">id</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">id</code> est unique</li>\n<li> La balise <code lang="en" xml:lang="en">label</code> possède un attribut <code lang="en" xml:lang="en">for</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">for</code> est égale à la valeur de l'attribut <code lang="en" xml:lang="en">id</code> du <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> associé</li>\n</ul></li>\n<li> Test 11.1.3 : Chaque <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> associé à une <a href="#tiquette-de-champs-de-formulaire">étiquette</a> via la propriété ARIA <code lang="en" xml:lang="en">aria-labelledby</code>, vérifie-t-il ces conditions ?\n\n<ul><li> l'<a href="#tiquette-de-champs-de-formulaire">étiquette</a> possède un attribut <code lang="en" xml:lang="en">id</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">id</code> est unique</li>\n<li> La valeur de la propriété ARIA <code lang="en" xml:lang="en">aria-labelledby</code> est égale à la valeur de l'attribut <code lang="en" xml:lang="en">id</code> de l'<a href="#tiquette-de-champs-de-formulaire">étiquette</a></li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-descriptive" title="2.4.6, nouvelle fenêtre" target="_blank">2.4.6</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-cues" title="3.3.2, nouvelle fenêtre" target="_blank">3.3.2</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H44.html" title="H44, nouvelle fenêtre" target="_blank">H44</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H65.html" title="H65, nouvelle fenêtre" target="_blank">H65</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G82.html" title="G82, nouvelle fenêtre" target="_blank">G82</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G131.html" title="G131, nouvelle fenêtre" target="_blank">G131</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA6.html" title="ARIA6, nouvelle fenêtre" target="_blank">ARIA6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA9.html" title="ARIA9, nouvelle fenêtre" target="_blank">ARIA9</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA16.html" title="ARIA16, nouvelle fenêtre" target="_blank">ARIA16</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA14.html" title="ARIA14, nouvelle fenêtre" target="_blank">ARIA14</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F17.html" title="F17, nouvelle fenêtre" target="_blank">F17</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F82.html" title="F82, nouvelle fenêtre" target="_blank">F82</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F86.html" title="F86, nouvelle fenêtre" target="_blank">F86</a> - <a href="http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/F68.html" title="F68, nouvelle fenêtre" target="_blank">F68</a></p>\n\n\n'},{id:"11.2",level:"[A]",text:"Chaque étiquette associée à un champ de formulaire est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 11.2.1 : Chaque <a href="#tiquette-de-champs-de-formulaire">étiquette</a> (balise <code lang="en" xml:lang="en">label</code>) permet-elle de connaître la fonction exacte du <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> auquel elle est associée ?</li>\n<li> Test 11.2.2 : Chaque attribut <code lang="en" xml:lang="en">title</code> permet-il de connaître la fonction exacte du <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> auquel il est associé ?</li>\n<li> Test 11.2.3 : Chaque <a href="#tiquette-de-champs-de-formulaire">étiquette</a> implémentée via la propriété ARIA <code lang="en" xml:lang="en">aria-label</code> permet-elle de connaître la fonction exacte du <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> auquel elle est associée ?</li>\n<li> Test 11.2.4 : Chaque <a href="#tiquette-de-champs-de-formulaire">étiquette</a> implémentée via la propriété ARIA <code lang="en" xml:lang="en">aria-labelledby</code> permet-elle de connaître la fonction exacte du <a href="#champ-de-saisie-de-formulaire">champ de formulaire</a> auquel elle est associée ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-descriptive" title="2.4.6, nouvelle fenêtre" target="_blank">2.4.6</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-cues" title="3.3.2, nouvelle fenêtre" target="_blank">3.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H44.html" title="H44, nouvelle fenêtre" target="_blank">H44</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H65.html" title="H65, nouvelle fenêtre" target="_blank">H65</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G182.html" title="G182, nouvelle fenêtre" target="_blank">G182</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G131.html" title="G131, nouvelle fenêtre" target="_blank">G131</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA6.html" title="ARIA6, nouvelle fenêtre" target="_blank">ARIA6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA9.html" title="ARIA9, nouvelle fenêtre" target="_blank">ARIA9</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA16.html" title="ARIA16, nouvelle fenêtre" target="_blank">ARIA16</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA14.html" title="ARIA14, nouvelle fenêtre" target="_blank">ARIA14</a></p>\n\n\n'},{id:"11.3",level:"[AA]",text:"Dans chaque formulaire, chaque étiquette associée à un champ de formulaire ayant la même fonction et répétée plusieurs fois dans une même page ou dans un ensemble de pages est-elle cohérente ?",description:'\n \n\n\n <ul><li> Test 11.3.1 : Chaque <a href="#tiquette-de-champs-de-formulaire">étiquette</a> associée à un champ de formulaire ayant la même fonction et répétée plusieurs fois dans une même page est-elle cohérente ?</li>\n<li> Test 11.3.2 : Chaque <a href="#tiquette-de-champs-de-formulaire">étiquette</a> associée à un champ de formulaire ayant la même fonction et répétée dans un ensemble de pages est-elle cohérente ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-consistent-functionality" title="3.2.4, nouvelle fenêtre" target="_blank">3.2.4</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F31.html" title="F31, nouvelle fenêtre" target="_blank">F31</a></p>\n\n\n'},{id:"11.4",level:"[A]",text:"Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés ?",description:'\n \n\n\n <ul><li> Test 11.4.1 : Dans chaque formulaire, chaque <a href="#tiquette-de-champs-de-formulaire">étiquette</a> de champ et son champ associé sont-ils accolés ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-cues" title="3.3.2, nouvelle fenêtre" target="_blank">3.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G162.html" title="G162, nouvelle fenêtre" target="_blank">G162</a></p>\n\n\n'},{id:"11.5",level:"[A]",text:"Dans chaque formulaire, les informations de même nature sont-elles regroupées, si nécessaire ?",description:'\n \n\n\n <ul><li> Test 11.5.1 : Dans chaque formulaire, les <a href="#bloc-dinformations-de-mme-nature">informations de même nature</a> sont-elles regroupées via une balise <code lang="en" xml:lang="en">fieldset</code>, si nécessaire ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-cues" title="3.3.2, nouvelle fenêtre" target="_blank">3.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H71.html" title="H71, nouvelle fenêtre" target="_blank">H71</a></p>\n\n\n'},{id:"11.6",level:"[A]",text:"Dans chaque formulaire, chaque regroupement de champs de formulaire a-t-il une légende ?",description:'\n \n\n\n <ul><li> Test 11.6.1 : Chaque regroupement de champs de formulaire (balise <code lang="en" xml:lang="en">fieldset</code>) est-il suivi dans le code source par une légende (balise <code lang="en" xml:lang="en">legend</code>) ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-cues" title="3.3.2, nouvelle fenêtre" target="_blank">3.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H71.html" title="H71, nouvelle fenêtre" target="_blank">H71</a></p>\n\n\n'},{id:"11.7",level:"[A]",text:"Dans chaque formulaire, chaque légende associée à un groupement de champs de formulaire est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 11.7.1 : Dans chaque formulaire, chaque légende (balise <code lang="en" xml:lang="en">legend</code>) associée à un groupement de champs de formulaire (balise <code lang="en" xml:lang="en">fieldset</code>) est-elle pertinente ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-cues" title="3.3.2, nouvelle fenêtre" target="_blank">3.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H71.html" title="H71, nouvelle fenêtre" target="_blank">H71</a></p>\n\n\n'},{id:"11.8",level:"[A]",text:"Dans chaque formulaire, chaque liste de choix est-elle structurée de manière pertinente ?",description:'\n \n\n\n <ul><li> Test 11.8.1 : Dans chaque formulaire, pour chaque <a href="#liste-de-choix">liste de choix</a> (balise <code lang="en" xml:lang="en">select</code>), les items sont-ils regroupés avec une balise <code lang="en" xml:lang="en">optgroup</code>, si nécessaire ?</li>\n<li> Test 11.8.2 : Dans chaque <a href="#liste-de-choix">liste de choix</a> (balise <code lang="en" xml:lang="en">select</code>), chaque regroupement d'items de liste (balise <code lang="en" xml:lang="en">optgroup</code>) possède-t-il un attribut <code lang="en" xml:lang="en">label</code> ?</li>\n<li> Test 11.8.3 : Pour chaque regroupement d'items de liste (balise <code lang="en" xml:lang="en">optgroup</code>) ayant un attribut <code lang="en" xml:lang="en">label</code>, le contenu de l'attribut <code lang="en" xml:lang="en">label</code> est-il pertinent ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H85.html" title="H85, nouvelle fenêtre" target="_blank">H85</a></p>\n\n\n'},{id:"11.9",level:"[A]",text:"Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?",description:'\n \n\n\n <ul><li> Test 11.9.1 : Dans chaque formulaire, l'intitulé de chaque <a href="#bouton-formulaire">bouton</a> vérifie-t-il une de ces conditions ?\n\n<ul><li> Le contenu de l'attribut value des boutons de formulaire de type <code lang="en" xml:lang="en">submit</code>, <code lang="en" xml:lang="en">reset</code> ou <code lang="en" xml:lang="en">button</code> est pertinent</li>\n<li> Le contenu de la balise <code lang="en" xml:lang="en"><button></code> est pertinent</li>\n<li> Le contenu de l'attribut <code lang="en" xml:lang="en">title</code> est pertinent</li>\n<li> Le contenu de la propriété ARIA <code lang="en" xml:lang="en">aria-label</code> est pertinent</li>\n</ul></li>\n<li> Test 11.9.2 : Dans chaque formulaire, l'intitulé de chaque <a href="#bouton-formulaire">bouton</a> implémenté via une propriété ARIA <code lang="en" xml:lang="en">aria-labelledby</code> vérifie-t-il ces conditions ?\n\n<ul><li> Le passage de texte servant d'intitulé possède un attribut <code lang="en" xml:lang="en">Id</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">id</code> est unique</li>\n<li> La valeur de la propriété ARIA <code lang="en" xml:lang="en">aria-labelledby</code> est égale à la valeur de l'attribut <code lang="en" xml:lang="en">id</code> du passage de texte</li>\n<li> Le passage de texte est pertinent</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H36.html" title="H36, nouvelle fenêtre" target="_blank">H36</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H91.html" title="H91, nouvelle fenêtre" target="_blank">H91</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA6.html" title="ARIA6, nouvelle fenêtre" target="_blank">ARIA6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA9.html" title="ARIA9, nouvelle fenêtre" target="_blank">ARIA9</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA16.html" title="ARIA16, nouvelle fenêtre" target="_blank">ARIA16</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA14.html" title="ARIA14, nouvelle fenêtre" target="_blank">ARIA14</a></p>\n\n\n'},{id:"11.10",level:"[A]",text:"Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ?",description:'\n \n\n\n <ul><li> Test 11.10.1 : Pour chaque formulaire, les indications de champs obligatoires vérifient-ils une de ces conditions ?\n\n<ul><li> L'indication de champ obligatoire est donnée par un passage de texte avant le champ de formulaire</li>\n<li> L'indication de champ obligatoire est donnée via un attribut <code lang="en" xml:lang="en">required</code></li>\n<li> L'indication de champ obligatoire est donnée via la propriété ARIA <code lang="en" xml:lang="en">aria-required</code></li>\n<li> L'indication de champ obligatoire est donnée dans l'étiquette (balise attribut <code lang="en" xml:lang="en">label</code>, attribut <code lang="en" xml:lang="en">title</code>, propriété <code lang="en" xml:lang="en">aria-label</code>, passage de texte lié via la propriété <code lang="en" xml:lang="en">aria-labelledby</code>) du champ de formulaire</li>\n<li> L'indication de champ obligatoire est donnée par un passage de texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code></li>\n</ul></li>\n<li> Test 11.10.2 : Chaque indication de champ obligatoire qui utilise les propriétés ARIA <code lang="en" xml:lang="en">aria-label</code>, <code lang="en" xml:lang="en">aria-required</code> ou l'attribut <code lang="en" xml:lang="en">required</code> doit être accompagnée d'une indication visuelle explicite dans l'étiquette (balise <code lang="en" xml:lang="en">label</code>) ou dans un passage de texte lié au champ par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> ou <code lang="en" xml:lang="en">aria-labelledby</code>, cette règle est-elle respectée ?</li>\n<li> Test 11.10.3 : Chaque indication de champ obligatoire qui utilise un passage de texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> ou <code lang="en" xml:lang="en">aria-labelledby</code> vérifie-t-elle ces conditions ?\n\n<ul><li> Le passage de texte est identifié via un attribut <code lang="en" xml:lang="en">id</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">id</code> est unique</li>\n<li> La valeur de la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> ou <code lang="en" xml:lang="en">aria-labelledby</code> est égale à la valeur de l'attribut <code lang="en" xml:lang="en">id</code></li>\n</ul></li>\n<li> Test 11.10.4 : Pour chaque formulaire, les erreurs de saisie vérifient-elles une de ces conditions ?\n\n<ul><li> L'erreur de saisie est indiquée dans l'étiquette (balise <code lang="en" xml:lang="en">label</code>, attribut <code lang="en" xml:lang="en">title</code>, propriété ARIA <code lang="en" xml:lang="en">aria-label</code>, passage de texte lié via la propriété ARIA <code lang="en" xml:lang="en">aria-labelledby</code>) du champ de formulaire</li>\n<li> L'erreur de saisie est indiquée par un passage de texte avant le champ de formulaire</li>\n<li> Le champ de formulaire possède un <code lang="en" xml:lang="en">type</code> qui produit de manière automatique un message d'erreur de saisie</li>\n<li> L'erreur de saisie est indiquée par un passage de texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code></li>\n<li> L’erreur de saisie est indiquée via la propriété ARIA <code lang="en" xml:lang="en">aria-invalid</code></li>\n</ul></li>\n<li> Test 11.10.5 : Chaque indication d’erreur de saisie réalisée grâce à la propriété ARIA <code lang="en" xml:lang="en">aria-label</code> ou <code lang="en" xml:lang="en">aria-invalid</code> doit être accompagnée d'une indication visuelle explicite dans l’étiquette (balise <code lang="en" xml:lang="en">label</code>) ou dans un passage de texte lié au champ par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> ou <code lang="en" xml:lang="en">aria-labelledby</code>, cette règle est-elle respectée ?</li>\n<li> Test 11.10.6 : Chaque erreur de saisie qui utilise un passage de texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> ou <code lang="en" xml:lang="en">aria-labelledby</code> vérifie-t-elle ces conditions ?\n\n<ul><li> Le passage de texte est identifié via un attribut <code lang="en" xml:lang="en">id</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">id</code> est unique</li>\n<li> La valeur de la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> ou <code lang="en" xml:lang="en">aria-labelledby</code> est égale à la valeur de l'attribut <code lang="en" xml:lang="en">id</code></li>\n</ul></li>\n<li> Test 11.10.7 : Pour chaque formulaire, chaque champ obligatoire vérifie-t-il une de ces conditions ?\n\n<ul><li> Le type de donnée et/ou de format est indiqué, si nécessaire, dans l'étiquette (balise <code lang="en" xml:lang="en">label</code>, attribut <code lang="en" xml:lang="en">title</code>, propriété ARIA <code lang="en" xml:lang="en">aria-label</code>, texte lié via la propriété ARIA <code lang="en" xml:lang="en">aria-labelledby</code>) du champ</li>\n<li> Le type de donnée et/ou de format est indiqué, si nécessaire, par un passage de texte avant le champ de formulaire</li>\n<li> Le type de donnée et/ou de format est indiqué, si nécessaire, par un texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code></li>\n</ul></li>\n<li> Test 11.10.8 : Chaque indication du type de donnée et/ou de format réalisée grâce à la propriété ARIA <code lang="en" xml:lang="en">aria-label</code> doit être accompagnée d'une indication visuelle explicite dans l’étiquette (balise <code lang="en" xml:lang="en">label</code>) ou dans un passage de texte lié au champ par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> ou <code lang="en" xml:lang="en">aria-labelledby</code>, cette règle est-elle respectée ?</li>\n<li> Test 11.10.9 : Chaque indication de type de donnée et/ou de format qui utilise un passage de texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> ou ARIA <code lang="en" xml:lang="en">aria-labelledby</code> vérifie-t-elle ces conditions ?\n\n<ul><li> Le passage de texte est identifié via un attribut <code lang="en" xml:lang="en">id</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">id</code> est unique</li>\n<li> La valeur de la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> ou ARIA <code lang="en" xml:lang="en">aria-labelledby</code> est égale à la valeur de l'attribut <code lang="en" xml:lang="en">id</code></li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-identified" title="3.3.1, nouvelle fenêtre" target="_blank">3.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-cues" title="3.3.2, nouvelle fenêtre" target="_blank">3.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G83.html" title="G83, nouvelle fenêtre" target="_blank">G83</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G84.html" title="G84, nouvelle fenêtre" target="_blank">G84</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G85.html" title="G85, nouvelle fenêtre" target="_blank">G85</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G89.html" title="G89, nouvelle fenêtre" target="_blank">G89</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G184.html" title="G184, nouvelle fenêtre" target="_blank">G184</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H44.html" title="H44, nouvelle fenêtre" target="_blank">H44</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H89.html" title="H89, nouvelle fenêtre" target="_blank">H89</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H90.html" title="H90, nouvelle fenêtre" target="_blank">H90</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F81.html" title="F81, nouvelle fenêtre" target="_blank">F81</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR18.html" title="SCR18, nouvelle fenêtre" target="_blank">SCR18</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR32.html" title="SCR32, nouvelle fenêtre" target="_blank">SCR32</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA1.html" title="ARIA1, nouvelle fenêtre" target="_blank">ARIA1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA2.html" title="ARIA2, nouvelle fenêtre" target="_blank">ARIA2</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA6.html" title="ARIA6, nouvelle fenêtre" target="_blank">ARIA6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA9.html" title="ARIA9, nouvelle fenêtre" target="_blank">ARIA9</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA16.html" title="ARIA16, nouvelle fenêtre" target="_blank">ARIA16</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA21.html" title="ARIA21, nouvelle fenêtre" target="_blank">ARIA21</a></p>\n\n\n'},{id:"11.11",level:"[AA]",text:"Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?",description:'\n \n\n\n <ul><li> Test 11.11.1 : Pour chaque formulaire, pour chaque erreur de saisie, <a href="#type-et-format-de-donnes">les types et les formats de données</a> sont-ils suggérés, si nécessaire ?</li>\n<li> Test 11.11.2 : Pour chaque formulaire, pour chaque erreur de saisie, des exemples de valeurs attendues sont-ils suggérés, si nécessaire ?</li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-1111-aa">Consulter la note technique au sujet des contrôles automatiques de format HTML5</a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-suggestions" title="3.3.3, nouvelle fenêtre" target="_blank">3.3.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G84.html" title="G84, nouvelle fenêtre" target="_blank">G84</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G85.html" title="G85, nouvelle fenêtre" target="_blank">G85</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G89.html" title="G89, nouvelle fenêtre" target="_blank">G89</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G177.html" title="G177, nouvelle fenêtre" target="_blank">G177</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H89.html" title="H89, nouvelle fenêtre" target="_blank">H89</a></p>\n\n\n'},{id:"11.12",level:"[AA]",text:"Pour chaque formulaire, les données à caractère financier, juridique ou personnel peuvent-elles être modifiées, mises à jour ou récupérées par l'utilisateur ?",description:'\n \n\n\n <ul><li> Test 11.12.1 : Pour chaque formulaire, la saisie des données à caractère financier, juridique ou personnelle vérifie-t-elle une de ces conditions ?\n\n<ul><li> L'utilisateur peut modifier ou annuler les données et les actions effectuées sur ces données après leur saisie</li>\n<li> L'utilisateur peut vérifier et corriger les données avant la validation du formulaire</li>\n<li> Un mécanisme de confirmation explicite, via un champ de formulaire ou une étape supplémentaire, est présent</li>\n</ul></li>\n<li> Test 11.12.2 : Pour chaque formulaire, la suppression des données à caractère financier, juridique ou personnelle vérifie-t-elle une de ces conditions ?\n\n<ul><li> Un mécanisme permet de récupérer les données supprimées par l'utilisateur</li>\n<li> Un mécanisme de confirmation explicite de la suppression, via un champ de formulaire ou une étape supplémentaire, est présent</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-reversible" title="3.3.4, nouvelle fenêtre" target="_blank">3.3.4</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G98.html" title="G98, nouvelle fenêtre" target="_blank">G98</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G99.html" title="G99, nouvelle fenêtre" target="_blank">G99</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G155.html" title="G155, nouvelle fenêtre" target="_blank">G155</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G164.html" title="G164, nouvelle fenêtre" target="_blank">G164</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G168.html" title="G168, nouvelle fenêtre" target="_blank">G168</a></p>\n\n\n'},{id:"11.13",level:"[AAA]",text:"Pour chaque formulaire, toutes les données peuvent-elles être modifiées, mises à jour ou récupérées par l'utilisateur ?",description:'\n \n\n\n <ul><li> Test 11.13.1 : Pour chaque formulaire, la saisie des données vérifie-t-elle une de ces conditions ?\n\n<ul><li> L'utilisateur peut modifier ou annuler les données et les actions effectuées sur ces données après leur saisie</li>\n<li> L'utilisateur peut vérifier et corriger les données avant la validation du formulaire</li>\n<li> Un mécanisme de confirmation explicite, via un champ de formulaire ou une étape supplémentaire, est présent</li>\n</ul></li>\n<li> Test 11.13.2 : Pour chaque formulaire, la suppression des données vérifie-t-elle une de ces conditions ?\n\n<ul><li> Un mécanisme permet de récupérer les données supprimées par l'utilisateur</li>\n<li> Un mécanisme de confirmation explicite de la suppression, via un champ de formulaire ou une étape supplémentaire, est présent</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-reversible-all" title="3.3.6, nouvelle fenêtre" target="_blank">3.3.6</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G98.html" title="G98, nouvelle fenêtre" target="_blank">G98</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G99.html" title="G99, nouvelle fenêtre" target="_blank">G99</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G155.html" title="G155, nouvelle fenêtre" target="_blank">G155</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G164.html" title="G164, nouvelle fenêtre" target="_blank">G164</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G168.html" title="G168, nouvelle fenêtre" target="_blank">G168</a></p>\n\n\n'},{id:"11.14",level:"[AAA]",text:"Pour chaque formulaire, des aides à la saisie sont-elles présentes ?",description:'\n \n\n\n <ul><li> Test 11.14.1 : Chaque formulaire vérifie-t-il une de ces conditions ?\n\n<ul><li> Il existe un lien vers une page d'aide</li>\n<li> Il existe des indications avant le formulaire</li>\n<li> Il existe des indications avant les champs de formulaire</li>\n<li> Il existe des indications dans l'étiquette (balise <code lang="en" xml:lang="en">label</code>, attribut <code lang="en" xml:lang="en">title</code>, propriété <code lang="en" xml:lang="en">aria-label</code>, passage de texte lié via la propriété <code lang="en" xml:lang="en">aria-labelledby</code>) du champ de formulaire</li>\n<li> Il existe des indications dans un passage de texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code></li>\n<li> Un assistant est disponible</li>\n</ul></li>\n<li> Test 11.14.2 : Chaque indication qui utilise la propriété ARIA <code lang="en" xml:lang="en">aria-label</code> doit être accompagnée d'une indication visuelle équivalente explicite, cette règle est-elle respectée ?</li>\n<li> Test 11.14.3 : Chaque indication qui utilise un passage de texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> vérifie-t-elle ces conditions ?\n\n<ul><li> Le passage de texte est identifié via un attribut <code lang="en" xml:lang="en">id</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">id</code> est unique</li>\n<li> La valeur de la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> est égale à la valeur de l'attribut <code lang="en" xml:lang="en">id</code></li>\n</ul></li>\n<li> Test 11.14.4 : Chaque champ de type texte vérifie-t-il, si nécessaire, l'une de ces conditions ?\n\n<ul><li> Un correcteur orthographique est disponible</li>\n<li> Des suggestions de saisie sont disponibles avant le champ du formulaire</li>\n<li> Des suggestions de saisie sont disponibles dans l'étiquette (balise <code lang="en" xml:lang="en">label</code>, attribut <code lang="en" xml:lang="en">title</code>, propriété <code lang="en" xml:lang="en">aria-label</code>, passage de texte lié via la propriété <code lang="en" xml:lang="en">aria-labelledby</code>) du champ de formulaire</li>\n<li> Des suggestions de saisie sont disponibles dans un passage de texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code></li>\n</ul></li>\n<li> Test 11.14.5 : Chaque suggestion qui utilise la propriété ARIA <code lang="en" xml:lang="en">aria-label</code> doit être accompagnée d'une suggestion visuelle équivalente explicite, cette règle est-elle respectée ?</li>\n<li> Test 11.14.6 : Chaque suggestion qui utilise un passage de texte lié par la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> vérifie-t-elle ces conditions ?\n\n<ul><li> Le passage de texte est identifié via un attribut <code lang="en" xml:lang="en">id</code></li>\n<li> La valeur de l'attribut <code lang="en" xml:lang="en">id</code> est unique</li>\n<li> La valeur de la propriété ARIA <code lang="en" xml:lang="en">aria-describedby</code> est égale à la valeur de l'attribut <code lang="en" xml:lang="en">id</code></li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-context-help" title="3.3.5, nouvelle fenêtre" target="_blank">3.3.5</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-cues" title="3.3.2, nouvelle fenêtre" target="_blank">3.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G71.html" title="G71, nouvelle fenêtre" target="_blank">G71</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G193.html" title="G193, nouvelle fenêtre" target="_blank">G193</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G194.html" title="G194, nouvelle fenêtre" target="_blank">G194</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G184.html" title="G184, nouvelle fenêtre" target="_blank">G184</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G89.html" title="G89, nouvelle fenêtre" target="_blank">G89</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA1.html" title="ARIA1, nouvelle fenêtre" target="_blank">ARIA1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA6.html" title="ARIA6, nouvelle fenêtre" target="_blank">ARIA6</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA9.html" title="ARIA9, nouvelle fenêtre" target="_blank">ARIA9</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA16.html" title="ARIA16, nouvelle fenêtre" target="_blank">ARIA16</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F81.html" title="F81, nouvelle fenêtre" target="_blank">F81</a></p>\n\n\n'},{id:"11.15",level:"[AAA]",text:"Pour chaque formulaire, chaque aide à la saisie est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 11.15.1 : Pour chaque formulaire, chaque aide à la saisie est-elle pertinente ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-context-help" title="3.3.5, nouvelle fenêtre" target="_blank">3.3.5</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#minimize-error-cues" title="3.3.2, nouvelle fenêtre" target="_blank">3.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G71.html" title="G71, nouvelle fenêtre" target="_blank">G71</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G193.html" title="G193, nouvelle fenêtre" target="_blank">G193</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G194.html" title="G194, nouvelle fenêtre" target="_blank">G194</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G184.html" title="G184, nouvelle fenêtre" target="_blank">G184</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G89.html" title="G89, nouvelle fenêtre" target="_blank">G89</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA1.html" title="ARIA1, nouvelle fenêtre" target="_blank">ARIA1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA9.html" title="ARIA9, nouvelle fenêtre" target="_blank">ARIA9</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/ARIA16.html" title="ARIA16, nouvelle fenêtre" target="_blank">ARIA16</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F81.html" title="F81, nouvelle fenêtre" target="_blank">F81</a></p>\n\n\n'}]},{title:"12. Navigation",rules:[{id:"12.1",level:"[AA]",text:"Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents, au moins (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 12.1.1 : Chaque <a href="#ensemble-de-pages">ensemble de pages</a> vérifie-t-il une de ces conditions (<a href="#critre-121" title="Cas particuliers pour le critère 12.1">hors cas particuliers</a>) ?\n\n<ul><li> Un <a href="#menu-de-navigation">menu de navigation</a> et un plan du site sont présents</li>\n<li> Un <a href="#menu-de-navigation">menu de navigation</a> et un <a href="#moteur-de-recherche-interne--un-site-web">moteur de recherche</a> sont présents</li>\n<li> Un <a href="#moteur-de-recherche-interne--un-site-web">moteur de recherche</a> et un plan du site sont présents</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-mult-loc" title="2.4.5, nouvelle fenêtre" target="_blank">2.4.5</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-location" title="2.4.8, nouvelle fenêtre" target="_blank">2.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G63.html" title="G63, nouvelle fenêtre" target="_blank">G63</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G64.html" title="G64, nouvelle fenêtre" target="_blank">G64</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G161.html" title="G161, nouvelle fenêtre" target="_blank">G161</a></p>\n\n\n'},{id:"12.2",level:"[AA]",text:"Dans chaque ensemble de pages, le menu ou les barres de navigation sont-ils toujours à la même place (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 12.2.1 : Dans chaque <a href="#ensemble-de-pages">ensemble de pages</a>, chaque page ayant un <a href="#menu-de-navigation">menu de navigation</a> vérifie-t-elle ces conditions (<a href="#critres-122--123" title="Cas particuliers pour le critère 12.2">hors cas particuliers</a>) ?\n\n<ul><li> Le <a href="#menu-de-navigation">menu de navigation</a> est toujours à la même place dans la présentation</li>\n<li> Le <a href="#menu-de-navigation">menu de navigation</a> se présente toujours dans le même ordre relatif dans le code source.</li>\n</ul></li>\n<li> Test 12.2.2 Chaque <a href="#barre-de-navigation">barre de navigation</a> répétée dans un ensemble de pages vérifie-t-elle ces conditions (<a href="#critres-122--123" title="Cas particuliers pour le critère 12.2">hors cas particuliers</a>) ?\n\n<ul><li> La <a href="#barre-de-navigation">barre de navigation</a> est toujours à la même place dans la présentation</li>\n<li> La <a href="#barre-de-navigation">barre de navigation</a> se présente toujours dans le même ordre relatif dans le code source.</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-consistent-locations" title="3.2.3, nouvelle fenêtre" target="_blank">3.2.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G61.html" title="G61, nouvelle fenêtre" target="_blank">G61</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F66.html" title="F66, nouvelle fenêtre" target="_blank">F66</a></p>\n\n\n'},{id:"12.3",level:"[AA]",text:"Dans chaque ensemble de pages, le menu et les barres de navigation ont-ils une présentation cohérente (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 12.3.1 : Dans chaque <a href="#ensemble-de-pages">ensemble de pages</a>, le <a href="#menu-de-navigation">menu de navigation</a> principal a-t-il une présentation cohérente (<a href="#critres-122--123" title="Cas particuliers pour le critère 12.3">hors cas particuliers</a>) ?</li>\n<li> Test 12.3.2 : Dans chaque <a href="#ensemble-de-pages">ensemble de pages</a>, les barres de navigation répétées ont-elles une présentation cohérente (<a href="#critres-122--123" title="Cas particuliers pour le critère 12.3">hors cas particuliers</a>) ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-consistent-locations" title="3.2.3, nouvelle fenêtre" target="_blank">3.2.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G61.html" title="G61, nouvelle fenêtre" target="_blank">G61</a></p>\n\n\n'},{id:"12.4",level:"[AA]",text:'La page "plan du site" est-elle pertinente ?',description:'\n \n\n\n <ul><li> Test 12.4.1 : La <a href="#page-plan-du-site">page "plan du site"</a> est-elle représentative de l'architecture générale du site ?</li>\n<li> Test 12.4.2 : Les liens du plan du site sont-ils fonctionnels ?</li>\n<li> Test 12.4.3 : Les liens du plan du site renvoient-ils bien vers les pages indiquées par l'intitulé ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-mult-loc" title="2.4.5, nouvelle fenêtre" target="_blank">2.4.5</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-location" title="2.4.8, nouvelle fenêtre" target="_blank">2.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G63.html" title="G63, nouvelle fenêtre" target="_blank">G63</a></p>\n\n\n'},{id:"12.5",level:"[AA]",text:'Dans chaque ensemble de pages, la page "plan du site" est-elle atteignable de manière identique ?',description:'\n \n\n\n <ul><li> Test 12.5.1 : Dans chaque ensemble de pages, la <a href="#page-plan-du-site">page "plan du site"</a> est-elle accessible à partir d'une fonctionnalité identique ?</li>\n<li> Test 12.5.2 : Dans chaque ensemble de pages, la fonctionnalité vers la <a href="#page-plan-du-site">page "plan du site"</a> est-elle située à la même place dans la présentation ?</li>\n<li> Test 12.5.3 : Dans chaque ensemble de pages, la fonctionnalité vers la <a href="#page-plan-du-site">page "plan du site"</a> se présente-t-elle toujours dans le même ordre relatif dans le code source ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-mult-loc" title="2.4.5, nouvelle fenêtre" target="_blank">2.4.5</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-location" title="2.4.8, nouvelle fenêtre" target="_blank">2.4.8</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-consistent-locations" title="3.2.3, nouvelle fenêtre" target="_blank">3.2.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G61.html" title="G61, nouvelle fenêtre" target="_blank">G61</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G63.html" title="G63, nouvelle fenêtre" target="_blank">G63</a></p>\n\n\n'},{id:"12.6",level:"[AA]",text:"Dans chaque ensemble de pages, le moteur de recherche est-il atteignable de manière identique ?",description:'\n \n\n\n <ul><li> Test 12.6.1 : Dans chaque ensemble de pages, le <a href="#moteur-de-recherche-interne--un-site-web">moteur de recherche</a> est-il accessible à partir d'une fonctionnalité identique ?</li>\n<li> Test 12.6.2 : Dans chaque ensemble de pages, la fonctionnalité vers le <a href="#moteur-de-recherche-interne--un-site-web">moteur de recherche</a> est-elle située à la même place dans la présentation ?</li>\n<li> Test 12.6.3 : Dans chaque ensemble de pages, la fonctionnalité vers le <a href="#moteur-de-recherche-interne--un-site-web">moteur de recherche</a> se présente-t-elle toujours dans le même ordre relatif dans le code source ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-consistent-locations" title="3.2.3, nouvelle fenêtre" target="_blank">3.2.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G61.html" title="G61, nouvelle fenêtre" target="_blank">G61</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F66.html" title="F66, nouvelle fenêtre" target="_blank">F66</a></p>\n\n\n'},{id:"12.7",level:"[AA]",text:"Dans chaque page d'une collection de pages, des liens facilitant la navigation sont-ils présents ?",description:'\n \n\n\n <ul><li> Test 12.7.1 : Chaque page d'une <a href="#collection-de-pages">collection de pages</a>, vérifie-t-elle ces conditions ?\n\n<ul><li> Un lien permet d'accéder à la page suivante</li>\n<li> Un lien permet d'accéder à la page précédente</li>\n<li> Des <a href="#accder--chaque-page-de-la-collection-de-pages">liens permettent d'accéder à chaque page</a> de la <a href="#collection-de-pages">collection de pages</a></li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-mult-loc" title="2.4.5, nouvelle fenêtre" target="_blank">2.4.5</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-location" title="2.4.8, nouvelle fenêtre" target="_blank">2.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G125.html" title="G125, nouvelle fenêtre" target="_blank">G125</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G126.html" title="G126, nouvelle fenêtre" target="_blank">G126</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G127.html" title="G127, nouvelle fenêtre" target="_blank">G127</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G185.html" title="G185, nouvelle fenêtre" target="_blank">G185</a></p>\n\n\n'},{id:"12.8",level:"[AAA]",text:"Dans chaque page web, un fil d'Ariane est-il présent (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 12.8.1 : Dans chaque page web, un fil d'Ariane est-il présent (<a href="#critre-128" title="Cas particuliers pour le critère 12.8">hors cas particuliers</a>) ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-location" title="2.4.8, nouvelle fenêtre" target="_blank">2.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G65.html" title="G65, nouvelle fenêtre" target="_blank">G65</a></p>\n\n\n'},{id:"12.9",level:"[AAA]",text:"Dans chaque page Web, le fil d'Ariane est-il pertinent ?",description:'\n \n\n\n <ul><li> Test 12.9.1 : Dans chaque page Web, le fil d'Ariane est-il représentatif de la position de la page dans l'arborescence du site ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-location" title="2.4.8, nouvelle fenêtre" target="_blank">2.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G65.html" title="G65, nouvelle fenêtre" target="_blank">G65</a></p>\n\n\n'},{id:"12.10",level:"[A]",text:"Dans chaque page Web, les groupes de liens importants (menu, barre de navigation...) et la zone de contenu sont-ils identifiés hors cas particuliers ?",description:'\n \n\n\n <ul><li> Test 12.10.1 : Dans chaque page Web, chaque groupe de liens importants est-il implémenté dans une balise commune ?</li>\n<li> Test 12.10.2 : Dans chaque page Web, chaque groupe de liens importants vérifie-t-il une de ces conditions ?\n\n<ul><li> La balise structurant le groupe de liens importants possède un attribut <code lang="en" xml:lang="en">id</code></li>\n<li> La balise structurant le groupe de liens importants est immédiatement précédée, dans le code source, d'une <code lang="en" xml:lang="en">ancre nommée</code></li>\n<li> La balise lien du groupe est immédiatement précédée, dans le code source, d'une <code lang="en" xml:lang="en">ancre nommée</code></li>\n</ul></li>\n<li> Test 12.10.3 : Dans chaque page Web, la zone de contenu vérifie-t-elle une de ces conditions ?\n\n<ul><li> La zone de contenu possède un attribut <code lang="en" xml:lang="en">id</code></li>\n<li> La zone de contenu est immédiatement précédée, dans le code source, d'une <code lang="en" xml:lang="en">ancre nommée</code></li>\n<li> Le premier élément de la zone de contenu est immédiatement précédé, dans le code source, d'une <code lang="en" xml:lang="en">ancre nommée</code></li>\n</ul></li>\n<li> Test 12.10.4 : Dans chaque page Web, la structure du document vérifie-t-elle ces conditions ?\n\n<ul><li> La <a href="#zone-dune-image-ractiveHeader">zone d'en-tête de la page</a> possède un rôle ARIA <code lang="en" xml:lang="en">banner</code></li>\n<li> Le <a href="#menu-de-navigation">menu de navigation</a> principal possède un rôle ARIA <code lang="en" xml:lang="en">navigation</code></li>\n<li> La <a href="#zone-dune-image-ractiveMain">zone de contenu principal</a> possède un rôle ARIA <code lang="en" xml:lang="en">main</code></li>\n<li> La <a href="#zone-dune-image-ractiveFooter">zone de pied de page</a> possède un rôle ARIA <code lang="en" xml:lang="en">contentinfo</code></li>\n<li> Le <a href="#moteur-de-recherche-interne--un-site-web">moteur de recherche</a> sur le site possède un rôle ARIA <code lang="en" xml:lang="en">search</code></li>\n<li> Les rôles ARIA <code lang="en" xml:lang="en">banner</code>, <code lang="en" xml:lang="en">main</code>, <code lang="en" xml:lang="en">contentinfo</code> et <code lang="en" xml:lang="en">search</code> sont uniques dans la page.</li>\n<li> Le rôle ARIA <code lang="en" xml:lang="en">navigation</code> est réservé aux zones de navigations principales et secondaires</li>\n</ul></li>\n</ul><p><strong>Note technique :</strong> <a href="#critre-1210%20a">Consulter la note technique au sujet des role <code lang="en" xml:lang="en">landmark</code> et des liens d'évitement.</a></p>\n\n<p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-skip" title="2.4.1, nouvelle fenêtre" target="_blank">2.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G115.html" title="G115, nouvelle fenêtre" target="_blank">G115</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H50.html" title="H50, nouvelle fenêtre" target="_blank">H50</a> - <a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA4.html" title="ARIA4, nouvelle fenêtre" target="_blank">ARIA4</a> - <a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA11.html" title="ARIA11, nouvelle fenêtre" target="_blank">ARIA11</a></p>\n\n\n'},{id:"12.11",level:"[A]",text:"Dans chaque page Web, des liens d'évitement ou d'accès rapide aux groupes de liens importants et à la zone de contenu sont-ils présents hors cas particuliers ?",description:'\n \n\n\n <ul><li> Test 12.11.1 : Dans chaque page Web, un lien permet-il d'éviter chaque groupe de liens importants identifié ou d'y accéder ?</li>\n<li> Test 12.11.2 : Dans chaque page Web, un lien permet-il d'éviter la zone de contenu identifiée ou d'y accéder ?</li>\n<li> Test 12.11.3 : Dans chaque page Web, chaque <a href="#liens-dvitement-ou-daccs-rapide">lien d'évitement ou d'accès rapide</a> est-il fonctionnel ?</li>\n<li> Test 12.11.4 : Dans chaque ensemble de pages, les <a href="#liens-dvitement-ou-daccs-rapide">liens d'évitement ou d'accès rapide</a> vérifient-ils ces conditions ?\n\n<ul><li> Chaque lien est situé à la même place dans la présentation</li>\n<li> Chaque lien se présente toujours dans le même ordre relatif dans le code source</li>\n<li> Chaque lien est visible à la prise de focus de tabulation au moins</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-skip" title="2.4.1, nouvelle fenêtre" target="_blank">2.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-focus-order" title="2.4.3, nouvelle fenêtre" target="_blank">2.4.3</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-consistent-locations" title="3.2.3, nouvelle fenêtre" target="_blank">3.2.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G1.html" title="G1, nouvelle fenêtre" target="_blank">G1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G59.html" title="G59, nouvelle fenêtre" target="_blank">G59</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G123.html" title="G123, nouvelle fenêtre" target="_blank">G123</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G124.html" title="G124, nouvelle fenêtre" target="_blank">G124</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR28.html" title="SCR28, nouvelle fenêtre" target="_blank">SCR28</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F66.html" title="F66, nouvelle fenêtre" target="_blank">F66</a></p>\n\n\n'},{id:"12.12",level:"[AAA]",text:"Dans chaque page Web, la page en cours de consultation est-elle indiquée dans le menu de navigation ?",description:'\n \n\n\n <ul><li> Test 12.12.1 : Dans chaque page Web, la page en cours de consultation est-elle indiquée dans le <a href="#menu-de-navigation">menu de navigation</a> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-location" title="2.4.8, nouvelle fenêtre" target="_blank">2.4.8</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G128.html" title="G128, nouvelle fenêtre" target="_blank">G128</a></p>\n\n\n'},{id:"12.13",level:"[A]",text:"Dans chaque page Web, l'ordre de tabulation est-il cohérent ?",description:'\n \n\n\n <ul><li> Test 12.13.1 : Dans chaque page Web, l'ordre de tabulation dans le contenu est-il <a href="#comprhensible-ordre-de-lecture">cohérent</a> ?</li>\n<li> Test 12.13.2 : Pour chaque <a href="#script">script</a> qui met à jour ou insère un contenu, l'ordre de tabulation reste-t-il <a href="#comprhensible-ordre-de-lecture">cohérent</a> ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-focus-order" title="2.4.3, nouvelle fenêtre" target="_blank">2.4.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G59.html" title="G59, nouvelle fenêtre" target="_blank">G59</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H4.html" title="H4, nouvelle fenêtre" target="_blank">H4</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F44.html" title="F44, nouvelle fenêtre" target="_blank">F44</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR26.html" title="SCR26, nouvelle fenêtre" target="_blank">SCR26</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR27.html" title="SCR27, nouvelle fenêtre" target="_blank">SCR27</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR37.html" title="SCR37, nouvelle fenêtre" target="_blank">SCR37</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/C27.html" title="C27, nouvelle fenêtre" target="_blank">C27</a> - <a href="http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/F85.html" title="F85, nouvelle fenêtre" target="_blank">F85</a></p>\n\n\n'},{id:"12.14",level:"[A]",text:"Dans chaque page Web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?",description:'\n \n\n\n <ul><li> Test 12.14.1 : Dans chaque page Web, chaque élément recevant le focus vérifie-t-il une de ces conditions ?\n\n<ul><li> Il est possible d'atteindre l'élément suivant ou précédent pouvant recevoir le <code lang="en" xml:lang="en">focus</code> avec la touche de tabulation</li>\n<li> L'utilisateur est informé d'un mécanisme fonctionnel permettant d'atteindre au clavier l'élément suivant ou précédent pouvant recevoir le <code lang="en" xml:lang="en">focus</code></li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#keyboard-operation-keyboard-operable" title="2.1.1, nouvelle fenêtre" target="_blank">2.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#keyboard-operation-trapping" title="2.1.2, nouvelle fenêtre" target="_blank">2.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H91.html" title="H91, nouvelle fenêtre" target="_blank">H91</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G21.html" title="G21, nouvelle fenêtre" target="_blank">G21</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F10.html" title="F10, nouvelle fenêtre" target="_blank">F10</a></p>\n\n\n'}]},{title:"13. Consultation",rules:[{id:"13.1",level:"[A]",text:"Pour chaque page Web, l'utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 13.1.1 : Pour chaque page Web, chaque <a href="#procd-de-rafrachissement">procédé de rafraîchissement</a> ou de <a href="#redirection-automatique">redirection automatique</a> ( balise <code lang="en" xml:lang="en">object</code>, balise <code lang="en" xml:lang="en">embed</code>, balise <code lang="en" xml:lang="en">svg</code>, balise <code lang="en" xml:lang="en">canvas</code>, balise <code lang="en" xml:lang="en">meta</code>) vérifie-t-il une de ces conditions (<a href="#critre-131" title="Cas particuliers pour le critère 13.1">hors cas particuliers</a>) ?\n\n<ul><li> L'utilisateur peut arrêter ou relancer le rafraîchissement</li>\n<li> L'utilisateur peut augmenter la limite de temps entre deux rafraîchissements de dix fois, au moins</li>\n<li> L'utilisateur est averti de l'imminence du rafraîchissement et dispose de vingt secondes, au moins, pour augmenter la limite de temps avant le prochain rafraîchissement</li>\n<li> La limite de temps entre deux rafraîchissements est de vingt heures, au moins</li>\n</ul></li>\n<li> Test 13.1.2 : Pour chaque page Web, chaque procédé de redirection effectué via une balise <code lang="en" xml:lang="en">meta</code> est-il immédiat (<a href="#critre-131" title="Cas particuliers pour le critère 13.1">hors cas particuliers</a>) ?</li>\n<li> Test 13.1.3 : Pour chaque page Web, chaque procédé de redirection effectué via un <a href="#script">script</a> vérifie-t-il une de ces conditions (<a href="#critre-131" title="Cas particuliers pour le critère 13.1">hors cas particuliers</a>) ?\n\n<ul><li> L'utilisateur peut arrêter ou relancer la redirection</li>\n<li> L'utilisateur peut augmenter la limite de temps avant la redirection de dix fois, au moins</li>\n<li> L'utilisateur est averti de l'imminence de la redirection et dispose de vingt secondes, au moins, pour augmenter la limite de temps avant la prochaine redirection</li>\n<li> La limite de temps avant la redirection est de vingt heures, au moins</li>\n</ul></li>\n<li> Test 13.1.4 : Pour chaque page Web, chaque procédé de redirection effectué côté serveur vérifie-t-il une de ces conditions (<a href="#critre-131" title="Cas particuliers pour le critère 13.1">hors cas particuliers</a>) ?\n\n<ul><li> L'utilisateur peut arrêter ou relancer la redirection</li>\n<li> L'utilisateur peut augmenter la limite de temps avant la redirection de dix fois, au moins</li>\n<li> L'utilisateur est averti de l'imminence de la redirection et dispose de vingt secondes, au moins, pour augmenter la limite de temps avant la prochaine redirection</li>\n<li> La limite de temps avant la redirection est de vingt heures, au moins</li>\n</ul></li>\n<li> Test 13.1.5 : Pour chaque page Web, chaque procédé limitant le temps d'une session vérifie-t-il une de ces conditions (<a href="#critre-131" title="Cas particuliers pour le critère 13.1">hors cas particuliers</a>) ?\n\n<ul><li> L'utilisateur peut supprimer la limite de temps</li>\n<li> L'utilisateur peut augmenter la limite de temps</li>\n<li> La limite de temps avant la fin de la session est de vingt heures au moins.</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#time-limits-required-behaviors" title="2.2.1, nouvelle fenêtre" target="_blank">2.2.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#time-limits-pause" title="2.2.2, nouvelle fenêtre" target="_blank">2.2.2</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#time-limits-postponed" title="2.2.4, nouvelle fenêtre" target="_blank">2.2.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-no-extreme-changes-context" title="3.2.5, nouvelle fenêtre" target="_blank">3.2.5</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/F40.html" title="F40, nouvelle fenêtre" target="_blank">F40</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F41.html" title="F41, nouvelle fenêtre" target="_blank">F41</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F61.html" title="F61, nouvelle fenêtre" target="_blank">F61</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F58.html" title="F58, nouvelle fenêtre" target="_blank">F58</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G76.html" title="G76, nouvelle fenêtre" target="_blank">G76</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G186.html" title="G186, nouvelle fenêtre" target="_blank">G186</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G198.html" title="G198, nouvelle fenêtre" target="_blank">G198</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H76.html" title="H76, nouvelle fenêtre" target="_blank">H76</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SVR1.html" title="SVR1, nouvelle fenêtre" target="_blank">SVR1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR1.html" title="SCR1, nouvelle fenêtre" target="_blank">SCR1</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR36.html" title="SCR36, nouvelle fenêtre" target="_blank">SCR36</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G133.html" title="G133, nouvelle fenêtre" target="_blank">G133</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G180.html" title="G180, nouvelle fenêtre" target="_blank">G180</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G75.html" title="G75, nouvelle fenêtre" target="_blank">G75</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G110.html" title="G110, nouvelle fenêtre" target="_blank">G110</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR16.html" title="SCR16, nouvelle fenêtre" target="_blank">SCR16</a></p>\n\n\n'},{id:"13.2",level:"[A]",text:"Dans chaque page Web, pour chaque ouverture de nouvelle fenêtre, l'utilisateur est-il averti ?",description:'\n \n\n\n <ul><li> Test 13.2.1 : Dans chaque page Web, pour chaque ouverture d'une nouvelle fenêtre effectuée via un lien (attribut <code lang="en" xml:lang="en">target="_blank"</code>) ou une commande JavaScript, l'utilisateur est-il averti ?</li>\n<li> Test 13.2.2 : Dans chaque page Web, pour chaque ouverture d'une nouvelle fenêtre effectuée via une balise <code lang="en" xml:lang="en">object</code>, ou <code lang="en" xml:lang="en">embed</code>, l'utilisateur est-il averti ?</li>\n<li> Test 13.2.3 : Dans chaque page Web, pour chaque ouverture d'une nouvelle fenêtre effectuée via un contrôle de formulaire, l'utilisateur est-il averti ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-refs" title="2.4.4, nouvelle fenêtre" target="_blank">2.4.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-no-extreme-changes-context" title="3.2.5, nouvelle fenêtre" target="_blank">3.2.5</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G201.html" title="G201, nouvelle fenêtre" target="_blank">G201</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H33.html" title="H33, nouvelle fenêtre" target="_blank">H33</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H83.html" title="H83, nouvelle fenêtre" target="_blank">H83</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F22.html" title="F22, nouvelle fenêtre" target="_blank">F22</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR24.html" title="SCR24, nouvelle fenêtre" target="_blank">SCR24</a></p>\n\n\n'},{id:"13.3",level:"[A]",text:"Dans chaque page Web, l'ouverture d'une nouvelle fenêtre ne doit pas être déclenchée sans action de l'utilisateur. Cette règle est-elle respectée ?",description:'\n \n\n\n <ul><li> Test 13.3.1 : Dans chaque page Web, l'ouverture d'une nouvelle fenêtre ne doit pas être déclenchée sans action de l'utilisateur. Cette règle est-elle respectée ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-receive-focus" title="3.2.1, nouvelle fenêtre" target="_blank">3.2.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-no-extreme-changes-context" title="3.2.5, nouvelle fenêtre" target="_blank">3.2.5</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G107.html" title="G107, nouvelle fenêtre" target="_blank">G107</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F22.html" title="F22, nouvelle fenêtre" target="_blank">F22</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F52.html" title="F52, nouvelle fenêtre" target="_blank">F52</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F55.html" title="F55, nouvelle fenêtre" target="_blank">F55</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F60.html" title="F60, nouvelle fenêtre" target="_blank">F60</a></p>\n\n\n'},{id:"13.4",level:"[AAA]",text:"Dans chaque page Web, une tâche ne doit pas requérir de limite de temps pour être réalisée, sauf si elle se déroule en temps réel ou si cette limite de temps est essentielle. Cette règle est-elle respectée ?",description:'\n \n\n\n <ul><li> Test 13.4.1 : Dans chaque page Web, chaque tâche limitée dans le temps vérifie-t-elle une de ces conditions ?\n\n<ul><li> La tâche se déroule en temps réel</li>\n<li> La tâche requiert une limite de temps essentielle à son bon déroulement</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#time-limits-no-exceptions" title="2.2.3, nouvelle fenêtre" target="_blank">2.2.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G5.html" title="G5, nouvelle fenêtre" target="_blank">G5</a></p>\n\n\n'},{id:"13.5",level:"[AAA]",text:"Dans chaque page Web, lors d'une interruption de session authentifiée, les données saisies par l'utilisateur sont-elles récupérées après ré-authentification ?",description:'\n \n\n\n <ul><li> Test 13.5.1 : Dans chaque page Web, lors d'une interruption de session authentifiée, les données saisies par l'utilisateur sont-elles récupérées après ré-authentification ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#time-limits-server-timeout" title="2.2.5, nouvelle fenêtre" target="_blank">2.2.5</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G105.html" title="G105, nouvelle fenêtre" target="_blank">G105</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G181.html" title="G181, nouvelle fenêtre" target="_blank">G181</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F12.html" title="F12, nouvelle fenêtre" target="_blank">F12</a></p>\n\n\n'},{id:"13.6",level:"[A]",text:"Dans chaque page Web, pour chaque fichier en téléchargement, des informations relatives à sa consultation sont-elles présentes (hors cas particuliers) ?",description:'\n \n\n\n <ul><li> Test 13.6.1 : Dans chaque page Web, chaque fichier en téléchargement via un lien ou un formulaire a-t-il des informations relatives à son format (<a href="#critre-136" title="Cas particuliers pour le critère 13.6">hors cas particuliers</a>) ?</li>\n<li> Test 13.6.2 : Dans chaque page Web, chaque fichier en téléchargement via un lien ou un formulaire a-t-il des informations relatives à son poids (<a href="#critre-136" title="Cas particuliers pour le critère 13.6">hors cas particuliers</a>) ?</li>\n<li> Test 13.6.3 : Dans chaque page Web, chaque fichier en téléchargement via un lien ou un formulaire a-t-il, si nécessaire, des informations relatives à sa langue (<a href="#critre-136" title="Cas particuliers pour le critère 13.6">hors cas particuliers</a>) ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-refs" title="2.4.4, nouvelle fenêtre" target="_blank">2.4.4</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H33.html" title="H33, nouvelle fenêtre" target="_blank">H33</a></p>\n\n\n'},{id:"13.7",level:"[A]",text:"Dans chaque page Web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible?",description:'\n \n\n\n <ul><li> Test 13.7.1 : Dans chaque page Web, chaque fonctionnalité de téléchargement d'un document bureautique vérifie-t-elle une de ces conditions ?\n\n<ul><li> Le document en téléchargement est compatible avec l'accessibilité</li>\n<li> Il existe une version alternative du document en téléchargement compatible avec l'accessibilité</li>\n<li> Il existe une version alternative au format HTML du document en téléchargement</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-sequence" title="1.3.2, nouvelle fenêtre" target="_blank">1.3.2</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-skip" title="2.4.1, nouvelle fenêtre" target="_blank">2.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-focus-order" title="2.4.3, nouvelle fenêtre" target="_blank">2.4.3</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-doc-lang-id" title="3.1.1, nouvelle fenêtre" target="_blank">3.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G10.html" title="G10, nouvelle fenêtre" target="_blank">G10</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G135.html" title="G135, nouvelle fenêtre" target="_blank">G135</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F15.html" title="F15, nouvelle fenêtre" target="_blank">F15</a></p>\n\n\n'},{id:"13.8",level:"[A]",text:"Pour chaque document bureautique ayant une version accessible, cette version offre-t-elle la même information ?",description:'\n \n\n\n <ul><li> Test 13.8.1 : Chaque document bureautique ayant une version accessible vérifie-t-il une de ces conditions ?\n\n<ul><li> La version compatible avec l'accessibilité offre la même information</li>\n<li> La version alternative au format HTML est pertinente et offre la même information</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-sequence" title="1.3.2, nouvelle fenêtre" target="_blank">1.3.2</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic" title="1.3.1, nouvelle fenêtre" target="_blank">1.3.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-skip" title="2.4.1, nouvelle fenêtre" target="_blank">2.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-focus-order" title="2.4.3, nouvelle fenêtre" target="_blank">2.4.3</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-doc-lang-id" title="3.1.1, nouvelle fenêtre" target="_blank">3.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv" title="4.1.2, nouvelle fenêtre" target="_blank">4.1.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G10.html" title="G10, nouvelle fenêtre" target="_blank">G10</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G135.html" title="G135, nouvelle fenêtre" target="_blank">G135</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F15.html" title="F15, nouvelle fenêtre" target="_blank">F15</a></p>\n\n\n'},{id:"13.9",level:"[AAA]",text:"Dans chaque page Web, les expressions inhabituelles, les expressions idiomatiques ou le jargon sont-ils explicités ?",description:'\n \n\n\n <ul><li> Test 13.9.1 : Dans chaque page Web, chaque expression inhabituelle ou limitée, chaque expression idiomatique ou le jargon vérifie-t-il une des conditions suivantes ?\n\n<ul><li> Il existe une définition dans le contexte adjacent de l'expression indiquée par la balise <code lang="en" xml:lang="en">dfn</code></li>\n<li> Il existe une définition via une liste de définition</li>\n<li> Il existe une définition dans la page</li>\n<li> L'expression est contenue dans un lien permettant d'accéder à la définition</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-idioms" title="3.1.3, nouvelle fenêtre" target="_blank">3.1.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G55.html" title="G55, nouvelle fenêtre" target="_blank">G55</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G101.html" title="G101, nouvelle fenêtre" target="_blank">G101</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G112.html" title="G112, nouvelle fenêtre" target="_blank">G112</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G160.html" title="G160, nouvelle fenêtre" target="_blank">G160</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G153.html" title="G153, nouvelle fenêtre" target="_blank">G153</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H54.html" title="H54, nouvelle fenêtre" target="_blank">H54</a></p>\n\n\n'},{id:"13.10",level:"[AAA]",text:"Dans chaque page Web, pour chaque expression inhabituelle ou limitée, idiomatique ou de jargon ayant une définition, cette définition est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 13.10.1 : Dans chaque page Web, pour chaque expression inhabituelle ou limitée, idiomatique ou de jargon ayant une définition, cette définition vérifie-t-elle l'une de ces conditions ?\n\n<ul><li> Le contenu de la définition associée est pertinent</li>\n<li> Le contenu de la balise <code lang="en" xml:lang="en">dd</code> de la liste de définition est pertinent</li>\n<li> La définition donnée par le contexte adjacent est pertinente.</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-idioms" title="3.1.3, nouvelle fenêtre" target="_blank">3.1.3</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G55.html" title="G55, nouvelle fenêtre" target="_blank">G55</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G101.html" title="G101, nouvelle fenêtre" target="_blank">G101</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G112.html" title="G112, nouvelle fenêtre" target="_blank">G112</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H54.html" title="H54, nouvelle fenêtre" target="_blank">H54</a></p>\n\n\n'},{id:"13.11",level:"[A]",text:"Dans chaque page Web, chaque contenu cryptique (art ascii, émoticon, syntaxe cryptique) a-t-il une alternative ?",description:'\n \n\n\n <ul><li> Test 13.11.1 : Dans chaque page Web, chaque contenu cryptique (art ascii, émoticon, syntaxe cryptique) vérifie-t-il une de ces conditions ?\n\n<ul><li> Un attribut <code lang="en" xml:lang="en">title</code> est disponible</li>\n<li> Une définition est donnée par le contexte adjacent</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G160.html" title="G160, nouvelle fenêtre" target="_blank">G160</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G153.html" title="G153, nouvelle fenêtre" target="_blank">G153</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/H86.html" title="H86, nouvelle fenêtre" target="_blank">H86</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F71.html" title="F71, nouvelle fenêtre" target="_blank">F71</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F72.html" title="F72, nouvelle fenêtre" target="_blank">F72</a></p>\n\n\n'},{id:"13.12",level:"[A]",text:"Dans chaque page Web, pour chaque contenu cryptique (art ascii, émoticon, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ?",description:'\n \n\n\n <ul><li> Test 13.12.1 : Dans chaque page Web, chaque contenu cryptique (art ascii, émoticon, syntaxe cryptique) vérifie-t-il une de ces conditions ?\n\n<ul><li> Le contenu de l'attribut <code lang="en" xml:lang="en">title</code> est pertinent</li>\n<li> La définition donnée par le contexte adjacent est pertinente</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all" title="1.1.1, nouvelle fenêtre" target="_blank">1.1.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/H86.html" title="H86, nouvelle fenêtre" target="_blank">H86</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F71.html" title="F71, nouvelle fenêtre" target="_blank">F71</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F72.html" title="F72, nouvelle fenêtre" target="_blank">F72</a></p>\n\n\n'},{id:"13.13",level:"[AAA]",text:"Dans chaque page Web, pour chaque mot dont le sens ne peut être compris sans en connaître la prononciation, celle-ci est-elle indiquée ?",description:'\n \n\n\n <ul><li> Test 13.13.1 : Dans chaque page Web, chaque mot dont le sens ne peut être compris sans en connaître la prononciation, vérifie-t-il une de ces conditions ?\n\n<ul><li> L'indication de la prononciation phonétique est présente de manière adjacente</li>\n<li> L'indication de la prononciation phonétique est accessible via un lien</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-pronunciation" title="3.1.6, nouvelle fenêtre" target="_blank">3.1.6</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G62.html" title="G62, nouvelle fenêtre" target="_blank">G62</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G120.html" title="G120, nouvelle fenêtre" target="_blank">G120</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G121.html" title="G121, nouvelle fenêtre" target="_blank">G121</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G160.html" title="G160, nouvelle fenêtre" target="_blank">G160</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G153.html" title="G153, nouvelle fenêtre" target="_blank">G153</a></p>\n\n\n'},{id:"13.14",level:"[AAA]",text:"Dans chaque page Web, chaque texte qui nécessite un niveau de lecture plus avancé que le premier cycle de l'enseignement secondaire a-t-il une version alternative ?",description:'\n \n\n\n <ul><li> Test 13.14.1 : Dans chaque page Web, chaque texte qui nécessite un niveau de lecture plus avancé que le premier cycle de l'enseignement secondaire (hors nom propre et titre) vérifie-t-il une de ces conditions ?\n\n<ul><li> Une illustration ou des symboles graphiques adaptés au niveau de lecture du premier cycle de l'enseignement secondaire sont présents</li>\n<li> Une version en Langue des Signes Française est présente</li>\n<li> Une version vocalisée du texte est présente</li>\n<li> Un résumé adapté au niveau de lecture du premier cycle de l'enseignement secondaire est présent</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#meaning-supplements" title="3.1.5, nouvelle fenêtre" target="_blank">3.1.5</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G79.html" title="G79, nouvelle fenêtre" target="_blank">G79</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G86.html" title="G86, nouvelle fenêtre" target="_blank">G86</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G103.html" title="G103, nouvelle fenêtre" target="_blank">G103</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G160.html" title="G160, nouvelle fenêtre" target="_blank">G160</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G153.html" title="G153, nouvelle fenêtre" target="_blank">G153</a></p>\n\n\n'},{id:"13.15",level:"[A]",text:"Dans chaque page Web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ?",description:'\n \n\n\n <ul><li> Test 13.15.1 : Dans chaque page Web, chaque image animée (balise <code lang="en" xml:lang="en">img</code>, balise <code lang="en" xml:lang="en">svg</code> ou balise <code lang="en" xml:lang="en">object</code>) qui provoque un changement brusque de luminosité ou un effet de flash vérifie-t-elle une de ces conditions ?\n\n<ul><li> La fréquence de l'effet est inférieure à 3 par seconde</li>\n<li> La surface totale cumulée des effets est inférieure ou égale à 21 824 pixels</li>\n</ul></li>\n<li> Test 13.15.2 : Dans chaque page Web, chaque <a href="#script"><code lang="en" xml:lang="en">script</code></a> qui provoque un changement brusque de luminosité ou un effet de flash vérifie-t-il une de ces conditions ?\n\n<ul><li> La fréquence de l'effet est inférieure à 3 par seconde</li>\n<li> La surface totale cumulée des effets est inférieure ou égale à 21 824 pixels</li>\n</ul></li>\n<li> Test 13.15.3 : Dans chaque page Web, chaque mise en forme CSS qui provoque un changement brusque de luminosité ou un effet de flash vérifie-t-elle une de ces conditions ?\n\n<ul><li> La fréquence de l'effet est inférieure à 3 par seconde</li>\n<li> La surface totale cumulée des effets est inférieure ou égale à 21 824 pixels</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#seizure-does-not-violate" title="2.3.1, nouvelle fenêtre" target="_blank">2.3.1</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G15.html" title="G15, nouvelle fenêtre" target="_blank">G15</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G19.html" title="G19, nouvelle fenêtre" target="_blank">G19</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G176.html" title="G176, nouvelle fenêtre" target="_blank">G176</a></p>\n\n\n'},{id:"13.16",level:"[AAA]",text:"Dans chaque page Web, les changements brusques de luminosité ou les effets de flash ont-ils une fréquence inférieure ou égale à 3 par seconde ?",description:'\n \n\n\n <ul><li> Test 13.16.1 : Dans chaque page Web, chaque changement brusque de luminosité ou un effet de flash provoqué par une image animée (balise <code lang="en" xml:lang="en">img</code>, balise <code lang="en" xml:lang="en">svg</code>, balise <code lang="en" xml:lang="en">embed</code>, balise <code lang="en" xml:lang="en">canvas</code> ou balise <code lang="en" xml:lang="en">object</code>) a-t-il une fréquence inférieure ou égale à 3 par seconde ?</li>\n<li> Test 13.16.2 : Dans chaque page Web chaque changement brusque de luminosité ou un effet de flash provoqué par un <a href="#script"><code lang="en" xml:lang="en">script</code></a> a-t-il une fréquence inférieure ou égale à 3 par seconde ?</li>\n<li> Test 13.16.3 : Dans chaque page Web, chaque changement brusque de luminosité ou un effet de flash provoqué par une mise en forme CSS a-t-il une fréquence inférieure ou égale à 3 par seconde ?</li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#seizure-three-times" title="2.3.2, nouvelle fenêtre" target="_blank">2.3.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G19.html" title="G19, nouvelle fenêtre" target="_blank">G19</a></p>\n\n\n'},{id:"13.17",level:"[A]",text:"Dans chaque page Web, chaque contenu en mouvement ou clignotant est-il contrôlable par l'utilisateur ?",description:'\n \n\n\n <ul><li> Test 13.17.1 : Dans chaque page Web, chaque contenu en mouvement, déclenché automatiquement, vérifie-t-il une de ces conditions ?\n\n<ul><li> La durée du mouvement est inférieure ou égale à 5 secondes</li>\n<li> L'utilisateur peut arrêter et relancer le mouvement</li>\n<li> L'utilisateur peut afficher et masquer le contenu en mouvement</li>\n<li> L'utilisateur peut afficher la totalité de l'information sans le mouvement.</li>\n</ul></li>\n<li> Test 13.17.2 : Dans chaque page Web, chaque contenu clignotant, déclenché automatiquement, vérifie-t-il une de ces conditions ?\n\n<ul><li> La durée du clignotement est inférieure ou égale à 5 secondes</li>\n<li> L'utilisateur peut arrêter et relancer le clignotement</li>\n<li> L'utilisateur peut afficher et masquer le contenu clignotant</li>\n<li> L'utilisateur peut afficher la totalité de l'information sans le clignotement</li>\n</ul></li>\n</ul><p><strong>Correspondances WCAG 2.0</strong></p>\n\n<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-real-time-captions" title="1.2.4, nouvelle fenêtre" target="_blank">1.2.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-live-audio-only" title="1.2.9, nouvelle fenêtre" target="_blank">1.2.9</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#time-limits-required-behaviors" title="2.2.1, nouvelle fenêtre" target="_blank">2.2.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#time-limits-pause" title="2.2.2, nouvelle fenêtre" target="_blank">2.2.2</a></p>\n\n<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a href="http://www.w3.org/TR/WCAG-TECHS/G4.html" title="G4, nouvelle fenêtre" target="_blank">G4</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G11.html" title="G11, nouvelle fenêtre" target="_blank">G11</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G152.html" title="G152, nouvelle fenêtre" target="_blank">G152</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G186.html" title="G186, nouvelle fenêtre" target="_blank">G186</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G187.html" title="G187, nouvelle fenêtre" target="_blank">G187</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/G191.html" title="G191, nouvelle fenêtre" target="_blank">G191</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM11.html" title="SM11, nouvelle fenêtre" target="_blank">SM11</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SM12.html" title="SM12, nouvelle fenêtre" target="_blank">SM12</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F47.html" title="F47, nouvelle fenêtre" target="_blank">F47</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F50.html" title="F50, nouvelle fenêtre" target="_blank">F50</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F4.html" title="F4, nouvelle fenêtre" target="_blank">F4</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F7.html" title="F7, nouvelle fenêtre" target="_blank">F7</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/F16.html" title="F16, nouvelle fenêtre" target="_blank">F16</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR22.html" title="SCR22, nouvelle fenêtre" target="_blank">SCR22</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR33.html" title="SCR33, nouvelle fenêtre" target="_blank">SCR33</a> - <a href="http://www.w3.org/TR/WCAG-TECHS/SCR36.html" title="SCR36, nouvelle fenêtre" target="_blank">SCR36</a></p>\n\n\n'}]}]};</script><script>"use strict";function r(e){/in/.test(document.readyState)?setTimeout("r("+e+")",9):e()}var rgaa={editMode:!1,currentLevel:"AA",nbRules:{A:0,AA:0,AAA:0},CS:{modepourcent:"Mode pourcent",modechecklist:"Mode check-list",percentmode:"percentMode",checklistmode:"checklistMode",resetscore:"Etes-vous certain de vouloir réinitialiser toutes les scores ?",defaultprojectname:"Nom du projet XXX",calculatorrgaa:"Calculateur RGAA 3"}};rgaa.start=function(){rgaa.createChapter(),rgaa.init(),rgaa.scrollUpdate()},rgaa.qsa=function(e,t){[].forEach.call(document.querySelectorAll(e),t,!1)},rgaa.init=function(){var e,t,a=0;rgaa.initHeader(),rgaa.updateTitle(),rgaa.initImportExport(),window.addEventListener("scroll",function(){rgaa.scrollUpdate()}),rgaa.qsa("tbody [type=checkbox]",function(e){e.addEventListener("change",function(e){var t=e.target.parentNode.parentNode;e.target.checked===!0?t.setAttribute("aria-disabled","false"):t.setAttribute("aria-disabled","true"),rgaa.computeScore(t.parentNode.parentNode.parentNode)})}),rgaa.qsa("h2 .icon-chat",function(e){e.addEventListener("click",function(){var t=this.parentNode.parentNode.querySelector(".chapterComment");t.classList.contains("axs_hidden")?(t.classList.remove("axs_hidden"),t.querySelector("textarea").focus()):(t.classList.add("axs_hidden"),e.blur())})}),rgaa.initUpdateCommentIcons(),rgaa.qsa("tbody td.rule",function(e){e.addEventListener("click",function(){var t,a=e.parentNode;if(t=a.querySelector("td:last-child input"),document.body.classList.contains(rgaa.CS.percentmode)){if(rgaa.editMode)return!0;t.value=t.value?10*Math.round(t.value/10)+10:0,t.value>100&&(t.value="")}else"100"==t.value?(t.value="0",t.setAttribute("aria-checked","false")):"0"===t.value?(t.value="",t.setAttribute("aria-checked","false")):(t.value="100",t.setAttribute("aria-checked","true"));rgaa.rateSave(t.parentNode)})}),rgaa.qsa("tbody td.rate",function(e){e.addEventListener("click",function(){document.body.classList.contains(rgaa.CS.checklistmode)&&e.previousElementSibling.click()})}),rgaa.qsa(".ruleId",function(e){e.addEventListener("click",function(){this.parentNode.classList.contains("displayDescription")?(this.removeAttribute("aria-expanded"),this.parentNode.classList.remove("displayDescription")):(this.setAttribute("aria-expanded","true"),this.parentNode.classList.add("displayDescription"))}),e.addEventListener("keydown",function(e){(13===e.keyCode||32===e.keyCode)&&this.parentNode.classList.toggle("displayDescription")})}),rgaa.qsa(".ruleDescription",function(e){e.addEventListener("click",function(e){e.stopPropagation()})}),e=document.getElementById("scoreList"),e.innerHTML="",rgaa.qsa("#rulesSection h2",function(t){var r=document.createElement("li");r.setAttribute("id","score-chapter"+a),r.innerHTML='<a href="#chapter'+a+'">'+t.querySelector("a:last-child").innerHTML+"</a>",r.children[0].setAttribute("href","#chapter"+a),e.appendChild(r),a+=1}),rgaa.qsa("article input[type=text]",function(e){e.addEventListener("focus",function(){document.body.classList.contains(rgaa.CS.percentmode)&&rgaa.rateCellDisplay(e.parentNode),rgaa.setEditMode(e.parentNode.parentNode,!0)}),e.addEventListener("blur",function(e){window.setTimeout(function(){rgaa.setEditMode(e.target.parentNode.parentNode,!1),rgaa.rateCellHide(e.target.parentNode)},0)}),e.addEventListener("keydown",function(t){if(document.body.classList.contains(rgaa.CS.checklistmode)){if(9==t.keyCode)return!0;if(32===t.keyCode)e.parentNode.click(),t.preventDefault();else if(13===t.keyCode||40===t.keyCode){var a=e.parentNode.parentNode;a=rgaa.nextTr(a),a&&a.querySelector("[type=text]").focus()}else if(38===t.keyCode){var a=e.parentNode.parentNode;a=rgaa.previousTr(a),a&&a.querySelector("[type=text]").focus()}else 27===t.keyCode?(e.value="",rgaa.rateSave(e.parentNode)):t.preventDefault()}else 13===t.keyCode&&e.blur()})}),document.getElementById("projectName").addEventListener("keydown",function(){rgaa.updateTitle()}),rgaa.qsa("td.rate",function(e){e.addEventListener("mouseenter",function(e){document.body.classList.contains(rgaa.CS.percentmode)&&rgaa.rateCellDisplay(e.target)}),e.addEventListener("mouseleave",function(e){rgaa.editMode||rgaa.rateCellHide(e.target)})}),rgaa.computeAllScore(),document.getElementById("resetButton").addEventListener("click",function(){window.confirm(rgaa.CS.resetscore)&&rgaa.reset()}),t=document.getElementById("jsonToImport"),""!==t.innerHTML&&(rgaa.startImport(t.innerHTML)||(document.getElementById("btnImport").click(),document.getElementById("importArea").value=t.innerHTML),t.innerHTML="")},rgaa.initUpdateCommentIcons=function(){rgaa.qsa(".chapterComment textarea",function(e){var t=e.parentNode.parentNode;e.addEventListener("blur",function(){e.value?t.classList.add("hasComment"):t.classList.remove("hasComment")})})},rgaa.initImportExport=function(){document.getElementById("btnExportBack").addEventListener("click",function(){rgaa.backToRules()}),document.getElementById("btnImportBack").addEventListener("click",function(){rgaa.backToRules()}),document.getElementById("btnStartImport").addEventListener("click",function(){var e=document.getElementById("importArea").value;rgaa.startImport(e)&&rgaa.backToRules()})},rgaa.startImport=function(e){var t;try{t=JSON.parse(e)}catch(a){return document.getElementById("importErrorMessage").innerHTML=a.message,!1}return rgaa.reset(),document.getElementById("projectName").value=t.name,rgaa.updateTitle(),rgaa.setLevel(document.getElementById(t.level),!0),rgaa.setMode(t.mode),document.getElementById("commentArea").value=t.comment,t.rules.forEach(function(e){var t,a=document.getElementById(e.id).parentNode;t=a.querySelector("td.rate input"),t.value=e.value,"100"===e.value?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),rgaa.rateCellHide(a.querySelector("td.rate")),e.disabled&&a.querySelector("input[type=checkbox]").click()}),t.chapterComments&&t.chapterComments.forEach(function(e){var t=document.getElementById("commentChapter"+e.id);t.value=e.comment}),rgaa.qsa(".chapterComment textarea",function(e){var t=e.parentNode.parentNode;t.classList.remove("hasComment"),e.value?t.classList.add("hasComment"):t.classList.remove("hasComment")}),rgaa.computeAllScore(),!0},rgaa.setMode=function(e){document.body.classList.remove(rgaa.CS.percentmode,rgaa.CS.checklistmode),document.body.classList.add(e),e===rgaa.CS.percentmode?(document.getElementById("btnChangeMode").innerHTML=rgaa.CS.modechecklist,rgaa.qsa("#rulesSection input",function(e){e.removeAttribute("role"),e.removeAttribute("aria-checked")})):(document.getElementById("btnChangeMode").innerHTML=rgaa.CS.modepourcent,rgaa.qsa("#rulesSection input",function(e){e.setAttribute("role","checkbox"),"100"===e.value?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false")}))},rgaa.backToRules=function(){document.querySelector("section.display").classList.remove("display"),document.getElementById("rulesSection").classList.add("display"),window.location.href=window.location.href.split("#")[0]+"#projectName"},rgaa.reset=function(){rgaa.qsa("article input[type=text]",function(e){e.value="",e.removeAttribute("aria-checked")}),rgaa.qsa("article td.rate",function(e){e.removeAttribute("data-completed")}),rgaa.computeAllScore(),document.getElementById("commentArea").value="",document.getElementById("projectName").value=rgaa.CS.defaultprojectname,rgaa.updateTitle(),rgaa.qsa("td.rate span",function(e){e.innerHTML=""}),rgaa.qsa("article [type=checkbox]",function(e){e.checked=!0,e.setAttribute("checked",""),e.parentNode.parentNode.setAttribute("aria-disabled","false")}),rgaa.qsa(".chapterComment textarea",function(e){e.value=""}),rgaa.qsa(".chapterComment",function(e){e.classList.add("axs_hidden")}),rgaa.qsa(".hasComment",function(e){e.classList.remove("hasComment")})},rgaa.updateTitle=function(){document.title=document.getElementById("projectName").value+" - "+rgaa.CS.calculatorrgaa},rgaa.computeAllScore=function(){rgaa.qsa("article",function(e){rgaa.computeScore(e,!0)}),rgaa.scrollUpdate(),rgaa.computeTotalScore(),rgaa.computeLabel()},rgaa.computeLabel=function(){var e,t={A:0,AA:0,AAA:0};rgaa.qsa("td.rate input",function(e){"100"===e.value&&t[e.parentNode.parentNode.getAttribute("data-level")]++}),t.A===rgaa.nbRules.A?(e=t.AA>=rgaa.nbRules.AA/2?t.AA===rgaa.nbRules.AA?t.AAA>0?"e-accessible: <strong>niveau 5</strong>":"e-accessible: <strong>niveau 4</strong>":"e-accessible: <strong>niveau 3</strong>":"e-accessible: <strong>niveau 2</strong>",document.querySelector("#elabel").innerHTML='Cette page peut techniquement bénéficier du label <a target="_blank" title="Plus d\'info sur le label e-accessible" href="http://access42.net/Le-label-e-accessible-pour-les-administrations.html">'+e+'<span class="axs_hidden"> (nouvelle fenêtre)</span></a>.'):document.querySelector("#elabel").innerHTML=""},rgaa.computeScore=function(e,t){var a,r,n,o=0,c=0,i=0,d=0;r=rgaa.getLevelClasses(),Array.prototype.forEach.call(e.querySelectorAll(r),function(e){d++;var t=e.querySelector("td.rate input").value;t?(o+=1,c+=parseInt(t,10),"100"==t?(i++,e.querySelector("td.rate").setAttribute("data-completed","true")):e.querySelector("td.rate").setAttribute("data-completed","false")):e.querySelector("td.rate").removeAttribute("data-completed")}),c=0===o?"":Math.round(c/o),a=e.querySelector("h2 span"),e.setAttribute("score",c),c=document.body.classList.contains(rgaa.CS.percentmode)?""!==c?" "+c+"%":" N/C":" "+i+"/"+d,a.innerHTML=c,n=document.querySelector("#currentChapter span"),n&&(n.innerHTML=c),document.getElementById("score-"+a.parentNode.parentNode.parentNode.getAttribute("id")).querySelector("span").innerHTML=c,t||(rgaa.scrollUpdate(),rgaa.computeTotalScore(),rgaa.computeLabel())},rgaa.getLevelClasses=function(e){return e=e||"","A"===rgaa.currentLevel?"tr[data-level=A][aria-disabled=false]"+e:"AA"===rgaa.currentLevel?"tr[data-level=A][aria-disabled=false]"+e+", tr[data-level=AA][aria-disabled=false]"+e:"tr[data-level=A][aria-disabled=false]"+e+", tr[data-level=AA][aria-disabled=false]"+e+", tr[data-level=AAA][aria-disabled=false]"+e},rgaa.setEditMode=function(e,t){t?e.classList.add("edit"):e.classList.remove("edit"),rgaa.editMode=t},rgaa.rateCellHide=function(e){var t,a=e.firstChild;t=a.nextSibling,rgaa.rateSave(e),a.classList.remove("hide"),t.classList.add("axs_hidden")},rgaa.rateSave=function(e){var t,a,r,n=e.firstChild;t=n.nextSibling,a=t.value.trim(),r=a?a+"%":"",r!==n.innerHTML&&(n.innerHTML=r,rgaa.computeScore(e.parentNode.parentNode.parentNode.parentNode))},rgaa.computeTotalScore=function(){var e,t,a=0,r=0;rgaa.qsa("#rulesSection article",function(t){e=t.getAttribute("score"),""!==e&&(a+=parseInt(e,10),r+=1)}),0!==r&&(a=Math.round(100*(a/r))/100),t=document.querySelectorAll(rgaa.getLevelClasses(" td.rate[data-completed=true]")).length+"/"+document.querySelectorAll(rgaa.getLevelClasses()).length,document.querySelector("footer h1 span").innerHTML=document.body.classList.contains(rgaa.CS.percentmode)?a?a+"%":"N/C":" "+t},rgaa.rateCellDisplay=function(e){var t,a=e.firstChild;a&&(t=a.nextSibling,a.classList.add("hide"),t.classList.remove("axs_hidden"))},rgaa.initHeader=function(){rgaa.setLevel(document.getElementById("AA"),!0),document.getElementById("AA").checked=!0,rgaa.qsa("header [type=radio]",function(e){e.addEventListener("change",function(){rgaa.setLevel(e)})}),rgaa.initMenu()},rgaa.initMenu=function(){document.getElementById("btnMenu").addEventListener("click",function(e){rgaa.toogleMenu(e)}),document.body.classList.contains(rgaa.CS.percentmode)?document.getElementById("btnChangeMode").innerHTML=rgaa.CS.modechecklist:document.body.classList.contains(rgaa.CS.checklistmode)?document.getElementById("btnChangeMode").innerHTML=rgaa.CS.modepourcent:(rgaa.setMode(rgaa.CS.checklistmode),document.getElementById("btnChangeMode").innerHTML=rgaa.CS.modepourcent),document.getElementById("btnChangeMode").addEventListener("click",function(){document.body.classList.contains(rgaa.CS.percentmode)?rgaa.setMode(rgaa.CS.checklistmode):rgaa.setMode(rgaa.CS.percentmode),rgaa.closeMenu(),rgaa.computeAllScore()}),document.getElementById("btnExport").addEventListener("click",function(){document.getElementById("exportArea").value="",document.querySelector("section.display").classList.remove("display"),document.getElementById("exportSection").classList.add("display"),window.location.href=window.location.href.split("#")[0]+"#exportSection",document.getElementById("exportArea").value=JSON.stringify(rgaa.getJsonExport()),rgaa.closeMenu()}),document.getElementById("btnImport").addEventListener("click",function(){document.querySelector("section.display").classList.remove("display"),document.getElementById("importSection").classList.add("display"),window.location.href=window.location.href.split("#")[0]+"#importSection",rgaa.closeMenu()}),document.getElementById("btnReport").addEventListener("click",function(){rgaa.generateReport(),rgaa.closeMenu()}),document.getElementById("btnSaveAs").addEventListener("click",function(){var e=document.getElementById("jsonToImport");rgaa.closeMenu(),e.innerHTML=JSON.stringify(rgaa.getJsonExport()),rgaa.download(document.title+".html",'<!DOCTYPE html><html lang="fr">'+document.querySelector("html").innerHTML+"</html>"),e.value=""}),rgaa.qsa("#menu li",function(e){e.addEventListener("keydown",function(e){if(e.preventDefault(),13==e.keyCode)this.click();else if(27==e.keyCode)rgaa.closeMenu();else if(40==e.keyCode){var t=this.nextElementSibling;t&&t.focus()}else if(38==e.keyCode){var t=this.previousElementSibling;t&&t.focus()}})}),rgaa.qsa("#btnMenu",function(e){e.addEventListener("keydown",function(e){27==e.keyCode?rgaa.closeMenu():40==e.keyCode&&(e.preventDefault(),document.querySelector("#menu li").focus())})})},rgaa.toogleMenu=function(){var e=document.getElementById("menu");"true"===e.getAttribute("aria-expanded")?rgaa.closeMenu():rgaa.openMenu()},rgaa.openMenu=function(){var e=document.getElementById("menu");e.setAttribute("aria-expanded","true"),e.setAttribute("aria-hidden","false")},rgaa.closeMenu=function(){var e=document.getElementById("menu");e.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","true")},rgaa.setLevel=function(e,t){var a=document.getElementsByTagName("section")[0];a.classList.remove("A","AA","AAA"),rgaa.qsa("header [type=radio]",function(e){e.removeAttribute("checked")}),e.setAttribute("checked","checked"),document.getElementsByTagName("section")[0].classList.add(e.value),rgaa.currentLevel=e.value,t||rgaa.computeAllScore()},rgaa.createChapter=function(){if(document.querySelector("#rulesSection article"))return!0;var e=0,t=document.getElementsByTagName("section")[0];RGAA.chapters.forEach(function(a,r){e=5===e?1:e+1;var n,o=document.createElement("a"),c=document.createElement("article"),i=document.createElement("h2"),d=document.createElement("button");d.setAttribute("title","Afficher/masquer commentaire pour: "+a.title),d.setAttribute("class","icon-chat"),d.setAttribute("aria-hidden","true"),i.appendChild(d),c.classList.add("color"+e),c.setAttribute("id","chapter"+r),i.setAttribute("data-color","color"+e),o.innerHTML=a.title,o.appendChild(document.createElement("span")),o.setAttribute("href","#footer"),i.appendChild(o),c.appendChild(i),c.appendChild(rgaa.createRules(a));var n=document.createElement("div");n.setAttribute("class","axs_hidden chapterComment"),n.innerHTML="<h3>Commentaire pour: "+a.title.split(". ")[1]+'</h3><textarea id="commentChapter'+r+'"></textarea>',c.appendChild(n),t.appendChild(c)})},rgaa.scrollUpdate=function(){rgaa.qsa("#rulesSection h2",function(e){window.scrollY>=e.parentNode.offsetTop&&(document.getElementById("currentChapter").innerHTML=e.innerHTML,document.getElementsByTagName("header")[0].className=e.getAttribute("data-color"))})},rgaa.createRules=function(e){var t,a=document.createElement("table"),r=document.createElement("tbody");return a.innerHTML='<thead><tr><th class="active"><span class="axs_hidden">activation de la règle</span></th><th class="id">id<span class="axs_hidden" id="toggle_rule_desc">, activer pour afficher/reduire la description complète de la règle</span></th><th class="level">niveau</th><th class="definition">définition</th><th class="rate">score<span class="axs_hidden" id="score-def"> (pourcentage de conformité avec la règle)</th></tr></theader>',e.rules.forEach(function(e){var a=document.createElement("tr");a.setAttribute("aria-disabled","false"),t=e.level.substr(1,e.level.length-2),rgaa.nbRules[t]++,a.setAttribute("data-level",t),a.innerHTML='<td><input type="checkbox" checked="checked" aria-label="règle '+e.id+'"></td><td tabindex="0" class="ruleId" id="id'+e.id+'" role="button" aria-describedby="toggle_rule_desc"><span class="axs_hidden">règle </span>'+e.id+"</td><td>"+e.level+'</td><td id="'+e.id+'" class="rule"><span class="axs_hidden">'+e.id+' </span><span id="ruleLabel'+e.id+'" class="ruleLabel">'+e.text+'</span><div class="ruleDescription">'+e.description+'</div></td><td class="rate"><span aria-hidden="true"></span><input class="axs_hidden" type="text" aria-labelledby="ruleLabel'+e.id+'"></td></tr>',r.appendChild(a)}),a.appendChild(r),a},rgaa.getJsonExport=function(){var e={name:document.getElementById("projectName").value,level:rgaa.currentLevel,mode:document.body.classList.contains(rgaa.CS.percentmode)?rgaa.CS.percentmode:rgaa.CS.checklistmode,comment:document.getElementById("commentArea").value,rules:[],chapterComments:[]};return rgaa.qsa("#rulesSection tbody tr",function(t){var a={};a.id=t.querySelector(".rule").getAttribute("id"),a.disabled="true"===t.getAttribute("aria-disabled")?!0:!1,a.value=t.querySelector("td.rate input").value,e.rules.push(a)}),rgaa.qsa(".chapterComment textarea",function(t){if(t.value){var a={};a.id=t.getAttribute("id").split("commentChapter")[1],a.type="text",a.comment=t.value,e.chapterComments.push(a)}}),e},rgaa.download=function(e,t){var a=document.createElement("a");if(a.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(t)),a.setAttribute("download",e),document.createEvent){var r=document.createEvent("MouseEvents");r.initEvent("click",!0,!0),a.dispatchEvent(r)}else a.click()},rgaa.tpl=function(e){return Function("v,o","o="+JSON.stringify(e).replace(/<%=(.+?)%>/g,'"+($1)+"').replace(/<%(.+?)%>/g,'";$1;o+="')+";return o")},rgaa.nextTr=function(e){var t=e.nextElementSibling;if(!t){var a=e.parentNode.parentNode.parentNode.nextElementSibling;if(!a)return!1;t=a.querySelector("tbody tr")}return t.getAttribute("data-level")&&t.getAttribute("data-level").length<=rgaa.currentLevel.length?t:t!=e?rgaa.nextTr(t):!1},rgaa.previousTr=function(e){var t=e.previousElementSibling;if(!t){var a=e.parentNode.parentNode.parentNode.previousElementSibling;if(!a)return!1;t=a.querySelector("tbody tr:last-child")}return t.getAttribute("data-level")&&t.getAttribute("data-level").length<=rgaa.currentLevel.length?t:t!=e?rgaa.previousTr(t):!1},rgaa.generateReport=function(){var e,t=window.open(""),a="",r="";rgaa.reportWindow=t,rgaa.reportTpl||(rgaa.reportTpl=rgaa.tpl(document.getElementById("reportTemplate").innerHTML)),e="<li",e+="nk rel='stylesheet' href='report.css'>",r+="<h2>"+document.querySelector("footer h1").innerHTML+"</h2>",r+="<div>"+document.getElementById("commentArea").value+"</div>",rgaa.qsa("#rulesSection h2",function(e){a+=rgaa.getSectionReport(e.parentNode)}),t.document.write(rgaa.reportTpl({title:document.getElementById("projectName").value,body:a,header:r,style:e})),t.document.close(),Array.prototype.forEach.call(t.document.querySelectorAll(".ruleDescription"),function(e){e.parentNode.removeChild(e)});var n=function(e){/in/.test(t.document.readyState)?setTimeout("r("+e+")",9):e()};n(rgaa.reportLoaded)},rgaa.reportLoaded=function(){var e=rgaa.reportWindow;try{e.document.styleSheets[1].cssRules;var t=e.document.getElementsByTagName("style")[0];t.parentNode.removeChild(t)}catch(a){}rgaa.download(e.document.title+".html",'<!DOCTYPE html><html lang="fr">'+e.document.querySelector("html").innerHTML+"</html>")},rgaa.getSectionReport=function(e){var t,a,r="";return r+="<section><h2>"+e.querySelector("h2 a").innerHTML+"</h2>",t=e.querySelectorAll(rgaa.getLevelClasses(" [data-completed=false]")),t.length>0&&(r+="<h3>Erreur"+(t.length>1?"s":"")+" :</h3>",r+="<ul>",Array.prototype.forEach.call(t,function(e){r+="<li>"+e.parentNode.querySelector(".rule").innerHTML+"</li>"}),r+="</ul>"),a=e.querySelector("textarea").value,a&&(r+="<h3>Commentaire :</h3><div>"+a+"</div>"),r+"</section>"},r(rgaa.start);</script><style>h1,h2,h3,h4,h5,h6{font-size:1em;padding:0;margin:0}body{font-family:Arial,sans-sherif;color:#000;background-color:#fff;margin:2em 0 0}button,button:active{padding:0;cursor:pointer}section{display:none}section.display{display:block}#rulesSection{margin-top:-3.4em}#rulesSection [type=checkbox]:focus{outline:.1em solid #333}#importErrorMessage{margin:.5em 0 .5em 1.5em}section article:first-child{padding-top:3.5em}section [data-level=A],section [data-level=AA],section [data-level=AAA]{display:none}section.A [data-level=A]{display:table-row}section.AA [data-level=A],section.AA [data-level=AA]{display:table-row}section.AAA [data-level=A],section.AAA [data-level=AA],section.AAA [data-level=AAA]{display:table-row}.hide{display:none}.axs_hidden,input[type=radio]{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}html{box-sizing:border-box}*,:before,:after{box-sizing:inherit}header{position:fixed;top:0;background:#333;color:#fff;width:100%;padding:.5em;height:2.4em}header h1{position:absolute;z-index:1000;margin-left:2em}#btnMenu{border:0;background:0 0;color:#fff;font-size:1em;font-weight:700;position:absolute;top:.3em;z-index:1000;left:0}#btnMenu:before{content:'\2630';margin-right:.5em;cursor:pointer;padding:.2em}#btnMenu:focus:before{border:.15em solid #fff}#menu[aria-expanded=false]{display:none}#menu{position:absolute;background:#444;color:#fff;list-style:none;padding:.5em;margin-top:1.5em;left:0;min-width:12em}#menu li{padding:.2em;cursor:pointer}#menu li:focus,#menu li:hover{background:#fff;color:#000}h2:first-child{padding-top:1.5em}h2{margin-left:.5em;padding:0 0 0 .4em;margin:0;text-align:left;font-size:1.4em;display:table-cell;vertical-align:bottom;height:2em;line-height:1}article h2 span{margin-left:.5em}header a,header a:active,header a:visited,header:focus,header:visited{color:#fff}header .level{position:absolute;right:.4em;top:.4em}header .level label,footer button,section button{display:inline-block;text-align:center;font-weight:700;background:#333;color:#fff;border:.15em solid #fff;cursor:pointer}section button{float:left;padding:.2em}.blackBtn,.blackBtn:hover,.blackBtn:focus{margin:.5em .5em 0 1em;padding:.3em;border:.2em solid #333}.blackBtn:hover,.blackBtn:focus{color:#333;background:#fff}.blackBtn:focus{text-decoration:underline}header .level label{width:3em}footer button,footer button:active{font-size:.7em;margin:.5em .5em 0 0;padding:.2em .4em;float:right}footer button:hover,footer button:focus{background:#fff;color:#333}fieldset{border:0}[type=radio]+label{background:#333;color:#fff}[type=radio]:not([checked=checked])+label:hover{background:#fff;color:#000}[type=radio]:focus+label{text-decoration:underline}[type=radio][checked=checked]+label{background:#fff;color:#000;border:.15em solid #fff}table{margin:0;width:100%;border-collapse:collapse}th,td{border:.1em solid #888;padding:.4em;vertical-align:top}th{border-color:#eee}td:first-child{border-left:0}td:last-child{border-right:0}th{background:#333;color:#fff;font-weight:700}article.color1{border-left:solid .4em #4AB5E5;border-right:solid .4em #4AB5E5}article.color2{border-left:solid .4em #4FBF87;border-right:solid .4em #4FBF87}article.color3{border-left:solid .4em #A885D9;border-right:solid .4em #A885D9}article.color4{border-left:solid .4em #FFB5E5;border-right:solid .4em #FFB5E5}article.color5{border-left:solid .4em #FFDB00;border-right:solid .4em #FFDB00}#currentChapter{font-size:1.3em}.color1 tr.edit{background-color:#4AB5E5}.color1 tr.edit td.rate{background-color:#4AB5E5}.color2 tr.edit{background-color:#4FBF87}.color2 tr.edit td.rate{background-color:#4FBF87}.color3 tr.edit{background-color:#A885D9}.color3 tr.edit td.rate{background-color:#A885D9}.color4 tr.edit{background-color:#FFB5E5}.color4 tr.edit td.rate{background-color:#FFB5E5}.color5 tr.edit{background-color:#FFDB00}.color5 tr.edit td.rate{background-color:#FFDB00}tr.edit td.rule{font-weight:700}.color1 #currentChapter{color:#4AB5E5}.color2 #currentChapter{color:#4FBF87}.color3 #currentChapter{color:#A885D9}.color4 #currentChapter{color:#FFB5E5}.color5 #currentChapter{color:#FFDB00}header.color1{border-bottom:.2em solid #4AB5E5}header.color2{border-bottom:.2em solid #4FBF87}header.color3{border-bottom:.2em solid #A885D9}header.color4{border-bottom:.2em solid #FFB5E5}header.color5{border-bottom:.2em solid #FFDB00}tr:hover{background:#f0f0f0}td.ruleId:hover,td.ruleId:focus{background:#fff;font-weight:700;outline:0}td.ruleId:before{color:#444;content:"\25b6";font-size:.75em;margin-right:.2em;display:inline-block;width:1em}.displayDescription td.ruleId:before{content:"\25bc"}td.ruleId:hover:before,td.ruleId:focus:before{font-weight:400}tr.edit td.rate{background:#fff}.checklistMode td.rate[data-completed=true]{background:#f8fff8}.checklistMode td.rate[data-completed=false]{background:#fff8f8}.checklistMode td.rate[data-completed=true]:before{content:"\2714";color:#030;font-size:.9em}.checklistMode td.rate[data-completed=false]:before{content:"\2718";font-size:.9em;color:#a33}.checklistMode tr[aria-disabled=true] td.rate{background:#ddd}tr[aria-disabled=true]{background:#fff}td.rule,td.rate,td.ruleId{cursor:pointer}tr[aria-disabled=true] td{color:#757575;background:#ddd;text-decoration:line-through;cursor:auto}table .active{width:2em}table .id{width:4.5em}table .level{width:4em}th.rate{width:8em}td.rate{text-align:center;font-weight:700}td .ruleDescription{display:none;cursor:initial}.displayDescription td .ruleDescription{display:block}.displayDescription .rule{font-weight:700}.displayDescription .ruleDescription{font-weight:400}.checklistMode td.rate span{display:none}td.rate input{width:100%;margin:0;padding:0;border:0;font-weight:700;text-align:center}article{padding:0}#currentChapter{width:100%;text-align:center;position:absolute;font-weight:700}footer{background:#333;margin-top:3em;padding-top:2em;color:#fff;font-size:1.4em}footer h1{padding:.4em;float:none;padding-bottom:0;font-size:1.4em}footer ul{margin:1em 0}#scoreList li{list-style:none}footer li span{padding-right:.6em;float:left;width:4em;text-align:left}textarea{font-family:Arial,sans-sherif;height:20em;width:80%;border:0;border-top:.2em solid #333;border:.2em solid #333;margin:1em;font-weight:700;padding:1em}#comment{background:#fff;color:#333;padding:0 0 2em 1em}#comment textarea{margin-left:0}#comment fieldset{margin:1em 0 0;padding:0;font-size:.7em}#comment fieldset legend{margin-bottom:.5em}#comment [type=radio]+label{width:7em;display:inline-block;text-align:center;padding:.17em;border:.17em solid #333;background:#333;color:#fff;cursor:pointer}#comment [type=radio]:not([checked=checked])+label{background:#fff;color:#333}#comment h2{padding-left:0}a,footer a:active,footer a:visited,footer a:hover{color:#333;text-decoration:none}footer a,footer a:active,footer a:visited,footer a:hover{color:#fff;text-decoration:none}::selection{background:#ddd}::-moz-selection{background:#ddd}#projectName{width:80%;font-weight:700;font-size:1.4em;border:0;margin:1em 0 -1em .5em;cursor:pointer}#projectName:focus{cursor:auto}#eof{height:2em}#version{font-size:.5em;font-weight:700;font-family:Arial;margin:.5em;margin-top:-2.5em}#version a:hover,#version a:focus{text-decoration:underline}#elabel{margin-left:1.5em;font-size:.7em}#elabel a{text-decoration:underline}#jsonToImport{display:none}.ruleDescription a{text-decoration:underline}article button.icon-chat{font-size:.7em;margin-right:.5em;color:#000;Text-Shadow:none}article button.icon-chat:hover,article button.icon-chat:focus,article.hasComment button.icon-chat{color:#fff;Text-Shadow:#000 .1em 0 0,#000 .1em .1em 0,#000 .1em -.1em 0,#000 -.1em .1em 0,#000 -.1em 0 0,#000 -.1em -.1em 0,#000 0 .1em 0,#000 0 -.1em 0;outline:0}button.icon-chat{padding:0;background:0 0}#currentChapter .icon-chat{display:none}.chapterComment{margin-top:1em}@font-face{font-family:Glyphter;src:url(data:application/font-ttf;charset=utf-8;base64,d09GRgABAAAAAAPAAAoAAAAABigAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAD4AAABWVrVjM2NtYXAAAAE0AAAAPAAAAUoAlAF3Z2x5ZgAAAXAAAACIAAAAsAv3vphoZWFkAAAB+AAAACwAAAA2Bt1T9GhoZWEAAAIkAAAAGAAAACQIXQQDaG10eAAAAjwAAAAIAAAACAgAAABsb2NhAAACRAAAAAYAAAAGAFgAAG1heHAAAAJMAAAAIAAAACABEQBEbmFtZQAAAmwAAAE7AAACbdWMZSRwb3N0AAADqAAAABUAAAApARAAAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYHBkcWUDcGBaIMCOIAACXvwecAAB4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZiALMf//8EqwPT/A1D1QMDIxkA5YCSsZDADALO5Bwd4nGNgZQACFgbm3QyCDDIM6gxGDOYMDMJ8jOyCcoziinaM5oJ6jOqKBsJyjCJsSmomZuYGxliZjCKi4uad1r6MjL7WTO8g9F+hSlk1NSt1ddl/surqcFpNTfbvTcaPzLsYfa3+pVn5MjH5WjHOsvJl/PeBEaTaSo0Rnf6XxRuVfh7oUgBwtyJBeJxjYGRgYADhaSf64/ltvjJwszCAwMX77fOQaRYG5t1AioOBCcQDACyiChR4nGNgZGBgYQCCGDAJYjMyoAImAAtGAG0EAAAABAAAAAAAAAAAWAAAAAEAAAACADgABQAAAAAAAgAAAAoACgAAAP8AAAAAAAB4nHWPS07DMBCGf/cFtBKqqGCH5AViASh9iFU37Jp9F92nrdOH0jhy3Eo9AOfhCJyAI9AbcAd+0gGhUmJ5/M03k3EC4AI7KOyfS+49K5wy23MJJ7gWLtPfCFfID8JVNPAoXKN/Eq7jHqFwAy04TlCVM2Z3eBZWaOJFuIRzvAqX6d+EK+R34Squ8CFcQ1OVhesYqZZwA7dqEZrUuMibqR5vdZhss7k37vscmtk6idyhHhmXL2yqu0Hnp/R7TL6Z9byPdezsSg9s6k2SWJ05uzQTH8y9z/rtdiw+mNgVf98g5XaI4HlOoTHGljFEwjPDvPDuTz5knGFNGx2pHuajIuZYwPI+jS4CdI689d/X5Njwth6tR8w8Zo/FijQoJn51J1yWJitqS5oJfVBM97R9tLnig/6AXZz0CTRjb6QAeJxjYGKAAC4G7AAozwhSAwAB1gASAAAA) format('truetype');font-weight:400;font-style:normal}[class*=icon-]:before{display:inline-block;font-family:Glyphter;font-style:normal;font-weight:400;line-height:1;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-chat:before{content:'\0041'}</style></head><body><header><button id="btnMenu" aria-label="menu" aria-haspopup="true"></button><ul id="menu" role="menu" aria-expanded="false" aria-hidden="true"><li role="menuitem" tabindex="0" id="btnChangeMode"></li><li role="menuitem" tabindex="0" id="btnReport">Générer le rapport</li><li role="menuitem" tabindex="0" id="btnSaveAs">Enregistrer sous</li><li role="menuitem" tabindex="0" id="btnImport">Importer</li><li role="menuitem" tabindex="0" id="btnExport">Exporter</li></ul><h1><a aria-label="Calcultaeur RGAA 3 - accéder aux scores" href="#footer">Calculateur RGAA 3</a></h1><div id="currentChapter" aria-hidden="true"></div><span class="level"><input type="radio" id="A" name="level" value="A" aria-label="niveau A"><label title="RGAA niveau A" for="A" aria-label="niveau simple A">A</label><input type="radio" id="AA" name="level" value="AA" aria-label="niveau double A" checked="checked"><label title="RGAA niveau AA" for="AA" aria-label="niveau double A">AA</label><input type="radio" id="AAA" name="level" value="AAA" aria-label="niveau triple A"><label title="RGAA niveau AAA" for="AAA" aria-label="niveau triple A">AAA</label></span></header><input id="projectName" type="text" aria-label="nom du projet" value="Nom du projet XXX"><section id="rulesSection" class="display"></section><section id="exportSection"><h2>Export JSON</h2><textarea id="exportArea"></textarea><br><button class="blackBtn" id="btnExportBack">Retour</button></section><section id="importSection"><h2>Import JSON</h2><textarea id="importArea"></textarea><br><div id="importErrorMessage"></div><button class="blackBtn" id="btnImportBack">Retour</button> <button class="blackBtn" id="btnStartImport">Importer</button></section><footer id="footer"><h1>Score total <span></span></h1><ul id="scoreList"></ul><span id="elabel"></span><div id="comment"><h2><label for="commentArea">Commentaire</label></h2><textarea id="commentArea" placeholder="Saisir un commentaire..."></textarea></div><div id="eof"><button id="resetButton">Reset</button> <span id="version">Version 2.1 - <a href="https://github.com/SylvainBzh/rgaa-calculator">Calculateur-RGAA sur github</a></span></div></footer><div id="jsonToImport"></div><script type="text/template" id="reportTemplate"><!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rapport accessiblité: <%=v.title%></title>
<style>
.ruleDescription{display:none}html{box-sizing:border-box}body{font-family:Arial,sans-sherif;color:#333;background-color:#DAD3CE;margin:0}header h2,header div{margin:1em}header{padding-bottom:3em}header div{border:solid .2em #000;padding:1em;background:#f0f0f0}header div:before{content:"Appréciation globale :";display:block;margin-bottom:1em;font-weight:700}section{margin:1em}section h2{border-top:.2em dotted #000;padding-top:1em}section div:last-child,section ul:last-child{margin-bottom:2em}h1{text-align:center;background:#000;color:#fff;padding:.5em;margin:0}h1:before{content:"Rapport d'accessiblité : "}h3:has(> ul){color:red}ul{padding:1em;margin:0 1em;border:.2em solid #000;list-style:none;color:#fff;background:#98363F}h3+div{padding:1em;margin:0 1em;border:.2em solid #000;background:#f0f0f0}
</style>
<%=v.style%>
</head>
<body>
<header>
<h1><%=v.title%></h1>
<%=v.header%>
</header>
<%=v.body%>
</body>
</html></script></body></html>