forked from DISIC/rgaa_referentiel
-
Notifications
You must be signed in to change notification settings - Fork 3
/
criteres.html
3021 lines (3018 loc) · 346 KB
/
criteres.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
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Critères - RGAA 3 2017 | Les documents de référence du S.I. de l'État</title>
<meta content="Référentiel Général d'Accessibilité pour les Administrations, version 3 2017. Critères et tests." name="description" />
<meta content="Accessibilité, RGAA, RGAA 3 2017, Référentiel Général d'Accessibilité pour les Administrations, critères, tests" name="keywords" />
<meta content="3 2017" name="version" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" media="all" href="css/rgaa.main.css" />
<link rel="shortcut icon" href="/sites/default/files/marianne_0.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<div class="skiplinks">
<div class="inside">
<p>Accès direct :</p>
<ul>
<li><a href="#menu">Menu principal</a></li>
<li><a href="#nav">Menu secondaire</a></li>
<li><a href="#main">Contenu</a></li>
</ul>
<p class="version">RGAA version 3 2017, publié le 28/07/2017 <a href="changelog.html">Note de révision</a></p>
</div>
</div>
<div class="rgaa-header">
<header role="banner" class="main-header">
<p class="img"><a title="Retour à l'accueil, Secrétariat Général pour la modernisation de l'action publique, Premier ministre, République Française" href="../"><img width="69" height="93" class="sgmap-logo" src="img/modernisation-logo.jpg" alt="Retour à l'accueil, Secrétariat Général pour la modernisation de l'action publique, Premier ministre, République Française" /></a></p>
<p class="slogan">Les documents de référence du S.I. de l'État
<span class="ss-titre">un service proposé par <a href="http://modernisation.gouv.fr/">modernisation.gouv.fr</a></span></p>
</header>
<nav tabindex="-1" id="menu" role="navigation" aria-label="menu principal">
<ul>
<li class="link-home"><a href="https://github.com/DISIC/rgaa_referentiel_3-2016">Retour à l'accueil</a></li>
<li><a href=".">RGAA</a></li>
<li><a href="introduction-RGAA.html">Introduction au RGAA</a></li>
<li><a href="guide-accompagnement-RGAA.html">Guide d'accompagnement</a></li>
<li><a href="criteres.html" class="active" title="Référentiel technique, page active">Référentiel technique</a></li>
</ul>
</nav>
</div>
<nav tabindex="-1" id="nav" role="navigation" aria-label="menu secondaire">
<ul>
<li><span>Critères</span></li>
<li><a href="glossaire.html">Glossaire</a></li>
<li><a href="cas-particuliers.html">Cas particuliers</a></li>
<li><a href="notes-techniques.html">Notes techniques</a></li>
<li><a href="base-de-reference.html">Base de référence</a></li>
<li><a href="references.html">Références</a></li>
</ul>
</nav>
<div id="wrapper">
<div class="left" id="filtres">
<div class="bloc-lateral" aria-labelledby="titre-filtres" id="filtre-niveau">
<button id="titre-filtres">Filtres</button>
<div id="elt-filtres">
<div>
<input type="checkbox" id="filtre-tests"/><label for="filtre-tests">Afficher les tests</label>
</div>
<div>
<input type="checkbox" id="filtre-A"/><label for="filtre-A">Niveau <span aria-label="simple-A"><span aria-hidden="true">A</span></span></label>
</div>
<div>
<input type="checkbox" id="filtre-AA"/><label for="filtre-AA">Niveau <span aria-label="double-A"><span aria-hidden="true">AA</span></span></label>
</div>
<div>
<input type="checkbox" id="filtre-AAA"/><label for="filtre-AAA">Niveau <span aria-label="triple-A"><span aria-hidden="true">AAA</span></span></label>
</div>
</div>
</div>
<div class="bloc-lateral" aria-labelledby="titre-thematiques">
<button id="titre-thematiques">Thématiques</button>
<ol id="nav-thematiques">
<li><a href="#images">Images</a></li>
<li><a href="#cadres">Cadres</a></li>
<li><a href="#couleurs">Couleurs</a></li>
<li><a href="#multimedia">Multimédia</a></li>
<li><a href="#tableaux">Tableaux</a></li>
<li><a href="#liens">Liens</a></li>
<li><a href="#scripts">Scripts</a></li>
<li><a href="#elements">Éléments obligatoires</a></li>
<li><a href="#structure">Structuration de l'information</a></li>
<li><a href="#presentation">Présentation de l'information</a></li>
<li><a href="#formulaire">Formulaires</a></li>
<li><a href="#navigation">Navigation</a></li>
<li><a href="#consultation">Consultation</a></li>
</ol>
</div>
</div>
<div class="right">
<section aria-labelledby="main-title">
<main tabindex="-1" id="main" role="main">
<h1 id="main-title">Critères</h1>
<h2 id="guide">Mode d'emploi</h2>
<div id="display-guide">
<p>Ce référentiel s'applique à tout contenu HTML (HTML4, XHTML1 et HTML5). Il utilise, pour certains tests une base de référence prenant en compte un ensemble de technologies d'assistance, de navigateurs et de systèmes d'exploitation sur lesquels l'accessibilité des composants d'interface développés par JavaScript doit être vérifiée notamment. Une description détaillée de la base de référence est disponible ici : <a href="base-de-reference.html">base de référence</a>.</p>
<h3>Note importante pour tout contenu antérieur à la spécification HTML5 :</h3>
<p>Lorsque le code HTML de la page n'est pas du HTML5, les éléments HTML5 (balises et attributs) exigés par un critère ou test sont non applicables. Tous les autres critères ou tests restent applicables, y compris les dispositifs ARIA. Les critères et tests suivants sont non applicables :</p>
<ul>
<li>Critère 1.10 ;</li>
<li>Critère 9.2 ;</li>
<li>Test 11.10.1 (condition 2 relative à l'attribut HTML5 <code lang="en">required</code>).</li>
</ul>
<h3>Méthode de validation</h3>
<p>Le niveau de conformité est établi au niveau des critères selon ces statuts :</p>
<ul>
<li>Conforme (C) : l'ensemble des tests applicables sont réussis ;</li>
<li>Non Conforme (NC) : un test applicable est échoué, au moins ;</li>
<li>Non Applicable (NA) : il n'y a pas de contenu concerné par le critère.</li>
</ul>
<p>RGAA propose, en plus de ces trois statuts de validation, deux statuts complémentaires :</p>
<ul>
<li>Dérogé (D) : il existe des contenus dérogés applicables au critère ;</li>
<li>Non Testé (NT) : le critère n'a pas été testé.</li>
</ul>
<p>Vous pouvez consulter, à ce sujet, le <a href="guide-accompagnement-RGAA.html">guide d'accompagnement</a> : Comment vérifie-t-on la conformité au RGAA ?</p>
</div>
<section tabindex="-1" id="images">
<header>
<h2>1. Images</h2>
<p class="principe">Principe WCAG : Perceptible</p>
<h3 class="reco">Recommandation :</h3>
<p>Donner à chaque <a href="glossaire.html#image-porteuse-dinformation">image porteuse d'information</a> une <a href="glossaire.html#alternative-textuelle-image">alternative textuelle</a> pertinente et une <a href="glossaire.html#description-dtaille-image">description détaillée</a> si nécessaire. Lier les <a href="glossaire.html#lgende-dimage">légendes</a> à leurs images. Remplacer les <a href="glossaire.html#image-texte">images textes</a> par du <a href="glossaire.html#texte-styl">texte stylé</a> lorsque c'est possible.</p>
</header>
<article id="crit-1-1" data-level="A">
<h3 class="critere">Critère 1.1 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Chaque image a-t-elle une <a href="glossaire.html#alternative-textuelle-image">alternative textuelle</a> ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-1-1">Test 1.1.1 : Chaque image (balise <code lang="en">img</code>) a-t-elle un attribut <code lang="en">alt</code> ?</li>
<li id="test-1-1-2">Test 1.1.2 : Chaque <a href="glossaire.html#zone-dune-image-ractive">zone</a> (balise <code lang="en">area</code>) d'une <a href="glossaire.html#image-ractive">image réactive</a> a-t-elle un attribut <code lang="en">alt</code> ?</li>
<li id="test-1-1-3">Test 1.1.3 : Chaque <a href="glossaire.html#bouton-formulaire">bouton</a> de type image (balise <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code>) a-t-il un attribut <code lang="en">alt</code> ?</li>
<li id="test-1-1-4">Test 1.1.4 : Chaque <a href="glossaire.html#zone-cliquable">zone cliquable</a> d'une <a href="glossaire.html#image-ractive">image réactive</a> coté serveur est-t-elle doublée d'un lien dans la page ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all">1.1.1</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H36.html">H36</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H37.html">H37</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H53.html">H53</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H24.html">H24</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H65.html">F65</a></p>
</aside>
</article>
<article id="crit-1-2" data-level="A">
<h3 class="critere">Critère 1.2 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Pour chaque <a href="glossaire.html#image-de-dcoration">image de décoration</a> ayant une <a href="glossaire.html#alternative-textuelle-image">alternative textuelle</a>, cette alternative est-elle vide ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-2-1">Test 1.2.1 : Chaque image (balise <code lang="en">img</code>) <a href="glossaire.html#image-de-dcoration">de décoration</a>, sans <a href="glossaire.html#lgende-dimage">légende</a>, et ayant un attribut <code lang="en">alt</code>, vérifie-t-elle ces conditions ?
<ul>
<li>Le contenu de l'attribut <code lang="en">alt</code> est vide (<code lang="en">alt=""</code>).</li>
<li>L'image de décoration ne possède pas d'attribut <code lang="en">title</code>.</li>
<li>La balise <code lang="en">img</code> est dépourvue de rôle, propriété ou état ARIA visant à labelliser l'image (<code lang="en">aria-label</code>, <code lang="en">aria-describedby</code>, <code lang="en">aria-labelledby</code> par exemple).</li>
</ul>
</li>
<li id="test-1-2-2">Test 1.2.2 : Chaque <a href="glossaire.html#zone-non-cliquable">zone non cliquable</a> (balise <code lang="en">area</code> sans attribut <code lang="en">href</code>) <a href="glossaire.html#image-de-dcoration">de décoration</a>, et ayant un attribut <code lang="en">alt</code>, vérifie-t-elle ces conditions ?
<ul>
<li>Le contenu de l'attribut <code lang="en">alt</code> est vide (<code lang="en">alt=""</code>).</li>
<li>La zone non cliquable ne possède pas d'attribut <code lang="en">title</code>.</li>
<li>La balise <code lang="en">area</code> est dépourvue de rôle, propriété ou état ARIA visant à labelliser l'image (<code lang="en">aria-label</code>, <code lang="en">aria-describedby</code>, <code lang="en">aria-labelledby</code> par exemple).</li>
</ul>
</li>
<li id="test-1-2-3">Test 1.2.3 : Chaque <a href="glossaire.html#image-objet">image objet</a> (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-de-dcoration">de décoration</a>, sans <a href="glossaire.html#lgende-dimage">légende</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La balise <code lang="en">object</code> possède un attribut <code lang="en">aria-hidden="true"</code>.</li>
<li>L'alternative textuelle entre <code lang="en"><object></code> et <code lang="en"></object></code> est vide.</li>
<li>La balise <code lang="en">object</code> ou l'un de ses enfants est dépourvue d'attribut <code lang="en">title</code>.</li>
<li>La balise <code lang="en">object</code> ou l'un de ses enfants est dépourvue de rôle, propriété ou état ARIA visant à labelliser l'image (<code lang="en">aria-label</code>, <code lang="en">aria-describedby</code>, <code lang="en">aria-labelledby</code> par exemple).</li>
</ul>
</li>
<li id="test-1-2-4">Test 1.2.4 : Chaque image vectorielle (balise <code lang="en">svg</code>) <a href="glossaire.html#image-de-dcoration">de décoration</a>, sans <a href="glossaire.html#lgende-dimage">légende</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La balise svg possède un attribut <code lang="en">aria-hidden="true"</code>.</li>
<li>Les balises <code lang="en">title</code> et <code lang="en">desc</code> sont absentes ou vides.</li>
<li>La balise <code lang="en">svg</code> ou l'un de ses enfants est dépourvue d'attribut <code lang="en">title</code>.</li>
<li>La balise <code lang="en">svg</code> ou l'un de ses enfants est dépourvue de rôle, propriété ou état ARIA visant à labelliser l'image vectorielle (<code lang="en">aria-label</code>, <code lang="en">aria-describedby</code>, <code lang="en">aria-labelledby</code> par exemple).</li>
</ul>
</li>
<li id="test-1-2-5">Test 1.2.5 : Chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) <a href="glossaire.html#image-de-dcoration">de décoration</a>, sans <a href="glossaire.html#lgende-dimage">légende</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La balise <code lang="en">canvas</code> possède un attribut <code lang="en">aria-hidden="true"</code>.</li>
<li>Le contenu entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code> est dépourvue de contenus textuels.</li>
<li>La balise <code lang="en">canvas</code> ou l'un de ses enfants est dépourvue d'attribut <code lang="en">title</code>.</li>
<li>La balise <code lang="en">canvas</code> ou l'un de ses enfants est dépourvue de rôle, propriété ou état ARIA visant à labelliser l'image (<code lang="en">aria-label</code>, <code lang="en">aria-describedby</code>, <code lang="en">aria-labelledby</code> par exemple).</li>
</ul>
</li>
<li id="test-1-2-6">Test 1.2.6 : Chaque image embarquée (balise <code lang="en">embed</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-de-dcoration">de décoration</a>, sans <a href="glossaire.html#lgende-dimage">légende</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La balise <code lang="en">embed</code> possède un attribut <code lang="en">aria-hidden="true"</code>.</li>
<li>La balise <code lang="en">embed</code> ou l'un de ses enfants est dépourvue d'attribut <code lang="en">title</code>.</li>
<li>La balise <code lang="en">embed</code> ou l'un de ses enfants est dépourvue de rôle, propriété ou état ARIA visant à labelliser l'image (<code lang="en">aria-label</code>, <code lang="en">aria-describedby</code>, <code lang="en">aria-labelledby</code> par exemple).</li>
</ul>
</li>
</ul>
<aside>
<p class="note-tech"><strong>Note technique :</strong> <a href="notes-techniques.html#nt-1-2">Consulter la note technique au sujet du rôle <code lang="en">presentation</code></a>.</p>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv">4.1.2</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H67.html">H67</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G196.html">G196</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/C9.html">C9</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F39.html">F39</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F38.html">F38</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/ARIA4.html">ARIA4</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/ARIA10.html">ARIA10</a></p>
</aside>
</article>
<article id="crit-1-3" data-level="A">
<h3 class="critere">Critère 1.3 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Pour chaque <a href="glossaire.html#image-porteuse-dinformation">image porteuse d'information</a> ayant une <a href="glossaire.html#alternative-textuelle-image">alternative textuelle</a>, cette alternative est-elle pertinente (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-3-1">Test 1.3.1 : Chaque image (balise <code lang="en">img</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, ayant un attribut <code lang="en">alt</code>, vérifie-t-elle ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>Le contenu de l'attribut <code lang="en">alt</code> est pertinent.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu de la propriété <code lang="en">aria-label</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu du <a href="glossaire.html#passage-texte-aria">passage de texte lié via la propriété <code lang="en">aria-labelledby</code></a> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
</ul>
</li>
<li id="test-1-3-2">Test 1.3.2 : Chaque <a href="glossaire.html#zone-dune-image-ractive">zone</a> (balise <code lang="en">area</code>) d'une <a href="glossaire.html#image-ractive">image réactive</a> <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, ayant un attribut <code lang="en">alt</code>, vérifie-t-elle ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>Le contenu de l'attribut <code lang="en">alt</code> est pertinent.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu de la propriété <code lang="en">aria-label</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu du <a href="glossaire.html#passage-texte-aria">passage de texte lié via la propriété <code lang="en">aria-labelledby</code></a> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
</ul>
</li>
<li id="test-1-3-3">Test 1.3.3 : Chaque <a href="glossaire.html#bouton-formulaire">bouton</a> de type image (balise <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code>), ayant un attribut <code lang="en">alt</code>, vérifie-t-il ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>Le contenu de l'attribut <code lang="en">alt</code> est pertinent.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu de la propriété <code lang="en">aria-label</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu du <a href="glossaire.html#passage-texte-aria">passage de texte lié via la propriété <code lang="en">aria-labelledby</code></a> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
</ul>
</li>
<li id="test-1-3-4">Test 1.3.4 : Chaque <a href="glossaire.html#image-objet">image objet</a> (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> vérifie-t-elle une de ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>L'image objet est immédiatement suivie d'un <a href="glossaire.html#lien-adjacent">lien adjacent</a> permettant d'afficher une page ou un passage de texte contenant une alternative pertinente.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image objet par un texte alternatif pertinent.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image objet par une image possédant une alternative pertinente.</li>
</ul>
</li>
<li id="test-1-3-5">Test 1.3.5 : Chaque <a href="glossaire.html#image-objet">image objet</a> (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui utilise une propriété <code lang="en">aria-label</code>, <code lang="en">aria-labelledby</code> ou un attribut <code lang="en">title</code>, vérifie-t-elle ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">aria-label</code>.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au <a href="glossaire.html#passage-texte-aria">passage de texte lié par la propriété <code lang="en">aria-labelledby</code></a>.</li>
</ul>
</li>
<li id="test-1-3-6">Test 1.3.6 : Chaque image embarquée (balise <code lang="en">embed</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> vérifie-t-elle une de ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>L'image embarquée est immédiatement suivie d'un <a href="glossaire.html#lien-adjacent">lien adjacent</a> permettant d'afficher une page ou un passage de texte contenant une alternative pertinente.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image embarquée par un texte alternatif pertinent.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image embarquée par une image possédant une alternative pertinente.</li>
</ul>
</li>
<li id="test-1-3-7">Test 1.3.7 : Chaque image embarquée (balise <code lang="en">embed</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui utilise une propriété <code lang="en">aria-label</code>, <code lang="en">aria-labelledby</code> ou un attribut <code lang="en">title</code>, vérifie-t-elle ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">aria-label</code>.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au <a href="glossaire.html#passage-texte-aria">passage de texte lié par la propriété <code lang="en">aria-labelledby</code></a>.</li>
</ul>
</li>
<li id="test-1-3-8">Test 1.3.8 : Chaque image vectorielle (balise <code lang="en">svg</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, en l'absence d'<a href="glossaire.html#alternative-svg">alternative</a>, vérifie-t-elle ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>La balise <code lang="en">svg</code> possède un <code lang="en">role="img"</code>.</li>
<li>La balise <code lang="en">svg</code> possède une propriété <code lang="en">aria-label</code> dont le contenu est pertinent et identique à l'attribut <code lang="en">title</code> s'il est présent.</li>
<li>La balise <code lang="en">svg</code> possède une balise <code lang="en"><title></code> dont le contenu est pertinent et contient un passage de texte identique à la propriété <code lang="en">aria-label</code>.</li>
</ul>
</li>
<li id="test-1-3-9">Test 1.3.9 : Pour chaque image vectorielle (balise <code lang="en">svg</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> et possédant une alternative, cette alternative est-elle <a href="glossaire.html#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>
<li id="test-1-3-10">Test 1.3.10 : Chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> vérifie-t-elle une de ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>Le contenu de l'alternative (contenu entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code>) est pertinent.</li>
<li>L'image <span lang="en">bitmap</span> est immédiatement suivie d'un <a href="glossaire.html#lien-adjacent">lien adjacent</a> permettant d'afficher une page ou un passage de texte contenant une alternative pertinente.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image <span lang="en">bitmap</span> par un texte alternatif pertinent.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image <span lang="en">bitmap</span> par une image possédant une alternative pertinente.</li>
</ul>
</li>
<li id="test-1-3-11">Test 1.3.11 : Chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui utilise une propriété <code lang="en">aria-label</code>, <code lang="en">aria-labelledby</code> ou un attribut <code lang="en">title</code>, vérifie-t-elle ces conditions (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?
<ul>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">aria-label</code>.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au <a href="glossaire.html#passage-texte-aria">passage de texte lié par la propriété <code lang="en">aria-labelledby</code></a>.</li>
</ul>
</li>
<li id="test-1-3-12">Test 1.3.12 : Pour chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> et possédant une alternative (contenu entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code>), cette alternative est-elle <a href="glossaire.html#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>
<li id="test-1-3-13">Test 1.3.13 : Pour chaque image <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> et ayant une <a href="glossaire.html#alternative-textuelle-image">alternative textuelle</a>, l'alternative textuelle est-elle <a href="glossaire.html#alternative-courte-et-concise">courte et concise</a> (hors <a href="cas-particuliers.html#cp-1-3" title="Cas particuliers pour le critère 1.3">cas particuliers</a>) ?</li>
</ul>
<aside>
<p class="note-tech"><strong>Note technique :</strong><a href="notes-techniques.html#nt-1-3-a">Consulter la note technique au sujet de l'attribut <code lang="en">title</code> pour des images</a>.</p>
<p class="note-tech"><strong>Note technique :</strong> <a href="notes-techniques.html#nt-1-3-b">Consulter la note technique au sujet des balises <code lang="en"><title></code> dans les images vectorielles</a>.</p>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv">4.1.2</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G94.html">G94</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G95.html">G95</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F30.html">F30</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F71.html">F71</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G196.html">G196</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/ARIA4.html">ARIA4</a></p>
</aside>
</article>
<article id="crit-1-4" data-level="A">
<h3 class="critere">Critère 1.4 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Pour chaque image utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, ayant une <a href="glossaire.html#alternative-textuelle-image">alternative textuelle</a>, cette alternative permet-elle d'identifier la nature et la fonction de l'image ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-4-1">Test 1.4.1 : Chaque image (balise <code lang="en">img</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, ayant un attribut <code lang="en">alt</code>, vérifie-t-elle ces conditions ?
<ul>
<li>Le contenu de l'attribut <code lang="en">alt</code> permet de comprendre la nature et la fonction de l'image.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu de la propriété <code lang="en">aria-label</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu du <a href="glossaire.html#passage-texte-aria">passage de texte lié via la propriété <code lang="en">aria-labelledby</code></a> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
</ul>
</li>
<li id="test-1-4-2">Test 1.4.2 : Chaque <a href="glossaire.html#zone-dune-image-ractive">zone</a> (balise <code lang="en">area</code>) d'une <a href="glossaire.html#image-ractive">image réactive</a> utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, ayant un attribut <code lang="en">alt</code>, vérifie-t-elle ces conditions ?
<ul>
<li>Le contenu de l'attribut <code lang="en">alt</code> permet de comprendre la nature et la fonction de la zone.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu de la propriété <code lang="en">aria-label</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu du <a href="glossaire.html#passage-texte-aria">passage de texte lié via la propriété <code lang="en">aria-labelledby</code></a> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
</ul>
</li>
<li id="test-1-4-3">Test 1.4.3 : Chaque <a href="glossaire.html#bouton-formulaire">bouton</a> associé à une image (balise <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, ayant un attribut <code lang="en">alt</code>, vérifie-t-il ces conditions ?
<ul>
<li>Le contenu de l'attribut <code lang="en">alt</code> permet de comprendre la nature et la fonction du bouton.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu de la propriété <code lang="en">aria-label</code> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
<li>S'il est présent, le contenu du <a href="glossaire.html#passage-texte-aria">passage de texte lié via la propriété <code lang="en">aria-labelledby</code></a> est identique au contenu de l'attribut <code lang="en">alt</code>.</li>
</ul>
</li>
<li id="test-1-4-4">Test 1.4.4 : Chaque <a href="glossaire.html#image-objet">image objet</a> (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a> vérifie-t-elle une de ces conditions ?
<ul>
<li>L'image objet est immédiatement suivie d'un <a href="glossaire.html#lien-adjacent">lien adjacent</a> permettant d'afficher une page ou un passage de texte contenant une alternative permettant de comprendre la nature et la fonction de l'image.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image objet par un texte alternatif permettant de comprendre la nature et la fonction de l'image.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image objet par une image possédant une alternative permettant de comprendre la nature et la fonction de l'image.</li>
</ul>
</li>
<li id="test-1-4-5">Test 1.4.5 : Chaque <a href="glossaire.html#image-objet">image objet</a> (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, qui utilise une propriété <code lang="en">aria-label</code>, <code lang="en">aria-labelledby</code> ou un attribut <code lang="en">title</code>, vérifie-t-elle ces conditions ?
<ul>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">aria-label</code>.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au <a href="glossaire.html#passage-texte-aria">passage de texte lié par la propriété <code lang="en">aria-labelledby</code></a>.</li>
</ul>
</li>
<li id="test-1-4-6">Test 1.4.6 : Chaque image embarquée (balise <code lang="en">embed</code> avec l'attribut <code lang="en">type="image/…"</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a> vérifie-t-elle une de ces conditions ?
<ul>
<li>L'image embarquée est immédiatement suivie d'un <a href="glossaire.html#lien-adjacent">lien adjacent</a> permettant d'afficher une page ou un passage de texte contenant une alternative permettant de comprendre la nature et la fonction de l'image.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image embarquée par un texte alternatif permettant de comprendre la nature et la fonction de l'image.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image embarquée par une image possédant une alternative permettant de comprendre la nature et la fonction de l'image.</li>
</ul>
</li>
<li id="test-1-4-7">Test 1.4.7 : Chaque image embarquée (balise <code lang="en">embed</code> avec l'attribut <code lang="en">type="image/…"</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, qui utilise une propriété <code lang="en">aria-label</code>, <code lang="en">aria-labelledby</code> ou un attribut <code lang="en">title</code>, vérifie-t-elle ces conditions ?
<ul>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">aria-label</code>.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au <a href="glossaire.html#passage-texte-aria">passage de texte lié par la propriété <code lang="en">aria-labelledby</code></a>.</li>
</ul>
</li>
<li id="test-1-4-8">Test 1.4.8 : Chaque image vectorielle (balise <code lang="en">svg</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, en l'absence d'<a href="glossaire.html#alternative-svg">alternative</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La balise <code lang="en">svg</code> possède un <code lang="en">role="img"</code>.</li>
<li>La balise <code lang="en">svg</code> possède une propriété <code lang="en">aria-label</code> dont le contenu permet de comprendre la nature et la fonction de l'image et identique à l'attribut <code lang="en">title</code> s'il est présent.</li>
<li>La balise <code lang="en">svg</code> possède une balise <code lang="en"><title></code> dont le contenu permet de comprendre la nature et la fonction de l'image et identique à la propriété <code lang="en">aria-label</code>.</li>
<li>Un <a href="glossaire.html#lien-adjacent">lien adjacent</a> permet d'accéder à une alternative dont le contenu permet de comprendre la nature et la fonction de l'image et identique à la propriété <code lang="en">aria-label</code>.</li>
</ul>
</li>
<li id="test-1-4-9">Test 1.4.9 : Pour chaque image vectorielle (balise <code lang="en">svg</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, possédant une <a href="glossaire.html#alternative-svg">alternative</a>, cette alternative est-elle <a href="glossaire.html#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>
<li id="test-1-4-10">Test 1.4.10 : Chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a> vérifie-t-elle une de ces conditions ?
<ul>
<li>Le contenu de l'alternative (contenu entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code>) permet de comprendre la nature et la fonction de l'image.</li>
<li>L'image <span lang="en">bitmap</span> est immédiatement suivie d'un <a href="glossaire.html#lien-adjacent">lien adjacent</a> permettant d'afficher une page ou un passage de texte contenant une alternative permettant de comprendre la nature et la fonction de l'image.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image <span lang="en">bitmap</span> par un texte alternatif permettant de comprendre la nature et la fonction de l'image.</li>
<li>Un mécanisme permet à l'utilisateur de remplacer l'image <span lang="en">bitmap</span> par une image possédant une alternative permettant de comprendre la nature et la fonction de l'image.</li>
</ul>
</li>
<li id="test-1-4-11">Test 1.4.11 : Chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, qui utilise une propriété <code lang="en">aria-label</code>, <code lang="en">aria-labelledby</code> ou un attribut <code lang="en">title</code>, vérifie-t-elle ces conditions ?
<ul>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au contenu de l'attribut <code lang="en">aria-label</code>.</li>
<li>S'il est présent, le contenu de l'attribut <code lang="en">title</code> est identique au <a href="glossaire.html#passage-texte-aria">passage de texte lié par la propriété <code lang="en">aria-labelledby</code></a>.</li>
</ul>
</li>
<li id="test-1-4-12">Test 1.4.12 : Pour chaque image <span lang="en">bitmap</span> (balise <code lang="en"><canvas></code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> ou comme <a href="glossaire.html#image-test">image-test</a>, ayant une alternative (contenu entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code>), cette alternative est-elle <a href="glossaire.html#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?
</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all">1.1.1</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G143.html">G143</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G100.html">G100</a></p>
</aside>
</article>
<article id="crit-1-5" data-level="A">
<h3 class="critere">Critère 1.5 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Pour chaque image utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a>, une solution d'accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-5-1">Test 1.5.1 : Chaque image (balises <code lang="en">img</code>, <code lang="en">area</code>, <code lang="en">object</code>, <code lang="en">embed</code>, <code lang="en">svg</code>, <code lang="en">canvas</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> vérifie-t-elle une de ces conditions ?
<ul>
<li>Il existe une autre forme de CAPTCHA non graphique, au moins.</li>
<li>Il existe une autre solution d'accès à la fonctionnalité sécurisée par le CAPTCHA.</li>
</ul>
</li>
<li id="test-1-5-2">Test 1.5.2 : Chaque <a href="glossaire.html#bouton-formulaire">bouton</a> associé à une image (balise <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code>) utilisée comme <a href="glossaire.html#captcha">CAPTCHA</a> vérifie-t-il une de ces conditions ?
<ul>
<li>Il existe une autre forme de CAPTCHA non graphique, au moins.</li>
<li>Il existe une autre solution d'accès à la fonctionnalité sécurisée par le CAPTCHA.</li>
</ul>
</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all">1.1.1</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G144.html">G144</a></p>
</aside>
</article>
<article id="crit-1-6" data-level="A">
<h3 class="critere">Critère 1.6 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Chaque <a href="glossaire.html#image-porteuse-dinformation">image porteuse d'information</a> a-t-elle, si nécessaire, une <a href="glossaire.html#description-dtaille-image">description détaillée</a> ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-6-1">Test 1.6.1 : Chaque image (balise <code lang="en">img</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui nécessite une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle une de ces conditions ?
<ul>
<li>Il existe un attribut <code lang="en">longdesc</code> qui donne l'adresse (<a href="glossaire.html#url">url</a>) d'une page contenant la description détaillée.</li>
<li>Il existe un attribut <code lang="en">alt</code> contenant la référence à une description détaillée adjacente à l'image.</li>
<li>Il existe un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (via une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>) permettant d'accéder au contenu de la description détaillée.</li>
</ul>
</li>
<li id="test-1-6-2">Test 1.6.2 : Chaque <a href="glossaire.html#image-objet">image objet</a> (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui nécessite une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle une de ces conditions ?
<ul>
<li>Il existe un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (via une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>) permettant d'accéder au contenu de la description détaillée.</li>
<li>Il existe une description détaillée clairement identifiable adjacente à l'image objet.</li>
</ul>
</li>
<li id="test-1-6-3">Test 1.6.3 : Chaque image embarquée (balise <code lang="en">embed</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui nécessite une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle une de ces conditions ?
<ul>
<li>Il existe un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (via une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>) permettant d'accéder au contenu de la description détaillée.</li>
<li>Il existe une description détaillée clairement identifiable adjacente à l'image embarquée.</li>
</ul>
</li>
<li id="test-1-6-4">Test 1.6.4 : Chaque <a href="glossaire.html#bouton-formulaire">bouton</a> de type image (balise <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteur d'information</a>, qui nécessite une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-il une de ces conditions ?
<ul>
<li>Il existe un attribut <code lang="en">alt</code> contenant la référence à une description détaillée adjacente à l'image.</li>
<li>Il existe un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (via une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>) permettant d'accéder au contenu de la description détaillée.</li>
<li>Il existe une propriété <code lang="en">aria-describedby</code> référençant un <a href="glossaire.html#passage-texte-aria">passage de texte</a> faisant office de description détaillée.</li>
</ul>
</li>
<li id="test-1-6-5">Test 1.6.5 : Chaque <a href="glossaire.html#bouton-formulaire">bouton</a> de type image (balise <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteur d'information</a>, qui implémente une référence à une <a href="glossaire.html#description-dtaille-image">description détaillée</a> via une propriété <code lang="en">aria-describedby</code>, vérifie-t-il ces conditions ?
<ul>
<li>Le <a href="glossaire.html#passage-texte-aria">passage de texte</a> est identifié via un attribut <code lang="en">id</code>.</li>
<li>La valeur de l'attribut <code lang="en">id</code> est unique.</li>
<li>La valeur de la propriété ARIA <code lang="en">aria-describedby</code> est égale à la valeur de l'attribut <code lang="en">id</code>.</li>
</ul>
</li>
<li id="test-1-6-6">Test 1.6.6 : Chaque image vectorielle (balise <code lang="en">svg</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui nécessite une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle une de ces conditions ?
<ul>
<li>Il existe une propriété <code lang="en">aria-label</code> contenant une référence à une description détaillée adjacente à l'image vectorielle.</li>
<li>La balise <code lang="en"><title></code> contient une référence à une description détaillée adjacente à l'image vectorielle.</li>
<li>Il existe une balise <code lang="en">desc</code> contenant la description détaillée.</li>
<li>Il existe un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (via une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>) permettant d'accéder au contenu de la description détaillée.</li>
</ul>
</li>
<li id="test-1-6-7">Test 1.6.7 : Pour chaque image vectorielle (balise <code lang="en">svg</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui implémente une référence à une <a href="glossaire.html#description-dtaille-image">description détaillée</a> adjacente via une propriété <code lang="en">aria-label</code> ou une balise <code lang="en">desc</code>, cette référence est-elle <a href="glossaire.html#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>
<li id="test-1-6-8">Test 1.6.8 : Chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>), qui nécessite une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle une de ces conditions ?
<ul>
<li>Il existe un passage de texte entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code> contenant une référence à une description détaillée adjacente à l'image <span lang="en">bitmap</span>.</li>
<li>Il existe un contenu textuel entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code> faisant office de description détaillée.</li>
<li>Il existe un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (via une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>) permettant d'accéder au contenu de la description détaillée.</li>
</ul>
</li>
<li id="test-1-6-9">Test 1.6.9 : Pour chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui implémente une référence à une <a href="glossaire.html#description-dtaille-image">description détaillée</a> adjacente, cette référence est-elle <a href="glossaire.html#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>
<li id="test-1-6-10">Test 1.6.10 : Pour chaque image (balise <code lang="en">img</code>, <code lang="en">area</code>, <code lang="en">object</code>, <code lang="en">embed</code>, <code lang="en">svg</code>, <code lang="en">canvas</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, qui implémente une <a href="glossaire.html#description-dtaille-image">description détaillée</a> et qui utilise une propriété <code lang="en">aria-describedby</code>, la propriété <code lang="en">aria-describedby</code> référence-t-elle la description détaillée ?</li>
</ul>
<aside>
<p class="note-tech"><strong>Note technique :</strong> <a href="notes-techniques.html#nt-1-6">Consulter la note technique au sujet des images vectorielles et de l'utilisation de la propriété <code lang="en">aria-describedby</code></a>.</p>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all">1.1.1</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G92.html">G92</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G74.html">G74</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G73.html">G73</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H45.html">H45</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/ARIA6.html">ARIA6</a>
</p>
</aside>
</article>
<article id="crit-1-7" data-level="A">
<h3 class="critere">Critère 1.7 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Pour chaque <a href="glossaire.html#image-porteuse-dinformation">image porteuse d'information</a> ayant une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, cette description est-elle pertinente ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-7-1">Test 1.7.1 : Chaque image (balise <code lang="en">img</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, ayant une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La description détaillée via l'adresse référencée dans l'attribut <code lang="en">longdesc</code> est pertinente.</li>
<li>La description détaillée dans la page et signalée dans l'attribut <code lang="en">alt</code> est pertinente.</li>
<li>La description détaillée via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> est pertinente.</li>
</ul>
</li>
<li id="test-1-7-2">Test 1.7.2 : Chaque <a href="glossaire.html#bouton-formulaire">bouton</a> de type image (balise <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteur d'information</a>, ayant une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-il ces conditions ?
<ul>
<li>La description détaillée dans la page et signalée dans l'attribut <code lang="en">alt</code> est pertinente.</li>
<li>La description détaillée via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> est pertinente.</li>
<li><a href="glossaire.html#passage-texte-aria">Le passage de texte référencé via la propriété <code lang="en">aria-describedby</code></a> est pertinent.</li>
</ul>
</li>
<li id="test-1-7-3">Test 1.7.3 : Chaque <a href="glossaire.html#image-objet">image objet</a> (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, ayant une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La description détaillée adjacente à l'image objet est pertinente.</li>
<li>La description détaillée via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> est pertinente.</li>
</ul>
</li>
<li id="test-1-7-4">Test 1.7.4 : Chaque image embarquée (balise <code lang="en">embed</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, ayant une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La description détaillée adjacente à l'image embarquée est pertinente.</li>
<li>La description détaillée via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> est pertinente.</li>
</ul>
</li>
<li id="test-1-7-5">Test 1.7.5 : Chaque image vectorielle (balise <code lang="en">svg</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, ayant une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La description détaillée adjacente à l'image vectorielle et signalée dans la propriété <code lang="en">aria-label</code> ou la balise <code lang="en">desc</code> est pertinente.</li>
<li>La description détaillée contenue dans la balise <code lang="en">desc</code> est pertinente.</li>
<li>La description détaillée via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> est pertinente.</li>
</ul>
</li>
<li id="test-1-7-6">Test 1.7.6 : Pour chaque image vectorielle (balise <code lang="en">svg</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, ayant une <a href="glossaire.html#description-dtaille-image">description détaillée</a> implémentée via la balise <code lang="en">desc</code>, cette description détaillée est-elle <a href="glossaire.html#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>
<li id="test-1-7-7">Test 1.7.7 : Chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, ayant une <a href="glossaire.html#description-dtaille-image">description détaillée</a>, vérifie-t-elle ces conditions ?
<ul>
<li>La description détaillée adjacente à l'image <span lang="en">bitmap</span> est pertinente.</li>
<li>La description détaillée contenue entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code> est pertinente.</li>
<li>La description détaillée via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> est pertinente.</li>
</ul>
</li>
<li id="test-1-7-8">Test 1.7.8 : Pour chaque image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, ayant une <a href="glossaire.html#description-dtaille-image">description détaillée</a> entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code>, cette description détaillée est-elle <a href="glossaire.html#correctement-restitue-par-les-technologies-dassistance">correctement restituée</a> par les technologies d'assistance ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all">1.1.1</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G92.html">G92</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F67.html">F67</a></p>
</aside>
</article>
<article id="crit-1-8" data-level="AA">
<h3 class="critere">Critère 1.8 [<span aria-label="double-A"><span aria-hidden="true">AA</span></span>] Chaque <a href="glossaire.html#image-texte">image texte</a> <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, en l'absence d'un <a href="glossaire.html#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacée par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-8" title="Cas particuliers pour le critère 1.8">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-8-1">Test 1.8.1 : Chaque <a href="glossaire.html#image-texte">image texte</a> (balise <code lang="en">img</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, en l'absence d'un <a href="glossaire.html#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacé par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-8" title="Cas particuliers pour le critère 1.8">cas particuliers</a>) ?</li>
<li id="test-1-8-2">Test 1.8.2 : Pour chaque <a href="glossaire.html#bouton-formulaire">bouton</a> « <a href="glossaire.html#image-texte">image texte</a> » (balise <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteur d'information</a>, en l'absence d'un <a href="glossaire.html#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacé par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-8" title="Cas particuliers pour le critère 1.8">cas particuliers</a>) ?</li>
<li id="test-1-8-3">Test 1.8.3 : Chaque <a href="glossaire.html#image-texteObj">image texte objet</a> (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, en l'absence d'un <a href="glossaire.html#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacée par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-8" title="Cas particuliers pour le critère 1.8">cas particuliers</a>) ?</li>
<li id="test-1-8-4">Test 1.8.4 : Chaque <a href="glossaire.html#image-texte">image texte</a> embarquée (balise <code lang="en">embed</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, en l'absence d'un <a href="glossaire.html#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacée par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-8" title="Cas particuliers pour le critère 1.8">cas particuliers</a>) ?</li>
<li id="test-1-8-5">Test 1.8.5 : Chaque <a href="glossaire.html#image-texte">image texte</a> <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, en l'absence d'un <a href="glossaire.html#mcanisme-de-remplacement">mécanisme de remplacement</a>, doit si possible être remplacée par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-8" title="Cas particuliers pour le critère 1.8">cas particuliers</a>) ?</li>
</ul>
<aside>
<p class="note-tech"><strong>Note technique :</strong> <a href="notes-techniques.html#nt-1-8">Consulter la note technique au sujet des images vectorielles de type texte</a>.</p>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-text-presentation">1.4.5</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G136.html">G136</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G140.html">G140</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/C22.html">C22</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/C30.html">C30</a></p>
</aside>
</article>
<article id="crit-1-9" data-level="AAA">
<h3 class="critere">Critère 1.9 [<span aria-label="triple-A"><span aria-hidden="true">AAA</span></span>] Chaque <a href="glossaire.html#image-texte">image texte</a> <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a>, doit si possible être remplacée par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-9" title="Cas particuliers pour le critère 1.9">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-9-1">Test 1.9.1 : Chaque <a href="glossaire.html#image-texte">image texte</a> (balise <code lang="en">img</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> doit si possible être remplacée par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-9" title="Cas particuliers pour le critère 1.9">cas particuliers</a>) ?</li>
<li id="test-1-9-2">Test 1.9.2 : Chaque <a href="glossaire.html#bouton-formulaire">bouton</a> « <a href="glossaire.html#image-texte">image texte</a> » (balise <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteur d'information</a> doit si possible être remplacé par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-9" title="Cas particuliers pour le critère 1.9">cas particuliers</a>) ?</li>
<li id="test-1-9-3">Test 1.9.3 : Chaque <a href="glossaire.html#image-texteObj">image texte objet</a> (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> doit si possible être remplacée par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-9" title="Cas particuliers pour le critère 1.9">cas particuliers</a>) ?</li>
<li id="test-1-9-4">Test 1.9.4 : Chaque <a href="glossaire.html#image-texte">image texte</a> embarquée (balise <code lang="en">embed</code> avec l'attribut <code lang="en">type="image/…"</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> doit si possible être remplacée par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-9" title="Cas particuliers pour le critère 1.9">cas particuliers</a>) ?</li>
<li id="test-1-9-5">Test 1.9.5 : Chaque <a href="glossaire.html#image-texte">image texte</a> <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) <a href="glossaire.html#image-porteuse-dinformation">porteuse d'information</a> doit si possible être remplacée par du <a href="glossaire.html#texte-styl">texte stylé</a>. Cette règle est-elle respectée (hors <a href="cas-particuliers.html#cp-1-9" title="Cas particuliers pour le critère 1.9">cas particuliers</a>) ?</li>
</ul>
<aside>
<p class="note-tech"><strong>Note technique :</strong> <a href="notes-techniques.html#nt-1-8">Consulter la note technique au sujet des images vectorielles de type texte</a>.</p>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-text-images">1.4.9</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G140.html">G140</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/C22.html">C22</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/C30.html">C30</a></p>
</aside>
</article>
<article id="crit-1-10" data-level="A">
<h3 class="critere">Critère 1.10 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Chaque <a href="glossaire.html#lgende-dimage">légende</a> d'image est-elle, si nécessaire, correctement reliée à l'image correspondante ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-1-10-1">Test 1.10.1 : Chaque image légendée (balise <code lang="en">img</code> ou <code lang="en">input</code> avec l'attribut <code lang="en">type="image"</code> associée à une <a href="glossaire.html#lgende-dimage">légende</a> adjacente) vérifie-t-elle, si nécessaire, ces conditions ?
<ul>
<li>L'image (balise <code lang="en">img</code>) et sa légende sont contenues dans une balise <code lang="en">figure</code>.</li>
<li>La balise <code lang="en">figure</code> possède un attribut <code lang="en">role="group"</code>.</li>
<li>Le contenu de l'attribut <code lang="en">alt</code> de l'image contient une référence à la légende adjacente.</li>
</ul>
</li>
<li id="test-1-10-2">Test 1.10.2 : Chaque <a href="glossaire.html#image-objet">image objet</a> légendée (balise <code lang="en">object</code> avec l'attribut <code lang="en">type="image/…"</code> associée à une <a href="glossaire.html#lgende-dimage">légende</a> adjacente) vérifie-t-elle, si nécessaire, ces conditions ?
<ul>
<li>L'image objet (balise <code lang="en">object</code>) et sa légende sont contenues dans une balise <code lang="en">figure</code>.</li>
<li>La balise <code lang="en">figure</code> possède un attribut <code lang="en">role="group"</code>.</li>
</ul>
</li>
<li id="test-1-10-3">Test 1.10.3 : Chaque image embarquée légendée (balise <code lang="en">embed</code> associée à une <a href="glossaire.html#lgende-dimage">légende</a> adjacente) vérifie-t-elle, si nécessaire, ces conditions ?
<ul>
<li>L'image embarquée (balise <code lang="en">embed</code>) et sa légende sont contenues dans une balise <code lang="en">figure</code>.</li>
<li>La balise <code lang="en">figure</code> possède un attribut <code lang="en">role="group"</code>.</li>
<li>L'alternative contient une référence à la légende adjacente.</li>
</ul>
</li>
<li id="test-1-10-4">Test 1.10.4 : Chaque image vectorielle légendée (balise <code lang="en">svg</code> associée à une <a href="glossaire.html#lgende-dimage">légende</a> adjacente) vérifie-t-elle, si nécessaire, ces conditions ?
<ul>
<li>L'image vectorielle (balise <code lang="en">svg</code>) et sa légende sont contenues dans une balise <code lang="en">figure</code>.</li>
<li>La balise <code lang="en">figure</code> possède un <code lang="en">role="group"</code>.</li>
<li>Le contenu de la propriété <code lang="en">aria-label</code> ou de la balise <code lang="en">desc</code> de l'image vectorielle contient une référence à la légende adjacente.</li>
</ul>
</li>
<li id="test-1-10-5">Test 1.10.5 : Chaque image <span lang="en">bitmap</span> légendée (balise <code lang="en">canvas</code> associée à une <a href="glossaire.html#lgende-dimage">légende</a> adjacente) vérifie-t-elle, si nécessaire, ces conditions ?
<ul>
<li>L'image <span lang="en">bitmap</span> (balise <code lang="en">canvas</code>) et sa légende sont contenues dans une balise <code lang="en">figure</code>.</li>
<li>La balise <code lang="en">figure</code> possède un attribut <code lang="en">role="group"</code>.</li>
<li>Le contenu entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code> de l'image <span lang="en">bitmap</span> contient une référence à la légende adjacente.</li>
</ul>
</li>
</ul>
<aside>
<p class="note-tech"><strong>Note technique :</strong> <a href="notes-techniques.html#nt-1-10">Consulter la note technique au sujet des légendes d'images</a>.</p>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#text-equiv-all">1.1.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv">4.1.2</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G140.html">G140</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/ARIA4.html">ARIA4</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/ARIA6.html">ARIA6</a></p>
</aside>
</article>
</section>
<section tabindex="-1" id="cadres">
<header>
<h2>2. Cadres</h2>
<p class="principe">Principe WCAG : Robuste</p>
<h3 class="reco">Recommandation :</h3>
<p>Donner à chaque <a href="glossaire.html#cadre-en-ligne">cadre en ligne</a> un <a href="glossaire.html#titre-de-cadre">titre</a> pertinent.</p>
</header>
<article id="crit-2-1" data-level="A">
<h3 class="critere">Critère 2.1 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Chaque <a href="glossaire.html#cadre-en-ligne">cadre en ligne</a> a-t-il un <a href="glossaire.html#titre-de-cadre">titre de cadre</a> ?</h3>
<p class="principe">Principe WCAG : Robuste</p>
<ul>
<li id="test-2-1-1">Test 2.1.1 : Chaque <a href="glossaire.html#cadre-en-ligne">cadre en ligne</a> (balise <code lang="en">iframe</code>) a-t-il un attribut <code lang="en">title</code> ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv">4.1.2</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H64.html">H64</a></p>
</aside>
</article>
<article id="crit-2-2" data-level="A">
<h3 class="critere">Critère 2.2 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Pour chaque <a href="glossaire.html#cadre-en-ligne">cadre en ligne</a> ayant un titre de cadre, ce <a href="glossaire.html#titre-de-cadre">titre de cadre</a> est-il pertinent ?</h3>
<p class="principe">Principe WCAG : Robuste</p>
<ul>
<li id="test-2-2-1">Test 2.2.1 : Pour chaque <a href="glossaire.html#cadre-en-ligne">cadre en ligne</a> (balise <code lang="en">iframe</code>) ayant un attribut <code lang="en">title</code>, le contenu de cet attribut est-il pertinent ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#ensure-compat-rsv">4.1.2</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H64.html">H64</a></p>
</aside>
</article>
</section>
<section tabindex="-1" id="couleurs">
<header>
<h2>3. Couleurs</h2>
<p class="principe">Principe WCAG : Perceptible</p>
<h3 class="reco">Recommandation :</h3>
<p>Ne pas donner l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> uniquement par la couleur et utiliser des <a href="glossaire.html#contraste">contrastes</a> de couleurs suffisamment élevés.</p>
</header>
<article id="crit-3-1" data-level="A">
<h3 class="critere">Critère 3.1 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Dans chaque page web, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-3-1-1">Test 3.1.1 : Pour chaque mot ou ensemble de mots dont la mise en couleur est porteuse d'<a href="glossaire.html#information-donne-par-la-couleur">information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>
<li id="test-3-1-2">Test 3.1.2 : Pour chaque indication de couleur donnée par un texte, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>
<li id="test-3-1-3">Test 3.1.3 : Pour chaque image <a href="glossaire.html#image-vhiculant-une-information-donne-par-la-couleur">véhiculant une information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>
<li id="test-3-1-4">Test 3.1.4 : Pour chaque <a href="glossaire.html#proprit-css-dterminant-une-couleur">propriété CSS déterminant une couleur</a> et véhiculant une <a href="glossaire.html#information-donne-par-la-couleur">information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>
<li id="test-3-1-5">Test 3.1.5 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> véhiculant une <a href="glossaire.html#information-donne-par-la-couleur">information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>
<li id="test-3-1-6">Test 3.1.6 : Pour chaque <a href="glossaire.html#mdia-non-temporel">média non temporel</a> véhiculant une <a href="glossaire.html#information-donne-par-la-couleur">information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-without-color">1.4.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic">1.3.1</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G14.html">G14</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G182.html">G182</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G111.html">G111</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G117.html">G117</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G138.html">G138</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G205.html">G205</a></p>
</aside>
</article>
<article id="crit-3-2" data-level="A">
<h3 class="critere">Critère 3.2 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Dans chaque page web, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon pertinente ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-3-2-1">Test 3.2.1 : Pour chaque mot ou ensemble de mots dont la mise en couleur est porteuse d'<a href="glossaire.html#information-donne-par-la-couleur">information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="glossaire.html#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>
<li id="test-3-2-2">Test 3.2.2 : Pour chaque indication de couleur donnée par un texte, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="glossaire.html#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>
<li id="test-3-2-3">Test 3.2.3 : Pour chaque image <a href="glossaire.html#image-vhiculant-une-information-donne-par-la-couleur">véhiculant une information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="glossaire.html#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>
<li id="test-3-2-4">Test 3.2.4 : Pour chaque <a href="glossaire.html#proprit-css-dterminant-une-couleur">propriété CSS déterminant une couleur</a> et véhiculant une <a href="glossaire.html#information-donne-par-la-couleur">information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="glossaire.html#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>
<li id="test-3-2-5">Test 3.2.5 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> véhiculant une <a href="glossaire.html#information-donne-par-la-couleur">information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="glossaire.html#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>
<li id="test-3-2-6">Test 3.2.6 : Pour chaque <a href="glossaire.html#mdia-non-temporel">média non temporel</a> véhiculant une <a href="glossaire.html#information-donne-par-la-couleur">information</a>, l'<a href="glossaire.html#information-donne-par-la-couleur">information</a> ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon <a href="glossaire.html#pertinence-information-autrement-que-par-la-couleur">pertinente</a> ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-without-color">1.4.1</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G138.html">G138</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F13.html">F13</a></p>
</aside>
</article>
<article id="crit-3-3" data-level="AA">
<h3 class="critere">Critère 3.3 [<span aria-label="double-A"><span aria-hidden="true">AA</span></span>] Dans chaque page web, le <a href="glossaire.html#contraste">contraste</a> entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.3">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-3-3-1">Test 3.3.1 : Dans chaque page web, <a href="glossaire.html#taille-caracteres-contraste">jusqu'à 150% de la taille de police par défaut</a> (ou 1.5em), le texte et le texte en image sans effet de graisse vérifient-ils une de ces conditions (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.3">cas particuliers</a>) ?
<ul>
<li>Le rapport de <a href="glossaire.html#contraste">contraste</a> entre le texte et son arrière-plan est de 4.5:1, au moins.</li>
<li>Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4.5:1, au moins.</li>
</ul>
</li>
<li id="test-3-3-2">Test 3.3.2 : Dans chaque page web, <a href="glossaire.html#taille-caracteres-contraste">jusqu'à 120% de la taille de police par défaut</a> (ou 1.2em), le texte et le texte en image en gras vérifient-ils une de ces conditions (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.3">cas particuliers</a>) ?
<ul>
<li>Le rapport de <a href="glossaire.html#contraste">contraste</a> entre le texte et son arrière-plan est de 4.5:1, au moins.</li>
<li>Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4.5:1, au moins.</li>
</ul>
</li>
<li id="test-3-3-3">Test 3.3.3 : Dans chaque page web, <a href="glossaire.html#taille-caracteres-contraste">à partir de 150% de la taille de police par défaut</a> (ou 1.5em), le texte et le texte en image sans effet de graisse vérifient-ils une de ces conditions (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.3">cas particuliers</a>) ?
<ul>
<li>Le rapport de <a href="glossaire.html#contraste">contraste</a> entre le texte et son arrière-plan est de 3:1, au moins.</li>
<li>Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 3:1, au moins.</li>
</ul>
</li>
<li id="test-3-3-4">Test 3.3.4 : Dans chaque page web, <a href="glossaire.html#taille-caracteres-contraste">à partir de 120% de la taille de police par défaut</a> (ou 1.2em), le texte et le texte en image en gras vérifient-ils une de ces conditions (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.3">cas particuliers</a>) ?
<ul>
<li>Le rapport de <a href="glossaire.html#contraste">contraste</a> entre le texte et son arrière-plan est de 3:1, au moins.</li>
<li>Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 3:1, au moins.</li>
</ul>
</li>
<li id="test-3-3-5">Test 3.3.5 : Chaque <a href="glossaire.html#mcanisme-contraste">mécanisme qui permet d'afficher le texte avec un rapport de contraste conforme</a> a-t-il un rapport de contraste supérieur ou égal à 4,5:1 ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-contrast">1.4.3</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G18.html">G18</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G136.html">G136</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G148.html">G148</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G174.html">G174</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G145.html">G145</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/C29.html">C29</a></p>
</aside>
</article>
<article id="crit-3-4" data-level="AAA">
<h3 class="critere">Critère 3.4 [<span aria-label="triple-A"><span aria-hidden="true">AAA</span></span>] Dans chaque page web, le <a href="glossaire.html#contraste">contraste</a> entre la couleur du texte et la couleur de son arrière-plan est-il amélioré (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.4">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-3-4-1">Test 3.4.1 : Dans chaque page web, <a href="glossaire.html#taille-caracteres-contraste">jusqu'à 150% de la taille de police par défaut</a> (ou 1.5em), le texte et le texte en image sans effet de graisse vérifient-ils une de ces conditions (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.4">cas particuliers</a>) ?
<ul>
<li>Le rapport de <a href="glossaire.html#contraste">contraste</a> entre le texte et son arrière-plan est de 7:1, au moins.</li>
<li>Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 7:1, au moins.</li>
</ul>
</li>
<li id="test-3-4-2">Test 3.4.2 : Dans chaque page web, <a href="glossaire.html#taille-caracteres-contraste">jusqu'à 120% de la taille de police par défaut</a> (ou 1.2em), le texte et le texte en image en gras vérifient-ils une de ces conditions (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.4">cas particuliers</a>) ?
<ul>
<li>Le rapport de <a href="glossaire.html#contraste">contraste</a> entre le texte et son arrière-plan est de 7:1, au moins.</li>
<li>Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 7:1, au moins.</li>
</ul>
</li>
<li id="test-3-4-3">Test 3.4.3 : Dans chaque page web, <a href="glossaire.html#taille-caracteres-contraste">à partir de 150% de la taille de police par défaut</a> (ou 1.5em), le texte et le texte en image sans effet de graisse vérifient-ils une de ces conditions (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.4">cas particuliers</a>) ?
<ul>
<li>Le rapport de <a href="glossaire.html#contraste">contraste</a> entre le texte et son arrière-plan est de 4.5:1, au moins.</li>
<li>Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4.5:1, au moins.</li>
</ul>
</li>
<li id="test-3-4-4">Test 3.4.4 : Dans chaque page web, <a href="glossaire.html#taille-caracteres-contraste">à partir de 120% de la taille de police par défaut</a> (ou 1.2em), le texte et le texte en image en gras vérifient-ils une de ces conditions (hors <a href="cas-particuliers.html#cp-3-3,3-4" title="Cas particuliers pour le critère 3.4">cas particuliers</a>) ?
<ul>
<li>Le rapport de <a href="glossaire.html#contraste">contraste</a> entre le texte et son arrière-plan est de 4.5:1, au moins.</li>
<li>Un mécanisme permet à l'utilisateur d'afficher le texte avec un rapport de contraste de 4.5:1, au moins.</li>
</ul>
</li>
<li id="test-3-4-5">Test 3.4.5 : Chaque <a href="glossaire.html#mcanisme-contraste">mécanisme qui permet d'afficher le texte avec un rapport de contraste conforme</a> a-t-il un rapport de contraste supérieur ou égal à 7:1 ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast7">1.4.6</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G148.html">G148</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G17.html">G17</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G18.html">G18</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G174.html">G174</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F83.html">F83</a></p>
</aside>
</article>
</section>
<section tabindex="-1" id="multimedia">
<header>
<h2>4. Multimédia</h2>
<p class="principe">Principe WCAG : Perceptible</p>
<h3 class="reco">Recommandation :</h3>
<p>Donner si nécessaire à chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a>, des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> et une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée pertinents. Donner à chaque <a href="glossaire.html#mdia-non-temporel">média non temporel</a> une alternative textuelle pertinente.
Rendre possible le <a href="glossaire.html#contrle-de-la-consultation-dun-media-temporel">contrôle de la consultation</a> de chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> et non-temporel au clavier et s'assurer de leur <a href="glossaire.html#compatible-avec-les-technologies-dassistance">compatibilité avec les technologies d'assistance</a>.
</p>
</header>
<article id="crit-4-1" data-level="A">
<h3 class="critere">Critère 4.1 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré a-t-il, si nécessaire, une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> ou une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.1">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Perceptible</p>
<ul>
<li id="test-4-1-1">Test 4.1.1 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement audio, vérifie-t-il, si nécessaire, l'une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.1">cas particuliers</a>) ?
<ul>
<li>Il existe une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>).</li>
<li>Il existe une transcription textuelle adjacente clairement identifiable.</li>
</ul>
</li>
<li id="test-4-1-2">Test 4.1.2 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo vérifie-t-il, si nécessaire, l'une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.1">cas particuliers</a>) ?
<ul>
<li>Il existe une <a href="glossaire.html#version-alternative-audio-seulement">version alternative « audio seulement »</a> accessible via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>).</li>
<li>Il existe une <a href="glossaire.html#version-alternative-audio-seulement">version alternative « audio seulement »</a> adjacente clairement identifiable.</li>
<li>Il existe une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un lien adjacent (une url ou une ancre).</li>
<li>Il existe une transcription textuelle adjacente clairement identifiable.</li>
<li>Il existe une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée.</li>
<li>Il existe une version alternative avec une audiodescription synchronisée accessible via un lien adjacent (une url ou une ancre).</li>
</ul>
</li>
<li id="test-4-1-3">Test 4.1.3 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il, si nécessaire, une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.1">cas particuliers</a>) ?
<ul>
<li>Il existe une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>).</li>
<li>Il existe une transcription textuelle adjacente clairement identifiable.</li>
<li>Il existe une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée.</li>
<li>Il existe une version alternative avec une audiodescription synchronisée accessible via un lien adjacent (une url ou une ancre).</li>
</ul>
</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-av-only-alt">1.2.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-audio-desc">1.2.3</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G58.html">G58</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G69.html">G69</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G78.html">G78</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G158.html">G158</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G159.html">G159</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G173.html">G173</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G8.html">G8</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G166.html">G166</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H96.html">H96</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM6.html">SM6</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM7.html">SM7</a></p>
</aside>
</article>
<article id="crit-4-2" data-level="A">
<h3 class="critere">Critère 4.2 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré ayant une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> ou une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée, celles-ci sont-elles pertinentes (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.2">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-2-1">Test 4.2.1 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement audio, ayant une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a>, celle-ci est-elle pertinente (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.2">cas particuliers</a>) ?</li>
<li id="test-4-2-2">Test 4.2.2 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo vérifie-t-il une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.2">cas particuliers</a>) ?
<ul>
<li>La <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> est pertinente.</li>
<li>L'<a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée est pertinente.</li>
<li>L'audiodescription synchronisée de la version alternative est pertinente.</li>
<li>La <a href="glossaire.html#version-alternative-audio-seulement">version alternative audio seulement</a> est pertinente.</li>
</ul>
</li>
<li id="test-4-2-3">Test 4.2.3 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.2">cas particuliers</a>) ?
<ul>
<li>La <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> est pertinente.</li>
<li>L'<a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée est pertinente.</li>
<li>L'audiodescription synchronisée de la version alternative est pertinente.</li>
</ul>
</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-av-only-alt">1.2.1</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-audio-desc">1.2.3</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F30.html">F30</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F67.html">F67</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM6.html">SM6</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM7.html">SM7</a></p>
</aside>
</article>
<article id="crit-4-3" data-level="A">
<h3 class="critere">Critère 4.3 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré a-t-il, si nécessaire, des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.3">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-3-1">Test 4.3.1 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il, si nécessaire, l'une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.3">cas particuliers</a>) ?
<ul>
<li>Le média temporel synchronisé possède des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a>.</li>
<li>Il existe une version alternative possédant des sous-titres synchronisés accessible via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>).</li>
</ul>
</li>
<li id="test-4-3-2">Test 4.3.2 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré possédant des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> diffusés via une balise <code lang="en">track</code>, la balise <code lang="en">track</code> possède-t-elle un attribut <code lang="en">kind="captions"</code></li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-captions">1.2.2</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G58.html">G58</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G93.html">G93</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G87.html">G87</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H95.html">H95</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM11.html">SM11</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM12.html">SM12</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F74.html">F74</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F75.html">F75</a></p>
</aside>
</article>
<article id="crit-4-4" data-level="A">
<h3 class="critere">Critère 4.4 [<span aria-label="simple-A"><span aria-hidden="true">A</span></span>] Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré ayant des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a>, ces sous-titres sont-ils pertinents ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-4-1">Test 4.4.1 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré ayant des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a>, ces sous-titres sont-ils pertinents ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-captions">1.2.2</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G87.html">G87</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G93.html">G93</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F8.html">F8</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F74.html">F74</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F75.html">F75</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM11.html">SM11</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM12.html">SM12</a></p>
</aside>
</article>
<article id="crit-4-5" data-level="AA">
<h3 class="critere">Critère 4.5 [<span aria-label="double-A"><span aria-hidden="true">AA</span></span>] Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> en direct a-t-il, si nécessaire, des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> ou une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.5">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-5-1">Test 4.5.1 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> seulement audio en direct vérifie-t-il, si nécessaire, une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.5">cas particuliers</a>) ?
<ul>
<li>Il existe des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a>.</li>
<li>Il existe une version ayant des sous-titres synchronisés accessible via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>).</li>
<li>Il existe une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un lien adjacent (une url ou une ancre).</li>
<li>Il existe une transcription textuelle adjacente clairement identifiable.</li>
</ul>
</li>
<li id="test-4-5-2">Test 4.5.2 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé en direct vérifie-t-il, si nécessaire, une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.5">cas particuliers</a>) ?
<ul>
<li>Il existe des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a>.</li>
<li>Il existe une version ayant des sous-titres synchronisés accessible via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>).</li>
<li>Il existe une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un lien adjacent (une url ou une ancre).</li>
<li>Il existe une transcription textuelle adjacente clairement identifiable.</li>
</ul>
</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-real-time-captions">1.2.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-live-audio-only">1.2.9</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G9.html">G9</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G150.html">G150</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G151.html">G151</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G157.html">G157</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H95.html">H95</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM11.html">SM11</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM12.html">SM12</a></p>
</aside>
</article>
<article id="crit-4-6" data-level="AA">
<h3 class="critere">Critère 4.6 [<span aria-label="double-A"><span aria-hidden="true">AA</span></span>] Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> en direct ayant des <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> ou une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a>, ceux-ci sont-ils pertinents ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-6-1">Test 4.6.1 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> seulement audio en direct vérifie-t-il une de ces conditions ?
<ul>
<li>Les <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> sont pertinents.</li>
<li>Les sous-titres synchronisés de la version alternative sont pertinents.</li>
<li>La <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> est pertinente.</li>
</ul>
</li>
<li id="test-4-6-2">Test 4.6.2 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé en direct vérifie-t-il une de ces conditions ?
<ul>
<li>Les <a href="glossaire.html#soustitres-synchroniss-objet-multimdia">sous-titres synchronisés</a> sont pertinents.</li>
<li>Les sous-titres synchronisés de la version alternative sont pertinents.</li>
<li>La <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> est pertinente.</li>
</ul>
</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-real-time-captions">1.2.4</a> - <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-live-audio-only">1.2.9</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/F8.html">F8</a></p>
</aside>
</article>
<article id="crit-4-7" data-level="AA">
<h3 class="critere">Critère 4.7 [<span aria-label="double-A"><span aria-hidden="true">AA</span></span>] Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré a-t-il, si nécessaire, une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.7">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-7-1">Test 4.7.1 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo vérifie-t-il, si nécessaire, une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.7">cas particuliers</a>) ?
<ul>
<li>Il existe une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée.</li>
<li>Il existe une version alternative avec une audiodescription synchronisée.</li>
</ul>
</li>
<li id="test-4-7-2">Test 4.7.2 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il, si nécessaire, une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.7">cas particuliers</a>) ?
<ul>
<li>Il existe une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée.</li>
<li>Il existe une version alternative avec une audiodescription synchronisée.</li>
</ul>
</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-audio-desc-only">1.2.5</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G58.html">G58</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G8.html">G8</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G78.html">G78</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G173.html">G173</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H96.html">H96</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM1.html">SM1</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM2.html">SM2</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM6.html">SM6</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM7.html">SM7</a></p>
</aside>
</article>
<article id="crit-4-8" data-level="AA">
<h3 class="critere">Critère 4.8 [<span aria-label="double-A"><span aria-hidden="true">AA</span></span>] Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré ayant une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée, celle-ci est-elle pertinente ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-8-1">Test 4.8.1 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo ayant une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée, celle-ci est-elle pertinente ?</li>
<li id="test-4-8-2">Test 4.8.2 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé ayant une <a href="glossaire.html#audiodescription-synchronise-media-temporel">audiodescription</a> synchronisée, celle-ci est-elle pertinente ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-audio-desc-only">1.2.5</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM1.html">SM1</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM2.html">SM2</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM6.html">SM6</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM7.html">SM7</a></p>
</aside>
</article>
<article id="crit-4-9" data-level="AAA">
<h3 class="critere">Critère 4.9 [<span aria-label="triple-A"><span aria-hidden="true">AAA</span></span>] Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré a-t-il, si nécessaire, une interprétation en langue des signes (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.9">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-9-1">Test 4.9.1 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement audio a-t-il, si nécessaire, une interprétation en langue des signes adaptée à la langue du média (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.9">cas particuliers</a>) ?</li>
<li id="test-4-9-2">Test 4.9.2 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré a-t-il, si nécessaire, une interprétation en langue des signes adaptée à la langue du média (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.9">cas particuliers</a>) ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-sign">1.2.6</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G54.html">G54</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G81.html">G81</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM13.html">SM13</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM14.html">SM14</a></p>
</aside>
</article>
<article id="crit-4-10" data-level="AAA">
<h3 class="critere">Critère 4.10 [<span aria-label="triple-A"><span aria-hidden="true">AAA</span></span>] Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré ayant une interprétation en langue des signes, celle-ci est-elle pertinente ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-10-1">Test 4.10.1 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement audio ayant une interprétation en langue des signes, celle-ci est-elle pertinente ?</li>
<li id="test-4-10-2">Test 4.10.2 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré ayant une interprétation en langue des signes, celle-ci est-elle pertinente ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-sign">1.2.6</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G54.html">G54</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G81.html">G81</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM13.html">SM13</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM14.html">SM14</a></p>
</aside>
</article>
<article id="crit-4-11" data-level="AAA">
<h3 class="critere">Critère 4.11 [<span aria-label="triple-A"><span aria-hidden="true">AAA</span></span>] Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré a-t-il, si nécessaire, une <a href="glossaire.html#audiodescription-tendue">audiodescription étendue</a> synchronisée (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.11">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-11-1">Test 4.11.1 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré vérifie-t-il, si nécessaire, une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.11">cas particuliers</a>) ?
<ul>
<li>Il existe une <a href="glossaire.html#audiodescription-tendue">audiodescription étendue</a> synchronisée.</li>
<li>Il existe une version alternative avec une audiodescription étendue synchronisée.</li>
</ul>
</li>
<li id="test-4-11-2">Test 4.11.2 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo vérifie-t-il, si nécessaire, une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.11">cas particuliers</a>) ?
<ul>
<li>Il existe une <a href="glossaire.html#audiodescription-tendue">audiodescription étendue</a> synchronisée.</li>
<li>Il existe une version alternative avec une audiodescription étendue synchronisée.</li>
</ul>
</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-extended-ad">1.2.7</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G58.html">G58</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G8.html">G8</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/H96.html">H96</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM1.html">SM1</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM2.html">SM2</a></p>
</aside>
</article>
<article id="crit-4-12" data-level="AAA">
<h3 class="critere">Critère 4.12 [<span aria-label="triple-A"><span aria-hidden="true">AAA</span></span>] Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré ayant une <a href="glossaire.html#audiodescription-tendue">audiodescription étendue</a> synchronisée, celle-ci est-elle pertinente ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-12-1">Test 4.12.1 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé pré-enregistré ayant une <a href="glossaire.html#audiodescription-tendue">audiodescription étendue</a> synchronisée, celle-ci est-elle pertinente ?</li>
<li id="test-4-12-2">Test 4.12.2 : Pour chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> pré-enregistré seulement vidéo ayant une <a href="glossaire.html#audiodescription-tendue">audiodescription étendue</a> synchronisée, celle-ci est-elle pertinente ?</li>
</ul>
<aside>
<h4>Correspondances WCAG 2.0</h4>
<p>Critère(s) de succès WCAG 2.0 : <a href="http://www.w3.org/Translations/WCAG20-fr/#media-equiv-extended-ad">1.2.7</a></p>
<p>Technique(s) suffisante(s) et/ou échec(s) WCAG 2.0 : <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/G8.html">G8</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM1.html">SM1</a> - <a hreflang="en" href="http://www.w3.org/TR/WCAG-TECHS/SM2.html">SM2</a></p>
</aside>
</article>
<article id="crit-4-13" data-level="AAA">
<h3 class="critere">Critère 4.13 [<span aria-label="triple-A"><span aria-hidden="true">AAA</span></span>] Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé ou seulement vidéo a-t-il, si nécessaire, une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.13">cas particuliers</a>) ?</h3>
<p class="principe">Principe WCAG : Utilisable</p>
<ul>
<li id="test-4-13-1">Test 4.13.1 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> synchronisé vérifie-t-il si nécessaire une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.13">cas particuliers</a>) ?
<ul>
<li>Il existe une <a href="glossaire.html#transcription-textuelle-media-temporel">transcription textuelle</a> accessible via un <a href="glossaire.html#lien-adjacent">lien adjacent</a> (une <a href="glossaire.html#url">url</a> ou une <a href="glossaire.html#ancre">ancre</a>).</li>
<li>Il existe une transcription textuelle adjacente clairement identifiable.</li>
</ul>
</li>
<li id="test-4-13-2">Test 4.13.2 : Chaque <a href="glossaire.html#mdia-temporel-type-son-vido-et-synchronis">média temporel</a> seulement vidéo vérifie-t-il si nécessaire une de ces conditions (hors <a href="cas-particuliers.html#cp-4-1,4-2,4-3,4-5,4-7,4-9,4-11,4-13" title="Cas particuliers pour le critère 4.13">cas particuliers</a>) ?
<ul>