-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathrgaa3-glossaire.html
1035 lines (895 loc) · 111 KB
/
rgaa3-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 3.0 2017 - juin 2017
Source : http://references.modernisation.gouv.fr/rgaa-accessibilite/criteres.html
Fork : https://github.com/Tanaguru/Rgaa_Website
-->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Glossaire - RGAA 3.0 2017 - Tanaguru</title>
<meta name="description" content="Glossaire du RGAA 3 2017, mis en page par Tanaguru. Toutes les définitions pour bien comprendre les critères.">
<link rel="canonical" href="http://rgaa.tanaguru.com/rgaa3-glossaire.html">
<link rel="alternate" href="http://rgaa.tanaguru.com/rgaa3-glossaire.html" hreflang="fr">
<link rel="alternate" href="http://rgaa.tanaguru.com/en/rgaa3-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="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.1.min.js"></script>
<link rel="shortcut icon" href="favicon.ico">
<!-- 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 3</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">RGAA 3.2017</li><!--
--><li class="main-nav-item"><a href="/rgaa4-criteres.html" class="main-nav-link">RGAA 4.0</a></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 3</button>
</div>
</div>
</div>
<nav id="nav" class="collapse navbar-collapse" role="navigation" aria-label="Menu des pages du RGAA 3">
<ul><!--
--><li><a href="rgaa3-criteres.html">Critères</a></li><!--
--><li><strong class="on">Glossaire</strong></li><!--
--><li><a href="rgaa3-cas-particuliers.html">Cas particuliers</a></li><!--
--><li><a href="rgaa3-notes-techniques.html">Notes techniques</a></li><!--
--><li><a href="rgaa3-base.html">Base de référence</a></li><!--
--><li><a href="rgaa3-references.html">Références</a></li><!--
--></ul>
</nav>
</header>
<main id="main" role="main">
<div class="headrub page">
<h1>Glossaire du RGAA 3 2017</h1>
<p class="lead">Le référentiel RGAA (Référentiel Général d'Accessibilité pour les Administrations) fait référence à de nouveaux termes, de nouvelles définitions. À l'occasion de la parution officielle du référentiel RGAA, la liste des nouvelles définitions sera mise à jour si nécessaire et intégrée au glossaire RGAA.</p>
<div id="navtoc">
<h2 id="toc">Sommaire</h2>
<nav class="nav" role="navigation" aria-labelledby="toc">
<ul>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#d">D</a></li>
<li><a href="#e">E</a></li>
<li><a href="#f">F</a></li>
<li><a href="#i">I</a></li>
<li><a href="#j">J</a></li>
<li><a href="#l">L</a></li>
<li><a href="#m">M</a></li>
<li><a href="#o">O</a></li>
<li><a href="#p">P</a></li>
<li><a href="#r">R</a></li>
<li><a href="#s">S</a></li>
<li><a href="#t">T</a></li>
<li><a href="#u">U</a></li>
<li><a href="#v">V</a></li>
<li><a href="#z">Z</a></li>
</ul>
</nav>
</div>
</div>
<div class="page">
<h2 id="a">A</h2>
<ul class="skiplink">
<li class="goafter"><a href="#b">Lettre B</a></li>
</ul>
<h3 id="acceder-collection-de-pages">Accéder à chaque page de la collection de pages</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>
<h3 id="accessible-clavier-souris">Accessible et activable par le clavier et la souris</h3>
<ul>
<li>Un composant d’interface (lien, bouton, élément cliquable dans Flash…) est accessible au clavier et à la souris lorsque l’utilisateur peut prendre, indifféremment, le focus par le pointeur de la souris ou la touche tabulation.</li>
<li>Un composant d’interface (lien, bouton, élément cliquable dans Flash…) est activable au clavier et à la souris lorsque l’utilisateur peut enclencher, indifféremment, l’action prévue par le composant d’interface par le clic de la souris 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 cette situation, d’autres touches (comme les touches de direction) peuvent être utilisées.</li>
</ul>
<p>Dans le référentiel, l’expression "contrôlable par le clavier et la souris" 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.</p>
<p>Dans ce cas, la mise à disposition de raccourcis clavier peut être la seule solution pour rendre le composant utilisable.</p>
<p>Le critère peut être considéré comme conforme à la condition que les raccourcis clavier utilisés soient correctement documentés et qu’ils soient fonctionnels quelle que soit la position du focus dans l’interface.</p>
<p>Vous pouvez consulter, à ce sujet, la technique <a hreflang="en" href="https://www.w3.org/TR/WCAG20-TECHS/SL15.html">SL15: <span lang="en">Providing Keyboard Shortcuts that Work Across the Entire Silverlight Application</span></a> pour l’environnement <span lang="en">Silverlight</span> par exemple.</p>
<h3 id="adapter-un-motif-de-conception-aria">Adapter un motif de conception ARIA</h3>
<p>L’API ARIA définit des motifs de conception, par exemple pour un système d’onglet ou une fenêtre modale, destinés à assurer un comportement homogène de référence des composants d’interface. Le respect de ces motifs de conception est exigé par le référentiel RGAA.</p>
<p>Néanmoins il est possible d’adapter ces motifs de conception en remplaçant une propriété mal supportée par une propriété équivalente ou en enrichissant le composant de propriétés améliorant l’expérience utilisateur ou sécurisant son comportement.</p>
<p>Il appartient à l’auditeur de vérifier que ces adaptations sont cohérentes avec le motif de conception, ne modifient pas le comportement, en termes d’expérience utilisateur, du composant et que le composant adapté est correctement restitué par les technologies d’assistance.</p>
<p>Si ces exigences sont respectées, le composant peut-être déclaré "conforme" au motif de conception.</p>
<h3 id="alerte">Alerte</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 <i>via</i> la fonction <code lang="en">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. Note : la désactivation des alertes concernées peut être proposée avant le déclenchement de l’alerte, par exemple, <i>via</i> un paramètre utilisateur ou lors de l’affichage de la première alerte, par exemple <i>via</i> une case à cocher "ne plus afficher cette alerte".</p>
<h3 id="alternative-script">Alternative (à script)</h3>
<p>Texte ou procédé associé au script <i>via</i> 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>
<h3 id="alternative-svg">Alternative à une image SVG</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 adjacent qui permet d’accéder à une alternative dont le contenu est pertinent, et identique à la propriété <code lang="en">aria-label</code> et à l’attribut <code lang="en">title</code> de la balise <code lang="en"><svg></code>, s’il est présent.</li>
</ul>
<h3 id="alternative-courte-et-concise">Alternative courte et concise</h3>
<p>Les conditions de restitution d’une alternative textuelle <i>via</i> 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>
<h3 id="alternative-textuelle-image">Alternative textuelle (image)</h3>
<p>Texte associé à une image <i>via</i> une technique appropriée et décrivant l’information véhiculée par l’image (par rapport au contexte du contenu Web dans lequel elle se trouve). RGAA considère quatre types d’alternatives liées à la nature de l’image :</p>
<ul>
<li><strong>pour une image porteuse d’information</strong>, l’alternative apporte l’information nécessaire à la compréhension du contenu auquel l’image est associée ;</li>
<li><strong>pour une image de décoration</strong>, l’alternative doit être vide (alt="") ;</li>
<li><strong>pour une image-lien</strong>, l’alternative doit permettre de comprendre la fonction et la destination du lien ;</li>
<li><strong>pour une image CAPTCHA ou une image-test</strong>, l’alternative ne peut pas apporter l’information véhiculée par l’image sans rendre la fonction associée inopérante. Dans ce cas de figure, l’alternative doit se contenter de permettre d’identifier la nature et la fonction de l’image.</li>
</ul>
<p><strong>Note 1</strong> : pour une image CAPTCHA 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’étoiles, il est fortement conseillé d’utiliser la première image du groupe pour donner une alternative plus cohérente au groupe d’image. Dans ce cas, les autres images du groupe sont considérées comme des images de décoration. Vous pouvez consulter, à ce sujet, la note suivante : <a hreflang="en" href="https://www.w3.org/TR/html5/embedded-content-0.html#a-group-of-images-that-form-a-single-larger-picture-with-no-links"><span lang="en">A group of images that form a single larger picture with no links</span></a>.</p>
<h3 id="ambigu-pour-tout-le-monde">Ambigu pour tout le monde</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). <strong>Exemple</strong> : 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>
<h3 id="ancre">Ancre</h3>
<p>En HTML, une ancre (appelée aussi signet) est constituée d’une balise <code lang="en"><a></code> avec l’attribut <code lang="en">id</code> et dépourvue de <code lang="en">href</code>, <code lang="en"><a id="<span lang="fr">contenu</span>"></a></code> par exemple. Une ancre sert de cible à un lien de la forme <code lang="en"><a href="#id"><span lang="fr">Intitulé</span></a></code> : <code lang="en"><a href="#<span lang="fr">contenu</span>"><span lang="fr">Contenu</span></a></code> par exemple.</p>
<h3 id="arborescence-du-document">Arborescence du document</h3>
<p>Le test 9.2.2 demande de vérifier que la structure des éléments sectionnant (<code lang="en">nav</code>, <code lang="en">section</code>, <code lang="en">article</code> par exemple) est cohérente, c’est-à-dire représentative de l’architecture du document. Cette structure est complémentaire à la structure des titres <code lang="en">h(x)</code> qui en sont un élément.</p>
<p>L’utilisation innapropriée de ces éléments sectionnants peut générer une arborescence de document incohérente, par exemple par l’utilisation abusive d’éléments <code lang="en">section</code> ou <code lang="en">article</code>.</p>
<p><strong>Note 1 :</strong> Pour accompagner la prise en charge progressive de l’arborescence du document et compte tenu du fait que le référentiel exige de disposer, en tout état de cause, d’une structure de contenu (balises <code lang="en">h(x)</code>) robuste et cohérente, <strong>il est acceptable de considérer le test 9.2.2 comme non applicable</strong> lorsqu’il n’est pas possible de s’assurer que l’arborescence du document est parfaitement cohérente. Vous pouvez consulter, à ce sujet la note technique : <a href="notes-techniques.html#crit-9-2">Note technique au sujet de l’arborescence du document</a>. </p>
<p><strong>Note 2 :</strong> vous pouvez consulter, à ce sujet, l’exemple donné par la spécification HTML5 : <a hreflang="en" href="http://www.w3.org/TR/html5/sections.html#sample-outlines">4.3.10.2 <span lang="en">Sample outlines</span></a>.</p>
<h3 id="attribut-target">Attribut <code lang="en">target</code></h3>
<p>L’attribut <code lang="en">target</code> ouvre une nouvelle fenêtre ou un nouvel onglet du navigateur selon sa valeur. Les valeurs suivantes de <code lang="en">target</code> n’ouvrent pas de nouvelles fenêtres :</p>
<ul>
<li><code lang="en">_self</code> ;</li>
<li><code lang="en">_top</code> ;</li>
<li><code lang="en">_parent</code>.</li>
</ul>
<p>Pour toutes les autres valeurs de <code lang="en">target</code>, l’élément sur lequel il est positionné ouvrira une nouvelle fenêtre ou un nouvel onglet. C’est le cas de la valeur <code lang="en">_blank</code> par exemple, mais également de toute autre valeur (numérique ou alphabétique) non définie par la spécification. Il est à noter d’ailleurs que ces valeurs ne provoquent pas d’erreur lors de la validation du code source en HTML5.</p>
<h3 id="audiodescription-etendue">Audio-description étendue</h3>
<p>Audio-description ajoutée à une présentation audiovisuelle en mettant en pause la vidéo de manière à avoir le temps d’ajouter des descriptions supplémentaires. <strong>Note</strong> : cette technique est à utiliser seulement si le sens de la vidéo est perdu sans audio-description supplémentaire et que les pauses entre les dialogues ou la narration sont trop courtes.</p>
<h3 id="audiodescription-synchronisee">Audio-description synchronisée (média temporel)</h3>
<p>Narration ajoutée (<i>via</i> 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’audio-description doit être synchronisée avec le média temporel grâce à l’utilisation de format spécialisés comme le format SRT par exemple.</p>
<ul>
<li><strong>Note 1</strong> : l’audio-description 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.</li>
<li><strong>Note 2</strong> : dans une audio-description standard, la narration est ajoutée durant les pauses qui existent dans le dialogue. (Voir aussi audio-description étendue.)</li>
<li><strong>Note 3</strong> : lorsque toute l’information de la vidéo est déjà donnée dans la piste audio, aucune audio-description supplémentaire n’est requise.</li>
</ul>
<h2 id="b">B</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#a">Lettre A</a></li>
<li class="goafter"><a href="#c">Lettre C</a></li>
</ul>
<h3 id="barre-de-navigation">Barre de navigation</h3>
<p>Liste de liens permettant une navigation spécifique dans le site, dans une rubrique ou dans une collection de pages. Les principales barres de navigation sont :</p>
<ul>
<li>Le menu de navigation principal ;</li>
<li>Un fil d’Ariane ;</li>
<li>Une liste de navigation d’une liste de résultats ;</li>
<li>Un menu de sous-rubrique.</li>
</ul>
<h3 id="bloc-dinformations-de-meme-nature">Bloc d’informations de même nature</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 par une balise <code lang="en">fieldset</code> accompagnée d’une balise <code lang="en">legend</code> pertinente. Dans le cas de boutons radio, la légende est généralement l’intitulé de la question.</p>
<p><strong>Note</strong> : lorsque le formulaire est uniquement 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), la présence de l’élément <code lang="en">fieldset</code> n’est pas obligatoire.</p>
<h3 id="bouton-formulaire">Bouton (formulaire)</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 input de type <code lang="en">submit</code>, <code lang="en">reset</code> ou <code lang="en">button</code> ;</li>
<li>Balise input de type <code lang="en">image</code> ;</li>
<li>Balise <code lang="en">button</code>.</li>
</ul>
<p>L’intitulé du bouton peut être de quatre types :</p>
<ul>
<li>Le contenu de l’attribut <code lang="en">value</code> des boutons de type <code lang="en">submit</code>, <code lang="en">reset</code> ou <code lang="en">button</code> ;</li>
<li>Le contenu de l’attribut <code lang="en">alt</code> d’un bouton de type <code lang="en">image</code> ;</li>
<li>Le contenu de l’attribut <code lang="en">title</code> lorsqu’il est présent ;</li>
<li>Le contenu de la balise <code lang="en">button</code>.</li>
</ul>
<h2 id="c">C</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#b">Lettre B</a></li>
<li class="goafter"><a href="#d">Lettre D</a></li>
</ul>
<h3 id="cadre-en-ligne">Cadre en ligne</h3>
<p>Élément HTML (balise <code lang="en">iframe</code>) permettant d’afficher un contenu dans la page Web dans laquelle il est implémenté.</p>
<h3 id="captcha">CAPTCHA</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>
<h3 id="champ-de-saisie">Champ de saisie de formulaire</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 lang="en">input type="text"</code> ;</li>
<li><code lang="en">input type="password"</code> ;</li>
<li><code lang="en">input type="search"</code> ;</li>
<li><code lang="en">input type="tel"</code> ;</li>
<li><code lang="en">input type="email"</code> ;</li>
<li><code lang="en">input type="number"</code> ;</li>
<li><code lang="en">input type="tel"</code></li>
<li><code lang="en">input type="url"</code> ;</li>
<li><code lang="en">textarea</code> ;</li>
</ul> </li>
<li>De sélectionner des valeurs prédéfinies :
<ul>
<li><code lang="en">input type="checkbox"</code> ;</li>
<li><code lang="en">input type="radio"</code> ;</li>
<li><code lang="en">input type="date"</code> ;</li>
<li><code lang="en">input type="range"</code> ;</li>
<li><code lang="en">input type="color"</code> ;</li>
<li><code lang="en">input type="time"</code> ;</li>
<li><code lang="en">select</code> ;</li>
<li><code lang="en">datalist</code> ;</li>
<li><code lang="en">optgroup</code> ;</li>
<li><code lang="en">option</code> ;</li>
<li><code lang="en">keygen</code> ;</li>
</ul> </li>
<li>De télécharger des fichiers :
<ul>
<li><code lang="en">input type="file"</code> ;</li>
</ul> </li>
<li>Ou d’afficher des résultats :
<ul>
<li><code lang="en">output</code> ;</li>
<li><code lang="en">progress</code> ;</li>
<li><code lang="en">meter</code>.</li>
</ul> </li>
</ul>
<p>Les objets de formulaires suivants ne sont pas considérés comme des champs de formulaires :</p>
<ul>
<li><code lang="en">input type="submit"</code> ;</li>
<li><code lang="en">input type="reset"</code> ;</li>
<li><code lang="en">input type="hidden"</code> ;</li>
<li><code lang="en">input type="image"</code> ;</li>
<li><code lang="en">input type="button"</code> ;</li>
<li><code lang="en">button</code>.</li>
</ul>
<h3 id="changements-brusques-de-luminosite">Changement brusque de luminosité ou effet de flash</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>
<h3 id="changement-de-contexte">Changement de contexte</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>
<ol>
<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>
</ol>
<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><strong>Exemple</strong> : 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’exemples d’un changement de contexte.</p>
<h3 id="changement-de-langue">Changement de langue</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 changement de langue concernent tous les contenus, y compris les valeurs de certains attributs comme <code lang="en">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 lang="en">title</code> en anglais devra comporter un attribut <code lang="en">lang="en"</code>. Lorsque l’attribut contient plusieurs passage de texte dans des langues différentes, le critère est non applicable.</p>
<h3 id="code-de-langue">Code de langue</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="en">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>
<h3 id="code-valide">Code valide</h3>
<ul>
<li>Cas d’une page HTML : code dans lequel l’implémentation des balises et des attributs respecte les spécifications du type de document déclaré.
<ul>
<li><strong>Note 1</strong> : Sauf indication contraire, les attributs non répertoriés par les spécifications sont non applicables.</li>
<li><strong>Note 2</strong> : Sauf indication contraire, les balises non répertoriées par les spécifications sont non applicables.</li>
<li><strong>Note 3</strong> : La <a hreflang="en" href="http://www.w3.org/TR/xhtml1/#C_3">règle C3 de la spécification XHTML ("Minimisation d’élément et contenu d’élément vide", en anglais)</a> stipule que l’utilisation d’éléments minimisés (<code lang="en"><elm /></code>) pour des éléments vides (par exemple <code lang="en"><p /></code> à la place de <code lang="en"><p></p></code>) est déconseillée. Cette pratique constitue une non-conformité dans le cadre de RGAA.</li>
</ul> </li>
<li>Cas d’une page implémentant WAI-ARIA : code dans lequel l’implémentation des balises et des attributs respecte les spécifications du type de document déclaré et dans lequel l’implémentation WAI ARIA est conforme à la spécification WAI-ARIA.</li>
</ul>
<h3 id="collection-de-pages">Collection de pages</h3>
<p>Pages reliées les unes aux autres par des liens et ayant un thème ou une nature commune. Par exemple, les pages de résultats d’un moteur de recherche ou les pages d’un catalogue (pour une même recherche) sont des collections de pages.</p>
<h3 id="compatible-technologies-assistance">Compatible avec les technologies d’assistance</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 <i>via</i> 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 changement 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>
<h3 id="comprehensible">Compréhensible (ordre de lecture)</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>
<h3 id="composants">Composant d'interface</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 l'API ARIA.</p>
<h3 id="contenu-visible">Contenu visible</h3>
<p>Pour le <a href="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 <i>via</i> CSS est formellement déconseillée, même si elle est accompagnée d’un texte caché.</p>
<h3 id="contexte-lien">Contexte du lien</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 rendre un lien explicite 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 lang="en">p</code>) dans lequel le lien texte est présent ;</li>
<li>Le contenu de l’item de liste (balise <code lang="en">li</code>) ou le contenu d’un item de liste parent (balise <code lang="en">li</code>) dans lequel le lien texte est présent ;</li>
<li>Le contenu du titre (balise <code lang="en">h</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 lang="en">th</code>) associée(s) à la cellule de donnée (balise <code lang="en">td</code>) dans laquelle le lien texte est présent ;</li>
<li>Le contenu de la cellule de donnée (balise <code lang="en">td</code>) dans laquelle le lien texte est présent ;</li>
<li>Le contenu du titre de lien (attribut <code lang="en">title</code>) ;</li>
<li>Le contenu de la propriété <code lang="en">aria-label</code> ;</li>
<li>Le contenu du passage de texte lié par la propriété <code lang="en">aria-labelledby</code> ;</li>
</ul>
<p><strong>Note 1 :</strong> l’un des 9 contextes de lien doit permettre à lui seul d’expliciter le lien.</p>
<p><strong>Note 2 :</strong> RGAA 3 considère que des liens particuliers comme des liens de type mailto (qui génère un lien sous la forme d’une adresse email cliquable) sont suffisamment explicites et ne requiert pas de signaler, <i>via</i> un title, 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 <i>via</i> le client de messagerie pour l’une, accéder à un formulaire pour l’autre) il peut être nécessaire de donner des informations complémentaire sur l’action du lien afin de différencier leurs comportements.</p>
<h3 id="contraste">Contraste</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 RsRGB >= 0,03928 alors R = RsRGB/12,92 sinon R = ((RsRGB+0,055)/1,055) ^ 2,4 ;</li>
<li>Si GsRGB >= 0,03928 alors G = GsRGB/12,92 sinon G = ((GsRGB+0,055)/1,055) ^ 2,4 ;</li>
<li>Si BsRGB >= 0,03928 alors B = BsRGB/12.92 sinon B = ((BsRGB+0,055)/1,055) ^ 2,4 ;</li>
</ul>
<p>et RsRGB, GsRGB et BsRGB sont définis par :</p>
<ul>
<li>RsRGB = R8bit/255 ;</li>
<li>GsRGB = G8bit/255 ;</li>
<li>BsRGB = 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 hreflang="en" href="http://www.w3.org/TR/WCAG20-TECHS/G18.html#G18-procedure">Procédure de calcul de contraste des WCAG (en anglais)</a>.</p>
<h3 id="controle-mouvement">Contrôle (contenu en mouvement ou clignotant)</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édia temporels pris en charge par la thématique multimédia, sont concernés : les images animés (par exemple un gif animé), les contenus en mouvement proposés <i>via</i> une balise <code lang="en">object</code>, du code <code lang="en">JavaScript</code> ou des effets <code lang="en">CSS</code> 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 <i>via</i> un événement déclenché uniquement sur la prise de focus ne permet pas de valider le critère.</p>
<p><strong>Note 2 :</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’utilsateur, 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>
<h3 id="controle-son">Contrôle (son déclenché automatiquement)</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>
<h3 id="controle-consultation">Contrôle de la consultation (d’un média temporel)</h3>
<p>Possibilité pour l’utilisateur de contrôler la consultation d’un média temporel par le clavier et la souris, 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é de contrôle du volume ;</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 audio-description, il doit avoir une fonctionnalité de contrôle de l’apparition/disparition de l’audio-description.</li>
</ul> </li>
<li>Chaque fonctionnalité doit être accessible par le clavier, <i>via</i> la touche de tabulation, et par la souris au moins ;</li>
<li>Chaque fonctionnalité doit être activable par le clavier et par la souris, 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é de contrôle du volume.</p>
<h3 id="controle-de-saisie-formulaire">Contrôle de saisie (formulaire)</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 lang="en">required</code> ou <code lang="en">pattern</code>), des propriétés WAI-ARIA (comme <code lang="en">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 lang="en">url</code>, <code lang="en">email</code>, <code lang="en">date</code>, <code lang="en">time</code> par exemple.</p>
<p><strong>Note importante</strong> : lorsqu’une page est renvoyée avec des erreurs de saisie le titre de la page doit comporter la mention <strong>"erreur sur le formulaire"</strong>.</p>
<h2 id="d">D</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#c">Lettre C</a></li>
<li class="goafter"><a href="#e">Lettre E</a></li>
</ul>
<h3 id="description-detaillee-image">Description détaillée (image)</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 insérée <i>via</i> :</p>
<ul>
<li>Un attribut <code lang="en">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, dans l’attribut <code lang="en">alt</code>, à une description détaillée adjacente à l’image ;</li>
<li>Un lien adjacent à l’image qui contient l’adresse d’une page ou d’un emplacement dans la page contenant la description détaillée.</li>
</ul>
<h2 id="e">E</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#d">Lettre D</a></li>
<li class="goafter"><a href="#f">Lettre F</a></li>
</ul>
<h3 id="ensemble-de-pages">Ensemble de pages</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’un processus de paiement électronique, 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>
<h3 id="entete-de-colonne-ou-de-ligne">En-tête de colonne ou de ligne</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). Les en-têtes doivent utiliser une balise <code lang="en">th</code>.</p>
<h3 id="environnement-maitrise">Environnement maîtrisé</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, <span lang="en">Silverlight</span>…) ;</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>
<h3 id="etiquette">Étiquette de champ de formulaire</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 lang="en">label</code> ;</li>
<li>Par l’utilisation de la propriété WAI-ARIA <code lang="en">aria-label</code> ;</li>
<li>Par l’utilisation d’une liaison entre le texte et le champ par la propriété WAI-ARIA <code lang="en">aria-labelledby</code> ;</li>
<li>Par l’utilisation de l’attribut <code lang="en">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>
<ol>
<li><code lang="en">aria-labelledby</code> ;</li>
<li>Sinon <code lang="en">aria-label</code> ;</li>
<li>Sinon <code lang="en">label</code> ;</li>
<li>Sinon <code lang="en">title</code>.</li>
</ol>
<p>Cet ordre doit être utilisé pour l’évaluation de la pertinence de l’étiquette (<a href="criteres.html#crit-11-2">critère 11.2</a>). Par exemple, même dans le cas de la présence d’un <code lang="en">label</code>, c’est le passage de texte référencé par <code lang="en">aria-labelledby</code> qui doit être pris en compte.</p>
<p>Référence : <a lang="en" hreflang="en" href="http://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-calculation">Accessible name and description calculation</a>.</p>
<p><strong>Note importante au sujet de l’utilisation de <code lang="en">placeholder</code></strong> : lorsque l’attribut <code lang="en">placeholder</code> est présent, il est susceptible d’être restitué à la place de l’attribut <code lang="en">title</code>. Par conséquent, lorsque ces deux attributs <code lang="en">title</code> et <code lang="en">placeholder</code> sont présents, ils doivent être identiques.</p>
<h3 id="etiquettes-coherentes">Étiquettes cohérentes</h3>
<p>Les étiquettes 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>
<h2 id="f">F</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#e">Lettre E</a></li>
<li class="goafter"><a href="#i">Lettre I</a></li>
</ul>
<h3 id="feuille-de-style">Feuille de style</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 <i>via</i> l’attribut <code lang="en">style</code> d’une balise).</p>
<h3 id="fonctionnalites-de-controle">Fonctionnalités de contrôle (média temporel)</h3>
<p>Il s’agit des fonctionnalités de contrôle de la consultation (objet multimédia) suivantes :</p>
<ul>
<li>L’objet multimédia doit toujours avoir les fonctionnalités suivantes, au minimum : lecture, pause, stop ;</li>
<li>Si l’objet multimédia a du son, il doit avoir une fonctionnalité permettant d’activer ou de désactiver le son et d’en contrôler le niveau sonore ;</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 audio-description, il doit avoir une fonctionnalité de contrôle de l’apparition/disparition de l’audio-description.</li>
</ul>
<p><strong>Note</strong> : s’il n’y a pas de son à un objet multimédia, il n’est pas utile de mettre une fonctionnalité de contrôle du volume. Si cette fonctionnalité est cependant présente et qu’elle nécessite une alternative textuelle pour être comprise par certains utilisateurs (exemple : bouton "volume" dans une vidéo en Flash), il faut alors lui en donner une puisque l’utilisateur est susceptible d’y accéder et de vouloir l’activer.</p>
<h2 id="i">I</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#f">Lettre F</a></li>
<li class="goafter"><a href="#j">Lettre J</a></li>
</ul>
<h3 id="image-de-decoration">Image de décoration</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 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>
<h3 id="image-objet">Image objet</h3>
<p>Image incorporée ou générée par une balise <code lang="en">object</code>.</p>
<h3 id="image-porteuse-dinformation">Image porteuse d’information</h3>
<p>Image qui véhicule une information nécessaire à la compréhension du contenu auquel elle est associée.</p>
<h3 id="image-reactive">Image réactive</h3>
<ol>
<li><strong>Image réactive</strong> côté client (attribut <code lang="en">usemap</code>) : image divisée en zones cliquables ou neutres (attribut <code lang="en">nohref</code>).</li>
<li><strong>Image réactive côté serveur</strong> (attribut <code lang="en">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>
</ol>
<p><strong>Note :</strong> en HTML5, l’attribut <code lang="en">ismap</code> est obsolète non conforme pour les boutons de type image (<code lang="en">input type="image"</code>).</p>
<h3 id="image-test">Image-test</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>
<h3 id="image-texte">Image texte</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="criteres.html#crit-1-8">critère 1.8 [<span aria-label="double-A"><span aria-hidden="true">AA</span></span>]</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="#texte-style">texte stylé</a> en CSS.</p>
<h3 id="image-texte-objet">Image texte objet</h3>
<p>Image générée par la balise <code lang="en">object</code> et affichant du texte.</p>
<h3 id="image-vehiculant-une-information-donnee-par-la-couleur">Image véhiculant une information (donnée par la couleur)</h3>
<p>Image dont tout ou partie du contenu transmet visuellement une information par l’intermédiaire d’une couleur uniquement.</p>
<h3 id="indication-forme-taille-position">Indication donnée par la forme, la taille ou la position</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 tout autre effet graphique similaire.</p>
<h3 id="information-donnee-par-la-couleur">Information (donnée par la couleur)</h3>
<p>Information transmise visuellement par l’intermédiaire d’une couleur. L’indication que les champs en rouge sont obligatoires dans un formulaire, un changement de couleur de fond pour indiquer la page active dans un menu de navigation, le changement de couleur d’un nom d’article pour indiquer son indisponibilité dans une liste d’article sont autant d’exemples d’indication donnée par la couleur.</p>
<p>L’indication donnée uniquement par la couleur doit être accompagnée d’une autre méthode à destination des utilisateurs qui ne voient pas ou perçoivent mal les couleurs ou leurs associations.</p>
<p>L’autre moyen de récupérer une information par la couleur peut être très divers, lorsqu’il s’agit d’un moyen faisant intervenir du graphisme (utilisation de CSS ou d’élément graphique) l’indication visuelle pourrait devoir être accompagnée d’une indication textuelle. Par exemple, un effet de bordure, de gras, de changement typographique ou autre dispositif similaire sera jugé insuffisant car ces indications ne seront pas accessibles aux personnes aveugles, notamment.</p>
<h3 id="intitule-de-lien">Intitulé de lien</h3>
<p>Information textuelle comprise entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code> d’un lien, complété si nécessaire d’informations de contexte.</p>
<p>Les 4 différents types de liens sont :</p>
<ul>
<li>Lien texte : il s’agit du texte compris entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code>, complété si nécessaire d’informations de contexte ;</li>
<li>Lien image : il s’agit du contenu de l’alternative textuelle de l’image comprise entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code>, complété si nécessaire d’informations de contexte ;</li>
<li>Lien composite : il s’agit de l’ensemble du texte et du contenu de l’alternative textuelle de la ou des images compris entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code>, complété si nécessaire d’informations de contexte ;</li>
<li>Lien vectoriel : il s’agit du contenu de l’alternative textuelle de l’image vectorielle (balise <code lang="en">svg</code>) comprise entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code> complété si nécessaire d’informations de contexte. L’intitulé de lien pour un lien vectoriel est le contenu de l’alternative textuelle de l’image vectorielle.</li>
</ul>
<p><strong>Note 1 :</strong> voir la définition de <a href="#lien-image">lien image</a> pour plus de précisions.</p>
<p><strong>Note 2 :</strong> un lien image pour lequel l’attribut <code lang="en">alt</code> est absent est considéré comme non applicable pour le critère 6.5.</p>
<h2 id="j">J</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#i">Lettre I</a></li>
<li class="goafter"><a href="#l">Lettre L</a></li>
</ul>
<h3 id="taille-caracteres">Jusqu’à ou à partir de 150% (1.5em) de la taille de police par défaut sans effet de graisse. Jusqu’à ou à partir de 120% (1.2em) de la taille de police par défaut en gras</h3>
<p>Jusqu’à ou à partir de 120% (1.2em) de la taille de police par défaut en gras</p>
<p>Ces deux mesures déterminent la taille relative des caractères correspondant à une taille de caractères équivalent à 14 points gras ou 18 points sans effet de graisse en considérant que la police de corps (<code lang="en">body</code>) est à 100%.</p>
<p><strong>Note :</strong> jusqu’à 150% et jusqu’à 120% signifie que la taille des caractères est strictement inférieure à 150 ou 120%. À partir de 150% et à partir de 120% signifie que la taille des caractères est égale ou supérieure à 150 ou 120%.</p>
<p>La taille de police par défaut est la taille définie par l’auteur pour le document ou, en son absence, la taille par défaut utilisée par l’agent utilisateur (<abbr title="id est" lang="la">ie</abbr> le navigateur).</p>
<h2 id="l">L</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#j">Lettre J</a></li>
<li class="goafter"><a href="#m">Lettre M</a></li>
</ul>
<h3 id="langue-par-defaut">Langue par défaut</h3>
<p>Indication de la langue de traitement principale du document qui peut être présente sur l’élément racine <code lang="en">html</code> ou sur chaque élément de la page concerné <i>via</i> les attributs <code lang="en">lang</code> et/ou <code lang="en">xml:lang</code> selon le schéma suivant :</p>
<ul>
<li>Pour HTML jusqu’à la version 4.01 : attribut <code lang="en">lang</code> obligatoire, attribut <code lang="en">xml:lang</code> non supporté</li>
<li>Pour XHTML 1.0 servi en <code lang="en">"text/html"</code> : attribut <code lang="en">lang</code> et <code lang="en">xml:lang</code> obligatoires</li>
<li>Pour XHTML 1.0 servi en <code lang="en">"application/xhtml+xml"</code> : attribut <code lang="en">xml:lang</code> obligatoire, attribut <code lang="en">lang</code> recommandé</li>
<li>Pour XHTML 1.1 : attribut <code lang="en">xml:lang</code> obligatoire, attribut <code lang="en">lang</code> non supporté</li>
<li>Pour HTML5 : attribut <code lang="en">lang</code> obligatoire</li>
</ul>
<h3 id="nom-role-valeur-parametrage-changements-etats">Le nom, le rôle, la valeur, le paramétrage et les changements d’états</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 l’API ARIA <i>via</i> un rôle adh’oc. <strong>Important</strong> : les boutons (balises button ou input type="button") lorsqu’ils sont contrôlés <i>via</i> JavaScript sont à évaluer avec le <strong>critère 7.1</strong>.</p>
<p>Le nom peut être l’intitulé du composant comme 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 (slider).</p>
<p>Le rôle correspond au type d’élément défini par la spécification HTML ou l’API WAI-ARIA (comme la balise <code lang="en">button</code> ou le rôle ARIA <code lang="en">role="button"</code>).</p>
<p>Le paramétrage correspond aux informations particulières d’un composant, généralement mis à disposition par l’API WAI-ARIA. Par exemple <code lang="en">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 lang="en">id</code>).</p>
<p>Les changements d’états sont également mis à disposition par l’API WAI-ARIA. Par exemple <code lang="en">aria-expanded</code> est un état permettant de signaler aux APIs que le composant est "ouvert" ou "fermé". <strong>Note :</strong> un état peut également être transmis <i>via</i> 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’il sont présents, ces paramètres sont correctement utilisés.</p>
<p><strong>Note :</strong> les rôles, propriétés et états ARIA s’implémentent <i>via</i> des attributs, par exemple <code lang="en">role="banner"</code>, <code lang="en">aria-hidden="true"</code>.</p>
<h3 id="legende-dimage">Légende d’image</h3>
<p>Lorsqu’un texte, adjacent à une image, contient des informations sur l’image (par exemple un <span lang="en">copyright</span>, 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 <i>via</i> les éléments <code lang="en">figure</code> (l’ensemble de l’image et la légende) et <code lang="en">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 lang="en">figure</code> ;</li>
<li>Une image insérée dans un élément <code lang="en">figure</code> sans élément <code lang="en">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 lang="en">figure</code>, <code lang="en">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 hreflang="en" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text"><span lang="en">Requirements for providing text to act as an alternative for images</span></a> du W3C.</p>
<h3 id="lien">Lien</h3>
<p>Élément HTML (balise <code lang="en">a</code>) activable par l’utilisateur (par la souris, le clavier…) et déclenchant une action (affichage d’une page Web, téléchargement d’un fichier…) ou un événement généré par un script. Un lien possède au minimum :</p>
<ul>
<li>Une référence de ressource (attribut <code lang="en">href</code>) ;</li>
<li>Un intitulé de lien compris entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code>.</li>
</ul>
<h3 id="lien-adjacent">Lien adjacent</h3>
<p>Lien présenté de manière adjacente dans la représentation graphique (CSS activé) et dans le code HTML. Dans le code HTML, le lien doit se situer juste avant ou juste après l’objet avec lequel il est adjacent.</p>
<h3 id="lien-composite">Lien composite</h3>
<p>Lien dont le contenu entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code> est constitué de 2 éléments de type différent, au moins ; par exemple, du texte et une ou plusieurs images. L’intitulé de lien pour un lien composite est l’ensemble du texte et du contenu de l’alternative textuelle de ou des images compris entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code>.</p>
<p><strong>Note importante</strong>: il est rappelé que l’utilisation de deux liens adjacents (lien image et lien texte) et identiques constitue une gêne importante pour l’utilisateur. Même si cela ne constitue pas une non-conformité, cet usage devrait être évité. Une manière de traiter ce type de liens est d’inclure l’image dans le lien texte de façon à constituer un lien composite, ce qui évitera la redondance.</p>
<p>Vous pouvez consulter à ce sujet la technique <a hreflang="en" href="http://www.w3.org/TR/WCAG20-TECHS/H2.html">H2 : <span lang="en">Combining adjacent image and text links for the same resource</span></a>.</p>
<h3 id="lien-nature-pas-evidente">Lien dont la nature n’est pas évidente</h3>
<p>Lien qui peut être confondu avec un texte normal lorsqu’il est signalé uniquement par la couleur par certains types d’utilisateurs ne percevant pas ou mal les couleurs. Par exemple, dans ce texte "Nouvelle grève à la SNCF", si le mot "grève" est un lien signalé uniquement par la couleur, sa nature peut être ignorée par les utilisateurs ne percevant pas la couleur et accédant au contenu CSS activées. En revanche, dans ce texte " Nouvelle grève à la SNCF, lire la suite" si "lire la suite" est un lien, un utilisateur ne percevant pas les couleurs n’aura pas de problème pour en comprendre la nature.</p>
<p><strong>Note</strong> : "signalés uniquement par la couleur" signifie que le lien n’est accompagné d’aucun marqueur visuel (icône, soulignement, bordure…). En conséquence un lien de la même couleur que le texte environnant est concerné par ce critère.</p>
<h3 id="lien-explicite-hors-contexte">Lien explicite hors contexte</h3>
<p>Un lien est explicite hors contexte lorsque l’intitulé du lien seul (contenu entre la balise <code lang="en"><a href="…"></code> et <code lang="en"></a></code>) permet de connaître et de comprendre la fonction et la destination du lien.</p>
<h3 id="lien-image">Lien image</h3>
<p>Lien dont le contenu entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code> est uniquement constitué d’une image. L’intitulé de lien pour un lien image est le contenu de l’alternative textuelle de l’image.</p>
<p>Un lien image peut être constitué :</p>
<ul>
<li>D’une image (balise <code lang="en">img</code>), l’alternative est le contenu de l’attribut <code lang="en">alt</code> ;</li>
<li>D’une zone cliquable (balise <code lang="en">area</code>) possédant un attribut <code lang="en">href</code>, l’alternative est le contenu de l’attribut <code lang="en">alt</code> ;</li>
<li>D’une image objet (balise <code lang="en">object</code>), l’alternative est contenue entre <code lang="en"><object></code> et <code lang="en"></object></code> ;</li>
<li>D’une image bitmap (balise <code lang="en">canvas</code>), l’alternative est contenue entre <code lang="en"><canvas></code> et <code lang="en"></canvas></code> ;</li>
<li>D’une image embarquée (balise <code lang="en">embed</code>), l’alternative est contenue entre <code lang="en"><embed></code> et <code lang="en"></embed></code> ;</li>
<li>D’une image vectorielle (balise <code lang="en">svg</code>), l’alternative est contenue dans les attributs <code lang="en">title</code>, <code lang="en">aria-label</code> ou la balise <code lang="en"><desc></code>.</li>
</ul>
<p><strong>Note au sujet de <code lang="en">embed</code></strong> : en HTML5, la balise <code lang="en">embed</code> a été modifiée. C’est une balise autofermante qui ne peut pas embarquer de contenu alternatif. Les propriétés ARIA, comme <code lang="en">aria-label</code> qui permettrait d’embarquer une alternative, n’étant pas supportées de manière uniforme, il n’est pas possible d’utiliser une image embarquée, porteuse d’information, <i>via</i> l’élément <code lang="en">embed</code> HTML5.</p>
<h3 id="lien-texte">Lien texte</h3>
<p>Lien dont le contenu entre <code lang="en"><a href="…"></code> et <code lang="en"></a></code> est uniquement constitué de texte (il s’agit de son intitulé de lien).</p>
<h3 id="liens-evitement">Liens d’évitement ou d’accès rapide</h3>
<p>Liens dont la fonction est de permettre de naviguer à l’intérieur du contenu (lien d’évitement, lien d’accès au formulaire de recherche ou au menu..).</p>
<h3 id="liens-identiques">Liens identiques</h3>
<p>Deux liens sont dits identiques quand le lien x (intitulé du lien seul, contenu de l’attribut <code lang="en">title</code> ou contexte du lien) est égal au lien y. Cette définition s’applique à tous les types de liens : lien texte, lien image (les liens ont alors la même image) et lien composite.</p>
<p><strong>Attention</strong> : des liens avec des intitulés identiques mais des titres de liens différents ou des contextes de liens différents ne sont pas identiques (exemple : <code lang="en"><a href="lien_bar.html" title="<span lang="fr">cliquer ici pour télécharger la barre d’outils</span>"></code>cliquer ici<code lang="en"></a></code> et <code lang="en"><a href="lien_doc.html" title="<span lang="fr">cliquer ici pour télécharger le document</span>"></code><span lang="fr">cliquer ici</span><code lang="en"></a></code>).</p>
<h3 id="liste-de-choix">Liste de choix</h3>
<p>Champ de formulaire affichant une série d’items à sélectionner sous forme d’une liste déroulante (balise <code lang="en">select</code> avec des balises <code lang="en">option</code>).</p>
<h3 id="listes">Listes</h3>
<p>Suite d’éléments pouvant être regroupés sous la forme d’une liste structurée ordonnée, non ordonnée ou de définition. Par exemple la suite des liens d’un menu de navigation est une liste de liens non ordonnée, les différentes étapes d’une procédure est une liste d’éléments ordonnés, le couple terme/définition d’un glossaire est une liste de définition. En HTML, les listes utilisent les balises suivantes :</p>
<ul>
<li>Liste ordonnée : balises <code lang="en">ol</code> et <code lang="en">li</code> (chaque élément de la liste est affecté d’un marqueur indéxé) ;</li>
<li>Liste non ordonnée : balises <code lang="en">ul</code> et <code lang="en">li</code> (chaque élément de la liste est affecté d’un marqueur non-indéxé ;</li>
<li>Liste de définition : balises <code lang="en">dl</code>, <code lang="en">dt</code> (terme à définir) et <code lang="en">dd</code> (définition).</li>
</ul>
<h2 id="m">M</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#l">Lettre L</a></li>
<li class="goafter"><a href="#o">Lettre O</a></li>
</ul>
<h3 id="mecanisme-de-remplacement">Mécanisme de remplacement</h3>
<p>Mécanisme généralement basé sur CSS, permettant à l’utilisateur de remplacer du texte par du texte en image et inversement sur le principe du <span lang="en">style switcher</span>. Le mécanisme peut utiliser un langage de script côté serveur ou un langage de script côté client.</p>
<h3 id="media-non-temporel">Média non temporel</h3>
<p>Contenu qui ne se déroule pas dans le temps, consultable <i>via</i> un plugin (Flash, Java, Silverlight…) ou <i>via</i> les éléments <code lang="en">svg</code> et <code lang="en">canvas</code> ; par exemple, une carte interactive en Flash, une application Flash ou Java, un diaporama sont des médias non temporels. Un média non temporel peut contenir des médias temporels (un lecteur Flash qui propose une liste de vidéos à consulter, par exemple).</p>
<p><strong>Note</strong> : l’utilisation du paramètre <code lang="en">wmode</code> pour un objet Flash avec les valeurs <code lang="en">"transparent"</code> et <code lang="en">"opaque"</code> invalide de fait le <a href="criteres.html#crit-4-21">critère 4.21 (La consultation de chaque média non temporel est-elle contrôlable par le clavier et la souris ?)</a>. En effet, l’utilisation de ces valeurs a pour conséquence que l’animation Flash vue du côté des utilisateurs de lecteur d’écran est invisible.</p>
<h3 id="media-temporel">Média temporel (type son, vidéo et synchronisé)</h3>
<ul>
<li>Média temporel seulement audio : contenu sonore (<span lang="en">Wave</span>, Mp3…) ;</li>
<li>Média temporel seulement vidéo : images ou photos en mouvement ou en séquence ;</li>
<li>Média temporel synchronisé : flux audio ou vidéo synchronisé avec un autre format pour présenter de l’information et/ou comportant des composants temporels interactifs. Un média temporel peut être consulté de 2 manières différentes :
<ul>
<li>Fichier à télécharger consultable avec un logiciel externe à la page Web ;</li>
<li>Contenu embarqué dans la page Web et consultable dans la page Web <i>via</i> :
<ul>
<li>Un plugin (par exemple une vidéo diffusée par un lecteur Flash) ;</li>
<li>L’élément <code lang="en">video</code> (par exemple une vidéo) ;</li>
<li>L’élément <code lang="en">audio</code> (par exemple un podcast) ;</li>
<li>L’élément <code lang="en">svg</code> (par exemple un dessin animé vectoriel) ;</li>
<li>L’élément <code lang="en">canvas</code> (par exemple un dessin animé en image bitmap).</li>
<li>L’élément <code lang="en">bgsound</code> pour diffuser un arrière-plan sonore à la page Web.</li>
</ul> </li>
</ul> </li>
</ul>
<p>Un média temporel peut être diffusé en temps réel ou être proposé en lecture de manière asynchrone (média pré-enregistré).</p>
<p><strong>Note 1</strong> : l’utilisation du paramètre <code lang="en">wmode</code> pour un objet Flash avec les valeurs <code lang="en">"transparent"</code> et <code lang="en">"opaque"</code> invalide de fait le <a href="criteres.html#crit-4-20">critère 4.20 (La consultation de chaque média temporel est-elle contrôlable par le clavier et la souris ?)</a>. En effet, l’utilisation de ces valeurs a pour conséquence que l’animation Flash vue du côté des utilisateurs de lecteur d’écran est invisible.</p>
<p><strong>Note 2</strong> : les gif animés, les animations d’images réalisées par JavaScript ou CSS ne sont pas considérés comme étant des médias temporels.</p>
<p><strong>Note 3</strong> : l’élément <code lang="en">bgsound</code> est spécifique à <span lang="en">Internet Explorer</span> et ne devrait pas être utilisé.</p>
<h3 id="menu-de-navigation">Menu de navigation</h3>
<p>Zone contenant des liens qui permettent de naviguer dans les rubriques principales du site. Il s’agit généralement du menu principal et des menus contextuels.</p>
<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>
<p>Voir la définition technique de zone d’en-tête fournie par l’API ARIA <a href="http://www.w3.org/WAI/PF/aria/roles#navigation"><span lang="en">navigation (role)</span></a>.</p>
<h3 id="modification-role-natif-element-html">Modification du rôle natif d’un élément HTML</h3>
<p>La spécification WAI-ARIA permet de modifier le rôle natif d’un élément, par exemple modifier un élément <code lang="en">a href=""</code> en élément <code lang="en">button</code>.</p>
<p>Ces modifications ne peuvent être réalisées que sous certaines conditions décrites dans le document : <a hreflang="en" href="http://www.w3.org/TR/aria-in-html/"><span lang="en">Notes on Using WAI-ARIA in HTML</span></a> qui définit un certain nombre de restrictions notamment.</p>
<p>Pour qu’une modification du rôle natif d’un élément HTML <i>via</i> WAI-ARIA soit compatible, il faut que les restrictions soient respectées.</p>
<h3 id="moteur-de-recherche">Moteur de recherche (interne à un site Web)</h3>
<p>Zone contenant le moteur de recherche permettant d’effectuer des recherches sur les contenus de l’ensemble du site</p>
<p><strong>Note :</strong> Attention à ne pas confondre cette zone de recherche, unique dans le site, avec tout autre moteur de recherche permettant par exemple de faire des recherches sur une partie restreinte du site : un catalogue, les offres sur une section marchés publics…</p>
<p>Voir la définition technique de zone d’en-tête fournie par l’API ARIA <a href="http://www.w3.org/WAI/PF/aria/roles#search"><span lang="en">search (role)</span></a>.</p>
<h3 id="motif-de-conception">Motif de conception</h3>
<p>Un motif de conception (<span lang="en">Design Pattern</span>) est un modèle défini par l’API WAI-ARIA qui décrit la structure, les rôles et propriétés et le comportement que doit respecter un composant JavaScript (<span lang="en">widget</span>).</p>
<p>Les motifs de conception sont décrits dans le document : <a hreflang="en" href="http://www.w3.org/TR/wai-aria-practices/"><span lang="en">WAI-ARIA 1.0 Authoring Practices</span></a>.</p>
<p>Un composant développé avec JavaScript doit respecter le motif de conception correspondant au rôle WAI-ARIA utilisé.</p>
<p><strong>Note 1:</strong> compte tenu du manque de support de certaines propriétés et de certains rôles WAI-ARIA et de la grande variabilité des situations dans lesquelles un composant JavaScript peut être proposé, il est possible d’adapter des motifs de conception à des contextes ou des utilisations particulières. Dans ce cas, le motif de conception adapté doit :</p>
<ul>
<li>Respecter la structure générale, par exemple un ensemble de panneaux (rôle <code lang="en">tabpanel</code>) d’un système d’onglets est forcément lié à un ensemble d’onglets (rôle <code lang="en">tablist</code>) ;</li>
<li>Utiliser en remplacement d’un role ou d’une propriété WAI-ARIA mal supporté, un rôle ou une propriété WAI-ARIA équivalent, offrant un comportement et une restitution similaire.</li>
</ul>
<p><strong>Note 2:</strong> Cela ne concerne pas le fait d’enrichir un motif de conception de rôles ou propriétés WAI-ARIA supplémentaires dont la compatibilité avec l’accessibilité est contrôlée par le test de restitution sur la base de référence. Par exemple l’ajout de la propriété <code lang="en">aria-hidden</code> sur les panneaux (rôle <code lang="en">tabpanel</code>) d’un système d’onglets ne définit pas un motif de conception adapté.</p>
<h2 id="o">O</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#m">Lettre M</a></li>
<li class="goafter"><a href="#p">Lettre P</a></li>
</ul>
<h3 id="ordre-de-tabulation">Ordre de tabulation</h3>
<p>Ordre dans lequel le focus se déplace (vers un élément suivant ou vers un élément précédent). L’ordre naturel est celui qui est implémenté <i>via</i> le code source. Lorsqu’il est modifié par l’utilisation de l’attribut <code lang="en">tabindex</code> ou par l’utilisation d’une commande JavaScript, c’est l’ordre modifié qui fait référence.</p>
<p><strong>Attention</strong> : lorsqu’un élément initie un changement dans la page (changement de contexte, gestion de zones cachées, ajout de contenu, gestion de champs de formulaire…) il est nécessaire d’activer l’élément qui initie le changement pour tester la cohérence de l’ordre de tabulation.</p>
<h2 id="p">P</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#o">Lettre O</a></li>
<li class="goafter"><a href="#r">Lettre R</a></li>
</ul>
<h3 id="page-plan-du-site">Page "plan du site"</h3>
<p>Page dédiée présentant l’arborescence d’un site Web, généralement sous forme de listes de liens organisées en rubriques et sous-rubriques donnant accès à l’ensemble des pages du site.</p>
<p><strong>Note 1</strong> : les liens du plan du site peuvent être constitués de balises <code lang="en">a</code> ou de balises <code lang="en">area</code>.</p>
<p><strong>Note 2</strong> : il n’est pas nécessaire que le plan du site contienne les liens vers toutes les pages du site, en revanche il est nécessaire qu’à partir du plan du site, l’utilisateur puisse atteindre l’ensemble des pages du site.</p>
<h3 id="pertinence">Pertinence (information autrement que par la couleur)</h3>
<p>Le moyen pour récupérer une information autrement que par la couleur doit être accessible à tous. Par exemple, dans le cas d’une liste d’articles dont les articles en jaune sont en promotion, l’utilisation de texte caché <i>via</i> CSS est un moyen de récupérer l’information "en promotion", mais il n’est pas pertinent car cette information restera cachée à l’utilisateur qui visualise la page CSS activée.</p>
<p><strong>Note</strong> : l’utilisation d’une balise d’emphase (<code lang="en">strong</code> ou <code lang="en">em</code>) comme autre moyen pour récupérer une information donnée par la couleur permet de valider le critère même si ces éléments ne sont généralement pas supportés par les technologies d’assistance, particulièrement les lecteurs d’écrans.</p>
<h3 id="presentation-de-linformation">Présentation de l’information</h3>
<p>Restitution visuelle des contenus <i>via</i> un navigateur en mode graphique. La présentation concerne le style, la position et les dimensions des éléments HTML et de leur contenu. La présentation de l’information doit être réalisée <i>via</i> CSS. Les éléments (<code lang="en">basefont</code>, <code lang="en">blink</code>, <code lang="en">center</code>, <code lang="en">font</code>, <code lang="en">marquee</code>, <code lang="en">s</code>, <code lang="en">strike</code>, <code lang="en">tt</code>, <code lang="en">u</code>, <code lang="en">bing</code> et <code lang="en">small</code>) et les attributs (<code lang="en">align</code>, <code lang="en">alink</code>, <code lang="en">background</code>, <code lang="en">bgcolor</code>, <code lang="en">border</code>, <code lang="en">cellpading</code>, <code lang="en">cellspacing</code>, <code lang="en">char</code>, <code lang="en">charoff</code>, <code lang="en">clear</code>, <code lang="en">compact</code>, <code lang="en">color</code>, <code lang="en">frameborder</code>,<code lang="en">hspace</code>, <code lang="en">link</code>, <code lang="en">marginheight</code>, <code lang="en">marginwidth</code>, <code lang="en">text</code>, <code lang="en">valign</code>, <code lang="en">vlink</code>, <code lang="en">vspace</code>, <code lang="en">size</code>) sont interdits. </p>
<p>Note : Les attributs <code lang="en">width</code> et <code lang="en">height</code> utilisés sur d’autres éléments que les balises <code lang="en">img</code>, <code lang="en">object</code>, <code lang="en">embed</code>, <code lang="en">canvas</code> et <code lang="en">svg</code>, sont également interdits.</p>
<h3 id="prise-de-focus">Prise de focus</h3>
<p>La prise de focus est l’état renvoyé par un élément qui reçoit l’attention suite à une action de l’utilisateur. Il y a trois moyens en HTML de donner le focus à un élément :</p>
<ul>
<li>En activant l’élément par un dispositif de pointage (souris) ;</li>
<li>En activant l’élément par la touche tabulation ;</li>
<li>En activant l’élément par un raccourci clavier (<code lang="en">accesskey</code>).</li>
</ul>
<p>Certains éléments reçoivent naturellement le focus, par exemple : <code lang="en">a</code>, <code lang="en">area</code>, <code lang="en">button</code>, <code lang="en">input</code>, <code lang="en">object</code>, <code lang="en">select</code>, <code lang="en">label</code>, <code lang="en">legend</code>, <code lang="en">optgroup</code>, <code lang="en">option</code> et <code lang="en">textarea</code>. Le comportement de l’élément, lors de la prise de focus, dépend de sa nature ; un lien, par exemple, devra être activé après la prise de focus (sauf utilisation de script). En revanche, un élément de formulaire, comme <code lang="en">textarea</code>, devra autoriser la saisie suite à la prise de focus. Les éléments <code lang="en">label</code> et <code lang="en">legend</code> ne reçoivent la prise de focus que <i>via</i> le pointeur souris. Pour l’élément <code lang="en">label</code>, le comportement attendu est de transférer la prise de focus sur l’élément qui lui est associé.</p>
<p><strong>Note 1</strong> : la spécification WAI-ARIA étend le rôle attribué à l’attribut <code lang="en">tabindex</code> en définissant que tout élément html peut acquérir la possibilité de recevoir le focus en lui attribuant la valeur <code lang="en">tabindex="0"</code>. En revanche, aucun comportement n’est attribué <i>via</i> la seule présence de <code lang="en">tabindex</code>. De même, la valeur <code lang="en">tabindex="-1"</code> retire l’élément qui en est affecté du plan de tabulation en inhibant sa capacité à signaler la "prise de focus". L’utilisation de <code lang="en">tabindex</code>, conformément à la spécification WAI-ARIA, peut valider certains tests relatifs à la gestion du focus de tabulation, notamment.</p>
<p><strong>Note 2</strong> : l’indication visuelle du focus ne doit pas être dégradée, c’est à dire amoindrie au moyen de valeurs qui en dégrade le style par rapport à son style par défaut.</p>
<h3 id="procede-de-rafrachissement">Procédé de rafraîchissement</h3>
<p>Technique visant à modifier le contenu d’un ou de plusieurs éléments de la page Web. Le procédé de rafraîchissement peut s’effectuer par rechargement automatique de la page ou de manière dynamique sans rechargement de la page (<i>via</i> AJAX, par exemple). L’utilisateur doit pouvoir contrôler chaque procédé de rafraîchissement de manière indépendante.</p>
<h3 id="propriete-couleur">Propriété CSS déterminant une couleur</h3>
<p>Cela concerne les propriétés suivantes : <code lang="en">color</code>, <code lang="en">background-color</code>, <code lang="en">background</code>, <code lang="en">border-color</code>, <code lang="en">border</code>, <code lang="en">outline-color</code>, <code lang="en">outline</code>.</p>
<p><strong>Note</strong> : l’utilisation d’une image de fond pour insérer une couleur (propriété <code lang="en">background:url</code>…) est également concernée.</p>
<h3 id="proprietes-methodes-dom">Propriétés et méthodes conformes à la spécification DOM</h3>
<p>Les méthodes d’insertion de contenu conformes à la spécification DOM permettent de créer, insérer et manipuler des éléments <i>via</i> le DOM (par exemple <code lang="en">document.createElement</code> et <code lang="en">element.appendChild</code>) par opposition à la méthode <code lang="en">document.write</code> qui peut poser des problèmes dans certains contextes (voir : <a hreflang="en" href="https://www.w3.org/TR/html5/webappapis.html#dom-document-write">https://www.w3.org/TR/html5/webappapis.html#dom-document-write</a>).</p>
<h2 id="r">R</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#p">Lettre P</a></li>
<li class="goafter"><a href="#s">Lettre S</a></li>
</ul>
<h3 id="redirection">Redirection</h3>
<p>Procédé qui consiste pour l’affichage d’une page sur le poste client à rediriger l’utilisateur vers une autre page, sur le même domaine ou sur un domaine différent.</p>
<h3 id="correctement-restituee">Correctement restitué (par les technologies d’assistance)</h3>
<p>Lorsqu’un critère, un test ou une condition de test demande de vérifier la restitution d’un dispositif, il faut s’assurer que ladite restitution est compatible avec l’accessibilité.</p>
<p>Le test consiste à vérifier que la restitution est pertinente pour au moins une des combinaisons de la <a href="base.html">base de référence</a> utilisée pour déclarer qu’un élément, un dispositif ou une alternative est "compatible avec l’accessibilité".</p>
<p>Par exemple : le test 1.3.7 demande de vérifier que l’alternative d’une image porteuse d’information vectorielle est correctement restituée.</p>
<p>On procède alors à un test avec NVDA (dernière version) et <span lang="en">Firefox</span>, <span lang="en">JAWS</span> (version précédente) et IE9+, et <span lang="en">Voice Over</span> (dernière version) et Safari.</p>
<p>Si on constate que l’alternative est correctement restituée, le test est validé.</p>
<h3 id="resume-de-tableau">Résumé (de tableau)</h3>
<p>Un résumé est un passage de texte associé à un tableau de données complexe. Il permet de donner des informations sur la nature et la structure du tableau afin d’en faciliter l’utilisation par les utilisateurs de technologies d’assistance par exemple.</p>
<p><strong>Note :</strong> l’attribut <code lang="en">summary</code> est obsolète non conforme en HTML5 et ne doit plus être utilisé.</p>
<p>Parmi les 5 techniques proposées par HTML5, la seule technique utilisable actuellement est celle qui consiste à insérer le résumé directement dans le titre (balise <code lang="en">caption</code>) en masquant le résumé <i>via</i> CSS si nécessaire.</p>
<p><a href="notes-techniques.html#crit-5-1">Consulter la note technique au sujet du résumé de tableau</a>.</p>
<h2 id="s">S</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#r">Lettre R</a></li>
<li class="goafter"><a href="#t">Lettre T</a></li>
</ul>
<h3 id="script">Script</h3>
<p>Code généralement écrit sous forme d’une liste de commandes (par exemple JavaScript). Les langages interprétés côté client nécessitent un navigateur compatible sur lequel l’exécution du langage est active. Les commandes d’un langage de script côté client peuvent être embarquées ou contenues dans un fichier externe. Dans les deux cas, l’insertion se fait <i>via</i> la balise <code lang="en"><script></code>.</p>
<h3 id="sens-de-lecture">Sens de lecture</h3>
<p>Indique le sens de lecture du document ou d’un passage de texte <i>via</i> l’attribut <code lang="en">dir</code>, <code lang="en">dir="ltr"</code>, par exemple. Les deux valeurs reconnues sont :</p>
<ul>
<li><code lang="en">ltr</code> (<span lang="en">left to right</span>) indique un sens de lecture de gauche à droite ;</li>
<li><code lang="en">rtl</code> (<span lang="en">right to left</span>) indique un sens de lecture de droite à gauche.</li>
</ul>
<p><strong>Note</strong> : en l’absence d’indication de sens de lecture <i>via</i> l’attribut <code lang="en">dir</code> sur l’élément <code lang="en">html</code>, <code lang="en">body</code>, ou un des parents du texte analysé, le sens de lecture par défaut est de gauche à droite (valeur <code lang="en">ltr</code>).</p>
<h3 id="site-web">Site Web : ensemble de toutes les pages Web</h3>
<ul>
<li>Reliées par des liens Web ;</li>
<li>Appartenant au même nom de domaine (ex : references.modernisation.gouv.fr) ;</li>
<li>Qui constituent un ensemble cohérent du point de vue de l’utilisateur.</li>
</ul>
<p><strong>Cas particulier des pages Web d’un sous-domaine</strong> ; un sous-domaine peut :</p>
<ul>
<li>Soit appartenir au site Web attaché au nom de domaine, si l’utilisateur en a une perception cohérente avec les autres pages du site Web (par exemple : même structure, même navigation…) ;</li>
<li>Soit ne pas appartenir au site Web attaché au nom de domaine (par exemple : différents blogs en sous-domaine d’un nom de domaine et sans relation les uns avec les autres).</li>
</ul>
<h3 id="sous-titres-synchronises">Sous-titres synchronisés (objet multimédia)</h3>
<p>Texte des informations audio (paroles d’un personnage, bruit important pour comprendre l’action…) présentes dans un média temporel et affiché de manière synchrone avec le flux de l’objet multimédia.</p>
<p><strong>Note 1 :</strong> pour différencier les sources sonores (différents personnages, voix off…), il est recommandé d’utiliser un mécanisme approprié (mise entre crochets, mise en italique, annonce explicite du type "voix off : …").</p>
<p><strong>Note 2 :</strong> il ne faut pas confondre le sous-titrage pour la traduction (<code lang="en">kind="subtitles"</code> en HTML5 par exemple) et le sous-titrage pour sourds et malentendants (<code lang="en">kind="captions"</code> en HTML5 par exemple). Ces deux types de sous-titrage poursuivent des buts différents. Seule la présence et la pertinence d’un sous-titrage pour sourds et malentendants permet d’être conforme.</p>
<h3 id="systeme-de-navigation">Système de navigation</h3>
<p>Tout procédé permettant une navigation dans le site ou dans une page, les systèmes de navigation retenus sont :</p>
<ul>
<li>Menu de navigation principal ;</li>
<li>Table de contenu ;</li>
<li>Plan du site ;</li>
<li>Moteur de recherche.</li>
</ul>
<h2 id="t">T</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#s">Lettre S</a></li>
<li class="goafter"><a href="#u">Lettre U</a></li>
</ul>
<h3 id="tableau-de-donnees">Tableau de données</h3>
<p>Élément HTML (balise <code lang="en">table</code>) permettant de structurer des informations en lignes et en colonnes <i>via</i> des cellules de données (balise <code lang="en">td</code>) et des cellules d’en-têtes (balise <code lang="en">th</code>).</p>
<h3 id="tableau-de-donnees-complexe">Tableau de données complexe</h3>
<p>Lorsqu’un tableau de données contient des en-têtes qui ne sont pas répartis uniquement sur la première ligne et/ou la première colonne de la grille ou dont la portée n’est pas valable pour l’ensemble de la colonne ou de la ligne, on parle de tableau de données complexe. Il est alors nécessaire de fournir un "résumé" permettant d’en expliquer sa nature et sa structure afin d’en faciliter la consultation pour des utilisateurs de technologies d’assistance par exemple.</p>
<h3 id="tableau-de-mise-en-forme">Tableau de mise en forme</h3>
<p>Technique qui utilise un élément HTML (balise <code lang="en">table</code>) pour contrôler l’affichage d’informations <i>via</i> des cellules (balise <code lang="en">td</code>).</p>
<h3 id="taille-des-caracteres">Taille des caractères</h3>
<p>Valeur attribuée aux polices de caractères présentes sur une page Web. Pour les contenus Web, les tailles de caractères doivent être définies avec des unités relatives (<code>%</code>, <code lang="en">em</code>, <code lang="en">rem</code>, <code lang="en">vw</code>, <code lang="en">vh</code>, <code lang="en">vmin</code> ou <code lang="en">vmax</code>) ou des mots clés (<code lang="en">xx-small</code>, <code lang="en">x-small</code>, <code lang="en">small</code>, <code lang="en">medium</code>, <code lang="en">large</code>, <code lang="en">x-large</code>, <code lang="en">xx-large</code>, <code lang="en">xsmaller</code>, <code lang="en">larger</code>).</p>
<p><strong>Note</strong> : l’utilisation du pixel (<code lang="en">px</code>) est proscrite.</p>
<h3 id="texte-cache">Texte caché</h3>
<p>Les technologies d’assistance (notamment les lecteurs d’écran) ne restituent pas le texte masqué <i>via</i> les propriétés :</p>
<ul>
<li><code lang="en">display</code> avec la valeur none (<code lang="en">display:none</code>)</li>
<li><code lang="en">visibility</code> avec la valeur hidden (<code lang="en">visibility :hidden</code>)</li>
<li><code lang="en">width</code> et <code lang="en">height</code> avec les valeurs 0 (<code lang="en">width:0;height:0</code>)</li>
<li><code lang="en">font-size</code> avec la valeur 0 (<code lang="en">font-size:0</code>)</li>
<li>Attribut HTML5 <code lang="en">hidden</code></li>
<li>Propriété <code lang="en">aria-hidden="true"</code></li>
</ul>
<p>Tous les contenus texte utilisant une ou plusieurs de ces propriétés sont applicables pour le critère 10.13.</p>
<h3 id="texte-style">Texte stylé</h3>
<p>Texte dont la mise en forme est contrôlée par une feuille de styles.</p>
<h3 id="titre">Titre</h3>
<p>Élément HTML (balise <code lang="en">h</code>) à 6 niveaux de hiérarchie (de <code lang="en">h1</code> pour le titre le plus important à <code lang="en">h6</code> pour le moins important) permettant de structurer l’information d’un contenu Web. La hiérarchie entre les titres doit être respectée dans une page Web et les degrés de titre ne peuvent pas être sautés (un titre <code lang="en">h3</code> ne peut pas venir directement après un titre <code lang="en">h1</code>, par exemple). Dans chaque page Web, il doit y avoir un titre <code lang="en">h1</code>, au moins.</p>
<p><strong>Note</strong> : les titres cachés <i>via</i> CSS sont considérés comme présents et valident le critère 9.1.</p>
<h3 id="titre-tableau">Titre d’un tableau (de données)</h3>
<p>Contenu d’un élément HTML (balise <code lang="en">caption</code>) qui permet d’identifier le contenu d’un tableau de données de manière claire et concise.</p>
<h3 id="titre-de-cadre">Titre de cadre</h3>
<p>Contenu de l’attribut <code lang="en">title</code> de la balise <code lang="en">iframe</code> permettant de connaitre la nature du contenu diffusé <i>via</i> le cadre en ligne lorsque l’utilisateur navigue de cadre en cadre ou affiche la liste des cadres de la page par exemple.</p>
<p><strong>Note 1 :</strong> Certains cadres en ligne servent uniquement à des opérations techniques tels que des traitements applicatifs destinés à préparer ou piloter des contenus affichés dans la page comme les cadres en ligne utilisés par certains réseaux sociaux comme <span class="en">Facebook</span> par exemple.</p>
<p>Si ces cadres sont dépourvus de titre de cadre fournis par le service distant, ou si les titres de cadres sont jugés non pertinents, des mentions génériques peuvent être utilisées, par exemple <code lang="en">title="<span lang="fr">contenus techniques Facebook</span>"</code>.</p>
<p><strong>Note 2 :</strong> Si cela ne gêne pas le fonctionnement de ce type de cadre, il est possible de les rendre indisponibles aux technologies d’assistance en utilisant une propriété ARIA <code lang="en">aria-hidden="true"</code> par exemple.</p>
<h3 id="titre-de-lien">Titre de lien</h3>
<p>Contenu de l’attribut <code lang="en">title</code> d’un lien. Ce contenu ne doit être présent que s’il est nécessaire pour identifier la destination du lien de manière explicite. Un titre de lien doit reprendre l’intitulé de lien en y ajoutant des informations. Un titre de lien sera considéré comme non-pertinent dans les cas suivants :</p>
<ul>
<li>Le titre de lien est vide ;</li>
<li>Le titre de lien est identique à l’intitulé du lien (Cf. note 1) ;</li>
<li>Le titre de lien ne reprend pas l’intitulé du lien.</li>
</ul>
<p><strong>Note 1</strong> : Par exception, un titre de lien identique à l’intitulé est accepté dans le seul cas d’un lien image (lien ne contenant que des images), une icône par exemple.</p>
<p><strong>Note 2</strong> : Il est rappelé que l’attribut <code lang="en">title</code> peut poser de vrais problèmes de restitution, par exemple au clavier, sur les surfaces tactiles, lorsqu’une technologie d’assistance est paramétrée pour ne pas les restituer et ne devrait être utilisé qu’en dernier recours.</p>
<h3 id="titre-de-page">Titre de page</h3>
<p>Contenu de la balise <code lang="en">title</code> d’une page Web permettant d’identifier de manière claire, concise et unique les contenus/la nature de la page ("Plan du site www.nomdusite.fr" pour une page présentant le plan du site Web, par exemple).</p>
<h3 id="transcription-textuelle">Transcription textuelle (média temporel)</h3>
<p>Contenu textuel associé à un média temporel par la technique appropriée (texte codé en HTML ou dans un fichier texte qui se trouve dans la même page ou consultable suivant un lien). Ce contenu donne accès à l’utilisateur (de manière indépendante de la consultation de l’objet multimédia) à :</p>
<ul>
<li>La totalité de ce qui y est exprimé oralement ;</li>
<li>Toutes les informations descriptives nécessaires à une compréhension équivalente de l’action.</li>
</ul>
<p>Ces informations textuelles doivent être présentées dans l’ordre chronologique de leur apparition dans le média temporel.</p>
<p><strong>Note</strong> : la transcription textuelle doit se situer à l’extérieur de la balise <code lang="en">object</code>.</p>
<h3 id="type-de-document">Type de document</h3>
<p>Ensemble de données de référence qui permet aux agents utilisateurs de connaître les caractéristiques techniques des langages utilisés sur la page Web (balise <code lang="en">doctype</code>).</p>
<h3 id="type-et-format-de-donnees">Type et format de données</h3>
<p>Indication concernant le type et le format des données attendus lors de la saisie d’un champ de formulaire. Par exemple :</p>
<ul>
<li>Date (jj/mm/aaa) ;</li>
<li>Montant en euros ;</li>
<li>Code postal (5 chiffres : ex. 75001).</li>
</ul>
<p><strong>Note importante :</strong> lorsque le type de champ de formulaire propose un masque de saisie, comme par exemple les champs <code lang="en">date</code> ou <code lang="en">time</code>, l’indication de format n’est pas nécessaire.</p>
<h2 id="u">U</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#t">Lettre T</a></li>
<li class="goafter"><a href="#v">Lettre V</a></li>
</ul>
<h3 id="uniquement-presentation">Uniquement à des fins de présentation</h3>
<p>Uniquement à des fins de présentation : utilisation de balises HTML pour une finalité différente de celle prévue dans les spécifications (au regard du type de document déclaré). Exemples : utilisation des balises <code lang="en">h</code> à seule fin de créer un effet typographique ; utilisation de la balise <code lang="en">blockquote</code> à seule fin de mettre un paragraphe en retrait, etc.</p>
<p><strong>Note 1</strong> : l’utilisation d’éléments <code lang="en">div</code> ou <code lang="en">span</code> pour créer des paragraphes est considérée comme non conforme et invalide le critère.</p>
<p><strong>Note 2</strong> : WAI-ARIA propose un rôle <code lang="en">presentation</code> permettant de supprimer la sémantique d’un élément, par exemple <code lang="en"><h1 role="presentation"> Titre</h1></code>. Dans ce cas, le texte sera correctement restitué mais le titre lui ne le sera plus (l’élément restitué sera un élément indéterminé du type <code lang="en"><><span lang="fr">Titre</span></></code>. L’utilisation du rôle <code lang="en">presentation</code> peut être requise lorsque l’on utilise un <a href="#motif-de-conception">motif de conception</a> ARIA.</p>
<p>L’utilisation du rôle <code lang="en">presentation</code> peut être également utilisé pour supprimer la sémantique d’un élément lorsque ce dernier est utilisé uniquement à des fins de présentation, par exemple <code lang="en"><blokquote role="presentation"></code> aura le même effet qu’une absence d’élément <code lang="en">blockquote</code>.</p>
<p>Même si cette utilisation est fortement déconseillée (dans le cas de technologie d’assistance qui n’implémenteraient pas ARIA par exemple) elle peut être considérée comme conforme à WCAG. En revanche l’utilisation d’un rôle <code lang="en">presentation</code> sur un élément dont la nature (par exemple la sémantique) est essentielle à la compréhension du contenu est une violation des règles WCAG (particulièrement de l’échec <a hreflang="en" href="http://www.w3.org/TR/WCAG20-TECHS/F92.html">F92</a>) et invalide le critère.</p>
<h3 id="url">Url</h3>
<p>Adresse permettant d’accéder aux ressources du <span lang="en">World Wide Web</span> : document HTML, pages Web, image, son…</p>
<p><strong>Note</strong> : dans le référentiel RGAA, la notion d’url est utilisée à la place de uri (chaîne de caractères compacte identifiant une ressource).</p>
<h2 id="v">V</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#u">Lettre U</a></li>
<li class="goafter"><a href="#z">Lettre Z</a></li>
</ul>
<h3 id="version-accessible-document">Version accessible (pour un document en téléchargement)</h3>
<p>Les documents en téléchargement dont les types de format sont reconnus compatibles avec l’accessibilité doivent être rendus accessibles soit directement soit par l’intermédiaire d’une version accessible ou d’une version en HTML. Les formats de document dont la compatibilité est reconnue sont :</p>
<ul>
<li>Microsoft Office (<span lang="en">Word</span> 2003, OOXML) ;</li>
<li>Open Office Org (ODF) ;</li>
<li>Adobe PDF ;</li>
<li><span lang="en">Epub</span>/Daisy.</li>
</ul>
<p>Les contenus doivent être conformes à la <a href="http://references.modernisation.gouv.fr/sites/default/files/liste-criteres-documents-bureautiques-telechargement-RGAA.odt">liste des critères Documents Bureautiques en téléchargement (format ODT, 74 kilo-octets)</a>.</p>
<p><strong>Note</strong> : le format txt ne peut pas être utilisé pour produire une version accessible pour un document en téléchargement.</p>
<h3 id="version-alternative-audio-seulement">Version alternative "audio seulement"</h3>
<p>Une version "audio seulement" est une version sonore, sous la forme d’un simple fichier au format MP3 par exemple, utilisée comme alternative à une vidéo seulement (vidéo sans information sonore). Les seuls utilisateurs impactés par l’accessibilité étant les personnes aveugles, qui ne peuvent pas voir la vidéo, WCAG considère comme acceptable de proposer en alternative une version sonore.</p>
<p>La version "audio seulement" doit contenir toutes les informations visuelles importantes de la vidéo.</p>
<p>Généralement il est plus simple de produire une version sonore qu’une version textuelle lorsque la vidéo est très descriptive (la transcription textuelle nécessitant souvent un travail rédactionnel important). Il est rappelé, néanmoins, que seule la transcription textuelle assure un accès universel aux informations diffusées par la vidéo, dans le cas où un utilisateur ne serait pas en capacité de lancer la vidéo par exemple.</p>
<h2 id="z">Z</h2>
<ul class="skiplink">
<li class="gobefore"><a href="#v">Lettre V</a></li>
<li class="gobefore gotoc"><a href="#toc">Sommaire</a></li>
</ul>
<h3 id="zone-image-reactive">Zone (d’une image réactive)</h3>
<p>Zone cliquable ou zone non cliquable d’une image réactive côté client ou zone cliquable d’une image réactive côté serveur.</p>
<h3 id="zone-cliquable">Zone cliquable</h3>
<p>Région d’une image réactive à laquelle une action a été associée ; par exemple, le déclenchement d’un événement en cliquant sur un lien (pour une zone cliquable côté client : balise <code lang="en">area</code> avec l’attribut <code lang="en">href</code>). Les balises <code lang="en">area</code> sont contenues dans la balise <code lang="en">map</code>.</p>