-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
883 lines (751 loc) · 57.5 KB
/
index.html
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
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
<!DOCTYPE html>
<html class="no-js" lang="pt-PT">
<head>
<!--
source: https://github.com/w3c/wai-statements/edit/master/generator.html
project: WAI-Tools
I changed the source code accordingly to make this standalone page. I did:
HTML: planning/statements/generator/index.html -> index.html
CSS: content-images/wai-statements/generator.css -> css/generator.css
JS: content-images/wai-statements/generator.js -> js/generator.js note: is near the bottom of the body
WAI Theme Assets: assets/css/style.css -> assets-wai/style.css
assets/scripts/main.js -> assets-wai/main.js note: this file is referenced in the script below
delete all <head> elements related w/ WAI Theme
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Générateur de déclaration d'accessibilité | Web Accessibility Initiative (WAI) | W3C</title>
<link rel="stylesheet" href="css/custom.css">
<link rel="shortcut icon" href="favicon.ico">
<!-- contains the 'assets-wai/main.js' -->
<script>
document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js');
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "assets-wai/main.js";
document.body.appendChild(element);
}
window.addEventListener("load", downloadJSAtOnload, false);
</script>
</head>
<body id="top" class="page-generate-an-accessibility-statement">
<main id="main">
<img class="marianne" src="LogoRF.svg" alt="République française">
<h1>Générateur de déclaration d'accessibilité</h1>
<div id="accstatement">
<section class="page create" hidden="hidden">
<div class="container">
<aside class="box warning">
<header class="box-h ">Outil en cours de développement</header><div class="box-i">
<p>Contacter <a href="mailto:[email protected]">l'équipe de Designer Transverses</a> pour plus d'informations.</p>
</div>
</aside>
<aside class="box">
<header class="box-h ">Comment utiliser cet outil de génération d'accessibilité</header><div class="box-i">
<p>Les informations que vous fournissez ci-dessous génèrent une déclaration d'accessibilité que vous pouvez télécharger et affiner. Aucun des champs n'est obligatoire. Aucune des informations que vous saisissez n'est stockée en dehors de votre navigateur web.</p>
</div>
</aside>
<nav class="box box-simple box-full" aria-labelledby="tocheading" id="toc">
<header id="tocheading" class="box-h box-h-simple box-h-full">Contenu de la page</header>
<div class="box-i">
<ul>
<li>
<a href="#create-basic">Informations générales</a>
</li>
<li>
<a href="#create-efforts">Vos engagements</a>
</li>
<li>
<a href="#create-technical">Informations techniques</a>
</li>
<li>
<a href="#create-approval">Défenseur des droits</a>
</li>
</ul>
</div>
</nav>
<div style="display: flex; align-items: center;">
<div class="excol-all"></div>
<div style="text-align: right; flex:1">
<button type="button" class="showhidebutton button-small" aria-expanded="false" data-target=".information" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</div>
</div>
<form name="create_accessibility_statement_form">
<details open><summary markdown="block">
<h2 id="create-basic">Informations générales</h2>
<p class="intro">Cette section contient le minimum recommandé pour votre déclaration d'accessibilité. Cela comprend des informations sur votre organisation, les normes d'accessibilité que vous avez appliquées et vos coordonnées pour recevoir du feedback.</p>
</summary>
<div markdown="block">
<div class="group">
<h3 class="label">À propos de votre déclaration
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_about" data-target="#info_about" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_about" hidden="hidden">
<p>Vous pouvez renseigner le nom de votre organisation, l'adresse web et le nom de votre site ou application. Pour les applications mobiles, inclure le numéro de version et la date de sortie permettant d'identifier une version spécifique.</p>
</div>
<div class="field">
<label for="accstmt_org">Nom de l'organisation</label>
<em>(Exemple : “BetaGouv”)</em>
<input type="text" id="accstmt_org"/>
</div>
<div class="field">
<label for="accstmt_url">Adresse de votre site ou de votre application mobile</label>
<em>(Exemple : “https://se.betagouv.fr”)</em>
<input type="text" id="accstmt_url"/>
</div>
<div class="field">
<label for="accstmt_namesite">Nom de votre site ou de votre application mobile</label>
<em>(Exemple : “Ma startup d'État” or “Mon App 1.2.3”)</em>
<input type="text" id="accstmt_namesite"/>
</div>
</div>
<div class="group">
<h3 class="label">Standards d'accessibilités testés
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_standards" data-target="#info_standards" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_standards" hidden="hidden">
<p>Quels standards avez vous appliqués? Le
<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG (Web Content Accessibility Guidelines)</a> est la norme internationalle. Sa dernière version est le WCAG 2.1. Le RGAA (Registre...) est son implémentation française. Sa dernière version est le RGAA 4.0. Plusieurs niveaux sont possibles. Une startup d'état doit au moins être au niveau AA. Le niveau AAA est encore plus strict.</p>
</div>
<fieldset class="field" id="standard-applied">
<legend class="label">Standard d'accessibilité testé :</legend>
<div class="radio-field">
<input type="radio" name="accstmnt_standard" id="accstmnt_standard_rgaa40aa" checked="checked" value="RGAA 4.0 niveau AA"/>
<label for="accstmnt_standard_rgaa40aa">RGAA 4.0 niveau AA</label>
</div>
<div class="radio-field">
<input type="radio" name="accstmnt_standard" id="accstmnt_standard_rgaa40aaa" value="RGAA 4.0 niveau AAA"/>
<label for="accstmnt_standard_rgaa40aaa">RGAA 4.0 niveau AAA</label>
</div>
<div class="radio-field">
<input type="radio" name="accstmnt_standard" id="accstmnt_standard_other" value="another standard"/>
<label for="accstmnt_standard_other">Autre</label>
<input aria-label="Other standard name" type="text" id="accstmnt_standard_other_name">
</div>
</fieldset>
</div>
<div class="group">
<h3 class="label">Statut de conformité
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_conformance" data-target="#info_conformance" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_conformance" hidden="hidden">
<p>À quel point votre site est-il conforme au standard choisi dans la section précédente ? Parfois, To what degree do you conform to the accessibility standard stated in the previous section? Parfois, une conformité non totale peut être justifiée : vous pourrez indiquer les parties qui ne sont pas encore conformes, et les aides disponibles pour les utilisateurs plus loin dans ce formulaire.</p>
</div>
<fieldset class="field" id="conformance-status">
<legend class="visuallyhidden">Statut de conformité</legend>
<div class="radio-field">
<input type="radio" name="accstmnt_conformance" id="accstmnt_conformance_full" value="Totalement conforme"/>
<label for="accstmnt_conformance_full">
<span class="status">Totalement conforme</span> :
<span class="meaning">le contenu est entièrement conforme aux standards d'accessibilité, sans aucune exception.</span>
</label>
</div>
<div class="radio-field">
<input type="radio" name="accstmnt_conformance" id="accstmnt_conformance_partial" value="Partiellement conforme" checked="checked"/>
<label for="accstmnt_conformance_partial">
<span class="status">Partiellement conforme</span> :
<span class="meaning">certaines sections du contenu ne sont pas entièrement conformes aux standards d'accessibilités</span>
<span>(vous pourrez indiquer les exceptions dans la section dédiée de ce formulaire)</span>
</label>
</div>
<div class="radio-field">
<input type="radio" name="accstmnt_conformance" id="accstmnt_conformance_nonconformant" value="Non conforme"/>
<label for="accstmnt_conformance_nonconformant">
<span class="status">Non conforme</span> :
<span class="meaning">le contenu n'est pas conforme aux standards d'accessibilité</span>
</label>
</div>
<div class="radio-field">
<input type="radio" name="accstmnt_conformance" id="accstmnt_conformance_unknown" value="Non audité"/>
<label for="accstmnt_conformance_unknown">
<span class="status">Non audité</span> :
<span class="meaning">le contenu n'a pas été audié, ou les résultats de l'audit ne sont pas encore disponibles.</span>
</label>
</div>
<div class="radio-field">
<input type="radio" name="accstmnt_conformance" id="accstmnt_conformance_inapplicable" value=""/>
<label for="accstmnt_conformance_inapplicable">Aucun</label>
</div>
<input id="accstmnt_conformance_meaning" type="hidden" value="">
</fieldset>
</div>
<div class="group">
<h3 class="label">Autres considérations relatives à l'accessibilité
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_additional" data-target="#info_additional" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_additional" hidden="hidden">
<p>Parfois, vous pouvez appliquer des exigences d'accessibilité plus strictes que celles spécifiées dans la norme d'accessibilité mentionnée ci-dessus. Par exemple, vous pouvez fournir des vidéos en langue des signes ou des sous-titres en temps réel pour les médias en direct. Vous pouvez énumérer ici ces exigences d'accessibilité supplémentaires.</p>
<p>
<strong>Exemple :</strong>
"Bien que notre objectif soit la conformité aux RGAA 4.0 Niveau AA, nous avons également appliqué certains critères de réussite du niveau AAA : Les images de texte ne sont utilisées qu'à des fins décoratives. La ré-authentification après l'expiration d'une session n'entraîne pas de perte de données. Certaines vidéos sont interprétées en langage des signes".</p>
</div>
<div class="field">
<label for="accstmt_additions">Exigences supplémentaires</label>
<textarea id="accstmt_additions" rows="3"></textarea>
</div>
</div>
<div class="group">
<h3 class="label">Moyen de contact
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_feedback" data-target="#info_feedback" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_feedback" hidden="hidden">
<p>De quelle manière les utilisateurs peuvent-ils contacter votre organisation lorsqu'ils rencontrent un obstacle à l'accessibilité ? Idéalement, vous devriez proposer plusieurs options. Indiquez également la durée après laquelle les utilisateurs peuvent s'attendre à une réponse de votre organisation.</p>
</div>
<fieldset class="group" id="form-feedback">
<legend class="visuallyhidden">Moyens de contact</legend>
<div class="field">
<label for="accstmnt_contact_phone">Téléphone</label>
<em>(Exemple : “+33 34 567 89 00”)</em>
<input type="tel" id="accstmnt_contact_phone"/>
</div>
<div class="field">
<label for="accstmnt_contact_email">E-mail</label>
<em>(Exemple : “[email protected]”)</em>
<input type="email" id="accstmnt_contact_email"/>
</div>
<div class="field">
<label for="accstmnt_contact_visit">Adresse</label>
<em>(Exemple : “DINUM, Ségur, Paris”)</em>
<input type="text" id="accstmnt_contact_visit"/>
</div>
<div class="field">
<label for="accstmnt_contact_other">Autres moyens de contact</label>
<em>(Exemple : sur les réseaux sociaux ; Twitter : @MaSuperStartupDeta)</em>
<textarea id="accstmnt_contact_other"></textarea>
</div>
<div class="field">
<label for="accstmnt_contact_responsetime">Délai de réponse moyen</label>
<em>(Exemple : “2 jours ouvrés”)</em>
<input type="text" id="accstmnt_contact_responsetime"/>
</div>
</fieldset>
</div>
<div class="group">
<h3 class="label">Date de publication
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_date" data-target="#info_date" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_date" hidden="hidden">
<p>Fournir une date aide les utilisateurs à comprendre si la déclaration d'accessibilité est activement tenue à jour ou si elle est dépassée. Idéalement, la date d'une déclaration d'accessibilité ne devrait pas dépasser un an, sinon elle peut être considérée comme non tenue à jour. La mention du mois rend la date plus claire au niveau international (par exemple, "1er février 2019" au lieu de "01/02/2019", qui est ambigu).</p>
</div>
<div class="field">
<label for="accstmt_date">Date de publication de cette déclaration d'accessibilité</label>
<input type="text" id="accstmt_date" class="today"/>
</div>
</div>
</div>
</details>
<details ><summary markdown="block">
<h2 id="create-efforts">Vos engagements</h2>
<p class="intro">Dans cette section, vous pouvez décrire les efforts que votre startup déploie pour assurer l'accessibilité de votre site ou application. Cela aide les utilisateurs à comprendre votre sincérité et la validité des affirmations que vous faites dans votre déclaration d'accessibilité.</p>
</summary>
<div markdown="block">
<h3 class="label">Mesures organisationnelles
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_measures" data-target="#info_measures" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_measures" hidden="hidden">
<p>Dressez la liste des mesures envers laquelle votre startup s'engage pour parvenir à une accessibilité durable. Cela comprend des mesures telles que des actions d'achat, de formation, de sensibilisation et d'assurance qualité. Ce formulaire propose des mesures, mais vous pouvez en ajouter d'autres si nécessaire.</p>
</div>
<fieldset class="group">
<legend class="visuallyhidden">Mesures organisationnelles</legend>
<ul class="nolist field" id="effort-list">
<li class="radio-field">
<input id="accstmnt_orginfo_measures_1" name="accstmnt_orginfo_measures" type="checkbox" value="Inclure l'accessibilité dans notre mission."/>
<label for="accstmnt_orginfo_measures_1">Inclure l'accessibilité dans notre mission.</label>
</li>
<li class="radio-field">
<input id="accstmnt_orginfo_measures_2" name="accstmnt_orginfo_measures" type="checkbox" value="Inclure l'accessibilité dans l'ensemble de nos politiques internes."/>
<label for="accstmnt_orginfo_measures_2">Inclure l'accessibilité dans l'ensemble de nos politiques internes.</label>
</li>
<li class="radio-field">
<input id="accstmnt_orginfo_measures_4" name="accstmnt_orginfo_measures" type="checkbox" value="Nommer un responsable et/ou médiateur de l'accessibilité."/>
<label for="accstmnt_orginfo_measures_4">Nommer un responsable et/ou médiateur de l'accessibilité.</label>
</li>
<li class="radio-field">
<input id="accstmnt_orginfo_measures_5" name="accstmnt_orginfo_measures" type="checkbox" value="Fournir une formation continue sur l'accessibilité à notre équipe."/>
<label for="accstmnt_orginfo_measures_5">Fournir une formation continue sur l'accessibilité à notre équipe.</label>
</li>
<li class="radio-field">
<input id="accstmnt_orginfo_measures_6" name="accstmnt_orginfo_measures" type="checkbox" value="Attribuer des objectifs et des responsabilités claires en matière d'accessibilité."/>
<label for="accstmnt_orginfo_measures_6">Attribuer des objectifs et des responsabilités claires en matière d'accessibilité.</label>
</li>
</ul>
<div id="accstmnt_orginfo_othermeasures" class="group">
<div class="field line">
<label for="accstmnt_orginfo_othermeasures_1">Autre mesure (1)</label>
<em>(Exemple : “Inclure les personnes handicapées dans nos procédés de conception du service”)</em>
<input type="text" id="accstmnt_orginfo_othermeasures_1" name="accstmnt_orginfo_measures"/>
</div>
<div class="field proto">
<label for="accstmnt_orginfo_othermeasures_[n]">Autre mesure [n]</label>
<input type="text" id="accstmnt_orginfo_othermeasures_[n]" name="accstmnt_orginfo_measures"/>
</div>
</div>
<button type="button" class="add-line">
Ajouter une nouvelle mesure
</button>
</fieldset>
</div>
</details>
<details ><summary markdown="block">
<h2 id="create-technical">Informations techniques</h2>
<p class="intro">Dans cette section, vous pouvez fournir des détails techniques supplémentaires pour aider les utilisateurs à comprendre les problèmes qu'ils peuvent observer. Il s'agit notamment d'informations sur la compatibilité avec les navigateurs web et les technologies d'assistance.</p>
</summary>
<div markdown="block">
<h3 class="label">Limites d'accessibilités
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_limitations" data-target="#info_limitations" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_limitations" hidden="hidden">
<p>Il existe de nombreuses situations dans lesquelles l'accessibilité peut être limitée. Par exemple, vous pouvez ne pas être en mesure d'assurer l'accessibilité instantanée du contenu généré par l'utilisateur. La transparence dans de telles situations aide les utilisateurs à comprendre tout problème qu'ils peuvent observer et à trouver des solutions de rechange le cas échéant. Selon la loi, les organismes publics (et dont les startuos d'états) sont tenus de fournir des informations sur les parties du contenu qui ne sont pas conformes, la raison de cette non-conformité et, le cas échéant, où trouver des alternatives accessibles.</p>
</div>
<fieldset class="group">
<legend class="visuallyhidden">Limites d'accessibilités</legend>
<p class="expl">Listez les
<em>contenus</em>
qui ont des limitations d'accessibilité, une
<em>description du problème</em>
que peut rencontrer un utilisateur, une explication brève de
<em>pourquoi le problème peut arriver</em>, et
<em>ce qu'il peut faire en attendant</em>, comme par exemple contacter quelqu'un ou utiliser telle ou telle alternative.</p>
<div id="accstmnt_issues">
<fieldset id="accstmnt_limitation_1" class="group line">
<legend>Limitation d'accessibilité</legend>
<div class="field">
<label for="accstmnt_limitation_1_element">Contenu</label>
<em>(Exemple : Commentaire des utilisateurs”)</em>
<input type="text" id="accstmnt_limitation_1_element" name="element"/>
</div>
<div class="field">
<label for="accstmnt_limitation_1_description">Description du problème</label>
<em>(Exemple : “Les images uploadées peuvent ne pas avoir de texte alternatif”)</em>
<input type="text" id="accstmnt_limitation_1_description" name="description"/>
</div>
<div class="field">
<label for="accstmnt_limitation_1_reason">Pourquoi le problème arrive</label>
<em>(Exemple : “Nous ne pouvons garantir la qualité des contributions.”)</em>
<input type="text" id="accstmnt_limitation_1_reason" name="reason"/>
</div>
<div class="field">
<label for="accstmnt_limitation_1_us">Ce que nous faisons pour y pallier</label>
<em>(Exemple : “Nous monitorons les commentaires et essayons de les corriger dans la semaine suivant leur publication.”)</em>
<input type="text" id="accstmnt_limitation_1_us" name="us"/>
</div>
<div class="field">
<label for="accstmnt_limitation_1_you">Ce qui peut être fait en attendant</label>
<em>(Exemple : “Merci d'utiliser le formulaire de contact si vous rencontrez un problème”)</em>
<input type="text" id="accstmnt_limitation_1_you" name="you"/>
</div>
</fieldset>
<fieldset id="accstmnt_limitation_[n]" class="group proto">
<legend>Limite d'accessibilité [n]</legend>
<div class="field">
<label for="accstmnt_limitation_[n]_element">Contenu</label>
<input type="text" id="accstmnt_limitation_[n]_element" name="element"/>
</div>
<div class="field">
<label for="accstmnt_limitation_[n]_description">Description du problème</label>
<input type="text" id="accstmnt_limitation_[n]_description" name="description"/>
</div>
<div class="field">
<label for="accstmnt_limitation_[n]_reason">Pourquoi le problème arrive</label>
<input type="text" id="accstmnt_limitation_[n]_reason" name="reason"/>
</div>
<div class="field">
<label for="accstmnt_limitation_[n]_us">Ce que nous faisons pour y pallier</label>
<input type="text" id="accstmnt_limitation_[n]_us" name="us"/>
</div>
<div class="field">
<label for="accstmnt_limitation_[n]_you">Ce qui peut être fait en attendant</label>
<input type="text" id="accstmnt_limitation_[n]_you" name="you"/>
</div>
</fieldset>
<button type="button" class="add-line">
Ajouter une autre limite d'accessibilité
</button>
</div>
</fieldset>
<h3 class="label">Compatibility with user environment
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="support_asstech" data-target="#support_asstech" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="support_asstech" hidden="hidden">
<p>Despite best efforts, accessibility may not work well in every combination of operating system, web browser, and assistive technology. Developers typically test their websites and mobile applications with common user environments, to determine compatibility. WCAG defines requirements for accessibility features provided by content authors to be
<a href="https://www.w3.org/TR/WCAG21/#dfn-accessibility-supported">accessibility supported</a>. Communicating this compatibility expectation helps user to determine if that is the cause for any issues they may be observing.</p>
</div>
<fieldset class="group" id="compatible_tech">
<legend class="visuallyhidden">Compatibility with user environment</legend>
<p class="expl">Describe the environments (combinations of web browsers, assistive technologies, and operating systems) that the content is expected to work with. These should be in-line with the WCAG definition of
<a href="https://www.w3.org/TR/WCAG21/#dfn-accessibility-supported">accessibility supported</a>
use of technologies.</p>
<div class="field line">
<label for="accstmnt_asstech_compatible_1">Environment 1</label>
<em>(Exemple : “browser X with assistive technology Y on operating system Z”)</em>
<input type="text" id="accstmnt_asstech_compatible_1" name="accstmnt_asstech_compatible"/>
</div>
<div class="field proto">
<label for="accstmnt_asstech_compatible_[n]">Environment [n]</label>
<input type="text" id="accstmnt_asstech_compatible_[n]" name="accstmnt_asstech_compatible"/>
</div>
<button class="add-line" type="button">Add another compatible environment</button>
</fieldset>
<h3 class="label">Known incompatibility
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="support_incompatible" data-target="#support_incompatible" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="support_incompatible" hidden="hidden">
<p>Help users understand what versions of operating systems, web browsers, and assistive technologies are not (or no longer) supported. This helps user to determine if they can use your website or mobile application with their current environments.</p>
</div>
<fieldset class="group" id="incompatible_tech">
<legend class="visuallyhidden">Known incompatibility</legend>
<p class="expl">Describe the environments (combinations of web browsers, assistive technologies, and operating systems) that the content is not expected to work with.</p>
<div class="field line">
<label for="accstmnt_asstech_incompatible_1">Environment 1</label>
<em>(Exemple : “browsers older than 3 major versions” or “Mobile operating systems older than 5 years”)</em>
<input type="text" id="accstmnt_asstech_incompatible_1" name="accstmnt_asstech_incompatible"/>
</div>
<div class="field proto">
<label for="accstmnt_asstech_incompatible_[n]">Environment [n]</label>
<input type="text" id="accstmnt_asstech_incompatible_[n]" name="accstmnt_asstech_incompatible"/>
</div>
<button type="button" class="add-line">
Add another incompatible environment
</button>
</fieldset>
<h3 class="label">Technologies used
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="support_tech" data-target="#support_tech" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="support_tech" hidden="hidden">
<p>You may be relying on specific web technologies, such as JavaScript, WAI-ARIA, or SVG to ensure accessibility of your content. Communicating this expectation in the accessibility statement can help users to understand the reason for issues they may be observing. For example, the accessibility features may not work because the user disabled JavaScript. The
<a href="https://www.w3.org/TR/WCAG21/#cc4">WCAG 2 conformance requirement 4</a>
on "<em>accessibility supported was of using technologies relied upon</em>" provides more background.</p>
</div>
<p class="expl">Decrivez les technologies indispensables pour atteindre la conformité. Le contenu n'est pas conforme si cette technologie est désactivée ou non supportée.</p>
<fieldset class="field">
<legend class="label">Technologies :</legend>
<ul id="tech_relied" class="nolist">
<li class="radio-field">
<input type="checkbox" id="accstmnt_tech_html" name="accstmnt_tech" value="HTML"/>
<label for="accstmnt_tech_html">HTML</label>
</li>
<li class="radio-field">
<input type="checkbox" id="accstmnt_tech_aria" name="accstmnt_tech" value="WAI-ARIA"/>
<label for="accstmnt_tech_aria">WAI-ARIA</label>
</li>
<li class="radio-field">
<input type="checkbox" id="accstmnt_tech_css" name="accstmnt_tech" value="CSS"/>
<label for="accstmnt_tech_css">CSS</label>
</li>
<li class="radio-field">
<input type="checkbox" id="accstmnt_tech_js" name="accstmnt_tech" value="JavaScript"/>
<label for="accstmnt_tech_js">JavaScript</label>
</li>
<li class="radio-field">
<input type="checkbox" id="accstmnt_tech_smil" name="accstmnt_tech" value="SMIL"/>
<label for="accstmnt_tech_smil">SMIL</label>
</li>
<li class="radio-field proto">
<input type="checkbox" id="accstmnt_tech_other_[n]" value="other" checked="checked"/>
<span id="accstmnt_tech_other_label_[n]">
<label for="accstmnt_tech_other_[n]">Autre [n]</label>
<span class="visuallyhidden">
nom</span></span>
<input id="accstmnt_tech_other_[n]_value" type="text" aria-describedby="accstmnt_tech_other_label_[n]" name="accstmnt_tech"/>
</li>
</ul>
<button class="add-line" type="button">Ajouter une autre technologie</button>
</fieldset>
<h3 class="label">Réalisation de l'audit
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_accstmnt_approach" data-target="#info_accstmnt_approach" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_accstmnt_approach" hidden="hidden">
<p>Comment le site a-t-il été audité ? Cette information aide les utilisateurs à comprendre la qualité de cette déclaration d'accessibilité.</p>
</div>
<fieldset id="accstmnt_assessment" class="group">
<legend class="visuallyhidden">Réalisation de l'audit</legend>
<ul class="nolist">
<li class="radio-field">
<input id="accstmnt_approach_1" name="accstmnt_approach" type="checkbox" value="Auto-évaluation"/>
<label for="accstmnt_approach_1">Auto-évaluation : le contenu a été évalué par votre organisation.</label>
</li>
<li class="radio-field">
<input id="accstmnt_approach_2" name="accstmnt_approach" type="checkbox" value="Évaluation externe"/>
<label for="accstmnt_approach_2">Évaluation externe : le contenu a été évalué par une entité externe n'ayant pas participé au processus de conception et de développement du service.</label>
</li>
</ul>
<div class="group">
<div class="field line">
<label for="accstmnt_approach_other_1">Autre approche 1</label>
<em>(Exemple : un processus d'assurance qualité tout au long du processus de conception et de développement a été formalisé)</em>
<input type="text" id="accstmnt_approach_other_1" name="accstmnt_approach"/>
</div>
<div class="field proto">
<label for="accstmnt_approach_other_[n]">Autre approche [n]</label>
<input type="text" id="accstmnt_approach_other_[n]" name="accstmnt_approach"/>
</div>
<button type="button" class="add-line">Ajouter une autre approche</button>
</div>
</fieldset>
<h3 class="label">Documents associées
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="support_related" data-target="#support_related" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="support_related" hidden="hidden">
<p>Des documents connexes peuvent apporter plus de transparence et de crédibilité à cette déclaration d'accessibilité. Il peut s'agir d'un rapport d'évaluation, d'une déclaration d'évaluation ou d'une certification.</p>
</div>
<div class="group">
<div class="field">
<label for="accstmnt_audit_url">Lien vers un rapport d'évaluation
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_audit_url" data-target="#info_audit_url" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</label>
<em>(Exemple : “https://example.org/accessibility-evaulation-report”)</em>
<div class="information" id="info_audit_url" hidden="hidden">
<p>Un rapport d'évaluation fournit des détails sur les critères qui sont respectées et ceux qui ne le sont pas exigences en matière d'accessibilité. Bien qu'il soit généralement assez technique, il peut aider certains utilisateurs à comprendre les problèmes qu'ils ont observés. Le W3C propose un outil pour créer un rapport d'évaluation : <a href="https://www.w3.org/WAI/eval/report-tool/" lang="en">WCAG-EM Evaluation Report Tool</a>.</p>
</div>
<input type="url" id="accstmnt_audit_url"/>
</div>
<div class="field">
<label for="accstmnt_audit_wcagem">Lien vers une déclaration d'évaluation
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_audit_statement" data-target="#info_audit_statement" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</label>
<em>(Exemple : “https://example.org/accessibility-evaulation-statement”)</em>
<div class="information" id="info_audit_statement" hidden="hidden">
<p>Une déclaration d'évaluation résume les résultats essentiels d'un rapport d'évaluation. Ce document peut être fourni à la place ou en complément d'un rapport d'évaluation fourni ci-dessus.</p>
</div>
<input type="url" id="accstmnt_audit_wcagem"/>
</div>
<div class="field line">
<label for="accstmnt_audit_other_1">Autre document 1</label>
<em>(Exemple : “https://example.org/accessibility-evaulation-certificate”)</em>
<input type="text" id="accstmnt_audit_other_1" name="accstmnt_audit_other"/>
</div>
<div class="field proto">
<label for="accstmnt_audit_other_[n]">Autre document [n]</label>
<input type="text" id="accstmnt_audit_other_[n]" name="accstmnt_audit_other"/>
</div>
<button type="button" class="add-line">
Ajouter un autre document
</button>
</div>
</div>
</details>
<details ><summary markdown="block">
<h2 id="create-approval">Défenseur des droits</h2>
<p class="intro">Dans cette section, vous pouvez ajouter des informations sur la procédure d'escalade de plaintes.</p>
</summary>
<div markdown="block">
<!-- <h3 class="label">Formal approval
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="org_approved" data-target="#org_approved" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="org_approved" hidden="hidden">
<p>Your organization may want to formally approve this accessibility statement, for example for internal purposes or to show users that this is part of the corporate policy.</p>
</div>
<fieldset class="group">
<legend class="visuallyhidden">Approval</legend>
<div class="field">
<label for="accstmnt_orginfo_approved_name">Name of person or department</label>
<em>(Exemple : “Communication Department”)</em>
<input type="text" id="accstmnt_orginfo_approved_name"/>
</div>
<div class="field">
<label for="accstmnt_orginfo_approved_function">Function</label>
<em>(Exemple : “Director of Communication”)</em>
<input type="text" id="accstmnt_orginfo_approved_function"/>
</div>
</fieldset> -->
<h3 class="label">Voie de recours
<button type="button" class="showhidebutton button-small" aria-expanded="false" aria-controls="info_complaints" data-target="#info_complaints" data-showtext="Afficher l'aide" data-hidetext="Cacher l'aide">Afficher l'aide</button>
</h3>
<div class="information" id="info_complaints" hidden="hidden">
<p>Dans le cas où un utilisateur a signalé un défaut d’accessibilité et vous n'a pas obtenu de réponse satisfaisante, il peut entamer une procédure. Informer les utilisateurs de ces procédures de plaintes peut les inciter à vous fournir des informations sur l'accessibilité de votre contenu.</p>
<p>
<strong>Exemple :</strong>
« Si vous constatiez un défaut d'accessibilité vous empêchant d'accéder à un contenu ou une fonctionnalité du site, que vous nous le signaliez et que vous ne parveniez pas à obtenir une réponse rapide de notre part, vous êtes en droit d'écrire un message au Défenseur des droits : https://formulaire.defenseurdesdroits.fr/»</p>
</div>
<div class="field">
<label for="accstmt_complaints">Description de la procédure de plainte.</label>
<textarea id="accstmt_complaints" rows="3"></textarea>
</div>
</div>
</details>
<aside class="box actions"><div class="box-i">
<div class="statement-actions">
<a class="button" href="#preview" data-action="statement_preview">
Prévisualiser votre déclaration d'accessibilité
</a>
</div>
</div>
</aside>
</form>
</div>
</section>
<section class="page preview" hidden="hidden">
<aside class="box box-example"><header class="box-h box-h-example">Prévisualisation de votre déclaration d'accessibilité</header><div class="box-i">
<div id="statement_generated">
<div id="statement_header">
<h2>Déclaration d'accessibilité de <span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="ce service"></span></h2>
<p>
<span class="basic-information organization-name" data-print="accstmt_org" data-printdefault="Notre organisation"></span>
s’engage à rendre son service accessible à tous les internautes, y compris aux personnes qui présentent un handicap et utilisent des logiciels ou matériels spécialisés.
</p>
</div>
<div id="statement-measures-block" data-if="accstmnt_orginfo_measures">
<h3>Moyens mis en place </h3>
<p>
<span class="basic-information organization-name" data-print="accstmt_org" data-printdefault="Notre organisation"></span>
a pris les mesures suivantes pour s'assurer de l'accessibilité de
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="notre site"></span>:
</p>
<ul id="statement-measures" class="organizational-effort accessibility-measures" data-print="accstmnt_orginfo_measures" data-printfilter="capitalize"></ul>
</div>
<div id="statement-conformance" data-if="accstmnt_conformance">
<h3>État de conformité</h3>
<p>
En France, le <a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite">référentiel général d’amélioration de l’accessibilité (RGAA)</a> établi les critères à respecter pour concevoir une service accessible.
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="Notre site">Notre site</span>
est
<b><span class="basic-information conformance-status" data-print="accstmnt_conformance" data-printfilter="lowercase"></span>
aux critères du
<span class="basic-information conformance-standard"><span data-print="accstmnt_standard" data-if="accstmnt_standard_other_name" data-negate></span><span data-print="accstmnt_standard_other_name" data-if="accstmnt_standard_other_name"></span></b>.</span>
<span data-if="accstmnt_conformance_meaning">
<span class="basic-information conformance-status" data-print="accstmnt_conformance"></span>
veut dire que
<span class="basic-information conformance-meaning" data-print="accstmnt_conformance_meaning" data-printdefault="CONFORMANCE_MEANING"></span>.
</span>
</p>
</div>
<div id="statement-additions" data-if="accstmt_additions">
<h4>Exigences supplémentaires</h4>
<p class="basic-information conformance-additions" data-print="accstmt_additions" data-printfilter="capitalize"></p>
</div>
<div data-if="accstmnt_contact_phone, accstmnt_contact_email, accstmnt_contact_visit, accstmnt_contact_write, accstmnt_contact_other">
<h3>Amélioration et contact</h3>
<p>
Vous pouvez nous aider à améliorer l'accessibilité du site en nous signalant les problèmes éventuels que vous rencontrez.
</p>
<ul class="basic-information feedback h-card">
<li data-if="accstmnt_contact_phone">
Téléphone :
<span class="phone-number p-tel" data-print="accstmnt_contact_phone"></span>
</li>
<li data-if="accstmnt_contact_email">
E-mail :
<a class="email u-email" href="mailto:" data-print="accstmnt_contact_email"></a>
</li>
<li data-if="accstmnt_contact_visit">
Adresse :
<span class="visitor-address p-extended-address" data-print="accstmnt_contact_visit"></span>
</li>
<li class="contact-other p-note" data-if="accstmnt_contact_other" data-print="accstmnt_contact_other"></li>
</ul>
<p data-if="accstmnt_contact_responsetime">
Nous essayons de répondre dans les <span class="feedback responsetime" data-print="accstmnt_contact_responsetime"></span>.
</p>
</div>
<div id="statement-asstech" data-if="accstmnt_asstech_compatible, accstmnt_asstech_incompatible">
<h3>Compatibilité avec les navigateurs et les technologies d'assistance</h3>
<div id="statement-asstech-compatible-block">
<p>
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="WEBSITE_NAME"></span>
est conçu pour être compatible avec les technologies d'assistances suivantes :
</p>
<ul id="statement-asstech-compatible" class="technical-information compatible-environments" data-print="accstmnt_asstech_compatible" data-printdefault="COMPATIBLE_LIST"></ul>
</div>
<div id="statement-asstech-incompatible-block" data-if="accstmnt_asstech_incompatible">
<p>
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="WEBSITE_NAME"></span>
n'est pas compatible avec :
</p>
<ul id="statement-asstech-incompatible" class="technical-information incompatible-environments" data-print="accstmnt_asstech_incompatible"></ul>
</div>
</div>
<div id="statement-conftech" data-if="accstmnt_tech">
<h3>Spécificités techiques</h3>
<p>
L'accessibilité de
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="WEBSITE_NAME"></span>
s'appuie sur les technologies suivantes :
</p>
<ul id="statement-tech" class="technical-information technologies-used" data-print="accstmnt_tech"></ul>
<p>Ces technologies sont nécessaires pour assurer la conformité du service.</p>
</div>
<div id="statement-limitations-block">
<h3>Limites et alternatives</h3>
<p>
Despite our best efforts to ensure accessibility of
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="WEBSITE_NAME">WEBSITE_NAME</span>, there may be some limitations. Below is a description of known limitations, and potential solutions. Please contact us if you observe an issue not listed below.
</p>
<p>
Limitations connues pour
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="WEBSITE_NAME">WEBSITE_NAME</span> :
</p>
<ol id="statement-limitations" class="technical-information accessibility-limitations"></ol>
</div>
<div id="statement-assessment-block" data-if="accstmnt_approach">
<h3>Méthode d'audit</h3>
<p>
<span class="basic-information organization-name" data-print="accstmt_org" data-printdefault="Notre organisation">Notre organisation</span>
a audité
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="WEBSITE_NAME">WEBSITE_NAME</span>
en suivant les approches suivantes :
</p>
<ul id="statement-assessments" class="technical-information assessment-approaches" data-print="accstmnt_approach"></ul>
</div>
<div data-if="accstmnt_audit_url">
<h3>Rapport d'évaluation</h3>
<p>
Un rapport d'évaluation de
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="WEBSITE_NAME">WEBSITE_NAME</span>
est disponible :
<a class="technical-information related-evidence" href="" data-print="accstmnt_audit_url"></a>.
</p>
</div>
<div data-if="accstmnt_audit_wcagem">
<h3>Evaluation statement</h3>
<p>
An evaluation statement for
<span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="WEBSITE_NAME">WEBSITE_NAME</span>
is available at:
<a class="technical-information related-evidence" href="" data-print="accstmnt_audit_wcagem"></a>.
</p>
</div>
<div data-if="accstmnt_audit_other">
<h3>Autres documents</h3>
<p>Other related evidence for <span class="basic-information website-name" data-print="accstmt_namesite" data-printdefault="WEBSITE_NAME"></span> is available at:</p>
<ul data-print="accstmnt_audit_other" class="technical-information related-evidence-other"></ul>
</div>
<div id="statement-approval-block" data-if="accstmnt_orginfo_approved_name, accstmnt_orginfo_approved_function">
<h3>Formal approval of this accessibility statement</h3>
<p>This Accessibility Statement is approved by:</p>
<p class="approval">
<span class="basic-information organization-name" data-print="accstmt_org" data-printdefault="ORGANIZATION"></span><br/>
<span class="approved-by" data-print="accstmnt_orginfo_approved_name" data-printdefault="APPROVED_BY"></span><br/>
<span class="approved-by-jobtitle" data-print="accstmnt_orginfo_approved_function" data-if="accstmnt_orginfo_approved_function"></span>
</p>
</div>
<div data-if="accstmt_complaints">
<h3>Voie de recours</h3>
<p class="complaints" data-print="accstmt_complaints"></p>
</div>
<hr noshade="noshade"/>
<p>
Cette déclaration d'accessibilité a été créé le <span class="basic-information statement-created-date" data-print="accstmt_date" data-printdefault="DATE"></span> grâce au <a href="http://localhost:4000/wai-statements/planning/statements/">Générateur de déclaration d'accessibilité RGAA de BetaGouv</a>.
</p>
</div>
</div>
</aside>
<div class="button-group statement-actions">
<a class="button" href="#create">Retour au générateur</a>
<button type="button" data-action="preview_save_as_html">Télécharger en tant que page HTML</button>
</div>
</section>
</div>
<!-- generator standalone js -->
<script src="js/generator.js"></script>
<a class="button button-backtotop" href="#top"><span>↑ Retourner en haut</span></a>
</main>
<!-- Footer -->
<footer class="page-footer default-grid" aria-label="Página">
<div class="inner">
<p><strong>Date de publication:</strong> 3 juin 2020.</p>
<p><strong>Note:</strong> Ce générateur de déclaration d'accessibilité en français est une adaptation libre du projet <a href="https://www.w3.org/WAI/planning/statements/generator/#create" lang="en">Generate an Accessibility Statement</a> du groupe de travail <a href="https://www.w3.org/WAI/EO/" lang="en">Education and Outreach Working Group (EOWG)</a> du W3C. Il est réalisé dans le cadre de <a href="https://beta.gouv.fr/">BetaGouv</a>.</p>
</div>
</footer>
</body>
</html>