From a8a222e3a087a203a52382aa333698c79dc7d4e2 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Tue, 25 Jul 2023 14:01:10 +0000
Subject: [PATCH] fix(accessibility): horizontal scroll

---
 public/accessibilite.html | 1327 ++++++++++++++++++-------------------
 1 file changed, 657 insertions(+), 670 deletions(-)

diff --git a/public/accessibilite.html b/public/accessibilite.html
index 2a86556..fe108bd 100644
--- a/public/accessibilite.html
+++ b/public/accessibilite.html
@@ -8,7 +8,6 @@
       content="Ecolyo est le service proposé par la Métropole de Lyon pour suivre et comprendre la consommation énergétique globale de votre foyer."
     />
     <link rel="stylesheet" href="./index.css" />
-    <link rel="stylesheet" href="./mentions-legales.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap"
       rel="stylesheet"
@@ -33,789 +32,777 @@
         >
       </div>
     </nav>
-    <section class="main-cta">
-      <div class="container">
-        <div class="content-txt accessibility">
-          <h1 class="text-36-white">Déclaration d'accessibilité</h1>
+    <div class="container">
+      <div class="content-txt accessibility">
+        <h1 class="text-36-white">Déclaration d'accessibilité</h1>
 
-          <h2 class="text-18-white">1. Note générale concernant le document</h2>
-          <p class="text-16-white-padding">
-            Ce document est basé sur l’exemple de
-            <a
-              href="https://accessibilite.numerique.gouv.fr/doc/rgaa4-2019-exemple-declaration.pdf"
-            >
-              déclaration d’accessibilité RGAA 4.0
-            </a>
-            mis à disposition par la Direction interministérielle du numérique
-            en date de novembre 2019.
-            <br /><br />
-            La Métropole de Lyon s’engage à rendre ses sites internet, intranet,
-            extranet et ses progiciels accessibles [et ses applications mobiles
-            et mobilier urbain numérique] conformément à l’article 47 de la loi
-            n°2005-102 du 11 février 2005.
-          </p>
+        <h2 class="text-18-white">1. Note générale concernant le document</h2>
+        <p class="text-16-white-padding">
+          Ce document est basé sur l’exemple de
+          <a
+            href="https://accessibilite.numerique.gouv.fr/doc/rgaa4-2019-exemple-declaration.pdf"
+          >
+            déclaration d’accessibilité RGAA 4.0
+          </a>
+          mis à disposition par la Direction interministérielle du numérique en
+          date de novembre 2019.
+          <br /><br />
+          La Métropole de Lyon s’engage à rendre ses sites internet, intranet,
+          extranet et ses progiciels accessibles [et ses applications mobiles et
+          mobilier urbain numérique] conformément à l’article 47 de la loi
+          n°2005-102 du 11 février 2005.
+        </p>
 
-          <h2 class="text-18-white">
-            2. Schéma pluriannuel de mise en accessibilité
-          </h2>
-          <p class="text-16-white-padding">
-            La Métropole de Lyon met en œuvre la stratégie et les actions
-            suivantes :
-          </p>
-          <ul>
-            <li>
-              Actions à venir en 2022 :
-              <ul>
-                <li>
-                  Finalisation pour l'ensemble des sites de la mise à jour des
-                  certificats pour se conformer au RGAA version 4
-                </li>
-                <li>
-                  Amélioration du taux d'accessibilité des sites en fonction des
-                  audits et des retours des ateliers (l'objectif étant qu'il
-                  soit supérieur à 75% pour tous les sites)
-                </li>
-              </ul>
-            </li>
-          </ul>
+        <h2 class="text-18-white">
+          2. Schéma pluriannuel de mise en accessibilité
+        </h2>
+        <p class="text-16-white-padding">
+          La Métropole de Lyon met en œuvre la stratégie et les actions
+          suivantes :
+        </p>
+        <ul>
+          <li>
+            Actions à venir en 2022 :
+            <ul>
+              <li>
+                Finalisation pour l'ensemble des sites de la mise à jour des
+                certificats pour se conformer au RGAA version 4
+              </li>
+              <li>
+                Amélioration du taux d'accessibilité des sites en fonction des
+                audits et des retours des ateliers (l'objectif étant qu'il soit
+                supérieur à 75% pour tous les sites)
+              </li>
+            </ul>
+          </li>
+        </ul>
 
-          <h2 class="text-18-white">
-            3. Établissement de cette déclaration d’accessibilité
-          </h2>
-          <p class="text-16-white-padding">
-            Cette déclaration d’accessibilité s’applique au site Ecolyo
-            (https://ecolyo.com) et a été établie le 17/02/2021. La version du
-            RGAA utilisée pour réaliser les tests est la version RGAA 4.1 du
-            18/02/2021.
-            <br /><br />
-            La déclaration d’accessibilité est valide à partir de sa date de
-            publication. Elle doit être mise à jour :
-          </p>
-          <ul>
-            <li>
-              à la date de modification substantielle ou de refonte du site
-              concerné.
-            </li>
-            <li>3 ans date de publication de la déclaration, ou,</li>
-            <li>
-              18 mois après après la la date de publication d’une nouvelle
-              version du référentiel, pour les personnes qui appliquent la
-              méthode technique.
-            </li>
-          </ul>
-          <p class="text-16-white-padding">
-            Il peut cependant être souhaitable de mettre à jour plus
-            régulièrement la déclaration d’accessibilité, y compris pour une
-            même version de la méthode technique, afin de souligner les efforts
-            réalisés et de mettre à jour le pourcentage de critères respectés.
-          </p>
+        <h2 class="text-18-white">
+          3. Établissement de cette déclaration d’accessibilité
+        </h2>
+        <p class="text-16-white-padding">
+          Cette déclaration d’accessibilité s’applique au site Ecolyo
+          (https://ecolyo.com) et a été établie le 17/02/2021. La version du
+          RGAA utilisée pour réaliser les tests est la version RGAA 4.1 du
+          18/02/2021.
+          <br /><br />
+          La déclaration d’accessibilité est valide à partir de sa date de
+          publication. Elle doit être mise à jour :
+        </p>
+        <ul>
+          <li>
+            à la date de modification substantielle ou de refonte du site
+            concerné.
+          </li>
+          <li>3 ans date de publication de la déclaration, ou,</li>
+          <li>
+            18 mois après après la la date de publication d’une nouvelle version
+            du référentiel, pour les personnes qui appliquent la méthode
+            technique.
+          </li>
+        </ul>
+        <p class="text-16-white-padding">
+          Il peut cependant être souhaitable de mettre à jour plus régulièrement
+          la déclaration d’accessibilité, y compris pour une même version de la
+          méthode technique, afin de souligner les efforts réalisés et de mettre
+          à jour le pourcentage de critères respectés.
+        </p>
 
-          <h2 class="text-18-white">
-            4. Technologies utilisées pour la réalisation du site
-          </h2>
-          <ul>
-            <li>HTML5</li>
-            <li>CSS3</li>
-            <li>JavaScript</li>
-          </ul>
-          <p class="text-16-white-padding"></p>
+        <h2 class="text-18-white">
+          4. Technologies utilisées pour la réalisation du site
+        </h2>
+        <ul>
+          <li>HTML5</li>
+          <li>CSS3</li>
+          <li>JavaScript</li>
+        </ul>
+        <p class="text-16-white-padding"></p>
 
-          <h2 class="text-18-white">5. Environnement de test</h2>
-          <p class="text-16-white-padding">
-            Les vérifications de restitution de contenus ont été réalisées sur
-            la base de la combinaison fournie par la base de référence du RGAA
-            4.1, avec les versions suivantes :
-          </p>
-          <table aria-describedby="Versions">
-            <thead>
-              <tr>
-                <th>Agent utilisateur</th>
-                <th>Technologie d'assistance</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Firefox 86.0 Chrome 80.0.4324.150</td>
-                <td>NVDA 2020.4</td>
-              </tr>
-            </tbody>
-          </table>
+        <h2 class="text-18-white">5. Environnement de test</h2>
+        <p class="text-16-white-padding">
+          Les vérifications de restitution de contenus ont été réalisées sur la
+          base de la combinaison fournie par la base de référence du RGAA 4.1,
+          avec les versions suivantes :
+        </p>
+        <table aria-describedby="Versions">
+          <thead>
+            <tr>
+              <th>Agent utilisateur</th>
+              <th>Technologie d'assistance</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Firefox 86.0 Chrome 80.0.4324.150</td>
+              <td>NVDA 2020.4</td>
+            </tr>
+          </tbody>
+        </table>
 
-          <h2 class="text-18-white">6. Outils pour évaluer l’accessibilité</h2>
-          <ul>
-            <li>Colour Contrast Analyzer</li>
-            <li>Extension Web developer pour Firefox</li>
-            <li>Extension Stylus pour Firefox</li>
-            <li>Validateur W3C</li>
-          </ul>
+        <h2 class="text-18-white">6. Outils pour évaluer l’accessibilité</h2>
+        <ul>
+          <li>Colour Contrast Analyzer</li>
+          <li>Extension Web developer pour Firefox</li>
+          <li>Extension Stylus pour Firefox</li>
+          <li>Validateur W3C</li>
+        </ul>
+
+        <h2 class="text-18-white">
+          7. Pages du site ayant fait l’objet de la vérification de conformité
+        </h2>
+        <table aria-describedby="Pages">
+          <thead>
+            <tr>
+              <th>N°</th>
+              <th>Nom de la page</th>
+              <th>Url</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>P01</td>
+              <td>Accueil</td>
+              <td>https://ecolyo.com/</td>
+            </tr>
+            <tr>
+              <td>P02</td>
+              <td>Formulaire contact</td>
+              <td>Pas d'url directe</td>
+            </tr>
+            <tr>
+              <td>P03</td>
+              <td>Mentions légales (connecté)</td>
+              <td>/options/legalnotice</td>
+            </tr>
+            <tr>
+              <td>P04</td>
+              <td>Plan du site</td>
+              <td>Pas de page</td>
+            </tr>
+            <tr>
+              <td>P05</td>
+              <td>Moteur de recherche</td>
+              <td>Pas de page</td>
+            </tr>
+            <tr>
+              <td>P06</td>
+              <td>Accessibilité</td>
+              <td>Pas de page</td>
+            </tr>
+            <tr>
+              <td>P07</td>
+              <td>Conso (connecté)</td>
+              <td>/consumption</td>
+            </tr>
+            <tr>
+              <td>P08</td>
+              <td>Défis (connecté)</td>
+              <td>/challenges</td>
+            </tr>
+            <tr>
+              <td>P09</td>
+              <td>Ecogestes (connecté)</td>
+              <td>/ecogestures</td>
+            </tr>
+            <tr>
+              <td>P10</td>
+              <td>FAQ (connecté)</td>
+              <td>/options/FAQ</td>
+            </tr>
+            <tr>
+              <td>P11</td>
+              <td>Options (connecté)</td>
+              <td>/options</td>
+            </tr>
+          </tbody>
+        </table>
 
-          <h2 class="text-18-white">
-            7. Pages du site ayant fait l’objet de la vérification de conformité
-          </h2>
-          <table aria-describedby="Pages">
-            <thead>
-              <tr>
-                <th>N°</th>
-                <th>Nom de la page</th>
-                <th>Url</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>P01</td>
-                <td>Accueil</td>
-                <td>https://ecolyo.com/</td>
-              </tr>
-              <tr>
-                <td>P02</td>
-                <td>Formulaire contact</td>
-                <td>Pas d'url directe</td>
-              </tr>
-              <tr>
-                <td>P03</td>
-                <td>Mentions légales (connecté)</td>
-                <td>/options/legalnotice</td>
-              </tr>
-              <tr>
-                <td>P04</td>
-                <td>Plan du site</td>
-                <td>Pas de page</td>
-              </tr>
-              <tr>
-                <td>P05</td>
-                <td>Moteur de recherche</td>
-                <td>Pas de page</td>
-              </tr>
-              <tr>
-                <td>P06</td>
-                <td>Accessibilité</td>
-                <td>Pas de page</td>
-              </tr>
-              <tr>
-                <td>P07</td>
-                <td>Conso (connecté)</td>
-                <td>/consumption</td>
-              </tr>
-              <tr>
-                <td>P08</td>
-                <td>Défis (connecté)</td>
-                <td>/challenges</td>
-              </tr>
-              <tr>
-                <td>P09</td>
-                <td>Ecogestes (connecté)</td>
-                <td>/ecogestures</td>
-              </tr>
-              <tr>
-                <td>P10</td>
-                <td>FAQ (connecté)</td>
-                <td>/options/FAQ</td>
-              </tr>
-              <tr>
-                <td>P11</td>
-                <td>Options (connecté)</td>
-                <td>/options</td>
-              </tr>
-            </tbody>
-          </table>
+        <h2 class="text-18-white">8. État de conformité</h2>
+        <p class="text-16-white-padding">
+          Le site Ecolyo (https://ecolyo.com/)
+          <strong> n’est pas conforme </strong>
+          avec le référentiel général d’amélioration de l’accessibilité (RGAA),
+          version 4.1 en raison des non-conformités et des dérogations énumérées
+          ci-dessous.
+        </p>
 
-          <h2 class="text-18-white">8. État de conformité</h2>
-          <p class="text-16-white-padding">
-            Le site Ecolyo (https://ecolyo.com/)
-            <strong> n’est pas conforme </strong>
-            avec le référentiel général d’amélioration de l’accessibilité
-            (RGAA), version 4.1 en raison des non-conformités et des dérogations
-            énumérées ci-dessous.
-          </p>
+        <h2 class="text-18-white">9. Résultats des tests</h2>
+        <p class="text-16-white-padding">
+          L’audit de conformité réalisé par la société AUSY révèle que
+          <strong
+            >35,71% des critères du RGAA version 4.1 sont respectés.</strong
+          ><br /><br />
 
-          <h2 class="text-18-white">9. Résultats des tests</h2>
-          <p class="text-16-white-padding">
-            L’audit de conformité réalisé par la société AUSY révèle que
-            <strong
-              >35,71% des critères du RGAA version 4.1 sont respectés.</strong
-            ><br /><br />
+          <strong
+            >Des corrections sont en cours. Une mise à jour du pourcentage sera
+            donc réalisée au 1er trimestre 2023.</strong
+          >
+        </p>
 
-            <strong
-              >Des corrections sont en cours. Une mise à jour du pourcentage
-              sera donc réalisée au 1er trimestre 2023.</strong
-            >
-          </p>
+        <h2 class="text-18-white">10. Contenus non accessibles</h2>
+        <h3 class="text-16-white">10.1 Non-conformités</h3>
+        <h4 class="text-16-white">10.1.1 Thématique Images</h4>
+        <ul>
+          <li>
+            Une image porteuse d’information img nécessite une description
+            détaillée. Exemple : logo « investir l’avenir ». L’image doit être
+            pourvue au moins d’une alternative textuelle. Exemples : attribut
+            WAI-ARIA : aria-labelledby, aria-label, alt ou title.
+          </li>
+          <li>
+            Une image porteuse d’information svg nécessite une alternative
+            textuelle et doit être pourvue d’un attribut WAI-ARIA role="img".
+            Exemple : « logo Grand Lyon la métropole ». L’alternative textuelle
+            sera contenue dans l’attribut aria-labelledby ou aria-label.
+          </li>
+          <li>
+            Une image de décoration img doit être ignorée par les technologies
+            d’assistance. Elle doit avoir un attribut alt vide ou être pourvue
+            d’un attribut WAI-ARIA aria-hidden="true" ou role="presentation".
+            Exemples : compteurs Linky, Téléo, Gazpar, security-shield,
+            caractère « + » avant le lien « Un site de la Métropole de Lyon »
+            (P01), coques en stock (P08), …
+          </li>
+          <li>
+            Une image décorative object (avec un attribut type="image/…") doit
+            être ignorée par les technologies d’assistance. Elle doit être
+            pourvue d’un attribut WAI-ARIA aria-hidden="true" et ne doit pas
+            posséder d’attribut aria-labelledby, aria-label et title. Exemple :
+            image décorative (P01)
+          </li>
+          <li>
+            Une image décorative svg doit être ignorée par les technologies
+            d’assistance. Elle doit être pourvue d’un attribut WAI-ARIA
+            aria-hidden="true". Elle doit être dépourvue d’alternative
+            textuelle (ainsi que ses enfants) : attributs aria-labelledby
+            et aria-label ; élément title et desc ; attribut title. Exemple :
+            image décorative (P01), nombreuses images (P07 et P08)
+          </li>
+          <li>
+            Des images porteuses d’information possèdent une alternative non
+            pertinente. Exemples : logos (P01)
+          </li>
+          <li>
+            Les conditions de restitution d’une alternative textuelle via des
+            technologies d’assistance (par exemple une loupe d’écran)
+            nécessitent qu’elle soit la plus courte possible. Une longueur
+            maximale de 80 caractères est fortement recommandée ; elle limitera
+            le nombre de manipulations nécessaires pour lire l’alternative par
+            les utilisateurs de plages braille ou de loupes d’écran notamment.
+          </li>
+        </ul>
 
-          <h2 class="text-18-white">10. Contenus non accessibles</h2>
-          <h3 class="text-16-white">10.1 Non-conformités</h3>
-          <h4 class="text-16-white">10.1.1 Thématique Images</h4>
+        <h4 class="text-16-white">10.1.2. Thématique Couleurs</h4>
+        <ul>
+          <li>
+            Le rapport de contraste est insuffisant pour les éléments du menu
+            ECOLYO (Banks, Contacts, Drive, …). Il est de 2.6 au lieu de 3.
+            Pages P03, P07, P08, P09, P10 et P11.
+          </li>
+        </ul>
+        <h4 class="text-16-white">10.1.3 Thématique Liens</h4>
+        <ul>
+          <li>
+            Un lien image ne possède pas d’intitulé. Fournir une alternative
+            textuelle à l’image qui permettra de comprendre la fonction et la
+            destination du lien. Lien image Cloud pages P03, P07, P08, P09, P10
+            et P11.
+          </li>
+          <li>
+            Un lien composite contient à la fois un texte et un ou plusieurs
+            éléments de type image. Dans la mesure où le texte visible est
+            suffisant à comprendre la destination du lien, alors l’image est une
+            image de décoration. Elle doit être ignorée par les technologies
+            d’assistance.
+          </li>
           <ul>
+            <li>Lien « Devenir testeur » (P01) :</li>
             <li>
-              Une image porteuse d’information img nécessite une description
-              détaillée. Exemple : logo « investir l’avenir ». L’image doit être
-              pourvue au moins d’une alternative textuelle. Exemples : attribut
-              WAI-ARIA : aria-labelledby, aria-label, alt ou title.
+              Le lecteur d’écran énonce : « ecolyo-icon graphique devenir
+              testeur lien »
             </li>
             <li>
-              Une image porteuse d’information svg nécessite une alternative
-              textuelle et doit être pourvue d’un attribut WAI-ARIA role="img".
-              Exemple : « logo Grand Lyon la métropole ». L’alternative
-              textuelle sera contenue dans l’attribut aria-labelledby ou
-              aria-label.
+              La balise img doit avoir un alt vide ou un attribut WAI-ARIA
+              aria-hidden="true" ou role="presentation" (par exemple).
             </li>
             <li>
-              Une image de décoration img doit être ignorée par les technologies
-              d’assistance. Elle doit avoir un attribut alt vide ou être pourvue
-              d’un attribut WAI-ARIA aria-hidden="true" ou role="presentation".
-              Exemples : compteurs Linky, Téléo, Gazpar, security-shield,
-              caractère « + » avant le lien « Un site de la Métropole de Lyon »
-              (P01), coques en stock (P08), …
+              Lien « Retour à l’accueil » (Pages P03, P07, P08, P09, P10 et P11)
             </li>
+            <li>Le lecteur d’écran énonce : « Retour à l’accueil 1 sur 1 »</li>
             <li>
-              Une image décorative object (avec un attribut type="image/…") doit
-              être ignorée par les technologies d’assistance. Elle doit être
-              pourvue d’un attribut WAI-ARIA aria-hidden="true" et ne doit pas
-              posséder d’attribut aria-labelledby, aria-label et title.
-              Exemple : image décorative (P01)
+              La balise img doit avoir un alt vide ou un attribut WAI-ARIA
+              aria-hidden="true" ou role="presentation" (par exemple).
             </li>
+            <li>Idem pour les liens composites du menu (Conso, Défis, …).</li>
+            <li>Pages P03, P07, P08, P09, P10 et P11.</li>
+            <li>Lien « 3,81 € » page P07 :</li>
             <li>
-              Une image décorative svg doit être ignorée par les technologies
-              d’assistance. Elle doit être pourvue d’un attribut WAI-ARIA
-              aria-hidden="true". Elle doit être dépourvue d’alternative
-              textuelle (ainsi que ses enfants) : attributs aria-labelledby
-              et aria-label ; élément title et desc ; attribut title. Exemple :
-              image décorative (P01), nombreuses images (P07 et P08)
+              Le lecteur d’écran énonce : « 3 euros quatre-vingt-un lien »
             </li>
             <li>
-              Des images porteuses d’information possèdent une alternative non
-              pertinente. Exemples : logos (P01)
+              Comprenez-vous la fonction et la destination du lien ? Pas moi !
+              Et un utilisateur non-voyant ?
             </li>
             <li>
-              Les conditions de restitution d’une alternative textuelle via des
-              technologies d’assistance (par exemple une loupe d’écran)
-              nécessitent qu’elle soit la plus courte possible. Une longueur
-              maximale de 80 caractères est fortement recommandée ; elle
-              limitera le nombre de manipulations nécessaires pour lire
-              l’alternative par les utilisateurs de plages braille ou de loupes
-              d’écran notamment.
+              Rendre les intitulés de liens plus explicites (plusieurs liens).
             </li>
-          </ul>
-
-          <h4 class="text-16-white">10.1.2. Thématique Couleurs</h4>
-          <ul>
+            <li>Lien « Mega Winter is living » page P08</li>
+            <li>Lien « Lire la FAQ » page P11</li>
             <li>
-              Le rapport de contraste est insuffisant pour les éléments du menu
-              ECOLYO (Banks, Contacts, Drive, …). Il est de 2.6 au lieu de 3.
-              Pages P03, P07, P08, P09, P10 et P11.
-            </li>
-          </ul>
-          <h4 class="text-16-white">10.1.3 Thématique Liens</h4>
-          <ul>
-            <li>
-              Un lien image ne possède pas d’intitulé. Fournir une alternative
-              textuelle à l’image qui permettra de comprendre la fonction et la
-              destination du lien. Lien image Cloud pages P03, P07, P08, P09,
-              P10 et P11.
+              Le lecteur d’écran énonce « Lire la faq lien lire la faq bouton »
             </li>
             <li>
-              Un lien composite contient à la fois un texte et un ou plusieurs
-              éléments de type image. Dans la mesure où le texte visible est
-              suffisant à comprendre la destination du lien, alors l’image est
-              une image de décoration. Elle doit être ignorée par les
-              technologies d’assistance.
-            </li>
-            <ul>
-              <li>Lien « Devenir testeur » (P01) :</li>
-              <li>
-                Le lecteur d’écran énonce : « ecolyo-icon graphique devenir
-                testeur lien »
-              </li>
-              <li>
-                La balise img doit avoir un alt vide ou un attribut WAI-ARIA
-                aria-hidden="true" ou role="presentation" (par exemple).
-              </li>
-              <li>
-                Lien « Retour à l’accueil » (Pages P03, P07, P08, P09, P10 et
-                P11)
-              </li>
-              <li>
-                Le lecteur d’écran énonce : « Retour à l’accueil 1 sur 1 »
-              </li>
-              <li>
-                La balise img doit avoir un alt vide ou un attribut WAI-ARIA
-                aria-hidden="true" ou role="presentation" (par exemple).
-              </li>
-              <li>Idem pour les liens composites du menu (Conso, Défis, …).</li>
-              <li>Pages P03, P07, P08, P09, P10 et P11.</li>
-              <li>Lien « 3,81 € » page P07 :</li>
-              <li>
-                Le lecteur d’écran énonce : « 3 euros quatre-vingt-un lien »
-              </li>
-              <li>
-                Comprenez-vous la fonction et la destination du lien ? Pas moi !
-                Et un utilisateur non-voyant ?
-              </li>
-              <li>
-                Rendre les intitulés de liens plus explicites (plusieurs liens).
-              </li>
-              <li>Lien « Mega Winter is living » page P08</li>
-              <li>Lien « Lire la FAQ » page P11</li>
-              <li>
-                Le lecteur d’écran énonce « Lire la faq lien lire la faq bouton
-                »
-              </li>
-              <li>
-                Quel est l’intérêt d’inclure un bouton dans un lien (entre les
-                balises <a> et </a>) ?
-              </li>
-              <li>Vérifier les liens composites sur toutes les pages</li>
-            </ul>
-            <li>
-              Le lien « Un site de la Métropole de Lyon » est conforme.
-              Toutefois il pourrait englober l’image « + » et devenir un lien
-              composite avec une image de décoration. Page P01.
-            </li>
-            <li>
-              Il y a un problème sur les liens du menu Ecolyo. La présence d’un
-              paragraphe (balise
-              <p>
-                ) à l’intérieur du lien (entre les balises a et /a) rend les
-                liens non explicites. De plus, il faut tabuler 2 fois pour
-                passer au lien suivant. Remplacer la balise p par une balise
-                span par exemple. Pages P03, P07, P08, P09, P10 et P11.
-              </p>
+              Quel est l’intérêt d’inclure un bouton dans un lien (entre les
+              balises <a> et </a>) ?
             </li>
+            <li>Vérifier les liens composites sur toutes les pages</li>
           </ul>
+          <li>
+            Le lien « Un site de la Métropole de Lyon » est conforme. Toutefois
+            il pourrait englober l’image « + » et devenir un lien composite avec
+            une image de décoration. Page P01.
+          </li>
+          <li>
+            Il y a un problème sur les liens du menu Ecolyo. La présence d’un
+            paragraphe (balise
+            <p>
+              ) à l’intérieur du lien (entre les balises a et /a) rend les liens
+              non explicites. De plus, il faut tabuler 2 fois pour passer au
+              lien suivant. Remplacer la balise p par une balise span par
+              exemple. Pages P03, P07, P08, P09, P10 et P11.
+            </p>
+          </li>
+        </ul>
 
-          <h4>10.1.4. Thématique Scripts</h4>
+        <h4>10.1.4. Thématique Scripts</h4>
+        <ul>
+          <li>
+            Le clic sur le bouton Partagez-nous vos retours initie un changement
+            de contexte : une nouvelle fenêtre s’ouvre. L’utilisateur n’est pas
+            prévenu du changement de contexte : La balise button n’est pas
+            explicite. Le lecteur d’écran énonce « Bouton » Préconisation : «
+            Accédez au formulaire (ou à la nouvelle fenêtre) pour donner votre
+            retour » par exemple. Pages P03, P07, P08, P09, P10 et P11.
+          </li>
+          <li>
+            Le clic sur le bouton initie un changement de contexte : mise à jour
+            dynamique d’un champ de formulaire L’utilisateur n’est pas prévenu
+            du changement de contexte : La balise button n’est pas explicite. Le
+            lecteur d’écran énonce « Bouton » Préconisation : « Afficher votre
+            mot de passe en clair » par exemple. Page P11.
+          </li>
+        </ul>
+        <h4>10.1.5. Thématique Éléments obligatoires</h4>
+        <ul>
+          <li>Thématique Éléments obligatoires</li>
+          <li>Présence d’erreurs dans le code</li>
+          <li>Toutes les pages</li>
+          <li>
+            L’indication de langue par défaut n’est pas pertinente : html
+            lang="en"
+          </li>
+          Page P01
+          <li>Les titres de pages sont tous identiques : « Ecolyo »</li>
+          Impossible de retrouver une page précise dans l’historique de
+          navigation
+          <li>
+            Présence de textes en langue anglaise sans indication de langue
+            (attribut lang et/ou xml:lang sur l’élément lui-même ou l’un de ses
+            parents). Exemple : Méga Winter is leaving, Winter is leaving, …
+            Page P08
+          </li>
+        </ul>
+
+        <h4>10.1.6. Thématique Structuration de l'information</h4>
+        <ul>
+          <li>
+            Des passages de textes présents dans les pages constituent des
+            titres. Il faut les structurer à l’aide d’une balise hx ou d’une
+            balise possédant un attribut WAI-ARIA role="heading" associé à un
+            attribut WAI-ARIA aria-level. Pages P07 à P11.
+          </li>
+          <li>
+            La zone d’en-tête de la page n’est pas structurée via une balise
+            header.
+          </li>
+          <li>
+            La zone de contenu principal n’est pas structurée via une balise
+            main. Page P01.
+          </li>
+          <li>
+            La zone d’en-tête de la page n’est pas structurée via une balise
+            header.
+          </li>
+          <li>
+            La zone de pied de page n’est pas structurée via une balise footer.
+            Page P03 à P11.
+          </li>
+          <li>
+            La notion d’éléments « regroupés visuellement sous forme de liste »
+            se caractérise par la présence d’une série d’éléments se suivant
+            visuellement les uns les autres, avec une forme visuelle, une nature
+            et un fonctionnement identique, mais sans avoir directement de
+            marqueur visuel de liste (non ordonnée ou ordonnée), comme par
+            exemple un menu de navigation. Les éléments Linky, Téléo et Gazpar
+            pourraient être regroupés sous forme de liste. Une liste est
+            structurée :
+          </li>
           <ul>
+            <li>Soit au moyen des éléments ul et li ;</li>
             <li>
-              Le clic sur le bouton Partagez-nous vos retours initie un
-              changement de contexte : une nouvelle fenêtre s’ouvre.
-              L’utilisateur n’est pas prévenu du changement de contexte : La
-              balise button n’est pas explicite. Le lecteur d’écran énonce «
-              Bouton » Préconisation : « Accédez au formulaire (ou à la nouvelle
-              fenêtre) pour donner votre retour » par exemple. Pages P03, P07,
-              P08, P09, P10 et P11.
-            </li>
-            <li>
-              Le clic sur le bouton initie un changement de contexte : mise à
-              jour dynamique d’un champ de formulaire L’utilisateur n’est pas
-              prévenu du changement de contexte : La balise button n’est pas
-              explicite. Le lecteur d’écran énonce « Bouton » Préconisation :
-              « Afficher votre mot de passe en clair » par exemple. Page P11.
+              Soit au moyen d’éléments pourvus d’attributs WAI-ARIA role="list"
+              et role="listitem". Page P01
             </li>
           </ul>
-          <h4>10.1.5. Thématique Éléments obligatoires</h4>
+        </ul>
+
+        <h4>10.1.7 Thématique Présentation de l’information</h4>
+        <ul>
+          <li>
+            Quelques pertes d’informations en zoom graphique 200%. Exemple : sur
+            le Menu et dans la page P10.
+          </li>
+        </ul>
+
+        <h4>10.1.8. Thématique Navigation</h4>
+        <ul>
+          <li>
+            Présence à tort d’attributs de présentation de l’information
+            height, width sur des balises svg.Pages P03, P07, P08, P09, P10 et
+            P11.
+          </li>
+          <li>
+            Quelques pertes d’information en zoom graphique 200% sur les liens
+            Comment ça marche, La sécurité et Tester Ecolyo. Légers
+            chevauchements en zoom texte seulement. Page P01.
+          </li>
+          <li>
+            L’indication visuelle de prise de focus est absente sur les liens
+            Comment ça marche, La sécurité et Tester Ecolyo.
+          </li>
+          <li>
+            Constaté au survol de la souris avec FIREFOX. Avec CHROME c’est
+            bon.Page P01.
+          </li>
+          <li>
+            Un lien dont la nature n’est pas évidente peut être confondu avec le
+            texte environnant.
+          </li>
           <ul>
-            <li>Thématique Éléments obligatoires</li>
-            <li>Présence d’erreurs dans le code</li>
-            <li>Toutes les pages</li>
             <li>
-              L’indication de langue par défaut n’est pas pertinente : html
-              lang="en"
+              La couleur du lien doit avoir un rapport de contraste supérieur ou
+              égal à 3:1 par rapport au texte environnant.
             </li>
-            Page P01
-            <li>Les titres de pages sont tous identiques : « Ecolyo »</li>
-            Impossible de retrouver une page précise dans l’historique de
-            navigation
             <li>
-              Présence de textes en langue anglaise sans indication de langue
-              (attribut lang et/ou xml:lang sur l’élément lui-même ou l’un de
-              ses parents). Exemple : Méga Winter is leaving, Winter is leaving,
-              … Page P08
+              Le lien doit disposer d’une indication visuelle au survol autre
+              qu’un changement de couleur.
             </li>
-          </ul>
-
-          <h4>10.1.6. Thématique Structuration de l'information</h4>
-          <ul>
             <li>
-              Des passages de textes présents dans les pages constituent des
-              titres. Il faut les structurer à l’aide d’une balise hx ou d’une
-              balise possédant un attribut WAI-ARIA role="heading" associé à un
-              attribut WAI-ARIA aria-level. Pages P07 à P11.
+              Le lien doit disposer d’une indication visuelle au focus autre
+              qu’un changement de couleur.
             </li>
+          </ul>
+          <li>
+            Il n’y a pas d’indication visuelle au survol de la souris. Page P03.
+          </li>
+          <li>
+            Revoir tous les éléments pouvant recevoir le focus à la souris et à
+            la tabulation. L’indication visuelle du focus du navigateur ne doit
+            pas être supprimée ou dégradée sauf si un style du focus défini par
+            l’auteur est visible et suffisamment contrasté au regard du critère
+            3.3 Pages P07, P08, P09, P10 et P11.
+          </li>
+          <li>
+            Lorsque le contenu dont le sens de lecture est horizontal est
+            affiché dans une fenêtre réduite à une largeur de 320px :
+          </li>
+          <ul>
             <li>
-              La zone d’en-tête de la page n’est pas structurée via une balise
-              header.
+              Les liens Comment ça marche, La sécurité et Tester Ecolyo
+              disparaissent. Page P01.
             </li>
             <li>
-              La zone de contenu principal n’est pas structurée via une balise
-              main. Page P01.
+              Le bandeau menu (Cloud, Ecolyo et Paramètres) disparaît. Pages
+              P03, P07 et P10.
             </li>
+          </ul>
+          <li>
+            Lorsque le contenu dont le sens de lecture est vertical est affiché
+            dans une fenêtre réduite à une hauteur de 256px :
+          </li>
+          <ul>
             <li>
-              La zone d’en-tête de la page n’est pas structurée via une balise
-              header.
+              Les liens Comment ça marche, La sécurité et Tester Ecolyo
+              disparaissent. Page P01
             </li>
             <li>
-              La zone de pied de page n’est pas structurée via une balise
-              footer. Page P03 à P11.
+              Le texte « Ecolyo vous permet de centraliser le suivi … » est
+              tronqué dans sa partie droite, ainsi que les images Linky, Téléo
+              et Gazpar. Page P01
             </li>
             <li>
-              La notion d’éléments « regroupés visuellement sous forme de
-              liste » se caractérise par la présence d’une série d’éléments se
-              suivant visuellement les uns les autres, avec une forme visuelle,
-              une nature et un fonctionnement identique, mais sans avoir
-              directement de marqueur visuel de liste (non ordonnée ou
-              ordonnée), comme par exemple un menu de navigation. Les éléments
-              Linky, Téléo et Gazpar pourraient être regroupés sous forme de
-              liste. Une liste est structurée :
+              Le bandeau menu (Cloud, Ecolyo et Paramètres) disparaît. Pages
+              P03, P07 et P10.
             </li>
-            <ul>
-              <li>Soit au moyen des éléments ul et li ;</li>
-              <li>
-                Soit au moyen d’éléments pourvus d’attributs WAI-ARIA
-                role="list" et role="listitem". Page P01
-              </li>
-            </ul>
           </ul>
+          <li>
+            Lorsque les propriétés d’espacement du texte sont redéfinies par
+            l’utilisateur, le bandeau « Ce service est actuellement en
+            expérimentation » est tronqué dans sa partie haute. Page P01.
+          </li>
+        </ul>
 
-          <h4>10.1.7 Thématique Présentation de l’information</h4>
+        <h4>10.1.9. Thématique Formulaires</h4>
+        <ul>
+          <li>
+            Dans la fenêtre Partagez-nous vos retours : Les champs de formulaire
+            Description et Email ne remplissent pas au moins une de ces
+            conditions :
+          </li>
           <ul>
             <li>
-              Quelques pertes d’informations en zoom graphique 200%. Exemple :
-              sur le Menu et dans la page P10.
+              Possède un attribut WAI-ARIA aria-labelledby référençant un
+              passage de texte identifié ;
             </li>
-          </ul>
 
-          <h4>10.1.8. Thématique Navigation</h4>
-          <ul>
+            <li>Possède un attribut WAI-ARIA aria-label ;</li>
+            <li>Est associé à un élément  label  ayant un attribut for ;</li>
+            <li>Possède un attribut title ;</li>
             <li>
-              Présence à tort d’attributs de présentation de l’information
-              height, width sur des balises svg.Pages P03, P07, P08, P09, P10 et
-              P11.
-            </li>
-            <li>
-              Quelques pertes d’information en zoom graphique 200% sur les liens
-              Comment ça marche, La sécurité et Tester Ecolyo. Légers
-              chevauchements en zoom texte seulement. Page P01.
+              Un bouton adjacent au champ de formulaire lui fournit une
+              étiquette visible et un attribut
+              WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom
+              accessible.
             </li>
+          </ul>
+          <li>
+            Note au sujet de l’utilisation de placeholder : lorsque
+            l’attribut placeholder est présent, il est susceptible d’être
+            restitué à la place de l’attribut title. Par conséquent, lorsque ces
+            deux attributs title et placeholder sont présents, ils doivent être
+            identiques. Pages P03, P07, P08, P09, P10 et P11.
+          </li>
+          <li>
+            Le champ de formulaire input type="checkbox" ne remplit pas au moins
+            une de ces conditions :
+          </li>
+          <ul>
             <li>
-              L’indication visuelle de prise de focus est absente sur les liens
-              Comment ça marche, La sécurité et Tester Ecolyo.
+              Possède un attribut WAI-ARIA aria-labelledby référençant un
+              passage de texte identifié ;
             </li>
+            <li>Possède un attribut WAI-ARIA aria-label ;</li>
+            <li>Est associé à un élément label ayant un attribut for ;</li>
+            <li>Possède un attribut title ;</li>
             <li>
-              Constaté au survol de la souris avec FIREFOX. Avec CHROME c’est
-              bon.Page P01.
+              Un bouton adjacent au champ de formulaire lui fournit une
+              étiquette visible et un attribut
+              WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom
+              accessible.
             </li>
+          </ul>
+          <li>
+            Le lecteur d’écran énonce « case à cocher non cochée ». Mais on ne
+            sait pas de quoi il s’agit !Page P07.
+          </li>
+          <li>
+            A propos du bouton permettant de voir le mot de passe en clair :
+          </li>
+          <li>
+            Le lecteur d’écran énonce « Bouton ». Mais on ne sait pas de quoi il
+            s’agit !Page P11.
+          </li>
+          <li>
+            Le bouton permettant d’accéder à la fenêtre Partagez-nous vos
+            retours n’est pas explicite :
+          </li>
+          <li>
+            Le lecteur d’écran énonce « Bouton »Pages P03, P07, P08, P09, P10 et
+            P11.
+          </li>
+          <li>Dans la fenêtre Partagez-nous vos retours,</li>
+          <ul>
             <li>
-              Un lien dont la nature n’est pas évidente peut être confondu avec
-              le texte environnant.
+              Les trois boutons de même nature devraient être regroupés dans un
+              fieldset avec une légende
             </li>
-            <ul>
-              <li>
-                La couleur du lien doit avoir un rapport de contraste supérieur
-                ou égal à 3:1 par rapport au texte environnant.
-              </li>
-              <li>
-                Le lien doit disposer d’une indication visuelle au survol autre
-                qu’un changement de couleur.
-              </li>
-              <li>
-                Le lien doit disposer d’une indication visuelle au focus autre
-                qu’un changement de couleur.
-              </li>
-            </ul>
             <li>
-              Il n’y a pas d’indication visuelle au survol de la souris. Page
-              P03.
+              Les intitulés des trois boutons pourraient être plus explicites
             </li>
             <li>
-              Revoir tous les éléments pouvant recevoir le focus à la souris et
-              à la tabulation. L’indication visuelle du focus du navigateur ne
-              doit pas être supprimée ou dégradée sauf si un style du focus
-              défini par l’auteur est visible et suffisamment contrasté au
-              regard du critère 3.3 Pages P07, P08, P09, P10 et P11.
+              Idem pour le bouton Envoyer. Lecteur d’écran énonce « Envoyer
+              bouton ». Envoyer quoi ?
             </li>
             <li>
-              Lorsque le contenu dont le sens de lecture est horizontal est
-              affiché dans une fenêtre réduite à une largeur de 320px :
+              Le bouton de fermeture n’est pas explicite. Lecteur d’écran énonce
+              « Bouton »
             </li>
-            <ul>
-              <li>
-                Les liens Comment ça marche, La sécurité et Tester Ecolyo
-                disparaissent. Page P01.
-              </li>
-              <li>
-                Le bandeau menu (Cloud, Ecolyo et Paramètres) disparaît. Pages
-                P03, P07 et P10.
-              </li>
-            </ul>
             <li>
-              Lorsque le contenu dont le sens de lecture est vertical est
-              affiché dans une fenêtre réduite à une hauteur de 256px :
-            </li>
-            <ul>
-              <li>
-                Les liens Comment ça marche, La sécurité et Tester Ecolyo
-                disparaissent. Page P01
-              </li>
-              <li>
-                Le texte « Ecolyo vous permet de centraliser le suivi … » est
-                tronqué dans sa partie droite, ainsi que les images Linky, Téléo
-                et Gazpar. Page P01
-              </li>
-              <li>
-                Le bandeau menu (Cloud, Ecolyo et Paramètres) disparaît. Pages
-                P03, P07 et P10.
-              </li>
-            </ul>
-            <li>
-              Lorsque les propriétés d’espacement du texte sont redéfinies par
-              l’utilisateur, le bandeau « Ce service est actuellement en
-              expérimentation » est tronqué dans sa partie haute. Page P01.
+              De plus le focus (tabulation) sort de la fenêtre. La fenêtre n’est
+              pas modale ?
             </li>
+            Pages P03, P07, P08, P09, P10 et P11.
           </ul>
+          <li>D’autres bouton ne sont pas explicites :</li>
+          <ul>
+            <li>< << >> > (P07)</li>
+            <li> Mentions légales (P03)</li>
+            <li> FAQ (P10)</li>
+            <li> Gaz, Supprimer et Mettre à jour (P11)</li>
+          </ul>
+          <li>
+            Le lecteur d’écran énonce « Bouton », « Supprimer bouton » et
+            « Mettre à jour bouton ». On supprime ou on met à jour quoi ?
+          </li>
+        </ul>
+
+        <h4>10.1.10. Thématique navigation</h4>
 
-          <h4>10.1.9. Thématique Formulaires</h4>
+        <ul>
+          <li>
+            Absence de zones de regroupement de contenus (zones d’en-tête, de
+            navigation principale, de contenu principal, de pied de page, de
+            moteur de recherche)
+          </li>
           <ul>
             <li>
-              Dans la fenêtre Partagez-nous vos retours : Les champs de
-              formulaire Description et Email ne remplissent pas au moins une de
-              ces conditions :
+              Pas de zone d’entête, de zone de contenu principal et de moteur de
+              recherche
             </li>
-            <ul>
-              <li>
-                Possède un attribut WAI-ARIA aria-labelledby référençant un
-                passage de texte identifié ;
-              </li>
-
-              <li>Possède un attribut WAI-ARIA aria-label ;</li>
-              <li>Est associé à un élément  label  ayant un attribut for ;</li>
-              <li>Possède un attribut title ;</li>
-              <li>
-                Un bouton adjacent au champ de formulaire lui fournit une
-                étiquette visible et un attribut
-                WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom
-                accessible.
-              </li>
-            </ul>
             <li>
-              Note au sujet de l’utilisation de placeholder : lorsque
-              l’attribut placeholder est présent, il est susceptible d’être
-              restitué à la place de l’attribut title. Par conséquent, lorsque
-              ces deux attributs title et placeholder sont présents, ils doivent
-              être identiques. Pages P03, P07, P08, P09, P10 et P11.
+              Menu de navigation : aucun critère respecté. Exemple : Ajouter
+              role="navigation“
             </li>
             <li>
-              Le champ de formulaire input type="checkbox" ne remplit pas au
-              moins une de ces conditions :
+              Pied de page : aucun critère respecté. Exemple : Ajouter
+              role="contentinfo"
             </li>
-            <ul>
-              <li>
-                Possède un attribut WAI-ARIA aria-labelledby référençant un
-                passage de texte identifié ;
-              </li>
-              <li>Possède un attribut WAI-ARIA aria-label ;</li>
-              <li>Est associé à un élément label ayant un attribut for ;</li>
-              <li>Possède un attribut title ;</li>
-              <li>
-                Un bouton adjacent au champ de formulaire lui fournit une
-                étiquette visible et un attribut
-                WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom
-                accessible.
-              </li>
-            </ul>
+            Pages P03, P07, P08, P09, P10 et P11.
+          </ul>
+          <li>
+            Absence de liens d’évitement ou d’accès rapide Pages P03, P07, P08,
+            P09, P10 et P11.
+          </li>
+          <li>
+            Il y a un gros problème sur la tabulation, notamment dans les
+            sous-listes des menus :
+          </li>
+          <ul>
             <li>
-              Le lecteur d’écran énonce « case à cocher non cochée ». Mais on ne
-              sait pas de quoi il s’agit !Page P07.
+              Le focus passe sur les éléments de la liste, même si la liste
+              n’est pas ouverte.
             </li>
             <li>
-              A propos du bouton permettant de voir le mot de passe en clair :
+              Quand la liste est ouverte, le focus sort de la liste ou de la
+              fenêtre modale et revient sur la page
             </li>
             <li>
-              Le lecteur d’écran énonce « Bouton ». Mais on ne sait pas de quoi
-              il s’agit !Page P11.
+              Menus Ecolyo, Paramètres ainsi que la fenêtre Partagez-nous vos
+              retours
             </li>
             <li>
-              Le bouton permettant d’accéder à la fenêtre Partagez-nous vos
-              retours n’est pas explicite :
+              De plus, il est impossible d’ouvrir ou fermer les listes autrement
+              qu’avec la souris ages P03, P07, P08,
             </li>
+            P09, P10 et P11.
+
             <li>
-              Le lecteur d’écran énonce « Bouton »Pages P03, P07, P08, P09, P10
-              et P11.
+              Il faut deux tabulations pour aller du premier au second lien
+              Devenir Testeur.
             </li>
-            <li>Dans la fenêtre Partagez-nous vos retours,</li>
-            <ul>
-              <li>
-                Les trois boutons de même nature devraient être regroupés dans
-                un fieldset avec une légende
-              </li>
-              <li>
-                Les intitulés des trois boutons pourraient être plus explicites
-              </li>
-              <li>
-                Idem pour le bouton Envoyer. Lecteur d’écran énonce « Envoyer
-                bouton ». Envoyer quoi ?
-              </li>
-              <li>
-                Le bouton de fermeture n’est pas explicite. Lecteur d’écran
-                énonce « Bouton »
-              </li>
-              <li>
-                De plus le focus (tabulation) sort de la fenêtre. La fenêtre
-                n’est pas modale ?
-              </li>
-              Pages P03, P07, P08, P09, P10 et P11.
-            </ul>
-            <li>D’autres bouton ne sont pas explicites :</li>
-            <ul>
-              <li>< << >> > (P07)</li>
-              <li> Mentions légales (P03)</li>
-              <li> FAQ (P10)</li>
-              <li> Gaz, Supprimer et Mettre à jour (P11)</li>
-            </ul>
+            <li>Piège au clavier. Page P01.</li>
             <li>
-              Le lecteur d’écran énonce « Bouton », « Supprimer bouton » et
-              « Mettre à jour bouton ». On supprime ou on met à jour quoi ?
+              Il faut deux tabulations pour aller du lien Options au bouton 
+              Mentions légales.
             </li>
+            <li>Piège au clavier. Page P03.</li>
           </ul>
-
-          <h4>10.1.10. Thématique navigation</h4>
-
+          <li>
+            Éléments Gaz, Se connecter à l’électricité et Se connecter à l’eau :
+          </li>
           <ul>
             <li>
-              Absence de zones de regroupement de contenus (zones d’en-tête, de
-              navigation principale, de contenu principal, de pied de page, de
-              moteur de recherche)
+              Le focus passe sur les éléments de la liste, même si celle-ci
+              n’est pas développée. Page P11.
             </li>
-            <ul>
-              <li>
-                Pas de zone d’entête, de zone de contenu principal et de moteur
-                de recherche
-              </li>
-              <li>
-                Menu de navigation : aucun critère respecté. Exemple : Ajouter
-                role="navigation“
-              </li>
-              <li>
-                Pied de page : aucun critère respecté. Exemple : Ajouter
-                role="contentinfo"
-              </li>
-              Pages P03, P07, P08, P09, P10 et P11.
-            </ul>
+          </ul>
+          <li>Éléments Lire la FAQ :</li>
+          <ul>
+            <li>La tabulation boucle à l’intérieur de ce lien-bouton.</li>
             <li>
-              Absence de liens d’évitement ou d’accès rapide Pages P03, P07,
-              P08, P09, P10 et P11.
+              Le lecteur d’écran énonce « Lire la FAQ lien » puis « Lire la FAQ
+              bouton » et reboucle
             </li>
             <li>
-              Il y a un gros problème sur la tabulation, notamment dans les
-              sous-listes des menus :
+              Piège au clavier. Impossible d’aller plus loin dans la page.
             </li>
-            <ul>
-              <li>
-                Le focus passe sur les éléments de la liste, même si la liste
-                n’est pas ouverte.
-              </li>
-              <li>
-                Quand la liste est ouverte, le focus sort de la liste ou de la
-                fenêtre modale et revient sur la page
-              </li>
-              <li>
-                Menus Ecolyo, Paramètres ainsi que la fenêtre Partagez-nous vos
-                retours
-              </li>
-              <li>
-                De plus, il est impossible d’ouvrir ou fermer les listes
-                autrement qu’avec la souris ages P03, P07, P08,
-              </li>
-              P09, P10 et P11.
-
-              <li>
-                Il faut deux tabulations pour aller du premier au second lien
-                Devenir Testeur.
-              </li>
-              <li>Piège au clavier. Page P01.</li>
-              <li>
-                Il faut deux tabulations pour aller du lien Options au bouton 
-                Mentions légales.
-              </li>
-              <li>Piège au clavier. Page P03.</li>
-            </ul>
             <li>
-              Éléments Gaz, Se connecter à l’électricité et Se connecter à
-              l’eau :
+              Ce cas n’est pas reproduit avec le navigateur CHROME Page P11.
             </li>
-            <ul>
-              <li>
-                Le focus passe sur les éléments de la liste, même si celle-ci
-                n’est pas développée. Page P11.
-              </li>
-            </ul>
-            <li>Éléments Lire la FAQ :</li>
-            <ul>
-              <li>La tabulation boucle à l’intérieur de ce lien-bouton.</li>
-              <li>
-                Le lecteur d’écran énonce « Lire la FAQ lien » puis « Lire la
-                FAQ bouton » et reboucle
-              </li>
-              <li>
-                Piège au clavier. Impossible d’aller plus loin dans la page.
-              </li>
-              <li>
-                Ce cas n’est pas reproduit avec le navigateur CHROME Page P11.
-              </li>
-            </ul>
-          </ul>
-
-          <h4>10.1.11. Thématique Consultation</h4>
-          <ul>
-            <li>Image avec balancier</li>
-            <ul>
-              <li>
-                Il est impossible de stopper le mouvement de balancier (contenu
-                en mouvement)
-              </li>
-              <li>La durée du mouvement doit être inférieure à 5 secondes</li>
-            </ul>
-            Toutefois, si le mouvement fait partie intégrante du composant, sans
-            pouvoir en donner le contrôle à l’utilisateur, il est possible de
-            rendre le critère Non applicable. Exemple barre de progression. Page
-            P01.
           </ul>
-          <h4>10.2. Dérogations pour charge disproportionnée</h4>
-          <p>Sans objet</p>
-          <h4>10.3. Contenus non soumis à l’obligation d’accessibilité</h4>
-          <p>Sans objet</p>
+        </ul>
 
-          <h2 class="text-18-white">11. Retour d’information et contact</h2>
-          <p class="text-16-white-padding">
-            Si vous n’arrivez pas à accéder à un contenu ou à un service, vous
-            pouvez contacter le responsable du site Ecolyo (https://ecolyo.com/)
-            pour être orienté vers une alternative accessible ou obtenir le
-            contenu sous une autre forme :
-          </p>
+        <h4>10.1.11. Thématique Consultation</h4>
+        <ul>
+          <li>Image avec balancier</li>
           <ul>
             <li>
-              Envoyer un mail à :
-              <a href="mailto:ecolyo@grandlyon.com"> ecolyo@grandlyon.com </a>
+              Il est impossible de stopper le mouvement de balancier (contenu en
+              mouvement)
             </li>
+            <li>La durée du mouvement doit être inférieure à 5 secondes</li>
           </ul>
+          Toutefois, si le mouvement fait partie intégrante du composant, sans
+          pouvoir en donner le contrôle à l’utilisateur, il est possible de
+          rendre le critère Non applicable. Exemple barre de progression. Page
+          P01.
+        </ul>
+        <h4>10.2. Dérogations pour charge disproportionnée</h4>
+        <p>Sans objet</p>
+        <h4>10.3. Contenus non soumis à l’obligation d’accessibilité</h4>
+        <p>Sans objet</p>
 
-          <h2 class="text-18-white">12. Voies de recours</h2>
-          <p class="text-16-white-padding">
-            Cette procédure est à utiliser dans le cas suivant. Vous avez
-            signalé au responsable du site internet un défaut d’accessibilité
-            qui vous empêche d’accéder à un contenu ou à un des services du
-            portail et vous n’avez pas obtenu de réponse satisfaisante :
-          </p>
-          <ul>
-            <li>
-              Écrire un message au Défenseur des droits :
-              <a href="https://formulaire.defenseurdesdroits.fr/">
-                https://formulaire.defenseurdesdroits.fr/
-              </a>
-            </li>
-            <li>
-              Contacter le délégué du Défenseur des droits dans votre région :
-              <a href="https://www.defenseurdesdroits.fr/saisir/delegues">
-                https://www.defenseurdesdroits.fr/saisir/delegues
-              </a>
-            </li>
-            <li>
-              Envoyer un courrier par la poste (gratuit, ne pas mettre de
-              timbre) :Défenseur des droitsLibre réponse 7112075342 Paris CEDEX
-              07
-            </li>
-          </ul>
-        </div>
+        <h2 class="text-18-white">11. Retour d’information et contact</h2>
+        <p class="text-16-white-padding">
+          Si vous n’arrivez pas à accéder à un contenu ou à un service, vous
+          pouvez contacter le responsable du site Ecolyo (https://ecolyo.com/)
+          pour être orienté vers une alternative accessible ou obtenir le
+          contenu sous une autre forme :
+        </p>
+        <ul>
+          <li>
+            Envoyer un mail à :
+            <a href="mailto:ecolyo@grandlyon.com"> ecolyo@grandlyon.com </a>
+          </li>
+        </ul>
+
+        <h2 class="text-18-white">12. Voies de recours</h2>
+        <p class="text-16-white-padding">
+          Cette procédure est à utiliser dans le cas suivant. Vous avez signalé
+          au responsable du site internet un défaut d’accessibilité qui vous
+          empêche d’accéder à un contenu ou à un des services du portail et vous
+          n’avez pas obtenu de réponse satisfaisante :
+        </p>
+        <ul>
+          <li>
+            Écrire un message au Défenseur des droits :
+            <a href="https://formulaire.defenseurdesdroits.fr/">
+              https://formulaire.defenseurdesdroits.fr/
+            </a>
+          </li>
+          <li>
+            Contacter le délégué du Défenseur des droits dans votre région :
+            <a href="https://www.defenseurdesdroits.fr/saisir/delegues">
+              https://www.defenseurdesdroits.fr/saisir/delegues
+            </a>
+          </li>
+          <li>
+            Envoyer un courrier par la poste (gratuit, ne pas mettre de
+            timbre) :Défenseur des droitsLibre réponse 7112075342 Paris CEDEX 07
+          </li>
+        </ul>
       </div>
-    </section>
+    </div>
   </body>
   <script src="./matomo.js" defer></script>
 </html>
-- 
GitLab