Newer
Older
<!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="./accessibility.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>Accessibilité | Ecolyo</title>
<header>
<nav>
<div class="logo-container">
<a class="main-logo" href="index.html">
<img src="./assets/ecolyo-icon.svg" alt="" />
Ecolyo
</a>
<div class="separator"></div>
<a
href="https://www.grandlyon.com/"
aria-label="Accéder au site de la métropole de Lyon"
target="_blank"
>
<img src="./assets/legal/mglLogo.svg" alt="" />
</a>
</div>
</nav>
</header>
<main>
<div class="accessibility">
<h1 class="text-36-white">Déclaration d'accessibilité</h1>
<h2 class="text-20-white bold yellow">
1. Note générale concernant le document
</h2>
<p class="text-16-white">
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>
2. Schéma pluriannuel de mise en accessibilité
</h2>
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>
3. Établissement de cette déclaration d’accessibilité
</h2>
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>
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>
4. Technologies utilisées pour la réalisation du site
</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<h2 class="text-20-white bold yellow">5. Environnement de test</h2>
<p class="text-16-white">
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-20-white bold yellow">
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>
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
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-20-white bold yellow">8. État de conformité</h2>
<p class="text-16-white">
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-20-white bold yellow">9. Résultats des tests</h2>
<p class="text-16-white">
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-20-white bold yellow">10. Contenus non accessibles</h2>
<h3 class="text-18-white yellow">10.1 Non-conformités</h3>
<h4 class="text-16-white yellow">10.1.1 Thématique Images</h4>
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<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 yellow">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 yellow">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>
<li>Lien « Devenir testeur » (P01) :</li>
Le lecteur d’écran énonce : « ecolyo-icon graphique devenir
testeur lien »
La balise img doit avoir un alt vide ou un attribut WAI-ARIA
aria-hidden="true" ou role="presentation" (par exemple).
Lien « Retour à l’accueil » (Pages P03, P07, P08, P09, P10 et P11)
<li>Le lecteur d’écran énonce : « Retour à l’accueil 1 sur 1 »</li>
La balise img doit avoir un alt vide ou un attribut WAI-ARIA
aria-hidden="true" ou role="presentation" (par exemple).
<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>
Le lecteur d’écran énonce : « 3 euros quatre-vingt-un lien »
Comprenez-vous la fonction et la destination du lien ? Pas moi !
Et un utilisateur non-voyant ?
Rendre les intitulés de liens plus explicites (plusieurs liens).
<li>Lien « Mega Winter is living » page P08</li>
<li>Lien « Lire la FAQ » page P11</li>
Le lecteur d’écran énonce « Lire la faq lien lire la faq bouton »
Quel est l’intérêt d’inclure un bouton dans un lien (entre les
balises <a> et </a>) ?
<li>Vérifier les liens composites sur toutes les pages</li>
<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 class="text-16-white yellow">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 class="text-16-white yellow">
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 class="text-16-white yellow">
10.1.6. Thématique Structuration de l'information
</h4>
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
<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>
<li>Soit au moyen des éléments ul et li ;</li>
Soit au moyen d’éléments pourvus d’attributs WAI-ARIA role="list"
et role="listitem". Page P01
<h4 class="text-16-white yellow">
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 class="text-16-white yellow">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>
La couleur du lien doit avoir un rapport de contraste supérieur ou
égal à 3:1 par rapport au texte environnant.
Le lien doit disposer d’une indication visuelle au survol autre
qu’un changement de couleur.
Le lien doit disposer d’une indication visuelle au focus autre
qu’un changement de couleur.
</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>
Les liens Comment ça marche, La sécurité et Tester Ecolyo
disparaissent. Page P01.
Le bandeau menu (Cloud, Ecolyo et Paramètres) disparaît. Pages
P03, P07 et P10.
</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>
Les liens Comment ça marche, La sécurité et Tester Ecolyo
disparaissent. Page P01
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
Le bandeau menu (Cloud, Ecolyo et Paramètres) disparaît. Pages
P03, P07 et P10.
<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 class="text-16-white yellow">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>
Possède un attribut WAI-ARIA aria-labelledby référençant un
passage de texte identifié ;
<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>
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.
</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>
Possède un attribut WAI-ARIA aria-labelledby référençant un
passage de texte identifié ;
<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>
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.
</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>
Les trois boutons de même nature devraient être regroupés dans un
fieldset avec une légende
Les intitulés des trois boutons pourraient être plus explicites
Idem pour le bouton Envoyer. Lecteur d’écran énonce « Envoyer
bouton ». Envoyer quoi ?
Le bouton de fermeture n’est pas explicite. Lecteur d’écran énonce
« Bouton »
De plus le focus (tabulation) sort de la fenêtre. La fenêtre n’est
pas modale ?
Pages P03, P07, P08, P09, P10 et P11.
<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 class="text-16-white yellow">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>
Pas de zone d’entête, de zone de contenu principal et de moteur de
recherche
Menu de navigation : aucun critère respecté. Exemple : Ajouter
role="navigation“
Pied de page : aucun critère respecté. Exemple : Ajouter
role="contentinfo"
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>
Le focus passe sur les éléments de la liste, même si la liste
n’est pas ouverte.
Quand la liste est ouverte, le focus sort de la liste ou de la
fenêtre modale et revient sur la page
Menus Ecolyo, Paramètres ainsi que la fenêtre Partagez-nous vos
retours
De plus, il est impossible d’ouvrir ou fermer les listes autrement
qu’avec la souris ages P03, P07, P08,
Il faut deux tabulations pour aller du premier au second lien
Devenir Testeur.
<li>Piège au clavier. Page P01.</li>
Il faut deux tabulations pour aller du lien Options au bouton
Mentions légales.
<li>Piège au clavier. Page P03.</li>
<li>
Éléments Gaz, Se connecter à l’électricité et Se connecter à l’eau :
</li>
Le focus passe sur les éléments de la liste, même si celle-ci
n’est pas développée. Page P11.
</ul>
<li>Éléments Lire la FAQ :</li>
<ul>
<li>La tabulation boucle à l’intérieur de ce lien-bouton.</li>
Le lecteur d’écran énonce « Lire la FAQ lien » puis « Lire la FAQ
bouton » et reboucle
Piège au clavier. Impossible d’aller plus loin dans la page.
Ce cas n’est pas reproduit avec le navigateur CHROME Page P11.
<h4 class="text-16-white yellow">10.1.11. Thématique Consultation</h4>
<ul>
<li>Image avec balancier</li>
Il est impossible de stopper le mouvement de balancier (contenu en
mouvement)
<li>La durée du mouvement doit être inférieure à 5 secondes</li>
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 class="text-16-white yellow">
10.2. Dérogations pour charge disproportionnée
</h4>
<h4 class="text-16-white yellow">
10.3. Contenus non soumis à l’obligation d’accessibilité
</h4>
<h2 class="text-20-white bold yellow">
11. Retour d’information et contact
</h2>
<p class="text-16-white">
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-20-white bold yellow">12. Voies de recours</h2>
<p class="text-16-white">
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>
</body>
<script src="./matomo.js" defer></script>
</html>