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