forked from Orange-OpenSource/La-Va11ydette
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuser-guide-en.html
649 lines (619 loc) · 46.1 KB
/
user-guide-en.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
<!--
Software Name: La Va11ydette
SPDX-FileCopyrightText: Copyright (c) 2016-2023 Orange
SPDX-License-Identifier: MIT License
This software is distributed under the MIT license
-->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>User Guide — The va11ydette Orange</title>
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
<!-- Copyright © 2014 Monotype Imaging Inc. All rights reserved -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-Q3wzptfwnbw1u019drn+ouP2GvlrCu/YVFXSu5YNe4jBpuFwU738RcnKa8PVyj8u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a id="top"></a>
<header id="docs-navbar" class="d-print-none">
<div class="navbar navbar-dark bg-dark navbar-expand supra">
<div class="d-flex flex-row-reverse container-lg">
<nav role="navigation" id="nav-lang" aria-label="A propos et changement de langue">
<ul class="navbar-nav">
<li class="nav-item">
<a href="https://a11y-guidelines.orange.com/fr/web/audit-wcag/" id="link-about"
target="_blank" title="À propos (nouvelle fenêtre)" class="nav-link">
<span id="link-about-txt">À propos</span>
</a>
</li>
<li class="nav-item">
<a href="./user-guide.html" id="link-guide" class="nav-link active" target="_blank"
title="Guide utilisateur (nouvelle fenêtre)" aria-current="page">
<span id="link-guide-txt">Guide utilisateur</span>
</a>
</li>
<li class="nav-item">
<a href="./?lang=en" id="link-en" class="nav-link" lang="en">
English
</a>
</li>
<li class="nav-item">
<a href="./?lang=fr" id="link-fr" class="nav-link active" aria-current="true" lang="fr">
Français
</a>
</li>
</ul>
</nav>
</div>
</div>
<nav class="navbar navbar-dark bg-dark navbar-expand-md flex-wrap" role="navigation">
<div class="container navbar-nav w-100">
<a class="navbar-brand" href="/">
<img src="https://cdn.jsdelivr.net/npm/[email protected]/dist/img/orange_logo.svg" alt="" width="50"
height="50">
<span class="h2 title my-0">
<span id="va11ydette">La v<span class="text-primary">a11y</span>dette</span><br>
<h1 class="small text-primary m-0" id="auditNameWcag"></h1>
</span>
</a>
<div class="ms-auto" id="checklist"></div>
<div id="importexport">
<div class="d-inline">
<button id="btnImport" type="button" class="btn nav-link d-inline me-n3" title="" data-bs-toggle="collapse"
data-bs-target="#import-form" aria-expanded="false" aria-controls="import-form">
<svg class='me-1' aria-hidden="true" focusable="false" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1000 1000">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<path id="Modifier_upload" data-name="Modifier upload" class="cls-1"
d="M500,825a323.673,323.673,0,1,1,126.474-25.5A322.87,322.87,0,0,1,500,825m0,100c234.721,0,425-190.279,425-425S734.721,75,500,75,75,265.279,75,500,265.279,925,500,925h0ZM697.7,486.574,600,488V663a36.759,36.759,0,0,1-37,37H437a36.759,36.759,0,0,1-37-37V488H288L466.569,313.569l0,0C475.4,305.162,485.846,300,499,300h2a47.818,47.818,0,0,1,33.429,13.571l0,0L713,488H600Z" />
</svg>
<span id="btnImportTxt"></span>
</button>
</div>
<div class="d-inline">
<a href="#" id="export" class="btn nav-link me-n3 d-inline disabled" title="" disabled aria-disabled="true">
<svg class='me-1' aria-hidden="true" focusable="false" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1000 1000">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<path id="Modifier_download" data-name="Modifier download" class="cls-1"
d="M500,175a323.673,323.673,0,1,1-126.474,25.5A322.87,322.87,0,0,1,500,175m0-100C265.279,75,75,265.279,75,500S265.279,925,500,925,925,734.721,925,500,734.721,75,500,75h0ZM302.3,513.426,400,512V337a36.759,36.759,0,0,1,37-37H563a36.759,36.759,0,0,1,37,37V512H712L533.431,686.431l0,0C524.6,694.838,514.154,700,501,700h-2a47.818,47.818,0,0,1-33.429-13.571l0,0L287,512H400Z" />
</svg>
<span id="btnExportTxt"></span>
</a>
</div>
</div>
</div>
<div class="collapse w-100 border-top border-900" id="import-form">
<div class="container py-3">
<div class="row">
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="selectFiles" type="file" accept="application/JSON"
aria-label="Sélectionner un audit">
</div>
</div>
<div class="col-sm-3">
<button class="btn btn-info border-white" type="button" id="import">Charger</button>
<button id="btnImportClose" type="button" class="btn btn-secondary btn-info border-white"
title="" data-bs-toggle="collapse" data-bs-target="#import-form" aria-expanded="false"
aria-controls="import-form">
<svg aria-hidden="true" focusable="false" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1000 1000">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<path id="Delete" class="cls-1"
d="M817.493,676.165a49.977,49.977,0,0,1,0,70.664l-70.664,70.664a49.977,49.977,0,0,1-70.664,0L499.5,640.828,322.835,817.493a49.977,49.977,0,0,1-70.664,0l-70.664-70.664a49.977,49.977,0,0,1,0-70.664L358.172,499.5,181.507,322.835a49.977,49.977,0,0,1,0-70.664l70.664-70.664a49.977,49.977,0,0,1,70.664,0L499.5,358.172,676.165,181.507a49.977,49.977,0,0,1,70.664,0l70.664,70.664a49.977,49.977,0,0,1,0,70.664L640.828,499.5Z" />
</svg>
</button>
</div>
</div>
<div class="bg-dark pt-3">
<div id="import-alert" class="alert alert-danger d-none" role="alert">
</div>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="bg-white" id="main">
<div class="container py-2">
<div class="row align-items-start position-relative">
<div class="col-md-3 sticky-md-top pt-4 pe-0 col-print-12 border border-light" id="currentPageManager">
<div id="anchornav">
<h2 id="title-nav-anchor" class="d-block my-2 pb-2 h4 border-bottom border-light border-1">Sur
cette page
</h2>
<div class="bd-toc">
<nav id="tableOfContents" class="py-1" aria-labelledby="title-nav-anchor"
style="min-height: 4rem;">
</div>
</div>
</div>
<div class="col-md-9 col-print-12" id="currentPageContent">
<h2 id="guide-utilisateur">The va11ydette: the user guide</h2>
<h3 id="introduction">1. Introduction: Why La va11ydette?</h3>
<p>The va11ydette is a web application that offers evaluation grids and lists of questions /
answers, facilitating digital accessibility audits.</p>
<p>It supports the WCAG 2.2 repository. The evaluation grids are divided into three categories; Web,
Android and IOS.</p>
<p>Once you have finished answering the chosen evaluation grid, a compliance rate will be calculated
for your audit. </p>
<p>The purpose of this user guide is to show you all the features available and to help you complete
your audit.</p>
<h3 id="utiliser-va11ydette">2. Use the va11ydette</h3>
<h4 id="creer-son-audit">2.1 Create a new audit</h4>
<ol>
<li class="pb-2">To create a new audit, <strong>choose a rubric</strong> that matches what you
want to test:
<ul class="pt-2">
<li class="pb-2">either <strong>on the home page</strong> by clicking on the desired
grid</li>
<li class="pb-2">either in the <strong>"Select a checklist"</strong> menu located in the
header of the site</li>
</ul>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit30.png" />
</li>
<li class="pb-2">The audit is created. Its default name is that of the selected evaluation grid.
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit31.png" />
</li>
<li class="pb-2">We recommend that you <strong>change the default name</strong> of the
audit.<br /> To do this:
<ol class="pt-2">
<li class="pb-2">Click on the button <img alt="Edit the audit name"
src="./images/ic_Pencil.png" class="border border-2 m-1"> located just after the
audit title.
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit32.png" />
</li>
<li class="pb-2">In the modal that opens, <strong>replace the default name</strong> of
the audit with the name you want to give it, then click on the
"<strong>Save</strong>”.
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit33.png" />
</li>
<li class="pb-2">Following the click on the "Save" button, a <strong>confirmation
message</strong> of the modification of the name of the audit is displayed in
the modal. <br /> Please note: the modal does not close automatically. To do this,
you must click on the "<strong>Close</strong>" button.
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit34.png" />
</li>
</ol>
</li>
</ol>
<h4 id="page">2.2 Pages</h4>
<h5 id="ajouter-page">2.2.1 Add pages</h5>
<p>For your audit, it is important to select a sample of pages. You will therefore need one
evaluation grid per page of the application to be audited.</p>
<p>To generate an evaluation grid dedicated to a page of the application, you must:
</p>
<ol class="pt-2">
<li class="pb-2">Click on the "<strong>Add a page</strong>" button.
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit35.png" />
</li>
<li class="pb-2">Indicate in the modal that is displayed:
<ol class="pt-2">
<li class="pb-2">the <strong>name</strong> you want to give to this page</li>
<li class="pb-2">its <strong>url</strong> in the application to be audited (this will
allow you to access it more easily)</li>
<li class="pb-2"><strong>the presence on the page of the different categories of
elements indicated</strong>, by checking or unchecking the different boxes
proposed.
</li>
</ol>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit36.png" />
</li>
<li class="pb-2">Click on the "<strong>Save</strong>" button to generate the new page.
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit37.png" />
</li>
<li class="pb-2">Following the click on the "Save" button, a <strong>confirmation
message</strong> for the creation of the page is displayed in the modal.<br /> To know ,
the modal does not close automatically. To do this, you must click on the
"<strong>Close</strong>" button.
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit38.png" />
</li>
<li class="pb-2">The audit page thus created appears in the menu located under the title of the
audit.<br /> When several pages have been created in the audit, you can switch from to
another by clicking on their name.
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit39.png" />
</li>
</ol>
<h5 id="gestion-page">2.2.2 Managing an audit page </h5>
<p>All features of the page are described in the list below:</p>
<ul>
<li class="pb-2">
<p><img alt="Edit the page name" src="./images/ic_Pencil.png"
class="border border-2 m-1">button
that allows you to <strong>modify</strong> the <strong>page name</strong> and its
<strong>URL</strong>.
</p>
</li>
<li class="pb-2">
<p><img alt="Open url the of current page (new window)" src="./images/ic_External_link.png"
class="border border-2 m-1">button that allows <strong>to open the URL of the page
in a new tab</strong>. This button will be disabled if no URL is entered.
</p>
</li>
<li class="pb-2"><img alt="Delete the page" src="./images/ic_Trash.png"
class="border border-2 m-1">button to <strong>delete the page</strong>. Note: it is not
possible to delete the first page of the audit.</li>
<li class="pb-2">
<p><strong>section "On this page"</strong>: navigation menu that allows you to go directly
to each of the different categories of criteria of the evaluation grid present on the
page.</p> <img class="" alt="" src="./images/audit40.png" />
</li>
<li class="pb-2">
<p><strong>"Display" section</strong>: two buttons allowing you to <strong>expand or
collapse</strong> all the <strong>criteria</strong> of the evaluation grid.
Unfolding them will display all the information to validate or invalidate a criterion.
</p>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit41.png" />
</li>
<li class="pb-2">
<p><strong>filters</strong>: set of filters allowing you to <strong>modify the criteria
displayed on the page</strong>. It is possible to choose to display:</p>
<ul>
<li class="pb-2">The criteria according to their <strong>results</strong> (compliant,
non-compliant ...).</li>
<li class="pb-2">The criteria of <strong>good practices</strong> (note: these criteria
are not taken into account when calculating the compliance rate).</li>
<li class="pb-2">The criteria according to the WCAG standard.</li>
</ul>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit42.png" />
</li>
</ul>
<h4 id="critere">2.3 The criteria of the evaluation grid</h4>
<p>Each page created in the audit contains a number of accessibility criteria to be evaluated. The
list of criteria present depends on the chosen evaluation grid.</p>
<p>Each accessibility criterion is made up of:</p>
<ul>
<li class="pb-2">of a <strong>question</strong> to assess a given accessibility criterion</li>
<li class="pb-2">radio buttons to indicate <strong>the status of the criterion</strong>
(compliant, non-compliant, not applicable, not tested).</li>
<li class="pb-2">buttons to <strong>add</strong> <img alt="Edit an issue"
src="./images/ic_Pencil.png" class="border border-2 m-1">, and <strong>edit</strong>
<img alt="Add an issue" src="./images/ic_Add.png" class="border border-2 m-1"> an issue
(<strong>criteria not met</strong>).
</li>
<li class="pb-2">
<p>a button to display <strong>additional information</strong> for the criterion <img
alt="Additional information" src="./images/ic_Form_Chevron_down.png"
class="border border-2 m -1">. This additional information explains in more detail
how to validate or invalidate the criterion.</p>
<p>In the additional information, there is a <strong>Automatically apply this result to the
next page</strong> checkbox. This functionality can be useful when you find an error
concerning an element which is found in several pages of the site of your audit. By
checking this box, the result given to the criterion on this page will be automatically
applied to this same criterion on the next page of your audit (respecting the order of
the pages as they are presented in the page navigation bar). Issues will also be
copied.</p>
<p>If pages are created after checking this box, this same criterion in the new pages will
also automatically retrieve the result given to it in the previous pages, as well as its
issue.</p>
<p>The WCAG number to which the criterion is attached will be displayed in the additional
information, if this criterion is an accessibility criterion</p>
</li>
</ul>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit43.png" />
<h5 id="add-anomalie">2.3.1 Add an issue</h5>
<p>When an evaluated criterion is considered non-compliant, it is <strong>important to add an
issue</strong> for this criterion. This will allow you to easily find the non-conformities
noted on the different pages audited.</p>
<p>To add an issue:</p>
<ol class="pt-2">
<li class="pb-2">Click on the button <img alt="Add an issue" src="./images/ic_Add.png"
class="border border-2 m-1">.</li>
<li class="pb-2">In the form of the modal that appears:
<ul class="pt-2">
<li class="pb-2">
<p><strong>Select from the drop-down list "select a pre-defined issue"</strong>
one of the issye provided for this criterion. Namely: for certain criteria,
there are no issues foreseen.</p>
<p><strong>Click on</strong> the <strong>"Load"</strong> button to pre-fill the
other form fields accordingly. You can then modify and adapt the pre-filled
information if necessary.</p>
</li>
<li class="pb-2">In the mandatory "<strong>summary</strong>" field, write a brief
description of the issue.
</li>
<li class="pb-2">In the mandatory "<strong>description</strong>" field, write a complete
description of the issue. The goal is to leave information that will allow you to
quickly find the issue that led to the non-compliance, so you must <strong>be as
precise as possible</strong>.</li>
<li class="pb-2">In the optional field "<strong>solution</strong>", you can indicate
what would help or allow to correct the nonconformity.</li>
<li class="pb-2">In the optional "<strong>technical solution</strong>" field, indicate,
if possible, the code that allows the non-conformity to be corrected.
</li>
</ul>
</li>
</ol>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit44.png" />
<h5 id="update-anomalie">2.3.2 Modify or delete an issue</h5>
<p>It is possible to modify or delete each issue created. To do this, click on the <img alt=""
src="./images/ic_Pencil.png" class="border border-2 m-1"> "Edit an issue" button. </p>
<h4 id="sauvegarder">2.4 Saving an audit</h4>
<p>There are two ways to save your current audit:</p>
<ul>
<li class="pb-2">
<p><strong>Auto-save</strong>: your <strong>last 8 audits</strong> are automatically saved
in your browser's local storage.</p>
<p>This solution is not the safest because you can lose your data if you clear your browser
cache or do a lot of auditing.</p>
<p><strong>Warning, automatic backup does not work in private browsing.</strong></p>
</li>
<li class="pb-2">
<p><strong>Exporting the audit in JSON format</strong>: to do this, click on the button
<strong>"Export"</strong> located in the header of La va11ydette and save the file on
your computer .
</p>
</li>
</ul>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit45.png" />
<h4 id="restaurer">2.5 Recover an audit</h4>
<p>You can retrieve data from a previously saved audit in La va11ydette. There are two ways to do
this, each corresponding to how the audit was saved (see <a href="#sauvegarder">section 2.4
Saving your
current audit)</a>. </p>
<ul>
<li class="pb-2"><strong>Audits saved automatically in browser</strong>:
<ul class="pt-2">
<li class="pb-2">To access it, click on the button <img alt="Recover / Delete an audit"
src="./images/ic_History.png" class="border border-2 m-1 "> located to the right
of the audit name.</li>
<li class="pb-2">A modal will open with the list of saved audits, <strong>choose the
audit to Recover</strong> among those proposed and click on the button
<strong>"Recover"</strong>.
</li>
<li class="pb-2">Note: this is also where you have access to deleting an audit saved in
the browser.</li>
</ul>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit46.png" />
</li>
<li class="pb-2"><strong>Audits saved in a file exported in JSON format</strong>
<ul class="pt-2">
<li class="pb-2">To access it, click on the <strong>"Import"</strong> button located in
the header of La va11ydette.</li>
<li class="pb-2">A hidden field will appear. Click on <strong>"Browse"</strong> and
select the audit export file on your computer to retrieve in La va11ydette. Then
click the <strong>"Load Audit"</strong> button.</li>
</ul>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit47.png" />
</li>
</ul>
<h4 id="conformite">2.6 View summary</h4>
<p>To view an encrypted summary of your audit, click the <strong>"Compliance"</strong> button to the
right of the audit title.</p>
<p>The summary contains:</p>
<ul>
<li class="pb-2">the <strong>Global Compliance</strong> rate is the average of the measurements
for each page.</li>
<li class="pb-2">the rate of <strong>Criteria met</strong>, it is obtained by dividing the
number of compliant criteria by the number of applicable criteria (criteria rated
"compliant" + criteria rated " non-compliant”). </li>
<li class="pb-2"> 4 tabs:
<ul class="pt-2">
<li class="pb-2"> 4 tabs:
<ul class="pt-2">
<li class="pb-2">Tab <strong>"Results per page"</strong>: displays the list of
pages created in the audit with for each its name, its percentage of
compliance and its URL.</li>
<li class="pb-2">Tab <strong>"Compliance rate by page"</strong> (only available
for WCAG evaluation grids): tab that summarizes the A and AA criteria of
each page </li>
<li class="pb-2">Tab <strong>"Summary by levels"</strong> (only available for
WCAG evaluation grids): tab that summarizes the
compliant/non-compliant/non-applicable criteria </li>
<li class="pb-2">Tab <strong>"List of noncompliances"</strong>: indicates all
the non-conforming criteria and the summary of issues.</li>
</ul>
</li>
</ul>
</li>
</ul>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit48.png" />
<h4 id="declaration">2.7 Generate the statement</h4>
<p>Once all the accessibility criteria have been evaluated for each of the pages, you can generate
an accessibility statement.</p>
<p>This statement will be generated as a <strong>file</strong> in <strong>XML</strong> or
<strong>HTML</strong> format. The accessibility statement should be posted on the audited site
in an accessible format.
</p>
<p>Here are the steps to generate the accessibility statement file:</p>
<ol class="pt-2">
<li class="pb-2">
<p><strong>Click on the "Statement" button</strong>. A "Statement configuration" page is
displayed. This page contains a form for collecting the information you want to appear
on the accessibility statement.</p>
<p>Also, it is only once the form fields have been filled in that it will be possible to
generate the statement file.</p>
</li>
<li class="pb-2"><strong>Fill out the form</strong>. Two ways of doing this are possible:
<ul class="pt-2">
<li class="pb-2">
<p><strong>Fill in all the requested fields manually</strong> by going directly to
the "<strong>2. Complete the data</strong>" section to enter the requested
information yourself, namely:</p>
<ul class="pt-2">
<li class="pb-2"><strong>Project name</strong>: indicate the name of the project
you have just audited
</li>
<li class="pb-2"><strong>Language</strong>: choose the language in which the
statement must be generated</li>
<li class="pb-2"><strong>Date</strong>: indicate the date on which the audit was
carried out</li>
<li class="pb-2"><strong>Type of result</strong>: choose the type of compliance
measure to display on the statement</li>
<li class="pb-2"><strong>Approval</strong>: choose the entity that carried out
the audit and its head office. <strong>Warning:</strong> it is important
to modify the Approval information by clicking on the button <img
alt="Modify the approvals list" src="./images/ic_Pencil.png"
class="border border -2 m-1">, located next to the title. A modal will
open with two fields: the <strong>name</strong> and the
<strong>content</strong> of the declarer. The content will be the text
displayed on the statement
</li>
<li class="pb-2"><strong>Contact</strong>: choose the contact to appear on the
statement in order to allow users to provide feedback on the accessibility
of the site. <strong>Warning:</strong> it is important to modify the
declarant's information by clicking on the button <img
alt="Modify the contacts list" src="./images/ic_Pencil.png"
class="border border -2 m-1">, located next to the title. A modal will
open with two fields: the <strong>name</strong> and the
<strong>content</strong> of the contact. The content will be the text
displayed on the statement
</li>
<li class="pb-2"><strong>Accessibility plan</strong>: provide a link to the
Accessibility plan. The content of this field will be the text displayed on
the statement. It is therefore necessary to make sentences that introduce
the multi-year plan.</li>
<li class="pb-2"><strong>Technologies</strong>: indicate the list of
technologies used on the audited site. A list of technologies is proposed by
default. If it is not suitable as it is, click on the button <img
alt="Edit the technologies list" src="./images/ic_Pencil.png"
class="border border-2 m-1">, located next to the title, to edit it.
</li>
<li class="pb-2"><strong>Tests</strong>: list the test tools used during your
audit. A list of tools is proposed by default. If it is not suitable as it
is, click on the button <img alt="Edit the tests list"
src="./images/ic_Pencil.png" class="border border-2 m-1">, located next
to the title, to edit it.</li>
<li class="pb-2"><strong>Environments</strong>: indicate the environments on
which the site has been audited, for example Firefox v78.15 and NVDA
v2022.1. A list of environments is proposed by default. If it is not
suitable as it is, click on the button <img
alt="Edit the test environments list" src="./images/ic_Pencil.png"
class="border border-2 m-1"> , located next to the title, to edit it.
</li>
<li class="pb-2"><strong>User testing</strong>: indicate whether user tests have
been carried out. Specify the number of users, the number of blocking points
that have been identified, and add a description of what has been tested
(characteristics of the users tested, tools used, tasks requested, etc.)
</li>
<li class="pb-2"><strong>Derogation and Exemption</strong>: non-accessible
content that is subject to an exemption for disproportionate burden. Each
derogation or exemption mentioned must be explained and justified</li>
</ul>
<p>Once these fields have been filled in, you can save the data contained in the
form in two ways:</p>
<ul class="pt-2">
<li class="pb-2">By clicking on the "<strong>Save</strong>" button: the
information entered in the form is saved in order to generate the
statement. </li>
<li class="pb-2">By clicking on the "<strong>Save and download in JSON
format</strong>" button: it has the same utility as the "Save" button,
except that it will additionally download a file in JSON format. You can use
this file in your next statements to prefill the form by importing it
into the "1.Prefill the form" section. This will save you time.</li>
</ul>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit49.png" />
</li>
<li class="pb-2"><strong>Prefill the form fields on this page</strong>, you can use
this option and thus save time only if you have downloaded a JSON file of the form
previously filled in. If that is the case :
<ol class="pt-2">
<li class="pb-2">Go to section “1. Prefill the form</li>
<li class="pb-2">Click the "<strong>Choose a file</strong>" button and select
the JSON file that contains the pre-filled information for the form.</li>
<li class="pb-2">Click on the "<strong>Import</strong>" button. The fields in
part "2. Complete the data" are automatically pre-filled with the
information present in the imported JSON file.</li>
<li class="pb-2">Verify and modify pre-filled information</li>
<li class="pb-2">Save the form</li>
</ol>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit50.png" />
</li>
</ul>
</li>
<li class="pb-2"><strong>Generate the accessibility statement file</strong>, with the
information filled in:
<ol class="pt-2">
<li class="pb-2">Go to the "<strong>Statement</strong>" section</li>
<li class="pb-2">
<p>Choose the <strong>format</strong> in which to generate the <strong>statement
file</strong>, by clicking on the "<strong>XML</strong>" or
"<strong>HTML</strong>" button.</p>
<p>Please note: you will only be able to generate a statement once the audit has
been completed and the statement form has been completed. Buttons will not be
available otherwise.</p>
</li>
</ol>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit51.png" />
</li>
</ol>
<h4 id="export-excel">2.8 Export to Excel format</h4>
<p>It is also possible to export in Excel format <img alt="Export issues (excel)"
src="./images/ic_File_Excel.png" class="border border-2 m-1">. </p>
<p>All issues reported during your audit will be present in the Excel file. This can be useful for tracking corrections if you want to support a project.</p>
<img class="my-2 d-none d-lg-block border" alt="" src="./images/audit13.png" />
</div>
</div>
</div>
</main>
<footer class="footer bg-dark mt-0" id="footer" role="contentinfo">
<div class="o-footer-body">
<div class="container navbar-dark py-3">
<div class="row navbar-nav">
<div class="col-8">
<p class="mb-0" id="footerStatementText"></p>
<p class="mb-0" id="footerTxt1">Documentation sous <a class="nav-link d-inline"
href="https://github.com/Orange-OpenSource/La-Va11ydette/blob/master/LICENSE">MIT License</a>.</p>
<p class="mb-0" id="footerTxt2">Le logo Orange ainsi que certaines images et captures sont la
propriété
d’Orange : Copyright © 2016 Orange SA <em lang="en">All rights reserved</em>.</p>
</div>
<div class="ms-sm-auto">
<a id="footerLinkGit"
href="https://github.com/Orange-OpenSource/La-Va11ydette/issues/new/choose" class="nav-link"
rel="noopener noreferrer" target="_blank" title="">
Signaler une erreur sur GitHub<span class="visually-hidden"> (nouvelle fenêtre)</span>
<svg aria-hidden="true" focusable="false" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1000 1000">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<path class="cls-1"
d="M374.908,308.958L600,309V109L921.719,430.9a74.988,74.988,0,0,1,0,106.044L600,859V659H325A150.027,150.027,0,0,0,175,809v81C98.941,830.528,50,737.929,50,633.891,50,454.436,195.466,308.958,374.908,308.958Z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<nav id="nav-back-to-top" aria-label="Retour en haut de la page" class="back-to-top">
<a id="link-to-top" href="#top" class="back-to-top-link btn btn-icon btn-secondary"
title="Retour en haut de la page">
</a>
</nav>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boosted.min.js" integrity="sha384-5/uuaktuMuP89rRLLF12Nmffr7aMWkLWFVq2xzMjqdXlOiMsRRHpbz3oG92Gvj7u" crossorigin="anonymous"></script>
<script src="./js/views/initMainPage.js"></script>
<script src="./js/controllers/dataVa11ydetteManager.js"></script>
<script src="./js/controllers/userGuide.js"></script>
<script src="./js/lavallydette.js"></script>
</body>
</html>