Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
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
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
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
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
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>