From 1cf8e6d542bb674b535043a6ae31b1a21476ab49 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 22 Mar 2023 13:24:20 +0000
Subject: [PATCH] feat: accessibility page
---
.vscode/settings.json | 1 +
accessibilite.html | 821 ++++++++++++++++++++++++++++++++++++++++++
index.css | 23 ++
index.css.map | 2 +-
index.html | 1 +
index.scss | 33 +-
6 files changed, 875 insertions(+), 6 deletions(-)
create mode 100644 accessibilite.html
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 82357ae..4f7aab0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,6 +17,7 @@
},
"cSpell.words": [
"cozygrandlyon",
+ "Ecogestes",
"ecolyo",
"Ecolyo",
"Gazpar",
diff --git a/accessibilite.html b/accessibilite.html
new file mode 100644
index 0000000..2a86556
--- /dev/null
+++ b/accessibilite.html
@@ -0,0 +1,821 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta
+ name="description"
+ 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"
+ />
+ <link rel="icon" href="assets/ecolyo-icon.svg" />
+ <title>Ecolyo - Accessibilité</title>
+ </head>
+ <body>
+ <nav>
+ <a class="main-logo" href="/">
+ <img src="./assets/ecolyo-icon.svg" alt="Ecolyo logo" />
+ Ecolyo
+ </a>
+ <div class="links">
+ <a class="navlink" href="index.html#how-it-works"
+ >Comment ça marche ?</a
+ >
+ <a class="navlink" href="index.html#security">La sécurité</a>
+ <a class="navlink" href="index.html#cloud">J'ai déjà un compte</a>
+ <a class="navlink yellow" href="index.html#create-account"
+ >Se créer un compte</a
+ >
+ </div>
+ </nav>
+ <section class="main-cta">
+ <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">
+ 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">
+ 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">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">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 />
+
+ <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>
+
+ <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>
+ 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>
+ </li>
+ </ul>
+
+ <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>
+ Soit au moyen d’éléments pourvus d’attributs WAI-ARIA
+ role="list" et role="listitem". Page P01
+ </li>
+ </ul>
+ </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>
+ 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.
+ </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>
+ 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.
+ </li>
+ </ul>
+
+ <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>
+ 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.
+ </li>
+ <li>
+ Le champ de formulaire input type="checkbox" ne remplit pas au
+ moins une de ces conditions :
+ </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>
+ 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>
+ 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>
+ 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>
+
+ <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>
+ 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>
+ <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 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 :
+ </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>
+
+ <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>
+ </div>
+ </section>
+ </body>
+ <script src="./matomo.js" defer></script>
+</html>
diff --git a/index.css b/index.css
index b4b381f..6d4c97b 100644
--- a/index.css
+++ b/index.css
@@ -705,6 +705,10 @@ footer .logos-footer {
align-items: center;
gap: 1.5rem;
}
+footer .legal-notice {
+ display: flex;
+ gap: 0.5rem;
+}
footer .footerLink {
color: #f1c017;
font-weight: 900;
@@ -745,4 +749,23 @@ footer .info a {
}
}
+.accessibility h2,
+.accessibility h3,
+.accessibility h4 {
+ color: #f1c017;
+}
+.accessibility h2,
+.accessibility h3,
+.accessibility h4 {
+ margin: 0.5rem 0;
+}
+.accessibility table {
+ width: 100%;
+ margin: 0.5rem 0;
+}
+.accessibility table td,
+.accessibility table th {
+ border: 1px solid rgba(255, 255, 255, 0.4);
+}
+
/*# sourceMappingURL=index.css.map */
diff --git a/index.css.map b/index.css.map
index 3aa570b..39fbbee 100644
--- a/index.css.map
+++ b/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_globals.scss","_variables.scss","index.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAKF;AAAA;EAEE;EACA,YChBM;;;AD6DR;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,OC7EM;ED8EN;EACA;;;AAEF;EACE;EACA;EACA,OCpFM;EDqFN;EACA;;;AAEF;EACE;EACA,OC1FM;ED2FN;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA,OC5GM;;;AD+GR;EACE,OClHO;;;ADqHT;EACE;AAAA;IAEE;;;AErHJ;EACE,ODEU;;;ACAZ;EACE;;;AAEF;EACE,ODLW;;;ACQb;EFSE;EEPA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;;AFHA;EEVF;IFWI;;;AEGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;IACE;;EAEF;IACE;;;;AAKN;EACE;;AACA;EAFF;IAGI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EARF;IASI;IACA;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAEF;IACE;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;;;AAEF;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;EFnEJ;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEiDI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFxEJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;AEyDE;EAhBF;IAiBI;;;AAEF;EACE;;AAKJ;EADF;IAEI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;;AAKN;EACE,YD7IS;EC8IT;EACA;;AACA;EAJF;IAKI;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAVF;IAWI;;EACA;IACE;IACA;;EAEF;IACE;;;AAIJ;EACE,ODrKC;ECsKD;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAIN;EACE;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE;;AAEE;EADF;IAEI;;;;AAMR;EACE;EAMA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBD9PU;EC+PV;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGJ;EACE,ODvRI;ECwRJ;EACA;EACA;;AACA;EACE;;AAGJ;EACE,ODhSI;;ACkSN;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;IACA;;;AAEF;EACE;;;AAIN;EACE,YDjUS;ECkUT;;AACA;EAHF;IAII;;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;IACA;;EACA;IACE;IACA;IACA;;EACA;IAEE;IACA;IACA;IACA;IACA,YDxWD;ICyWC;IACA;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;IACA;;EAEF;IACE;;;AAIF;EAEE;;AACA;EAHF;IAII;;;AAIF;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AAGA;EADF;IAEI;;;AAEF;EACE,ODlZG;;ACsZL;EACE,OD7YG;;ACiZL;EADF;IAEI;;;AAEF;EACE,ODhaI;;ACqaZ;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAEF;EACE;EACA;;;AAKN;EACE,kBDvbM;ECwbN;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EARF;IASI;IACA;;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;AACA;EAFF;IAGI;IACA;;;AAIF;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AAGJ;EF9cA;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE4bE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFndF;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AEucJ;EACE;EACA,YDlgBS;ECmgBT;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA,YDxgBQ;ECygBR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAKN;EACE,kBDziBM;EC0iBN;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE,ODzjBK;EC0jBL;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EAjCF;IAkCI;IACA;;EAEA;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["_globals.scss","_variables.scss","index.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAKF;AAAA;EAEE;EACA,YChBM;;;AD6DR;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,OC7EM;ED8EN;EACA;;;AAEF;EACE;EACA;EACA,OCpFM;EDqFN;EACA;;;AAEF;EACE;EACA,OC1FM;ED2FN;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA,OC5GM;;;AD+GR;EACE,OClHO;;;ADqHT;EACE;AAAA;IAEE;;;AErHJ;EACE,ODEU;;;ACAZ;EACE;;;AAEF;EACE,ODLW;;;ACQb;EFSE;EEPA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;;AFHA;EEVF;IFWI;;;AEGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;IACE;;EAEF;IACE;;;;AAKN;EACE;;AACA;EAFF;IAGI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EARF;IASI;IACA;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAEF;IACE;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;;;AAEF;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;EFnEJ;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEiDI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFxEJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;AEyDE;EAhBF;IAiBI;;;AAEF;EACE;;AAKJ;EADF;IAEI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;;AAKN;EACE,YD7IS;EC8IT;EACA;;AACA;EAJF;IAKI;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAVF;IAWI;;EACA;IACE;IACA;;EAEF;IACE;;;AAIJ;EACE,ODrKC;ECsKD;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAIN;EACE;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE;;AAEE;EADF;IAEI;;;;AAMR;EACE;EAMA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBD9PU;EC+PV;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGJ;EACE,ODvRI;ECwRJ;EACA;EACA;;AACA;EACE;;AAGJ;EACE,ODhSI;;ACkSN;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;IACA;;;AAEF;EACE;;;AAIN;EACE,YDjUS;ECkUT;;AACA;EAHF;IAII;;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;IACA;;EACA;IACE;IACA;IACA;;EACA;IAEE;IACA;IACA;IACA;IACA,YDxWD;ICyWC;IACA;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;IACA;;EAEF;IACE;;;AAIF;EAEE;;AACA;EAHF;IAII;;;AAIF;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AAGA;EADF;IAEI;;;AAEF;EACE,ODlZG;;ACsZL;EACE,OD7YG;;ACiZL;EADF;IAEI;;;AAEF;EACE,ODhaI;;ACqaZ;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAEF;EACE;EACA;;;AAKN;EACE,kBDvbM;ECwbN;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EARF;IASI;IACA;;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;AACA;EAFF;IAGI;IACA;;;AAIF;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AAGJ;EF9cA;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE4bE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFndF;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AEucJ;EACE;EACA,YDlgBS;ECmgBT;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA,YDxgBQ;ECygBR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAKN;EACE,kBDziBM;EC0iBN;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEF;EACE,OD9jBK;EC+jBL;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EAtCF;IAuCI;IACA;;EAEA;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;;;;AAMJ;AAAA;AAAA;EAGE,OD3mBK;;AC8mBP;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;;AACA;AAAA;EAEE","file":"index.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1b9fea1..afbd8ca 100644
--- a/index.html
+++ b/index.html
@@ -304,6 +304,7 @@
<div class="legal-notice">
<a class="footerLink" href="mentions-legales.html">Mentions légales</a>
+ <a class="footerLink" href="accessibilite.html">Accessibilité</a>
</div>
<div class="info">
diff --git a/index.scss b/index.scss
index 0704a62..12eb40e 100644
--- a/index.scss
+++ b/index.scss
@@ -1,5 +1,5 @@
-@import "./variables";
-@import "./globals";
+@import './variables';
+@import './globals';
.gaz-color {
color: $gaz-color;
@@ -246,13 +246,13 @@ nav {
position: relative;
&:before,
&::after {
- content: "";
+ content: '';
display: inline-block;
position: absolute;
width: 100%;
height: 10px;
left: 0;
- background-image: url("assets/pattern-dot.svg");
+ background-image: url('assets/pattern-dot.svg');
background-color: $dark-yellow;
background-repeat: repeat-x;
background-position: center;
@@ -354,7 +354,7 @@ nav {
position: relative;
&:before,
&:after {
- content: "";
+ content: '';
display: inline-block;
height: 100px;
width: 1px;
@@ -566,6 +566,11 @@ footer {
align-items: center;
gap: 1.5rem;
}
+
+ .legal-notice {
+ display: flex;
+ gap: 0.5rem;
+ }
.footerLink {
color: $yellow;
font-weight: 900;
@@ -607,3 +612,21 @@ footer {
}
}
}
+
+.accessibility {
+ h2,
+ h3,
+ h4 {
+ color: $yellow;
+ margin: 0.5rem 0;
+ }
+
+ table {
+ width: 100%;
+ margin: 0.5rem 0;
+ td,
+ th {
+ border: 1px solid #ffffff66;
+ }
+ }
+}
--
GitLab