-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathrgaa4-glossaire.html
1636 lines (1490 loc) · 154 KB
/
rgaa4-glossaire.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
<!--
RGAA 4.0
Source : https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode/criteres/
Fork : https://github.com/Tanaguru/Rgaa_Website
-->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Glossaire - RGAA 4.0 2019 - Tanaguru</title>
<meta name="description" content="Glossaire du RGAA 4.0 2019, mis en page par Tanaguru. Toutes les définitions pour bien comprendre les critères.">
<link rel="canonical" href="http://rgaa.tanaguru.com/rgaa4-glossaire.html">
<link rel="alternate" href="http://rgaa.tanaguru.com/rgaa4-glossaire.html" hreflang="fr">
<!-- <link rel="alternate" href="http://rgaa.tanaguru.com/en/rgaa4-glossary.html" hreflang="en"> -->
<meta name="google-site-verification" content="pzLp1bE8KeV2q7OeoMR_xpdXJ-mjfKyh00jw3ai75w0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.1.min.js"></script>
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq || [];
/* CNIL - cookie duration */
_paq.push([function() {
var self = this;
function getOriginalVisitorCookieTimeout() {
var now = new Date(),
nowTs = Math.round(now.getTime() / 1000),
visitorInfo = self.getVisitorInfo();
var createTs = parseInt(visitorInfo[2]);
var cookieTimeout = 33696000; // 13 mois en secondes
var originalTimeout = createTs + cookieTimeout - nowTs;
return originalTimeout;
}
this.setVisitorCookieTimeout( getOriginalVisitorCookieTimeout() );
}]);
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setDoNotTrack", true]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://matomo.tanaguru.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '3']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>
<body class="glossaire toc-follow">
<ul class="skiplinks-top">
<li><a id="go-to-menu" href="#nav">Aller au menu RGAA 4</a></li>
<li><a href="#main">Aller au contenu</a></li>
</ul>
<a id="top"></a>
<header id="header" role="banner">
<div class="headsite nav clearfix">
<div class="container headsite-container">
<p class="headsite-logo"><a href="/" title="RGAA par Tanaguru - Accueil" class="headsite-logo-link"><img src="/images/tanaguru-logo.svg" alt="Tanaguru" width="40" height="40" class="headsite-logo-img" /> RGAA</a></p>
<nav role="navigation" aria-label="Menu principal" class="main-nav">
<ul class="main-nav-list"><!--
--><li class="main-nav-item"><a href="/index-ancien.html" class="main-nav-link">Anciennes versions</a></li><!--
--><li class="main-nav-item"><a href="/rgaa3-criteres.html" class="main-nav-link">RGAA 3.2017</a></li><!--
--><li class="main-nav-item">RGAA 4.0</li><!--
--><li class="main-nav-item"><a href="/index.html" class="main-nav-link">RGAA 4.1</a></li><!--
--><li class="main-nav-item"><a href="/en/" lang="en" hreflang="en" class="main-nav-link">English version</a></li>
</ul>
</nav>
<div class="btn-nav-rgaa-container">
<button type="button" class="navbar-toggle collapsed btn-nav-rgaa" data-toggle="collapse" data-target="#nav" aria-controls="nav" aria-expanded="false" id="btnnav">Menu RGAA 4</button>
</div>
</div>
</div>
<nav id="nav" class="collapse navbar-collapse" role="navigation" aria-label="Menu des pages du RGAA 4">
<ul><!--
--><li><a href="rgaa4-criteres.html">Critères</a></li><!--
--><li><strong class="on">Glossaire</strong></li><!--
--><li><a href="rgaa4-base.html">Environnement de test</a></li><!--
--><li><a href="rgaa4-references.html">Références</a></li><!--
--></ul>
</nav>
</header>
<main id="main" role="main">
<div class="headrub page">
<h1>Glossaire du RGAA 4.0 2019</h1>
<p class="lead">Le référentiel RGAA (Référentiel Général d'Amélioration de l'Accessibilité) fait référence à de nombreux termes et définitions. Ces définitions sont intégrées dans un glossaire spécialement conçu pour toutes les référencer.</p>
<div id="navtoc">
<h2 id="toc">Sommaire</h2>
<nav class="nav" role="navigation" aria-labelledby="toc">
<ul>
<li><a href="#lettre-a">A</a></li>
<li><a href="#lettre-b">B</a></li>
<li><a href="#lettre-c">C</a></li>
<li><a href="#lettre-d">D</a></li>
<li><a href="#lettre-e">E</a></li>
<li><a href="#lettre-f">F</a></li>
<li><a href="#lettre-g">G</a></li>
<li><a href="#lettre-i">I</a></li>
<li><a href="#lettre-l">L</a></li>
<li><a href="#lettre-m">M</a></li>
<li><a href="#lettre-o">O</a></li>
<li><a href="#lettre-p">P</a></li>
<li><a href="#lettre-r">R</a></li>
<li><a href="#lettre-s">S</a></li>
<li><a href="#lettre-t">T</a></li>
<li><a href="#lettre-u">U</a></li>
<li><a href="#lettre-v">V</a></li>
<li><a href="#lettre-z">Z</a></li>
</ul>
</nav>
</div>
</div>
<div class="page">
<article id="lettre-a">
<h2>A</h2>
<ul class="skiplink">
<li class="goafter"><a href="#lettre-b">Lettre B</a></li>
</ul>
<!-- Plus d'actualité dans RGAA 4
<section class="section-glossary">
<h3 id="glossaire-1"><a href="#glossaire-1">Accéder à chaque page de la collection de pages</a></h3>
<p>Dans le cas où la collection de pages comporte un grand nombre de pages, il est habituel de présenter ces liens d’accès aux pages par groupes de liens, par séquences de 10 liens, par exemple. Cette pratique valide le test.</p>
</section>
-->
<section class="section-glossary">
<h3 id="glossaire-2"><a href="#glossaire-2">Accessible et activable par le clavier et tout dispositif de pointage</a></h3>
<ul>
<li>Un composant d’interface (lien, bouton, …) est accessible au clavier et par tout dispositif de pointage lorsque l’utilisateur peut prendre, indifféremment, le focus par un pointeur ou la touche tabulation.</li>
<li>Un composant d’interface (lien, bouton, …) est activable au clavier et par tout dispositif de pointage lorsque l’utilisateur peut enclencher, indifféremment, l’action prévue par le composant d’interface par une pression du pointeur ou la touche entrée du clavier.</li>
<li><strong>Attention :</strong> pour certains composants d’interface comme les <span lang="en">sliders</span> (bouton coulissant ou rotatif…), il n’est pas possible de contrôler le composant par la seule touche d’entrée. Dans ces situations, d’autres touches (comme les touches de direction) peuvent être utilisées. En particulier pour les éléments ayant un rôle WAI-ARIA correspondant à un <a href="#glossaire-83">motif de conception</a> il est recommandé de considérer le document <a href="http://www.w3.org/TR/wai-aria-practices/" hreflang="en" rel="external" class="external"><span lang="en">WAI-ARIA 1.1 Authoring Practices</span> lors de leur implémentation</a>.</li>
</ul>
<p>Dans le référentiel, l’expression « contrôlable par le clavier et tout dispositif de pointage » se rapporte également à la présente définition.</p>
<p><strong>Note importante :</strong> le recours à certaines technologies peut rendre la gestion du focus trop complexe ou trop instable pour ne reposer que sur la tabulation, les touches de direction et la touche entrée. Dans ce cas, la mise à disposition de raccourcis clavier peut être la seule solution pour rendre le composant utilisable.</p>
<p>Le critère ne peut être considéré comme conforme qu’à la condition que les raccourcis clavier utilisés soient correctement documentés, qu’ils soient fonctionnels et qu’ils respectent le <a href="/rgaa4-criteres.html#crit-12-10">critère 12.10</a>.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-3"><a href="#glossaire-3">Accolés (étiquette et champ accolés)</a></h3>
<p>Il faut que l’<a href="#glossaire-40">étiquette</a> et son champ soient visuellement proches de manière à ce que la relation entre les deux ne puisse pas prêter à confusion.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-4"><a href="#glossaire-4">Alerte</a></h3>
<p>Message d’alerte interrompant la navigation ou l’utilisation de la page, notamment en demandant de cliquer sur un bouton ou un lien pour continuer la navigation ou l’utilisation du contenu. Par exemple, une boîte de dialogue générée par JavaScript via la fonction <code>alert</code>. Par extension, une fenêtre modale (contenu présenté sous forme de « fenêtre » insérée ou affichée dans le DOM) qui nécessite d’être fermée pour continuer la navigation ou l’utilisation du contenu est considérée comme une alerte.</p>
<p><strong>Note :</strong> la désactivation des alertes concernées peut être proposée avant le déclenchement de l’alerte, par exemple, via un paramètre utilisateur ou lors de l’affichage de la première alerte, par exemple via une case à cocher « ne plus afficher cette alerte ».</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-5"><a href="#glossaire-5">Alternative (à script)</a></h3>
<p>Texte ou procédé associé au script via une technique appropriée et permettant de mettre à disposition une fonction ou un contenu similaire à celui proposé par script.</p>
<p><strong>Note :</strong> lorsqu’une alternative à un procédé ou une fonctionnalité JavaScript est proposée, le moyen d’y accéder doit être fourni par le site lui-même. Il peut s’agir d’un lien ou d’un bouton permettant d’accéder à une page alternative fonctionnant sans JavaScript ou permettant de remplacer le(s) composant(s) par un composant alternatif fonctionnant sans JavaScript par exemple.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-6"><a href="#glossaire-6">Alternative à une image SVG</a></h3>
<p>Sont considérés comme des alternatives possibles à une image SVG :</p>
<ul>
<li>Un mécanisme de remplacement.</li>
<li>Un lien ou bouton adjacent qui permet d’accéder à une alternative dont le contenu est pertinent, et identique à l’attribut WAI-ARIA <code>aria-label</code> et à l’attribut <code>title</code> de la balise <code><svg></code>, s’il est présent.</li>
</ul>
</section>
<section class="section-glossary">
<h3 id="glossaire-7"><a href="#glossaire-7">Alternative courte et concise</a></h3>
<p>Les conditions de restitution d’une alternative textuelle via des technologies d’assistance (par exemple une loupe d’écran) nécessitent qu’elle soit la plus courte possible. Une longueur maximale de 80 caractères est fortement recommandée ; elle limitera le nombre de manipulations nécessaires pour lire l’alternative par les utilisateurs de plages braille ou de loupes d’écran notamment.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-8"><a href="#glossaire-8">Alternative textuelle (image)</a></h3>
<p>« Nom accessible » restitué par les technologies d’assistance pour les éléments graphiques de type :</p>
<ul>
<li>Image (balise <code><img></code> ou balise possédant un attribut WAI-ARIA <code>role="img"</code>) ;</li>
<li>Zone d’image réactive (balise <code><area></code>) ;</li>
<li>Bouton de type image (balise <code><input></code> avec l’attribut <code>type="image"</code>) ;</li>
<li>Image objet (balise <code><object type="image/…"></code>) ;</li>
<li>Image vectorielle (balise <code><svg></code>) ;</li>
<li>Image bitmap (balise <code><canvas></code>) ;</li>
<li>Image embarquée (balise <code><embed></code>).</li>
</ul>
<p>Dans le cas d’un élément graphique, le « nom accessible » est obtenu selon l’ordre suivant :</p>
<ul>
<li><a href="#glossaire-87">Passage de texte</a> associé via l’attribut WAI-ARIA <code>aria-labelledby</code> pour les balises :
<ul>
<li><code><img></code> ;</li>
<li><code><input type="image"></code> ;</li>
<li><code><svg></code> ;</li>
<li><code><object type="image/…"></code> ;</li>
<li><code><embed type="image/…"></code> ;</li>
<li><code><canvas></code> ;</li>
<li>balises possédant un attribut WAI-ARIA <code>role="img"</code>.</li>
</ul>
</li>
<li>Sinon, contenu de l’attribut WAI-ARIA <code>aria-label</code> pour les balises :
<ul>
<li><code><img></code> ;</li>
<li><code><area></code> ;</li>
<li><code><input type="image"></code> ;</li>
<li><code><svg></code> ;</li>
<li><code><object type="image/…"></code> ;</li>
<li><code><embed type="image/…"></code> ;</li>
<li><code><canvas></code> ;</li>
<li>balises possédant un attribut WAI-ARIA <code>role="img"</code>.</li>
</ul>
</li>
<li>Sinon, contenu de l’attribut <code>alt</code> pour les balises :
<ul>
<li><code><img></code> ;</li>
<li><code><area></code> ;</li>
<li><code><input type="image"></code>.</li>
</ul>
</li>
<li>Sinon, contenu de l’attribut <code>title</code> pour les balises :
<ul>
<li><code><img></code> ;</li>
<li><code><input type="image"></code> ;</li>
<li><code><object type="image/…"></code> ;</li>
<li><code><embed type="image/…"></code>.</li>
</ul>
</li>
</ul>
<p>Cet ordre doit être utilisé pour déterminer ce qui constitue l’alternative textuelle.</p>
<p>Néanmoins, en cas de support partiel de l’algorithme de calcul du « nom accessible », c’est la valeur réellement restituée par les technologies d’assistance utilisées dans l’environnement de test (ou « base de référence ») qu’il faudra considérer comme alternative textuelle.</p>
<p>Par exemple :</p>
<ul>
<li>En cas de présence conjointe d’un attribut WAI-ARIA <code>aria-label</code> et d’un attribut WAI-ARIA <code>aria-labelledby</code> sur une balise <code><img></code>, c’est le <a href="#glossaire-87">passage de texte</a> référencé par l’attribut WAI-ARIA <code>aria-labelledby</code> qui doit être considérée comme alternative textuelle si le contenu du <a href="#glossaire-87">passage de texte</a> est réellement restitué par les technologies d’assistance utilisées dans l’environnement de test.</li>
<li>En cas de présence conjointe d’un attribut WAI-ARIA <code>aria-label</code> et d’un attribut <code>alt</code> sur une balise <code><img></code>, c’est le contenu de l’attribut WAI-ARIA <code>aria-label</code> qui doit être considéré comme alternative textuelle si le contenu de l’attribut WAI-ARIA <code>aria-label</code> est réellement restitué par les technologies d’assistance utilisées dans l’environnement de test.</li>
</ul>
<p>Référence : <a href="https://www.w3.org/TR/accname-1.1/" lang="en" hreflang="en" rel="external" class="external">Accessible name and description calculation</a>.</p>
<p>RGAA considère trois types d’alternatives textuelles liées à la nature de l’image :</p>
<ul>
<li>Pour une image porteuse d’information, l’alternative textuelle apporte l’information nécessaire à la compréhension du contenu qu’elle véhicule ;</li>
<li>Pour une image de décoration, aucune alternative textuelle ne doit être restituée ;</li>
<li>Pour une image <a href="#glossaire-15">CAPTCHA</a> ou une <a href="#glossaire-51">image-test</a>, l’alternative textuelle décrit seulement la nature et la fonction de l’image. En effet, l’alternative textuelle ne peut apporter l’information véhiculée par l’image sans rendre la fonction associée inopérante.</li>
</ul>
<p><strong>Note 1 :</strong> pour une image <a href="#glossaire-15">CAPTCHA</a> l’alternative peut être, par exemple : « Code de sécurité anti-spam » ou « code pour vérifier que vous êtes un humain » ou toute autre alternative permettant à l’utilisateur de comprendre la nature et la fonction de l’image.</p>
<p><strong>Note 2 :</strong> pour un groupe d’images, par exemple un système de vote constitué de plusieurs images d’étoile, il est fortement conseillé d’utiliser soit la première image du groupe pour donner une alternative cohérente au groupe d’image (voir la <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G196" rel="external" class="external" hreflang="en">technique WCAG2.1 G196</a>), soit une balise conteneur pourvue d’un rôle WAI-ARIA <code>img</code> et d’une alternative textuelle. Dans le premier cas, les autres images du groupe sont considérées comme des images de décoration. Dans le second cas, toutes les images du groupe sont considérées comme des images de décoration.</p>
<p><strong>Note 3 :</strong> pour les image-lien, l’alternative doit permettre de comprendre la fonction et la destination du lien ; ce cas est traité dans la thématique liens.</p>
<p><strong>Note 4 :</strong> pour les images vectorielles (balise <code><svg></code>) l’alternative textuelle pourrait se trouver aussi présente dans une balise <code><text></code> que cette balise soit ou non visible, même si ce n’est pas le rôle dévolu à cet élément en SVG.</p>
<p><strong>Note 5 :</strong> l’utilisation de l’attribut <code>alt</code> étant la seule technique totalement supportée par les aides techniques il est recommandé de privilégier cette solution lors de la mise en œuvre d’une alternative à une balise <code><img></code>, <code><area></code> et <code><input type="image"></code>.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-9"><a href="#glossaire-9">Ambigu pour tout le monde</a></h3>
<p>L’intention ne peut être déterminée à partir du lien et de toute l’information de la page web présentée à l’utilisateur en même temps que ce lien. (c’est-à-dire qu’un lecteur sans limitation fonctionnelle ne connaîtrait pas la fonction d’un lien avant de l’activer). Exemple : le mot « goyave » dans la phrase suivante utilisé comme lien : « L’une des exportations importantes est la goyave ». Ce lien pourrait conduire à une définition de la goyave, à un graphe présentant une liste des quantités de goyaves exportées ou à une photo de personnes récoltant la goyave. Jusqu’à ce que le lien soit activé, tout utilisateur est dans l’incertitude et une personne handicapée n’est donc pas désavantagée.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-10"><a href="#glossaire-10">Ancre</a></h3>
<p>En HTML, une ancre (appelée aussi signet) est constituée d’une balise <code><a></code> avec l’attribut <code>id</code> et dépourvue de <code>href</code>, <code><a id="contenu"></a></code> par exemple. Une ancre sert de cible à un lien de la forme <code><a href="#id">Intitulé</a></code> : <code><a href="#contenu">Contenu</a></code> par exemple.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-11"><a href="#glossaire-11">Audiodescription synchronisée (média temporel)</a></h3>
<p>Narration ajoutée (via un fichier son) à une piste sonore pour décrire les détails visuels importants qui ne peuvent être compris à partir de la piste sonore principale seulement. L’audiodescription doit être synchronisée avec le média temporel par un dispositif applicatif lié au lecteur lui-même ou fourni par le développement par exemple avec JavaScript.</p>
<p><strong>Note 1 :</strong> l’audiodescription d’une vidéo fournit de l’information à propos des actions, des personnages, des changements de scènes, du texte apparaissant à l’écran et d’autres contenus visuels.</p>
<p><strong>Note 2 :</strong> dans une audiodescription standard, la narration est ajoutée durant les pauses qui existent dans le dialogue. (Voir aussi audiodescription étendue.)</p>
<p><strong>Note 3 :</strong> lorsque toute l’information de la vidéo est déjà donnée dans la piste audio, aucune audiodescription supplémentaire n’est requise.</p>
</section>
</article>
<article id="lettre-b">
<h2>B</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#lettre-a">Lettre A</a></li>
<li class="goafter"><a href="#lettre-c">Lettre C</a></li>
</ul>
<section class="section-glossary">
<h3 id="glossaire-12"><a href="#glossaire-12">Menu et barre de navigation</a></h3>
<p>Liste de liens permettant une navigation spécifique dans le site, dans une rubrique ou dans une collection de pages.</p>
<p>Les principales barres de navigation (<a href="/rgaa4-criteres.html#crit-12-2">critère 12.2</a>) sont :</p>
<ul>
<li>Un menu de navigation ;</li>
<li>Un fil d’Ariane ;</li>
<li>Une liste de navigation d’une liste de résultats ;</li>
<li>Des liens d’évitement.</li>
</ul>
<p>Il existe différents types de menu de navigation (<a href="/rgaa4-criteres.html#crit-12-1">critère 12.1</a> et <a href="/rgaa4-criteres.html#crit-12-2">critère 12.2</a>) :</p>
<ul>
<li>Menu de navigation principal ;</li>
<li>Menu de sous-rubrique ;</li>
<li>Menu contextuel ;</li>
<li>Table des matières concernant un ensemble de pages.</li>
</ul>
<p><strong>Note :</strong> Les liens de pied de page renvoyant vers les mentions légales, plan du site et autres informations concernant le site ne sont pas considérés comme un menu de navigation principal.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-13"><a href="#glossaire-13">Bouton (formulaire)</a></h3>
<p>Élément d’un formulaire qui permet d’effectuer une action prédéfinie. Par exemple, le bouton de soumission d’un formulaire permet l’envoi au serveur des informations collectées pour leur traitement. L’intitulé d’un bouton doit décrire l’action qui résulte de son activation (par exemple : « Lancer votre recherche », « Envoyer votre message »).</p>
<p>En HTML, il y a trois types de boutons de formulaire :</p>
<ul>
<li>Balise <code><input></code> de type <code>submit</code>, <code>reset</code> ou <code>button</code> ;</li>
<li>Balise <code><input></code> de type <code>image</code> ;</li>
<li>Balise <code><button></code>.</li>
</ul>
<p>Il est également possible de restituer un bouton à l’aide du rôle WAI-ARIA <code>button</code>.</p>
<p>L’intitulé du bouton peut être de six types :</p>
<ul>
<li>Le contenu du <a href="#glossaire-87">passage de texte</a> associé au bouton via l’attribut WAI-ARIA <code>aria-labelledby</code> lorsqu’il est présent ;</li>
<li>Le contenu de l’attribut <code>aria-label</code> lorsqu’il est présent ;</li>
<li>Le contenu de l’attribut <code>alt</code> d’un bouton de type <code>image</code> ;</li>
<li>Le contenu de l’attribut <code>value</code> des boutons de type <code>submit</code>, <code>reset</code> ou <code>button</code> ;</li>
<li>Le contenu de la balise <code><button></code> ;</li>
<li>Le contenu de l’attribut <code>title</code> lorsqu’il est présent.</li>
</ul>
<p><strong>Note importante :</strong> lorsque plusieurs de ces techniques sont présentes sur un même bouton, le calcul du « nom accessible », c’est-à-dire ce qui sera restitué, obéit à un ordre strict :</p>
<ul>
<li><code>aria-labelledby</code> ;</li>
<li>Sinon <code>aria-label</code> ;</li>
<li>Sinon <code>alt</code> pour le cas des input <code>image</code> ;</li>
<li>Sinon <code>value</code> pour le cas des input <code>submit</code>, <code>reset</code> ou <code>button</code> ;</li>
<li>Sinon contenu de la balise <code><button></code> ;</li>
<li>Sinon <code>title</code>.</li>
</ul>
<p>Cet ordre doit être utilisé pour l’évaluation de la pertinence du « nom accessible » du bouton. Par exemple, même dans le cas de la présence d’un <code>title</code> et d’un <a href="#glossaire-87">passage de texte</a> référencé par <code>aria-labelledby</code> sur le même bouton, c’est le <a href="#glossaire-87">passage de texte</a> référencé par <code>aria-labelledby</code> qui doit être évalué.</p>
<p>Référence : <a href="http://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-calculation" lang="en" hreflang="en" rel="external" class="external">Accessible name and description calculation</a>.</p>
<p>Par ailleurs, un « nom accessible » sera considéré comme non-pertinent s’il ne reprend pas le texte visible du bouton. Par exemple : <code><button aria-label="confirmer la saisie">valider la saisie</button></code> sera considéré comme non conforme au <a href="/rgaa4-criteres.html#crit-11-9">critère 11.9</a>.</p>
</section>
</article>
<article id="lettre-c">
<h2>C</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#lettre-b">Lettre B</a></li>
<li class="goafter"><a href="#lettre-d">Lettre D</a></li>
</ul>
<section class="section-glossary">
<h3 id="glossaire-14"><a href="#glossaire-14">Cadre</a></h3>
<p>Cadre : élément HTML (balise <code><frame></code>) permettant d’afficher un contenu dans la page web dans laquelle il est implémenté.</p>
<p>Cadre en ligne : élément HTML (balise <code><iframe></code>) permettant d’afficher un contenu dans la page web dans laquelle il est implémenté.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-15"><a href="#glossaire-15">CAPTCHA</a></h3>
<p>Un CAPTCHA est un test utilisé pour distinguer un utilisateur humain d’un ordinateur. Le test utilise souvent des images contenant du texte déformé, mélangé avec d’autres formes ou utilisant des jeux de couleur altérées, que l’utilisateur est invité à retaper. D’autres formes de CAPTCHA peuvent être basées sur des questions logiques ou des extraits sonores.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-16"><a href="#glossaire-16">Champs de même nature</a></h3>
<p>Dans un formulaire, ensemble des champs pouvant être regroupés par la nature des informations attendues. Le regroupement vise à identifier les champs devant être traités comme un ensemble.</p>
<p>Quelques exemples :</p>
<ul>
<li>Trois champs successifs pour saisir une date (jour/mois/année) ;</li>
<li>Champs successifs pour un numéro de téléphone ;</li>
<li>Un bloc destiné à saisir l’identité et l’adresse de l’utilisateur, lorsque le formulaire contient plusieurs blocs de contact ;</li>
<li>Un ensemble de boutons radio ou de cases à cocher qui se rapportent à une question.</li>
</ul>
<p>Ces champs doivent être regroupés lorsque les intitulés de label ne sont pas suffisants pour informer l’utilisateur que les champs font partie d’un regroupement.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-17"><a href="#glossaire-17">Champ de saisie de formulaire</a></h3>
<p>Objet d’un formulaire permettant à l’utilisateur :</p>
<ul>
<li>De saisir des données textuelles ou préformatées :
<ul>
<li><code><input type="text"></code> ;</li>
<li><code><input type="password"></code> ;</li>
<li><code><input type="search"></code> ;</li>
<li><code><input type="email"></code> ;</li>
<li><code><input type="number"></code> ;</li>
<li><code><input type="tel"></code> ;</li>
<li><code><input type="url"></code> ;</li>
<li><code><textarea></code>.</li>
</ul>
</li>
<li>De sélectionner des valeurs prédéfinies :
<ul>
<li><code><input type="checkbox"></code> ;</li>
<li><code><input type="radio"></code> ;</li>
<li><code><input type="date"></code> ;</li>
<li><code><input type="range"></code> ;</li>
<li><code><input type="color"></code> ;</li>
<li><code><input type="time"></code> ;</li>
<li><code><input type="month"></code> ;</li>
<li><code><input type="week"></code> ;</li>
<li><code><input type="datetime-local"></code> ;</li>
<li><code><select></code> ;</li>
<li><code><datalist></code> ;</li>
<li><code><optgroup></code> ;</li>
<li><code><option></code>.</li>
</ul>
</li>
<li>De télécharger des fichiers :
<ul>
<li><code><input type="file"></code>.</li>
</ul>
</li>
<li>Ou d’afficher des résultats :
<ul>
<li><code><output></code> ;</li>
<li><code><progress></code> ;</li>
<li><code><meter></code>.</li>
</ul>
</li>
<li>Les balises possédant un rôle WAI-ARIA permettant de restituer un champ de formulaire sont également couvertes par cette définition :
<ul>
<li><code>progressbar</code> ;</li>
<li><code>slider</code> ;</li>
<li><code>spinbutton</code> ;</li>
<li><code>textbox</code> ;</li>
<li><code>listbox</code> ;</li>
<li><code>searchbox</code> ;</li>
<li><code>combobox</code> ;</li>
<li><code>option</code> ;</li>
<li><code>checkbox</code> ;</li>
<li><code>radio</code> ;</li>
<li><code>switch</code>.</li>
</ul>
</li>
<li>Les objets de formulaires et rôle WAI-ARIA suivants ne sont pas considérés comme des champs de formulaires :
<ul>
<li><code><input type="submit"></code> ;</li>
<li><code><input type="reset"></code> ;</li>
<li><code><input type="hidden"></code> ;</li>
<li><code><input type="image"></code> ;</li>
<li><code><input type="button"></code> ;</li>
<li><code><button></code> ;</li>
<li>attribut WAI-ARIA <code>role="button"</code>.</li>
</ul>
</li>
</ul>
</section>
<section class="section-glossary">
<h3 id="glossaire-18"><a href="#glossaire-18">Changement brusque de luminosité ou effet de flash</a></h3>
<p>Alternance de luminosité relative qui peut causer des crises chez certaines personnes si leur taille est suffisamment importante dans une gamme de fréquences spécifiques.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-19"><a href="#glossaire-19">Changement de contexte</a></h3>
<p>Changements majeurs dans le contenu d’une page web qui, s’ils sont faits sans que l’utilisateur n’en soit conscient, peuvent désorienter l’utilisateur qui ne peut voir l’ensemble de la page en même temps. Les changements de contexte comprennent les changements :</p>
<ul>
<li>D’agent utilisateur ;</li>
<li>D’espace de restitution ;</li>
<li>De focus ;</li>
<li>De contenu qui modifie la signification de la page web.</li>
</ul>
<p><strong>Note :</strong> Un changement de contenu n’est pas toujours un changement de contexte. Un changement dans le contenu comme le déploiement d’une arborescence, un menu dynamique ou un déplacement de tabulation ne change pas nécessairement le contexte à moins qu’il ne change aussi l’un des éléments énumérés ci-dessus (le focus, par exemple).</p>
<p>Par exemple, l’ouverture d’une nouvelle fenêtre, le déplacement du focus sur un composant différent, le déplacement vers une nouvelle page (y compris tout ce qui, pour l’utilisateur, aurait l’air d’un déplacement vers une autre page) ou la réorganisation significative du contenu d’une page sont autant d’illustrations d’un changement de contexte.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-20"><a href="#glossaire-20">Changement de langue</a></h3>
<p>L’indication des changements de langue est nécessaire pour indiquer aux technologies d’assistance de modifier la restitution vocale d’un élément. Les changements de langue concernent tous les contenus, y compris les valeurs de certains attributs comme <code>title</code>.</p>
<p><strong>Note :</strong> il n’est pas possible d’indiquer des changements de langue dans une valeur d’attribut elle-même, dans ce cas le changement de langue est indiqué sur l’élément qui contient l’attribut. Par exemple un lien affecté d’un <code>title</code> en anglais devra comporter un attribut <code>lang="en"</code>. Lorsque l’attribut contient plusieurs passages de texte dans des langues différentes, le critère est non applicable.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-21"><a href="#glossaire-21">Code de langue</a></h3>
<p>Code de 2 caractères (ISO 639-1) ou 3 caractères (ISO 639-2 et suivants) permettant d’indiquer la langue d’un document ou d’un passage de texte. L’indication du code de langue est constituée de deux parties séparées par un tiret sur le modèle <code>lang="[code]-[option]"</code>.</p>
<ul>
<li>[code] représente un code de langue valide sur 2 ou 3 caractères;</li>
<li>[option] est une indication laissée à l’appréciation de l’auteur.</li>
</ul>
<p>Lorsqu’un code de pays est utilisé comme option, il peut servir à indiquer une régionalisation de la langue, l’indication « en-us » indique la langue américaine, par exemple. L’indication du code de langue ne concerne que la partie [code] avant le tiret.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-22"><a href="#glossaire-22">Compatible avec les technologies d'assistance</a></h3>
<p>Un contenu ou une fonctionnalité doit être compatible avec les technologies d’assistance des utilisateurs ainsi qu’avec les fonctions d’accessibilité des navigateurs et des autres agents utilisateurs via une API d’accessibilité.</p>
<p>Cela concerne, à la fois, la technologie, ses fonctionnalités et ses usages :</p>
<ul>
<li>La façon dont la technologie Web est utilisée doit être compatible avec les technologies d’assistance des utilisateurs. Cela signifie que la façon dont la technologie est utilisée a été testée dans une perspective d’interopérabilité avec des utilisateurs des technologies d’assistance dans la ou les langues du contenu ;</li>
<li>La technologie fonctionne de façon native dans des agents utilisateurs largement distribués qui sont, eux-mêmes, compatibles avec l’accessibilité (comme HTML et CSS) ou avec un module d’extension largement distribué qui est, lui-même, compatible avec l’accessibilité.</li>
</ul>
<p>La vérification de la compatibilité avec les technologies d’assistance nécessite de réaliser un certain nombre de tests spécifiques à la technologie utilisée, par exemple :</p>
<ul>
<li>Vérifier le nom, le rôle, le paramétrage et les changements d’états des composants d’interface ;</li>
<li>Vérifier que la restitution d’un composant d’interface est correcte pour la ou les technologies d’assistance utilisées.</li>
</ul>
</section>
<section class="section-glossary">
<h3 id="glossaire-23"><a href="#glossaire-23">Composant d'interface</a></h3>
<p>Un composant d’interface est un élément avec lequel l’utilisateur peut interagir, par exemple un bouton, un lien, une zone de saisie. Certains composants peuvent être plus complexes comme un menu, une fenêtre de dialogue, un système d’onglets. Enfin un composant d’interface peut être basé sur des éléments natifs de HTML ou développés de toutes pièces avec JavaScript et des attributs WAI-ARIA. En particulier pour les éléments ayant des attributs WAI-ARIA correspondant à un <a href="#glossaire-83">motif de conception</a> il est recommandé de considérer le document <a href="http://www.w3.org/TR/wai-aria-practices/" lang="en" hreflang="en" rel="external" class="external">WAI-ARIA 1.1 Authoring Practices</a> lors de leur implémentation.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-24"><a href="#glossaire-24">Compréhensible (ordre de lecture)</a></h3>
<p>Un contenu compréhensible est lisible (l’ordre des éléments est logique) et cohérent (l’enchaînement de la lecture est cohérent).</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-25"><a href="#glossaire-25">Contenu alternatif</a></h3>
<p>Contenu venant se substituer à un autre apportant la même information mais pouvant être présenté de façon différente. Ce contenu peut être de forme textuelle mais également être lui-même structuré à l’aide de balises. Un contenu alternatif devra respecter l’ensemble des critères du RGAA qui lui sont applicables pour être considéré comme une alternative accessible à l’élément qu’il remplace. Exemple : un tableau de données peut être le contenu alternatif d’une image bitmap (balise <code><canvas></code>) affichant un graphique statistique.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-26"><a href="#glossaire-26">Contenu caché</a></h3>
<p>Les technologies d’assistance (notamment les lecteurs d’écran) ne restituent pas le contenu masqué via les propriétés :</p>
<ul>
<li><code>display</code> avec la valeur <code>none</code> (<code>display: none</code>) ;</li>
<li><code>visibility</code> avec la valeur <code>hidden</code> (<code>visibility: hidden</code>) ;</li>
<li><code>font-size</code> avec la valeur 0 (<code>font-size:0</code>) ;</li>
<li>Attribut HTML5 <code>hidden</code> ;</li>
<li>Attribut WAI-ARIA <code>aria-hidden="true"</code>.</li>
</ul>
<p>Tous les contenus utilisant une ou plusieurs de ces propriétés et attributs sont applicables pour le <a href="/rgaa4-criteres.html#crit-10-8">critère 10.8</a>.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-27"><a href="#glossaire-27">Contenu visible</a></h3>
<p>Pour le <a href="/rgaa4-criteres.html#test-10-2-1">test 10.2.1</a> : « Contenu présent » signifie que le contenu visible reste présent lorsque CSS est désactivé. Par exemple, une image porteuse d’information en propriété de fond CSS invalide ce test car l’information n’est plus « présente » lorsque CSS est désactivé. En revanche, une image porteuse d’information en propriété de fond CSS mais accompagnée d’un texte caché valide ce test car l’information est bien « présente » lorsque CSS est désactivé.</p>
<p><strong>Note :</strong> la pratique qui consiste à gérer des images en propriété de fond d’éléments via CSS est formellement déconseillée, même si elle est accompagnée d’un texte caché.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-28"><a href="#glossaire-28">Contexte du lien</a></h3>
<p>Le contexte du lien représente les informations supplémentaires (on parle d’informations de contexte) qui peuvent être mises en relation par un programme informatique avec l’intitulé du lien. Les informations de contexte qui permettent de compléter l’intitulé du lien sont les suivantes :</p>
<ul>
<li>Le contenu de la phrase dans laquelle le lien texte est présent ;</li>
<li>Le contenu du paragraphe (balise <code><p></code>) dans lequel le lien texte est présent ;</li>
<li>Le contenu de l’item de liste (balise <code><li></code>) ou le contenu d’un item de liste parent (balise <code><li></code>) dans lequel le lien texte est présent ;</li>
<li>Le contenu du titre (balise <code><hx></code>) précédent le lien texte ;</li>
<li>Le contenu de la ou les cellule(s) d’en-tête de tableau (balise(s) <code><th></code>) associée(s) à la cellule de donnée (balise <code><td></code>) dans laquelle le lien texte est présent ;</li>
<li>Le contenu de la cellule de donnée (balise <code><td></code>) dans laquelle le lien texte est présent.</li>
</ul>
<p><strong>Note 1 :</strong> l’un des 6 contextes de lien combiné à l’intitulé du lien doit permettre de comprendre la fonction et la destination du lien.</p>
<p><strong>Note 2 :</strong> RGAA considère que des liens particuliers comme des liens de type <code>mailto</code> (qui génère un lien sous la forme d’une adresse email cliquable) sont suffisamment explicites et ne requièrent pas de signaler que l’action consiste à envoyer un email. L’attention des auteurs est appelée sur le fait que cette règle générale peut être adaptée au contexte, par exemple si la page contient plusieurs adresses email cliquables affectées de comportements différents (envoyer un email via le client de messagerie pour l’une, accéder à un formulaire pour l’autre) il peut être nécessaire de donner des informations complémentaires sur l’action du lien afin de différencier leurs comportements.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-29"><a href="#glossaire-29">Contraste</a></h3>
<p>Opposition marquée entre la luminosité d’une couleur de premier plan et d’une couleur d’arrière-plan. Le rapport de contraste est basé sur la différence de luminosité relative entre l’arrière-plan et le premier plan selon la règle : (L1 + 0,05) / (L2 + 0,05) où L1 est la luminosité relative la plus claire et L2 la luminosité relative la plus sombre. La luminosité est calculée selon la formule suivante : L = 0,2126 * R + 0,7152 * G + 0,0722 * B. Où R, G et B sont définis par :</p>
<ul>
<li>Si R<sub>sRGB</sub> <= 0,03928 alors R = R<sub>sRGB</sub>/12,92 sinon R = ((R<sub>sRGB</sub>+0,055)/1,055) ^ 2,4 ;</li>
<li>Si G<sub>sRGB</sub> <= 0,03928 alors G = G<sub>sRGB</sub>/12,92 sinon G = ((G<sub>sRGB</sub>+0,055)/1,055) ^ 2,4 ;</li>
<li>Si B<sub>sRGB</sub> <= 0,03928 alors B = B<sub>sRGB</sub>/12.92 sinon B = ((B<sub>sRGB</sub>+0,055)/1,055) ^ 2,4 ;</li>
</ul>
<p>et R<sub>sRGB</sub>, G<sub>sRGB</sub> et B<sub>sRGB</sub> sont définis par :</p>
<ul>
<li>R<sub>sRGB</sub> = R8bit/255 ;</li>
<li>G<sub>sRGB</sub> = G8bit/255 ;</li>
<li>B<sub>sRGB</sub> = B8bit/255.</li>
</ul>
<p>Le caractère « ^ » est l’opérateur exponentiel.</p>
<p><strong>Note :</strong> la mesure de contraste concerne le texte, le texte en image, le texte et le texte en image dans les animations, le texte de sous-titrage et le texte incrusté dans les vidéos. Pour le texte et le texte en image dans les animations, le texte de sous-titrage et le texte incrusté dans les vidéos, la taille de la police doit être mesurée par rapport à la taille d’affichage par défaut (telle qu’affichée). Les textes présents dans les éléments d’une image ou d’une vidéo (par exemple un écriteau, une affiche etc.) ne sont pas concernés.</p>
<p>Source : <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G18#procedure" hreflang="en" rel="external" class="external">Procédure de calcul de contraste des WCAG (en anglais)</a>.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-30"><a href="#glossaire-30">Contrôle (contenu en mouvement ou clignotant)</a></h3>
<p>Possibilité pour l’utilisateur de contrôler l’affichage ou la lecture d’un contenu en mouvement ou clignotant par le clavier et la souris, au moins.</p>
<p>Tous les contenus en mouvement, à l’exception des médias temporels pris en charge par la thématique multimédia, sont concernés : les images animées (par exemple un gif animé), les contenus en mouvement proposés via une balise <code><object></code>, du code JavaScript ou des effets CSS par exemple.</p>
<p><strong>Note 1 :</strong> lorsque c’est approprié, la méthode de contrôle devrait être disponible comme premier élément de la page.</p>
<p><strong>Note 2 :</strong> la méthode de contrôle du contenu en mouvement ou clignotant doit permettre à l’utilisateur d’interagir avec le reste de la page. En conséquence, l’arrêt ou la mise en pause via un événement déclenché uniquement sur la prise de focus ne permet pas de valider le critère.</p>
<p><strong>Note 3 :</strong> Dans certains cas, le mouvement fait partie intégrante du composant et il n’est pas possible d’en donner le contrôle à l’utilisateur, par exemple une barre de progression dont la fonction est d’indiquer par un mouvement la progression d’un évènement comme un téléchargement. Dans ce cas le critère est Non Applicable.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-31"><a href="#glossaire-31">Contrôle (son déclenché automatiquement)</a></h3>
<p>Possibilité pour l’utilisateur d’arrêter ou de relancer un son déclenché automatiquement.</p>
<p><strong>Note :</strong> la méthode de contrôle du son devrait être disponible comme premier élément de la page.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-32"><a href="#glossaire-32">Contrôle de la consultation (d'un média temporel)</a></h3>
<p>Possibilité pour l’utilisateur de contrôler la consultation d’un média temporel par le clavier et tout dispositif de pointage, au moins. Les points suivants doivent être respectés :</p>
<ul>
<li>Liste des fonctionnalités obligatoires de contrôle de la consultation :
<ul>
<li>L’objet multimédia doit toujours avoir les fonctionnalités suivantes, au minimum : lecture, pause ou stop ;</li>
<li>Si l’objet multimédia a du son, il doit avoir une fonctionnalité d’activation / désactivation du son ;</li>
<li>Si l’objet multimédia a des sous-titres, il doit avoir une fonctionnalité de contrôle de l’apparition/disparition des sous-titres ;</li>
<li>Si l’objet multimédia a une audiodescription, il doit avoir une fonctionnalité de contrôle de l’apparition/disparition de l’audiodescription.</li>
</ul>
</li>
<li>Chaque fonctionnalité doit être accessible par le clavier, via la touche de tabulation, et par tout dispositif de pointage au moins.</li>
<li>Chaque fonctionnalité doit être activable par le clavier et par tout dispositif de pointage, au moins.</li>
</ul>
<p><strong>Note :</strong> s’il n’y a pas de son à un média temporel, il n’est pas utile de mettre une fonctionnalité d’activation / désactivation du son. Si cette fonctionnalité est cependant présente et qu’elle nécessite une alternative textuelle pour être comprise par certains utilisateurs, il faut alors lui en donner une puisque l’utilisateur est susceptible d’y accéder et de vouloir l’activer.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-33"><a href="#glossaire-33">Contrôle de saisie (formulaire)</a></h3>
<p>Ensemble des processus qui permettent de prévenir l’utilisateur des champs obligatoires, des indications de type ou de format attendus et des erreurs de saisie dans un formulaire. Ces contrôles de saisie peuvent être implémentés par l’auteur des contenus ou s’appuyer sur des attributs (comme <code>required</code> ou <code>pattern</code>), des attributs WAI-ARIA (comme <code>aria-required</code>) ou des types de champ qui produisent de manière automatique des indications de saisie ou d’erreurs (comme les types <code>url</code>, <code>email</code>, <code>date</code>, <code>time</code> par exemple).</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-34"><a href="#glossaire-34">Couleur d'arrière-plan contiguë et couleur contiguë</a></h3>
<p>Couleur d’arrière-plan contiguë : couleur d’arrière-plan directement en contact avec le bord extérieur du composant d’interface ou de l’élément graphique.</p>
<p>Exemples :</p>
<ul>
<li>Pour un bouton blanc avec une bordure bleue sur un fond blanc, le fond blanc à l’extérieur de la bordure bleu correspond à la couleur d’arrière-plan contiguë ;</li>
<li>Pour un bouton rouge sur fond blanc, le fond blanc à l’extérieur du rouge correspond à la couleur d’arrière-plan contiguë ;</li>
<li>Pour un bouton blanc avec une bordure verte qui devient noire à la prise de focus et au survol, le fond blanc à l’extérieur de la bordure verte de l’état par défaut et de la bordure noire de l’état au survol et au focus correspond à la couleur d’arrière-plan contiguë.</li>
</ul>
<p>Couleur contiguë : couleur directement en contact avec une autre couleur. Exemple dans un panneau de « sens interdit » le rouge du panneau est la couleur contiguë au trait blanc au centre du panneau.</p>
<p><strong>Note 1 :</strong> dans le cas de la présence d’un dégradé, c’est la couleur contiguë la moins contrastée du dégradé qui sera à considérer comme la couleur contiguë ou couleur d’arrière-plan contiguë.</p>
<p><strong>Note 2 :</strong> dans le cas de la présence de plusieurs couleurs, c’est l’ensemble des couleurs qui seront à considérer comme couleur contiguë ou couleur d’arrière-plan contiguë.</p>
</section>
</article>
<article id="lettre-d">
<h2>D</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#lettre-c">Lettre C</a></li>
<li class="goafter"><a href="#lettre-e">Lettre E</a></li>
</ul>
<section class="section-glossary">
<h3 id="glossaire-35"><a href="#glossaire-35">Description détaillée (image)</a></h3>
<p>Contenu associé à une image en complément de son alternative textuelle afin de décrire en totalité l’information véhiculée par l’image. La description détaillée peut être associée à l’image via :</p>
<ul>
<li>Un attribut <code>longdesc</code> qui contient l’adresse d’une page ou d’un emplacement dans la page contenant la description détaillée ;</li>
<li>Une référence à une description détaillée adjacente à l’image dans l’alternative textuelle ;</li>
<li>Un <a href="#glossaire-66">lien ou un bouton adjacent</a> qui permet d’accéder à la description détaillée dans la page ou dans une autre page ;</li>
<li>Un ou plusieurs passages de texte identifiés par un id et liés par un attribut WAI-ARIA <code>aria-describedby</code> sur le modèle <code>aria-describedby="ID1 ID2 ID3…"</code>.</li>
</ul>
<p><strong>Note 1 :</strong> Si le support de l’attribut <code>aria-describedby</code> fait défaut, il est possible d’utiliser un ou plusieurs passages de texte identifiés par un <code>id</code> et liés par un attribut WAI-ARIA <code>aria-labelledby</code> à la suite de l’alternative textuelle.</p>
<p><strong>Note 2 :</strong> Pour assurer une compatibilité maximum avec les agents utilisateurs, notamment Internet Explorer 11, il est recommandé d’implémenter un <code>tabindex="-1"</code> sur les balises qui contiennent un passage de texte et qui ne sont pas des éléments interactifs (bouton, liens, éléments de formulaires, etc.).</p>
</section>
</article>
<article id="lettre-e">
<h2>E</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#lettre-d">Lettre D</a></li>
<li class="goafter"><a href="#lettre-f">Lettre F</a></li>
</ul>
<section class="section-glossary">
<h3 id="glossaire-36"><a href="#glossaire-36">Élément graphique</a></h3>
<p>Élément faisant appel à une représentation visuelle telle que des images, des pictogrammes ou des graphiques.</p>
<p>Cet élément peut être composé d’une ou plusieurs parties dont la visibilité est nécessaire à sa compréhension (par exemple chaque point sur chaque ligne d’un graphique de statistiques).</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-37"><a href="#glossaire-37">Ensemble de pages</a></h3>
<p>Pages web liées les unes aux autres par des liens et constituant un ensemble cohérent à l’intérieur d’un site web. Par exemple, les pages d’une rubrique spécifique, les pages d’un blog, les pages d’administration d’un compte client sont autant d’ensembles de page.</p>
<p><strong>Note :</strong> la page d’accueil d’un site web peut constituer, à elle seule, un « ensemble de pages » du fait de son unicité.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-38"><a href="#glossaire-38">En-tête de colonne ou de ligne</a></h3>
<p>Contenu d’une cellule dans un tableau de données (la première cellule d’une colonne ou d’une ligne, généralement) qui sert d’intitulé pour la totalité ou une partie des cellules de la colonne ou de la ligne. Une colonne ou une ligne peut contenir plusieurs en-têtes (en-tête intermédiaire). Lorsque les en-têtes s’appliquent à l’ensemble d’une ligne ou d’une colonne ils peuvent être structurés avec une balise <code><th></code> ou une balise pourvue d’un attribut WAI-ARIA <code>role="rowheader"</code> ou <code>"columnheader"</code>. Dans le cas contraire, seule une balise <code><th></code> peut être utilisée.</p>
<p><strong>Note :</strong> seule la balise <code><th></code> étant totalement supportée par l’ensemble des technologies d’assistance, il est fortement recommandé de privilégier cette solution lors de la mise en œuvre afin d’éviter de nombreuses vérifications dans les différentes combinaisons prévues dans l’environnement de test (ou « base de référence »).</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-39"><a href="#glossaire-39">Environnement maîtrisé</a></h3>
<p>Tout environnement dans lequel l’accès à l’information, les technologies, les conditions d’utilisation et le profil des utilisateurs peuvent être connus et maîtrisés. Les principaux éléments dont la maîtrise est essentielle sont :</p>
<ul>
<li>Le type et la version des navigateurs ;</li>
<li>Les technologies supportées, leur version et leur activation (JavaScript, WAI-ARIA, Flash, Silverlight…) ;</li>
<li>Les technologies d’assistance et tout dispositif utilisé de manière spécifique par les utilisateurs handicapés ;</li>
<li>Les systèmes d’exploitation et les APIs d’accessibilité supportées ;</li>
<li>La formation des utilisateurs de technologies d’assistance à l’utilisation de tout dispositif particulier (interface, application en ligne…).</li>
</ul>
<p>Les auteurs et les administrateurs doivent garantir la compatibilité des technologies utilisées et de leurs usages par les utilisateurs et leurs technologies (y compris les technologies d’assistance). Les services d’information ou les sites Web, quel que soit leur statut, qui offrent un accès public ne peuvent pas être considérés comme des environnements maîtrisés.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-40"><a href="#glossaire-40">Étiquette de champ de formulaire</a></h3>
<p>Texte à proximité du champ de formulaire permettant d’en connaître la nature, le type ou le format des informations attendues. L’étiquette peut être associée au champ de formulaire de plusieurs manières :</p>
<ul>
<li>Par l’utilisation d’une balise <code><label></code> ;</li>
<li>Par l’utilisation de l’attribut WAI-ARIA <code>aria-label</code> ;</li>
<li>Par l’utilisation d’une liaison entre le texte et le champ par l’attribut WAI-ARIA <code>aria-labelledby</code> ;</li>
<li>Par l’utilisation de l’attribut <code>title</code>.</li>
</ul>
<p><strong>Note importante :</strong> lorsque plusieurs de ces techniques sont présentes sur un même champ, le calcul du « nom accessible », c’est-à-dire ce qui sera restitué, obéit à un ordre strict :</p>
<ul>
<li><code>aria-labelledby</code> ;</li>
<li>Sinon <code>aria-label</code> ;</li>
<li>Sinon <code><label></code> ;</li>
<li>Sinon <code>title</code>.</li>
</ul>
<p>Cet ordre doit être utilisé pour l’évaluation de la pertinence de l’étiquette (<a href="/rgaa4-criteres.html#crit-11-2">critère 11.2</a>). Par exemple, même dans le cas de la présence d’un <code><label></code>, c’est le <a href="#glossaire-87">passage de texte</a> référencé par <code>aria-labelledby</code> qui doit être pris en compte.</p>
<p>Référence : <a href="http://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-calculation" lang="en" hreflang="en" rel="external" class="external">Accessible name and description calculation</a>.</p>
<p><strong>Note importante au sujet de l’utilisation de <code>placeholder</code> :</strong> lorsque l’attribut <code>placeholder</code> est présent, il est susceptible d’être restitué à la place de l’attribut <code>title</code>. Par conséquent, lorsque ces deux attributs <code>title</code> et <code>placeholder</code> sont présents, ils doivent être identiques.</p>
<p><strong>Note au sujet des étiquettes liées par <code>aria-labelledby</code> :</strong> Il s’agit d’un ou de plusieurs passages de texte identifiés par des <code>id</code> et liés par <code>aria-labelledby</code> sur le modèle suivant : <code>aria-labelledby="ID1 ID2 ID3…"</code>. Pour assurer une compatibilité maximum avec les agents utilisateurs, notamment Internet Explorer 11, il est recommandé d’implémenter un <code>tabindex="-1"</code> sur les passages de textes qui ne sont pas des éléments interactifs (bouton, liens, éléments de formulaires, etc.).</p>
<p><strong>Note :</strong> l’attribut <code>aria-label</code> ne peut pas être utilisé pour indiquer le caractère obligatoire d’un champ.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-41"><a href="#glossaire-41">Étiquettes cohérentes</a></h3>
<p>Les <a href="#glossaire-40">étiquettes</a> de champs de formulaire présentes dans une même page ou dans un ensemble de pages et réclamant la saisie d’une même information doivent être formulées sans ambiguïté pour que l’utilisateur sache que l’information qu’il doit communiquer est la même.</p>
</section>
</article>
<article id="lettre-f">
<h2>F</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#lettre-e">Lettre E</a></li>
<li class="goafter"><a href="#lettre-g">Lettre G</a></li>
</ul>
<section class="section-glossary">
<h3 id="glossaire-42"><a href="#glossaire-42">Feuille de style</a></h3>
<p>Le langage CSS destiné à la mise en forme des éléments du contenu (exemples : couleur du fond de la page, taille / police / couleur des caractères, positionnement de l’information dans la page web…). Les styles CSS peuvent être externes (fichier CSS), embarqués (déclarés dans l’en-tête de la page) ou en ligne (déclarés via l’attribut <code>style</code> d’une balise).</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-43"><a href="#glossaire-43">Formulaire</a></h3>
<p>Balise <code><form></code> ou possédant un attribut WAI-ARIA <code>role="form"</code>.</p>
</section>
</article>
<article id="lettre-g">
<h2>G</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#lettre-f">Lettre F</a></li>
<li class="goafter"><a href="#lettre-i">Lettre I</a></li>
</ul>
<section class="section-glossary">
<h3 id="glossaire-44"><a href="#glossaire-44">Gestes complexes et gestes simples</a></h3>
<p>Un geste simple implique un contact en un point unique de l’écran. Il peut s’agir d’une pression ou d’un clic simple, d’une double-pression ou d’un double-clic, d’une pression prolongée.</p>
<p>Un geste complexe peut être à la fois un geste impliquant plusieurs points de contact sur l’écran (exemple : un geste avec deux doigts sur l’écran pour zoomer ou dézoomer une carte) et un geste basé sur le suivi d’une trajectoire sur l’écran (exemple : fonction JavaScript permettant de détection le déplacement d’un doigt vers la gauche ou droite sur une surface tactile pour déclencher le passage à l’item précédent / suivant d’un carrousel).</p>
</section>
</article>
<article id="lettre-i">
<h2>I</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#lettre-g">Lettre G</a></li>
<li class="goafter"><a href="#lettre-l">Lettre L</a></li>
</ul>
<section class="section-glossary">
<h3 id="glossaire-47"><a href="#glossaire-47">Image de décoration</a></h3>
<p>Image n’ayant aucune fonction et ne véhiculant aucune information particulière par rapport au contenu auquel elle est associée. Exemples :</p>
<ul>
<li>Une image précédant chaque item d’une liste ;</li>
<li>Une image servant à caler la mise en page ;</li>
<li>Une image de coin arrondie pour habiller un bloc d’information ;</li>
<li>Une image d’illustration n’apportant aucune information nécessaire à la compréhension du texte auquel elle est associée.</li>
</ul>
<p><strong>Note :</strong> les balises possédant un attribut WAI-ARIA <code>role="img"</code> ne peuvent faire office d’image de décoration qu’à la condition qu’elles possèdent un attribut WAI-ARIA <code>aria-hidden="true"</code>.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-48"><a href="#glossaire-48">Image objet</a></h3>
<p>Image incorporée ou générée par une balise <code><object></code>.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-49"><a href="#glossaire-49">Image porteuse d'information</a></h3>
<p>Image qui véhicule une information nécessaire à la compréhension du contenu auquel elle est associée.</p>
<p><strong>Note 1 :</strong> lorsque l’image est le seul contenu d’un lien, son alternative est l’intitulé du lien. Dans ce cas, l’alternative de l’image devrait être évaluée avec la thématique « Liens ».</p>
<p><strong>Note 2 :</strong> lorsqu’un bouton de formulaire, inséré avec l’élément <code><button></code>, ne contient qu’une image (balise <code><img></code>, <code><object></code>, <code><embed></code>, <code><canvas></code> ou <code><svg></code>), l’alternative de l’image est l’intitulé du bouton. Deux cas peuvent se présenter :</p>
<ul>
<li>Le bouton est contrôlé par son type, par exemple, le type <code>submit</code> ou <code>reset</code>, et fait partie d’un formulaire. Dans ce cas, le bouton image doit être évalué avec la thématique « Formulaires » ;</li>
<li>Le bouton est contrôlé par un dispositif JavaScript. Dans ce cas, le bouton image doit être évalué avec la thématique « Scripts ».</li>
</ul>
</section>
<section class="section-glossary">
<h3 id="glossaire-50"><a href="#glossaire-50">Image réactive</a></h3>
<ul>
<li>Image réactive côté client (attribut <code>usemap</code>) : image divisée en zones cliquables ou neutres (attribut <code>nohref</code>) ;</li>
<li>Image réactive côté serveur (attribut <code>ismap</code>) : image pour laquelle le navigateur transmet au serveur les coordonnées du pointeur, chaque jeu de coordonnées correspondant à une ressource (page web). L’image réactive côté serveur est extrêmement rare.</li>
</ul>
<p><strong>Note :</strong> en HTML5, l’attribut <code>ismap</code> est obsolète et non conforme pour les boutons de type <code>image</code> (<code>input type="image"</code>).</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-51"><a href="#glossaire-51">Image-test</a></h3>
<p>Image servant dans un test, Captcha ou une image servant de test dans un quiz ou un jeu. Exemple : une série d’images présente un détail issu de tableaux célèbres ; il faut reconnaître le titre et le peintre de chaque tableau. Dans cette situation, il n’est pas possible de donner une alternative pertinente (par exemple le nom du tableau et/ou du peintre) sans rendre le test inutilisable. L’alternative doit alors se contenter de donner la possibilité d’identifier l’image, par exemple « image 1 du test ».</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-52"><a href="#glossaire-52">Image texte</a></h3>
<p>Image affichant du texte.</p>
<p><strong>Note :</strong> il n’est pas recommandé d’utiliser des images textes. Lorsqu’il est possible de reproduire les mêmes effets en CSS, le <a href="/rgaa4-criteres.html#crit-1-8">critère 1.8</a> impose que le texte soit reproduit en texte CSS, ou qu’un mécanisme de remplacement permette à l’utilisateur de remplacer ces images par du <a href="#glossaire-112">texte stylé</a> en CSS.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-53"><a href="#glossaire-53">Image texte objet</a></h3>
<p>Image générée par la balise <code><object></code> et affichant du texte.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-54"><a href="#glossaire-54">Image véhiculant une information (donnée par la couleur)</a></h3>
<p>Image dont tout ou partie du contenu transmet visuellement une information par l’intermédiaire d’une couleur uniquement.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-45"><a href="#glossaire-45">Indication de format obligatoire</a></h3>
<p>Indication textuelle ou graphique (icône) permettant à l’utilisateur de savoir que la saisie d’un champ est obligatoire préalablement à la saisie.</p>
<p><strong>Note :</strong> Dans le cas où cette indication n’est pas réalisée de manière textuelle explicite (icône, *, !,…) l’explication de la signification de cette indication doit être visible et dans l’ordre du code source se situer avant la première utilisation de l’indication.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-55"><a href="#glossaire-55">Indication donnée par la forme, la taille ou la position</a></h3>
<p>Il peut s’agir, par exemple :</p>
<ul>
<li>De la présence d’un marqueur visuel, pour indiquer la page active dans un menu de navigation (indication donnée par la position) ;</li>
<li>D’une mise en avant-plan pour indiquer un onglet actif (indication donnée par la forme) ;</li>
<li>D’une modification de la taille de police dans un nuage de tags (indication donnée par la taille).</li>
</ul>
<p>Ou de tout autre effet graphique similaire.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-46"><a href="#glossaire-46">Indication du type de données et/ou de format</a></h3>
<p>Indication textuelle permettant à l’utilisateur de savoir quel est le type de donnée et/ou le format de saisie requis par un champ obligatoire, préalablement à son renseignement.</p>
<p>Exemples :</p>
<ul>
<li>Code postal (format : 00000) ;</li>
<li>Date (format : JJ/MM/AAAA).</li>
</ul>
</section>
<section class="section-glossary">
<h3 id="glossaire-56"><a href="#glossaire-56">Information (donnée par la couleur)</a></h3>
<p>Information transmise visuellement par l’intermédiaire d’une couleur. L’indication que les champs en rouge sont obligatoires dans un formulaire, l’utilisation d’un fond bleu pour indiquer la page en cours de consultation dans un menu avec le fond vert, le changement de couleur d’un nom d’article pour indiquer son indisponibilité dans une liste d’articles sont autant d’exemples d’indication donnée par la couleur.</p>
<p>Lorsqu’une information donnée par la couleur est accompagnée d’une autre méthode à destination des utilisateurs qui ne voient pas ou perçoivent mal les couleurs ou leurs associations, le critère sera considéré comme non applicable.</p>
<p>Les moyens de transmettre une information autrement que par la couleur peuvent être :</p>
<ul>
<li>Une indication textuelle visible ;</li>
<li>Un moyen faisant intervenir du graphisme (pictogramme, image de fond, forme, style de bordure différent, etc) et par le biais d’un complément au niveau du code (<code>aria-label</code>, <code>title</code>, texte masqué, <code>aria-current</code>, etc.) ;</li>
<li>Un autre style typographique (gras, italique, taille de texte, autre police, etc) et par le biais d’un complément au niveau du code (<code>aria-label</code>, <code>title</code>, texte masqué, <code>aria-current</code>, etc.).</li>
</ul>
</section>
<section class="section-glossary">
<h3 id="glossaire-57"><a href="#glossaire-57">Intitulé (ou nom accessible) de lien</a></h3>
<p>« Nom accessible » restitué par les technologies d’assistance.</p>
<p>Dans le cas d’un lien HTML, le « nom accessible » est obtenu selon l’ordre suivant :</p>
<ul>
<li><a href="#glossaire-87">Passage de texte</a> associé par l’attribut WAI-ARIA <code>aria-labelledby</code> ;</li>
<li>Sinon, contenu de l’attribut WAI-ARIA <code>aria-label</code> ;</li>
<li>Sinon, contenu du lien ;</li>
<li>Sinon, contenu de l’attribut <code>title</code>.</li>
</ul>
<p>Cet ordre doit être utilisé pour déterminer ce qui constitue l’intitulé du lien. Par exemple :</p>
<ul>
<li>En cas de présence conjointe d’un attribut WAI-ARIA <code>aria-label</code> et d’un attribut WAI-ARIA <code>aria-labelledby</code>, c’est le <a href="#glossaire-87">passage de texte</a> référencé par l’attribut WAI-ARIA <code>aria-labelledby</code> qui doit être considéré comme l’intitulé ;</li>
<li>En cas de présence conjointe d’un attribut WAI-ARIA <code>aria-label</code> et d’un contenu dans le lien, c’est le contenu de l’attribut WAI-ARIA <code>aria-label</code> qui doit être considéré comme l’intitulé.</li>
</ul>
<p>Référence : <a href="https://www.w3.org/TR/accname-1.1/" lang="en" hreflang="en" rel="external" class="external">Accessible name and description calculation</a>.</p>
<p>Dans le cas où le « nom accessible » est obtenu à partir du contenu du lien, celui-ci sera variable en fonction des cas suivants :</p>
<ul>
<li>
<strong>Lien texte :</strong><br />En HTML, le « nom accessible » correspond au texte constitué à partir :
<ul>
<li>Du texte contenu dans le lien ;</li>
<li>Du texte contenu dans les éléments enfants du lien.</li>
</ul>
</li>
<li>
<strong>Lien image :</strong><br />En HTML, le « nom accessible » correspond au texte constitué à partir de l’alternative textuelle d’une ou plusieurs images dans le lien du type :
<ul>
<li>Image (balise <code><img></code> ou balise ayant l’attribut WAI-ARIA <code>role="img"</code>) ;</li>
<li>Image objet (balise <code><object></code>) ;</li>
<li>Image bitmap (balise <code><canvas></code>) ;</li>
<li>Image vectorielle (balise <code><svg></code>).</li>
</ul>
</li>
<li>
<strong>Lien composite :</strong><br />En HTML, le « nom accessible » correspond au texte constitué à partir de l’ensemble :
<ul>
<li>Du texte contenu dans le lien ;</li>
<li>Du texte contenu dans les éléments enfant du lien ;</li>
<li>Du contenu de l’alternative textuelle de la ou des images comprises dans le lien.</li>
</ul>
</li>
<li>
<strong>Lien SVG :</strong><br />Dans le cas d’un lien SVG (version 1.1), le « nom accessible » est obtenu comme suit :
<ul>
<li><a href="#glossaire-87">Passage de texte</a> associé par l’attribut WAI-ARIA <code>aria-labelledby</code> ;</li>
<li>Sinon, contenu de l’attribut WAI-ARIA <code>aria-label</code> ;</li>
<li>Sinon, contenu de l’élément <code><title></code> enfant direct du lien ;</li>
<li>Sinon, contenu de l’attribut <code>xlink:title</code> ;</li>
<li>Sinon, contenu texte d’un ou plusieurs éléments <code><text></code>.</li>
</ul>
<p>Il faut cependant être vigilant car cet algorithme de calcul n’est pas encore pris en compte et effectif au sein des différents lecteurs d’écran. À ce jour, le support est disponible avec VoiceOver, mais incomplet ou lacunaire avec JAWS et NVDA. Si bien que le plus petit dénominateur commun sur lequel il est possible de se reposer pour fournir un intitulé au lien est l’élément <code><text></code>.</p>
</li>
</ul>
<p><strong>Note 1 :</strong> un <a href="#glossaire-57">intitulé de lien</a> sera considéré comme non-explicite dans le cas où le « nom accessible » ne reprend pas l’<a href="#glossaire-58">intitulé visible</a> du lien.</p>
<p><strong>Note 2 :</strong> en raison de la configuration possible des aides techniques permettant de forcer la restitution du « nom accessible » issu du contenu de l’attribut <code>title</code> au détriment du « nom accessible » issu du contenu du lien. Un <a href="#glossaire-57">intitulé de lien</a> sera considéré comme non-explicite dans le cas où le lien possède un attribut <code>title</code> dont la valeur ne reprendrait pas au moins le « nom accessible » issu du contenu du lien.</p>
<p><strong>Note 3 :</strong> dans le cas de la présence de plusieurs liens ayant une destination différente dont le « nom accessible » est identique. L’<a href="#glossaire-57">intitulé de lien</a> seul sera considéré comme non-explicite si le contexte de lien ne permet pas de les différencier.</p>
<p><strong>Note 4 :</strong> lorsqu’un lien ne comporte aucun contenu (à l’exception des ancres), il sera non conforme au regard du <a href="/rgaa4-criteres.html#crit-10-2">critère 10.2</a> et du <a href="/rgaa4-criteres.html#crit-6-2">critère 6.2</a>.</p>
<p><strong>Note 5 :</strong> bien que le calcul du nom accessible d’un lien tienne compte de contenus texte générés en CSS via les pseudo-éléments <code>::before</code> et <code>::after</code>, cette pratique ne doit pas être utilisée car elle constitue une non conformité au critère 1.3.1 des WCAG 2.1 (cf. <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F87" hreflang="en" rel="external" class="external">F87</a>).</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-58"><a href="#glossaire-58">Intitulé visible</a></h3>
<p>Texte affiché faisant office d’intitulé visible à l’écran au sein d’un bouton ou d’un lien.</p>
<p>Texte affiché faisant office d’<a href="#glossaire-40">étiquette</a> pour un champ formulaire.</p>
<p>Ce texte peut être constitué de texte ou d’une image contenant du texte.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-59"><a href="#glossaire-59">Items de même nature des listes de choix</a></h3>
<p>Dans une liste déroulante (balise <code><select></code>), ensemble d’items (balises <code><option></code>) pouvant être regroupés par leur nature. Le regroupement vise à identifier les items devant être traités comme un ensemble (par exemple, une liste de départements regroupés par régions).</p>
</section>
</article>
<article id="lettre-l">
<h2>L</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#lettre-i">Lettre I</a></li>
<li class="goafter"><a href="#lettre-m">Lettre M</a></li>
</ul>
<section class="section-glossary">
<h3 id="glossaire-60"><a href="#glossaire-60"><span lang="en">Landmarks</span></a></h3>
<p>WAI-ARIA propose des rôles permettant d’indiquer les zones principales (régions) du document. Ces rôles sont très profitables aux utilisateurs de lecteurs d’écran notamment, mais également aux utilisateurs de la navigation au clavier qui peuvent ainsi bénéficier de fonctionnalités de navigation rapide dans la structure du document.</p>
<p>Les rôles doivent être définis dans le document en fonction de la nature de la zone :</p>
<ul>
<li>La zone d’<a href="#glossaire-125">en-tête</a> doit avoir un attribut WAI-ARIA <code>role="banner"</code> ;</li>
<li>Le <a href="#glossaire-12">menu de navigation</a> principal doit avoir un attribut WAI-ARIA <code>role="navigation"</code> ;</li>
<li>La zone de <a href="#glossaire-126">contenu principal</a> doit avoir un attribut WAI-ARIA <code>role="main"</code> ;</li>
<li>La zone de <a href="#glossaire-127">pied de page</a> doit avoir un attribut WAI-ARIA <code>role="contentinfo"</code> ;</li>
<li>La zone de <a href="#glossaire-82">moteur de recherche</a> sur le site doit avoir un attribut WAI-ARIA <code>role="search"</code>.</li>
</ul>
<p><strong>Note 1 :</strong> Si la plupart des lecteurs d’écran mettent à disposition ces fonctionnalités, les navigateurs n’ont pas encore proposé de fonctionnalité de navigation dédiée pour les utilisateurs qui ne peuvent pas utiliser la souris. La mise en place des liens d’évitement reste donc à privilégier par rapport aux <span lang="en">landmarks</span>.</p>
<p><strong>Note 2 :</strong> Les rôles WAI-ARIA <code>banner</code>, <code>main</code> et <code>contentinfo</code> doivent être uniques dans la page. Le rôle WAI-ARIA <code>navigation</code> est réservé aux zones de navigations principales et secondaires. Lorsqu’il y a plusieurs rôles WAI-ARIA <code>navigation</code>, il peut être utile de les différencier en précisant un nom à chacune des zones via l’attribut WAI-ARIA <code>aria-label</code> ou <code>aria-labelledby</code>.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-61"><a href="#glossaire-61">Langue par défaut</a></h3>
<p>Indication de la langue de traitement principale du document qui peut être présente sur l’élément racine <code>html</code> ou sur chaque élément de la page concerné via les attributs <code>lang</code> et/ou <code>xml:lang</code> selon le schéma suivant :</p>
<ul>
<li>Pour HTML jusqu’à la version 4.01 : attribut <code>lang</code> obligatoire, attribut <code>xml:lang</code> non supporté ;</li>
<li>Pour XHTML 1.0 servi en <code>"text/html"</code> : attribut <code>lang</code> et <code>xml:lang</code> obligatoires ;</li>
<li>Pour XHTML 1.0 servi en <code>"application/xhtml+xml"</code> : attribut <code>xml:lang</code> obligatoire, attribut <code>lang</code> recommandé ;</li>
<li>Pour XHTML 1.1 : attribut <code>xml:lang</code> obligatoire, attribut <code>lang</code> non supporté ;</li>
<li>Pour HTML5 : attribut <code>lang</code> obligatoire.</li>
</ul>
</section>
<section class="section-glossary">
<h3 id="glossaire-62"><a href="#glossaire-62">Le nom, le rôle, la valeur, le paramétrage et les changements d'états</a></h3>
<p>Un composant doit avoir un rôle et un nom appropriés. Ses valeurs, états et paramètres éventuels doivent également être accessibles et correctement transmis aux APIs d’accessibilité notamment.</p>
<p>Un composant peut s’appuyer sur un élément interactif HTML ou sur un élément non interactif surchargé par WAI-ARIA via un rôle ad hoc. Important : les boutons (balises <code><button></code> ou <code><input type="button"></code>) lorsqu’ils sont contrôlés via JavaScript sont à évaluer avec le <a href="/rgaa4-criteres.html#crit-7-1">critère 7.1</a>.</p>
<p>Le nom peut être l’intitulé du composant (l’intitulé d’un bouton, par exemple).</p>
<p>La valeur est, par exemple, l’élément sélectionné d’une liste déroulante ou la valeur actuelle d’un curseur (<span lang="en">slider</span>).</p>
<p>Le rôle correspond au type d’élément défini par la spécification HTML ou WAI-ARIA (comme la balise <code><button></code> ou l’attribut WAI-ARIA <code>role="button"</code>).</p>
<p>Le paramétrage correspond aux informations particulières d’un composant, généralement mis à disposition par WAI-ARIA. Par exemple <code>aria-controls</code> est un paramètre qui transmet aux APIs l’information que le composant contrôle tel ou tel contenu (référencé par son identifiant - attribut <code>id</code>).</p>
<p>Les changements d’états sont également mis à disposition par WAI-ARIA. Par exemple <code>aria-expanded</code> est un état permettant de signaler aux APIs que le composant est « ouvert » ou « fermé ». À noter qu’un état peut également être transmis via le nom, lorsque l’intitulé est changé dynamiquement pour correspondre à l’état de la zone contrôlée notamment.</p>
<p>Ces paramètres ne sont pas obligatoires mais peuvent être requis s’ils sont indispensables pour rendre le composant accessible. C’est à l’auditeur de considérer les cas où ces paramètres sont indispensables en fonction du contexte lié à l’utilisation du composant.</p>
<p>L’auditeur doit également vérifier que, lorsqu’ils sont présents, ces paramètres sont correctement utilisés.</p>
<p>Pour ce faire (s’il juge cela pertinent compte tenu du contexte d’implémentation des composants et des choix ergonomiques mis en œuvre) il peut s’appuyer sur les recommandations d’utilisation de WAI-ARIA pour les composants ayant des attributs WAI-ARIA correspondant à un <a href="#glossaire-83">motif de conception</a> tel que décrit dans le document <a href="http://www.w3.org/TR/wai-aria-practices/" lang="en" hreflang="en" rel="external" class="external">WAI-ARIA 1.1 Authoring Practices</a>.</p>
<p><strong>Note :</strong> les rôles, propriétés et états WAI-ARIA s’implémentent via des attributs, par exemple <code>role="banner"</code>, <code>aria-hidden="true"</code>.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-63"><a href="#glossaire-63">Légende</a></h3>
<p>HTML propose un dispositif permettant de titrer les groupes de champs de même nature par l’intermédiaire des éléments <code><fieldset></code> et <code><legend></code>.</p>
<p>Il est également possible de créer des regroupements avec le rôle WAI-ARIA <code>group</code> et un <a href="#glossaire-87">passage de texte</a>, faisant office de légende, lié par l’attribut WAI-ARIA <code>aria-labelledby</code> ou implémenté par l’intermédiaire d’un attribut WAI-ARIA <code>aria-label</code>.</p>
<p><strong>Note 1 :</strong> Les regroupements de champs peuvent utiliser d’autres méthodes qui associent l’information du regroupement directement dans l’<a href="#glossaire-40">étiquette</a> du champ. Par exemple, par l’intermédiaire d’un attribut <code>title</code>, d’un attribut WAI-ARIA <code>aria-label</code>, d’une liaison <code>aria-labelledby</code> faisant office d’<a href="#glossaire-40">étiquette</a> ou encore par l’attribut WAI-ARIA <code>aria-describedby</code> associant un texte complémentaire. Dans ce cas, le regroupement de champs devient inutile puisque les labels sont suffisamment pertinents.</p>
<p><strong>Note 2 :</strong> Lorsque le formulaire est constitué d’un seul bloc d’informations de même nature (l’identité et l’adresse de l’utilisateur, par exemple) ou d’un champ unique (un moteur de recherche, par exemple), le regroupement des champs n’est pas obligatoire.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-64"><a href="#glossaire-64">Légende d'image</a></h3>
<p>Lorsqu’un texte, adjacent à une image, contient des informations sur l’image (par exemple un copyright, une date, un auteur…) ou est destiné à compléter les informations apportées par l’image (par exemple un texte associé à une image dans une galerie d’images), on parle de légende d’image.</p>
<p>Lorsqu’une image est légendée il est nécessaire d’associer la légende de l’image à l’image par une relation de structure, de telle sorte que les technologies d’assistance puissent traiter l’image et sa légende comme un ensemble unique.</p>
<p>HTML5 propose d’associer une légende à une image via les éléments <code>figure</code> (l’ensemble de l’image et la légende) et <code>figcaption</code> (la légende).</p>
<p>Une image sans légende peut définir :</p>
<ul>
<li>Une image qui n’est pas insérée dans un élément <code>figure</code> ;</li>
<li>Une image insérée dans un élément <code>figure</code> sans élément <code>figcaption</code>.</li>
</ul>
<p><strong>Note :</strong> lorsque le texte adjacent à l’image peut faire office de texte de remplacement, il n’est pas obligatoire de recourir à l’ensemble <code>figure</code>, <code>figcaption</code>, l’image pouvant être simplement traitée comme une image de décoration.</p>
<p>Vous pouvez consulter, à ce sujet, la note <a href="https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text" lang="en" hreflang="en" rel="external" class="external">Requirements for providing text to act as an alternative for images</a> du W3C.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-65"><a href="#glossaire-65">Lien</a></h3>
<p>En HTML :</p>
<ul>
<li>Balise <code><a></code> possédant un attribut <code>href</code> ;</li>
<li>Balise possédant un attribut WAI-ARIA <code>role="link"</code> et dont l’action de navigation est prise en charge par un script.</li>
</ul>
<p>En SVG :</p>
<ul>
<li>Balise <code><a></code> possédant un attribut <code>xlink:href</code> en SVG 1.1.</li>
</ul>
</section>
<section class="section-glossary">
<h3 id="glossaire-66"><a href="#glossaire-66">Lien ou bouton adjacent</a></h3>
<p>Lien ou bouton présenté de manière adjacente à un élément dans la page. Le lien ou bouton doit être adjacent visuellement dans la représentation graphique (CSS activé) et dans le code HTML. Dans le code HTML, le lien ou bouton doit se situer juste avant ou juste après l’élément auquel il est adjacent.</p>
</section>
<section class="section-glossary">
<h3 id="glossaire-67"><a href="#glossaire-67">Lien composite</a></h3>
<p>En HTML, <a href="#glossaire-65">lien</a> contenant à la fois du texte et un ou plusieurs enfants de type image :</p>
<ul>