forked from DISIC/rgaa_referentiel_en
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathglossary.html
1444 lines (1184 loc) · 102 KB
/
glossary.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RGAA 3 2016 Glossary - English translation</title>
<meta content="English translation of the RGAA 3 2016, French official accessibility guidelines. Glossary." name="description" />
<meta content="RGAA, RGAA 3 2016, French accessibility guidelines, English translation, glossary" name="keywords" />
<link type="text/css" rel="stylesheet" href="Css/knacss.css" />
<link type="text/css" rel="stylesheet" href="Css/RGAA3-en.css" />
</head>
<body class="mw1140p center">
<header role="banner">
<p id="skiplinks"><a href="#toc">Skip to Table of Contents</a> - <a href="#main">Skip to main content</a></p>
<nav id="nav" role="navigation" aria-label="Main navigation">
<ul>
<li><a href="./introduction-RGAA.html">Introduction to RGAA</a></li>
<li><a href="./rgaa-companion-guide.html">RGAA companion guide</a></li>
<li>Technical reference
<ul>
<li><a href="./criteria.html">Criteria</a></li>
<li>Glossary - current page</li>
<li><a href="./particular-cases.html">Particular cases</a></li>
<li><a href="./technical-notes.html">Technical notes</a></li>
<li><a href="./baseline.html">Baseline</a></li>
<li><a href="./references.html">References</a></li>
</ul>
</li>
</ul>
</nav>
<h1>
<abbr lang="fr" title="Référentiel Général d'Accessibilité pour les Administrations">RGAA</abbr> 3 2016 - Glossary - English translation
</h1>
<h2 tabindex="-1" id="toc">
Table of Contents
</h2>
<nav id="toc-list" 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="#h">H</a></li>
<li><a href="#i">I</a></li>
<li><a href="#l">L</a></li>
<li><a href="#m">M</a></li>
<li><a href="#n">N</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="#w">W</a></li>
</ul>
</nav>
</header>
<main id="main" role="main">
<h2 id="a">A</h2>
<h3 id="mAccColl">Access to each page (of the collection of pages)</h3>
<p>
In the cases where the collection contains a large number of pages, it is usual to provide only links to one page in ten, for instance. This practice passes the test.
</p>
<h3 id="mAAClavierSouris">Accessible and activable either through a keyboard or a mouse</h3>
<ul>
<li> A user interface component (link, button, clickable element in a Flash movie…) is accessible either through a keyboard and a mouse when it can receive focus, indifferently, through the use of the mouse pointer or the <kbd>Tab</kbd> key.
</li>
<li>A user interface component (link, button, clickable element in Flash…) can be activated either through a keyboard or a mouse when the user can initiate the action triggered by the user interface component indifferently with a mouse click or the <kbd>Enter</kbd> key.</li>
<li>
<strong>Warning</strong>: for some user interface components such as sliders (sliding or rotating button…), it is not possible to control the component only with the <kbd>Enter</kbd> key. In this situation, other keys (such as the arrow keys) can be used.
</li>
</ul>
<p>In the RGAA, the expression "controlled either through a keyboard or a mouse" also refers to the current definition.
</p>
<p>
<strong>Important notice:</strong> Some technologies can make focus management too complex or unstable to rely only upon the <kbd>Tab</kbd>, arrow and <kbd>Enter</kbd> keys.
</p>
<p>In this case, keyboard shortcuts may be the only solution to make the composant usable.</p>
<p>The criterion can be considered as Conforming, if the keyboard shortcuts are appropriately documented, and operable for every location of the focus in the user interface.</p>
<p>The following WCAG Technique: <a href="https://www.w3.org/TR/WCAG20-TECHS/SL15.html">SL15: Providing Keyboard Shortcuts that Work Across the Entire Silverlight Application</a> provides information on this matter, for the Silverlight technology. </p>
<h3 id="mVaccessible">Accessible version (of a downloadable document)</h3>
<p>Downloadable documents provided in format types that are accessibility-supported must be accessible, or an alternate accessible version, or an accessible HTML version, must be provided. The document formats considered as accessibility-supported are:</p>
<ul>
<li>Microsoft Office (Word 2003 and later, OOXML)</li>
<li> Open Office Org (ODF)</li>
<li> Adobe PDF</li>
<li> Epub/Daisy</li>
</ul>
<p>Contents must conform to the <a href="http://references.modernisation.gouv.fr/sites/default/files/liste-criteres-documents-bureautiques-telechargement-RGAA.odt">list of criteria for downloadable office documents (ODT, 74 kb, in French)</a>.</p>
<p>
<strong>Note:</strong>The txt format cannot be used to provide an accessible version of a downloadable document.
</p>
<h3 id="mAdaptsARIADP">Adapts a design pattern defined by the ARIA API</h3>
<p>The ARIA API defines design patterns, for tab lists or modal windows for example, designed to provide a standardized behavior for user interface components. The application of these design patterns is required by the RGAA.</p>
<p>However, it is possible to adapt these design patterns, by replacing a poorly supported property by an equivalent one, or by enriching the component with properties that improve the user experience, or secure the component's behaviour.</p>
<p>It is the author's responsibility to check that these adaptations are consistent with the design pattern; that they do not modify the expected behavior, from a user experience point of view; and that the adapted component is correctly rendered by assistive technologies.</p>
<p>If these requirements are met, the component can be declared "conforming" with the design pattern.</p>
<h3 id="mLienAdj">Adjacent link</h3>
<p>Link adjacent to an element both in the layout (CSS enabled) and in the HTML code. In the HTML code, the link must be just before or after the element it is adjacent to.</p>
<h3 id="mAlerte">Alert</h3>
<p>Alert message that interrupts navigation or consultation, requiring the user to click on a button or a link in order to proceed; for example, a dialog box generated via the <code>alert</code> JavaScript function. By extension, a pop-in (content presented in an overlay, is inserted in the DOM) that needs to be closed to proceed, is considered as an alert.</p>
<p>
<strong>Note:</strong> An option may be proposed to disable the alerts before they are triggered, for example, via a user parameter. Other example: when the first alert is displayed, a checkbox "do not display this alert anymore" can be ticked by the user. </p>
<h3 id="mMecaRempl">Alternate mechanism</h3>
<p>
Mechanism (CSS-based, generally), allowing the user to replace text with an image of text, and reversely, like a style switcher for instance. The mechanism can rely either on a server-side or client-side script language.
</p>
<h3 id="mAltCC">Alternative (short and concise)</h3>
<p>
Rendering a text alternative via an assistive technology (like a screen magnifier for instance), requires that it should be as short as possible. A length of 80 characters is strongly recommended; it will reduce the manipulations to read the text alternative for users of Braille displays or screen magnifiers, in particular.
</p>
<h3 id="mAltTexteImg">Alternative (Text alternative of an image)</h3>
<p>
A text asssociated to an image via an appropriate technique, describing the information conveyed by the image (in relation with the context of the Web content it is included in). RGAA considers four types of alternatives, depending on the purpose of the image:</p>
<ul>
<li>
<strong>For an image that conveys information</strong>, the text alternative provides the information needed to understand the content the image is associated with;
</li>
<li>
<strong>For a decorative image</strong>, the alternative must be empty (<code>alt=""</code>);
</li>
<li>
<strong>For an image link</strong>, the text alternative describes the purpose or the target of the link;
</li>
<li>
<strong>For a CAPTCHA or test image</strong>, the text alternative can not provide the information conveyed by the image without compromising the associated security function. In this case, the alternative should only describe the nature and purpose of the image.
</li>
</ul>
<p><strong>Note 1:</strong> for a CAPTCHA image, the text alternative can be, for instance: "anti-spam security code", or "code to check you are human", or any other text providing the user with the ability to understand the nature and purpose of the image.
</p>
<p>
<strong>Note 2:</strong>Groups of non-linked images may constitute a particular case, when they provide an information as a group rather than as a single image. For example: several images of a star graphically describe the average result in an online voting system. In such cases, it is strongly recommended to provide a text alternative for the first image, that describes the purpose of the group, while the other images will be considered as decorative. On this subject, you may read this technical note: <a href="https://www.w3.org/TR/html5/embedded-content-0.html#a-group-of-images-that-form-a-single-larger-picture-with-no-links">A group of images that form a single larger picture with no links</a>.
</p>
<h3 id="mAltScript">Alternative (to a script)</h3>
<p>
Text or process associated with the script, via an appropriate technique, and providing a function or a content similar to the one provided by the script.</p>
<p><strong>Note:</strong>
when an alternative to a JavaScript functionality is available, the website must provide the way to access it. It can be a link or a button providing access to an alternative page not relying upon JavaScript, or allowing to replace the component by an alternative component that does not rely on JavaScript, for instance.
</p>
<h3 id="alternative-svg">Alternative (to an SVG image)</h3>
<p>
Are considered as possible alternatives to an SVG image:</p>
<ul>
<li>A replacement mechanism</li>
<li>An adjacent link giving access to an alternative which content is relevant, and matches the <code>aria-label</code> property and the <code>title</code> attribute content, if present.</li>
</ul>
<h3 id="mAudioOnly">
Alternative audio-only version
</h3>
<p>An audio-only version is an audio-based version of a content (in a form of a downloadable MP3 file for instance), provided as an alternative to video-only (video document with no audio information). The only impacted users, with video-only content, being users with visual impairments, WCAG considers as acceptable to provide an audio-only version.</p>
<p>The audio-only version must include all the useful visual information found in the video.</p>
<p>It is generally simpler to produce an audio version than a textual one when the video is very descriptive (the transcription requiring then a heavy workload in terms of copywriting). Authors are reminded, though, that only text transcripts provide a universal access to the information provided by the video. Indeed, video incurs potentially other barriers, like for users who do not have to ability to play the audio or video content.</p>
<h3 id="mAmbigueTtMonde">Ambiguous for everybody</h3>
<p>
the purpose cannot be determined from the link and all information of the Web page presented to the user simultaneously with the link (i.e., readers without disabilities would not know what a link would do until they activated it)
</p>
<p>
Example: The word guava in the following sentence "One of the notable exports is guava" is a link. The link could lead to a definition of guava, a chart listing the quantity of guava exported or a photograph of people harvesting guava. Until the link is activated, all readers are unsure and the person with a disability is not at any disadvantage.
</p>
<h3 id="mAncreNom">Anchor</h3>
<p>
In HTML, an anchor (also called bookmark) is composed of an <code><a></code> tag with the <code>id</code> attribute and with no <code>href</code>; for example: <code><a id="content"></a></code>.
An anchor serves as a target for a link like <code><a href="index.html#content">skip to content</a></code>.
</p>
<h3 id="mZone">Area (of an image map)</h3>
<p>Clickable or non clickable area of a client-side image map, or clickable area of a server-side image map.</p>
<h3 id="mZoneCliquable">Area (Clickable)</h3>
<p>
Image map with an attached behavior; for example, triggering an event by clicking on a link (for a client-side clickable area: <code>area</code> tag with a <code>href</code> attribute). The <code>area</code> tags are descendants of a <code>map</code> tag.
</p>
<p>With server-side image maps, the coordinates are stored on the server.</p>
<h3 id="mZoneNonCliquable">Area (Non clickable)</h3>
<p>
Image map with no attached behavior. A client-side non clickable area is created with an <code>area</code> tag:</p>
<ul>
<li>With the <code>nohref</code> attribute in pages where the doctype is not HTML5</li>
<li> With no <code>href</code> attribute in HTML5</li>
</ul>
<p>The <code>area</code> tags are descendants of a <code>map</code> tag.
</p>
<h3 id="mAudioDescE">Audio description (Extended)</h3>
<p>Audio description that is added to an audiovisual presentation by pausing the video so that there is time to add additional description.</p>
<p>
<strong>Note:</strong> This technique is only used when the sense of the video would be lost without the additional audio description and the pauses between dialogue/narration are too short.
</p>
<h3 id="mAudioDesc">Audio description (Synchronized, time-based media)</h3>
<p>
Narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone. The audio description must be synchronized with the time-based media</p>
<p>
<strong>Note 1:</strong> Audio description of video provides information about actions, characters, scene changes, on-screen text, and other visual content.
</p>
<p>
<strong>Note 2:</strong> In standard audio description, narration is added during existing pauses in dialogue. (See also extended audio description.)
<p><strong>Note 3:</strong> Where all of the video information is already provided in existing audio, no additional audio description is necessary.</p>
<h2 id="b">B</h2>
<h3 id="mBtnForm">Button (form)</h3>
<p>A form element designed to perform a predefined action when activated. For instance, a submit button, when pressed, initiates the transmission of the data collected from the form to the web server. The button text must describe the action resulting in its activation (for example: "Start search", "Send your message").
</p>
<p>
In HTML, there are three types of button elements:</p>
<ul>
<li><code>INPUT</code> of type <code>submit</code>, <code>reset</code> or <code>button</code>,</li>
<li><code>INPUT</code> of type <code>image</code>,</li>
<li><code>BUTTON</code>.</li>
</ul>
<p>
There can be four types of button text:</p>
<ul>
<li>the content of the <code>value</code> attribute, for buttons of type <code>submit</code>, <code>reset</code> or <code>button</code>,</li>
<li>the content of the <code>alt</code> attribute for a button of type <code>image</code>,</li>
<li>the content of the <code>title</code> attribute when it is defined,</li>
<li>the content of the <code>button</code> tag.</li>
</ul>
<h3 id="mLienEvitement">
Bypass or skip links
</h3>
<p>Links whose purpose is to navigate inside of content (skip link, link to the search form or the menu).</p>
<h2 id="c">C</h2>
<h3 id="mcaptcha">
CAPTCHA
</h3>
<p>
A CAPTCHA is a test designed to tell computers and humans apart. The test is often based on images containing distorted text, mixed with other shapes, or with altered colors. The user is requested to key in the obscured characters. Other forms of CAPTCHA can be based on logical questions or audio clips.
</p>
<h3 id="mChangContexte">
Change of context
</h3>
<p>Major changes in the content of the Web page that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously. Changes in context include changes of:</p>
<ol>
<li>user agent</li>
<li>viewport</li>
<li>focus</li>
<li>content that changes the meaning of the Web page</li>
</ol>
<p><strong>Note:</strong> A change of content is not always a change of context. Changes in content, such as an expanding outline, dynamic menu, or a tab control do not necessarily change the context, unless they also change one of the elements listed above (e.g., focus).</p>
<p><strong>Example:</strong> Opening a new window, moving focus to a different component, going to a new page (including anything that would seem to to users as if they had moved to a new page) or significantly re-arranging the content of a page, are examples of changes of context.</p>
<h3 id="mChangeNativeRole">
Change of native role of an HTML element
</h3>
<p>The WAI-ARIA specification allows to modify the native role of an element, like for instance changing an <code>A</code> element (with an href attribute) into a <code>BUTTON</code> element.
</p>
<p>These modifications can be made only under certain conditions, described in the document <a href="https://www.w3.org/TR/aria-in-html/">Notes on Using WAI-ARIA in HTML</a>, which defines several restrictions, in particular.
</p>
<p>To be considered conformant, a change of the native role of an HTML element via WAI-ARIA must comply with these restrictions.
</p>
<h3 id="mChangeLumi">
Changes in luminosity (sudden) or flashing effects
</h3>
<p>A rapid alternance of colors with very different levels of luminosity, that can cause seizures in some people, if the flashing area is large enough, and the rate of change within specific frequency ranges.
</p>
<h3 id="mTailleCaractere">
Characters size, or Font size
</h3>
<p>Size of the characters of textual content found in the page. In order to be accessible, font sizes must be defined with relative units (<code>%</code>, <code>em</code> or <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code> or <code>vmax</code>) or keywords (<code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code>, <code>smaller</code>, or <code>larger</code>).</p>
<p><code>Note:</code> with regards to the RGAA, the use of the pixel unit (<code>px</code>) is prohibited.</p>
<h3 id="mCollecPage">
Collection of pages
</h3>
<p>
Pages linked to each other via hyperlinks, and with a common subject or nature. For example, the result pages of a search engine or the pages of a catalogue are collections of pages.</p>
<h3 id="consistent-labels">
Consistent labels
</h3>
<p>Form fields labels available in the same page, or the same set of pages, and requiring the input of the same information, must be expressed unambiguously, so that the user understands that the expected information is the same.
</p>
<h3 id="mCoherentODL">
Consistent (reading or tabbing order)
</h3>
<p>Consistent content is readable (the elements order is logical) and understandable (the reading logic is consistent).
</p>
<h3 id="mContraste">
Contrast (color)
</h3>
<p>Significant opposition between a foreground color and a background color. The contrast ratio is based on the difference of relative luminance between background and foreground according to the rule: (L1 + 0.05) / (L2 +0.05) where L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color. The luminance is calculated according to the following formula: L = 0,2126 * R + 0,7152 * G + 0,0722 * B where R, G and B are defined as:
<ul>
<li>if RsRGB >= 0,03928 then R = RsRGB/12,92 else R = ((RsRGB+0,055)/1,055) ^ 2,4</li>
<li> if GsRGB >= 0,03928 then --G = GsRGB/12,92 else G = ((GsRGB+0,055)/1,055) ^ 2,4</li>
<li>if BsRGB >= 0,03928 then B = BsRGB/12.92 else B = ((BsRGB+0,055)/1,055) ^ 2,4</li>
</ul>
<p> and RsRGB, GsRGB, and BsRGB are defined as:</p>
<ul>
<li>RsRGB = R8bit/255</li><li> GsRGB = G8bit/255</li><li> BsRGB = B8bit/255</li>
</ul>
<p> The "^" character is the exponentiation operator.</p>
<p><strong>Note:</strong> The contrast measurment is related to the text, the image of text, text and images of text in animations, the text in captions, and text that is embedded in videos. As far as text and images of text of animations and the text in captions and embedded text in videos are concerned, the font size must be measured according to the default displaying size, (as displayed). Text that is avaailable in the elements of an image or a video (for example a sign, a poster etc.) are not concerned.</p>
<p>Source: <a href="https://www.w3.org/TR/WCAG20-TECHS/G18.html#G18-procedure">Procedure to measure contrasts in the WCAG</a>.</p>
<h3 id="mControlSound">
Control (of autoplaying sound)
</h3>
<p>Ability for the user to pause and play an autoplaying sound.
</p>
<p><strong>Note:</strong> when appropriate, the controlling device should be the first element in the page.</p>
<h3 id="mFonctionControle">
Control features (time-based media)
</h3>
<p>Functionalities enabling the user to control the playing of a time-based media, either through a keyboard or a mouse, at least. The following requirements must be met:
</p>
<ul>
<li>List of required control features:
<ul>
<li>the time-based media must always have at least the following features: play, pause, stop ;
</li>
<li>if the time-based media has sound, it must have a feature to set the sound on and off, and to control the volume;
</li>
<li>if the time-based media has captions, it must have a feature enabling to display and hide captions;
</li>
<li>if the time-based media has an audio description, it must have a feature enabling to activate and disactivate the audio description.
</li>
</ul>
</li>
<li>Each functionality mus be accessible either through a keyboard, via the <kbd>Tab</kbd> key, and the mouse, at least;</li>
<li>Each functionality must be actionable either through a keyboard or a mouse, at least.</li>
</ul>
<p><strong>Note:</strong> If a multimedia object has no sound, there is no need for a feature to control its volume.
</p>
<h3 id="mControleMov">
Control (moving or blinking content)
</h3>
<p>Ability for the user to control the display or reading of moving or blinking content at least through a keyboard or a mouse.
</p>
<p>Every content in motion, except time-based media ruled by the "Multimedia" criteria category, are concerned: animated images (like animated GIFs), content in motion served via an <code>object</code> tag, JavaScript code, or CSS effects, for example.
</p>
<p><strong>Note 1:</strong> when appropriate, the controlling device should be the first element in the page.</p>
<p><strong>Note 2:</strong> the controlling device must not prevent the user from interacting with the rest of the page. Consequently, stopping or pausing a content in motion via an event triggered on focus, fails this criterion.</p>
<p><strong>Note 3:</strong> in some cases, the motion is part of the component, and it can not be controlled by the user. Example: a progress bar indicating by its movement the progress of an event like a download. In this case, the criterion is not applicable.</p>
<h3 id="mEnvMait">
Controlled environment
</h3>
<p>Any environment in which access to information, technologies, terms of use and users profiles can be known and controlled. The main elements for which control is essential are:
</p>
<ul>
<li>The browsers types and versions
</li>
<li>The supported technologies, their versions and activation statuses (JavaScript, WAI-ARIA, Flash…)
</li>
<li>The assistive technologies and any device used in a specific way by users with disabilities
</li>
<li>The operating systems and accessibility APIs
</li>
<li>The level of proficiency of users of assistive technologies, for any specific device (user interface, online application…) in use in this environment.
</li>
</ul>
<p>Authors and administrators must guarantee that the technologies in use, and the way they are utilized by users, are compatible with their technologies (including assistive technologies). Information services or Web sites, whatever their status, that provide public access cannot be considered as controlled environments.</p>
<h3 id="mCorrectlyRendered">
Correctly rendered (by assistive technologies)
</h3>
<p>When a criterion, a test or a test condition requires to verify that a device is correctly rendered by assistive technologies, it must be checked that this rendering is accessibility supported.</p>
<p> The test consists in checking that the rendering is relevant for at least one combination of the <a href="./baseline.html">Reference baseline</a> used to declare that an element, a device or an alternative is "accessibility supported".</p>
<p>For example: Test 1.3.7 requires to check that the alternative of a vector image conveying information is correctly rendered.</p>
<p>The rendering is then tested with NVDA (latest version) and Firefox, JAWS (previous version) and Internet Explorer 9+, and VoiceOver (latest version) and Safari.</p>
<p>If the alternative is correctly rendered, then the test is passed.</p>
<h3 id="mPropCouleur">
CSS property defining a color
</h3>
<p>This concerns the following CSS properties: <code>color</code>, <code>background>-color</code>, <code>background</code>, <code>border-color</code>, <code>border</code>, <code>outline-color</code>, <code>outline</code>.
</p>
<p> <strong>Note:</strong> the use of a background image to set a color (<code>bakground:url(…)</code> property) is also concerned.
</p>
<h2 id="d">D</h2>
<h3 id="mTypeDonnes">
Data type and format
</h3>
<p>Indication regarding expected data type and format when information is entered in a form field. For example:
</p>
<ul>
<li>date (yyyy/mm/dd)</li>
<li>Total in euros</li>
<li>Zip code (5 numbers: eg. 75001)</li>
</ul>
<p><strong>Important note</strong>: when the type of the form field involves an input mask, like for instance fields of types <code>date</code> or <code>time</code>, the indication of expected format is not required.</p>
<h3 id="mLangueDefaut">
Default human language
</h3>
<p>Language specification used by the user-agent (including assistive tchnologies) to apply language-specific rules when rendering content. The language code is provided via the <code>lang</code> and/or <code>xml:lang</code> attributes, defined for the <code>html</code> tag (container for the whole document in the web page), or every descendant tag with content to which these rules should apply. The choice of attributes depends on the Document Type Definition (DTD) used:
</p>
<ul>
<li>For HTML up to version 4.01: <code>lang</code> attribute mandatory, <code>xml:lang</code> attribute not supported;
</li>
<li>For XHTML 1.0 served in "text/html": <code>lang</code> and <code>xml:lang</code> attributes mandatory;
</li>
<li>For XHTML 1.0 served in "application/xhtml+xml": <code>xml:lang</code> attribute mandatory, <code>lang</code> attribute recommended;
</li>
<li>For XHTML 1.1: <code>xml:lang</code> attribute mandatory, <code>lang</code> attribute not supported;</li>
<li>For HTML5: <code>lang</code> attribute mandatory.</li>
</ul>
<h3 id="mDesignPattern">
Design Pattern
</h3>
<p>A design pattern is a model defined by the ARIA API describing the structure, roles, properties and behaviors a JavaScript component (widget) must have.</p>
<p>The design patterns are described in this document: <a href="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>.
</p>
<p>A JavaScript-based component must follow the design pattern corresponding with its WAI-ARIA role.
</p>
<p><strong>Note 1</strong>: because some WAI-ARIA properties and roles are not supported by all user agents, and because of the wide variety of situations where a JavaScript component can be used, it is allowed to adapt design patterns to specific contexts or uses. In this case, the adapted design pattern must:
</p>
<ul>
<li>respect the general structure; for instance, a tab panel is necessarily associated with a tab list;
</li>
<li>in place of a WAI-ARIA role or property with poor support, equivalent WAI-ARIA roles or properties may be used as long as they display similar behavior and rendering by user agents
</li>
</ul>
<p><strong>Note 2:</strong> this does not apply to enrichments of a design pattern with WAI-ARIA roles or properties, for which accessibility support is verified through rendering tests with the reference baseline. For example, adding the <code>aria-hidden</code> property on tab panels (<code>role="tabpanel"</code>) is not considered as an adapted design pattern.
</p>
<h3 id="mDescDetaillee">
Detailed description (image)
</h3>
<p>Content related to an image in addition to its text alternative, in order to fully describe information conveyed by the image. The detailed description can be inserted via:</p>
<ul>
<li>a <code>longdesc</code> attribute containing the URL of a page, or of a content in the same page, containing the detailed description,
</li>
<li>a reference, in the <code>alt</code> attribute, to a detailed description adjacent to the image,
</li>
<li>A link adjacent to the image, to a page or a content in the same page, containing the detailed description,
</li>
<li>A chunk of text, associated to the image by means of aria-labelledby or aria-describedby properties.</li>
</ul>
<h3 id="mDocumentOutline">Document outline</h3>
<p>
The Test 9.2.2 requires that the structure of the sectioning elements (<code>NAV</code>, <code>SECTION</code>, <code>ARTICLE</code> for instance) in the page is coherent; meaning it's representative of the document's architecture. This structure is completed by the headings (<code>h1</code> to <code>h6</code> tags) structure, which is also a part of it.
</p>
<p>Inappropriate use of these sectioning elements could result in an incoherent document outline, through excessive use of <code>SECTION</code> or <code>ARTICLE</code> elements for example.</p>
<p><strong>Note 1:</strong>The document outline algorithm is progressively supported by browsers and assistive technologies. Considering that, in any case, the RGAA requires a robust and coherent headings hierarchy, <strong>it is acceptable to consider the Test 9.2.2 as not applicable</strong> when a perfectly coherent document outline can not be guaranteed. You may read this technical note: <a href="./technical-notes.html#TNcrit9-2">Technical note on document outline</a>.</p>
<p><strong>Note 2</strong>You may read, on the same subject, the example provided in the HTML5 specification: <a href="http://www.w3.org/TR/html5/sections.html#sample-outlines">4.3.10.2 Sample outlines</a>.
</p>
<h3 id="mDTD">
Document type
</h3>
<p>Set of reference data allowing user agents to know the technical characteristics of the languages used in the page (<code>doctype</code> tag).
</p>
<h2 id="e">E</h2>
<!--
<h3 id="mEquivalentRole">
Equivalent WAI-ARIA role
</h3>
-->
<h3 id="mExpliciteHorsContexte">
Explicit out of context (link)
</h3>
<p>A link is explicit out of its context when the link text (content between <code><a href=""></code> and <code></a></code>) provides enough information to understand the function and purpose of the link.</p>
<h2 id="f">F</h2>
<h3 id="mPriseFocus">
Focus
</h3>
<p>Focus is the state sent by an element that receives attention after a user action. In HTML there are three means to give focus to an element:
</p>
<ul>
<li>Activating the element with a pointing device (mouse)</li>
<li>Activating the element with the <kbd>Tab</kbd> key</li>
<li>Activating the element with a keyboard shortcut (<code>accesskey</code>)</li>
</ul>
<p>Elements that receive focus natively are: <code>a</code>, <code>area</code>, <code>button</code>, <code>input</code>, <code>object</code>, <code>select</code>, <code>label</code>, <code>legend</code>, <code>optgroup</code>, <code>option</code> and <code>textarea</code>. The element's behaviour, when it is focused, depends on its nature; a link, for example, must be activated afted it has been focused (except when a script is used). On the other hand, a form element, such as <code>textarea</code>, must allow input after it has received focus. The <code>label</code> and <code>legend</code> elements can only receive focus via the mouse pointer. For the <code>label</code> element, the expected behavior is to transfer focus to the form field it is associated with.
</p>
<p><strong>Note 1:</strong> The WAI-ARIA specification extends the role assigned to the <code>tabindex</code> attribute, by defining that any HTML element can become focusable by setting <code>tabindex</code> at 0. However, no behavior is defined if <code>tabindex</code> is declared but has no set value. Setting an element's <code>tabindex</code> at -1 (minus one) removes this element from the tabbing order, inhibiting its ability to signal it has gained focus. Using <code>tabindex</code> accordingly with the WAI-ARIA specification can validate some tests related to focus management.
</p>
<p><strong>Note 2:</strong> the focus visual cue must not be degraded, meaning that its visibility is lessened compared to the user agent's default style.
</p>
<h3 id="mFooter">
Footer
</h3>
<p>
Container of information related to the use of the site, or legal information. This is generally where can be found links to the help page, the credits page, terms of use, and the accessibility page, potentially.
</p>
<p><strong>Note:</strong> this page footer area, unique in a page, must not be mistaken with footers of sections, defined in HTML5 with the <code>footer</code> tag.
</p>
<p>See the technical definition as defined by the ARIA API: <a href="https://www.w3.org/WAI/PF/aria/roles#contentinfo">Contentinfo (role)</a>.
<h3 id="mEtiquette">
Form field label
</h3>
<p>Text located next to the form field describing the nature, type or format of expected input. The label can be associated with the form field in several ways:</p>
<ul>
<li>Via a <code>label</code> tag</li>
<li>Via an <code>aria-label</code> property</li>
<li>Via an <code>aria-labelledby</code> property and its related text</li>
<li>Via a <code>title</code> attribute.</li>
</ul>
<p><strong>Important note:</strong> When more than one of these techniques are used on the same field, the calculation of the "accessible name" (rendered by the assistive technologies), follows a strict order:
</p>
<ol>
<li><code>aria-labelledby</code></li>
<li>Or else, <code>aria-label</code></li>
<li>Or else, <code>label</code></li>
<li>Or else, <code>title</code></li>
</ol>
<p>This order must be used to evaluate the relevance of the label (<a href="./criteria.html#crit-11-2">criterion 11.2</a>). For example, even in the case where a <code>label</code> tag is provided, it's the text referenced by <code>aria-labelledby</code> that must be taken into account.
</p>
<p>Reference: <a href="https://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-calculation">Accessible name and description calculation</a>.</p>
<p><strong>Important note about the <code>placeholder</code> attribute:</strong> When the <code>placeholder</code> attribute is used, it may be rendered instead of the <code>title</code> attribute. Therefore, when both the <code>title</code> and <code>placeholder</code> attributes are used, they must have the same values.</p>
<h3 id="mChpSaisie">
Form input field
</h3>
<p>
Object, in a form, allowing the user:</p>
<ul>
<li>to enter text or pre-formatted data:
<ul>
<li><code>input type="text"</code>;</li>
<li><code>input type="password"</code>;</li>
<li><code>input type="search"</code>;</li>
<li><code>input type="tel"</code>;</li>
<li><code>input type="email"</code>;</li>
<li><code>input type="number"</code>;</li>
<li><code>input type="tel"</code>;</li>
<li><code>input type="url"</code>;</li>
<li><code>textarea</code>;</li>
</ul>
</li>
<li>to select predefined values:
<ul>
<li><code>input type="checkbox"</code></li>
<li><code>input type="radio"</code></li>
<li><code>input type="date"</code></li>
<li><code>input type="range"</code></li>
<li><code>input type="color"</code></li>
<li><code>input type="time"</code></li>
<li><code>select</code></li>
<li><code>datalist</code></li>
<li><code>optgroup</code></li>
<li><code>option</code></li>
<li><code>keygen</code></li>
</ul>
</li>
<li>to download files:
<ul>
<li><code>input type="file"</code></li>
</ul>
</li>
<li>or to display results:
<ul>
<li><code>output</code></li>
<li><code>progress</code></li>
<li><code>meter</code></li>
</ul>
</li>
</ul>
<p>The following form objects are not considered as form fields:</p>
<ul>
<li><code>input type="submit"</code></li>
<li><code>input type="reset"</code></li>
<li><code>input type="hidden"</code></li>
<li><code>input type="image"</code></li>
<li><code>input type="button"</code></li>
<li><code>button</code></li>
</ul>
<h3 id="mTitreCadre">
Frame title
</h3>
<p>Value of the <code>title</code> attribute of the <code>iframe</code> tag, describing the nature of the content provided via the inline frame, useful when navigationg from frame to frame, or displaying the list of frames in the page, for example.
</p>
<p><strong>Note 1:</strong> some inline frames only have a purely technical purpose, like preprocessing content displayed in the page (commonly found for social networks widgets like Facebook's, for instance).
</p>
<p>If the remote content inside the frame has no title, or if it is not relevant, generic indications may be used, like for example: "Facebook: technical contents".</p>
<p><strong>Note 2:</strong> If there is no impact on the functionality, these contents may be hidden to assistive technologies, via the <code>aria-hidden</code> attribute, for instance.</p>
<h2 id="h">H</h2>
<h3 id="mCelluleTab">
Header cells (of a table)
</h3>
<p>
Cells of a data table (first cell in a row or a column, generally), serving as a title for all, or some of, the row or column other cells. A column or a row can have several headers (intermediary headers). Header cells must be coded with a <code>th</code> tag.
</p>
<h3 id="mTitre">
Heading
</h3>
<p>HTML element (h<i>n</i> tag) with 6 hierarchy levels (from <code>h1</code> for the most important heading to <code>h6</code> for the less important), allowing to define and title sections in a Web content. The hierarchy between headings must be respected on a Web page, and the heading levels cannot be skipped: a <code>h3</code> heading (level 3) cannot be the next heading after a <code>h1</code> heading (level 1), for example. On each Web page, there must be at least one <code>h1</code> heading.</p>
<p><strong>Note:</strong> Headings hidden via CSS are considered as available to the user, and validate criterion 9.1.
</p>
<h3 id="mTexteCache">
Hidden text
</h3>
<p>Assistive technologies (in particular, screen readers) do not render content hidden via these properties:
</p><ul>
<li>(CSS) <code>display:none</code>;</li>
<li>(CSS) <code>visibility:hidden</code></li>
<li>(CSS)<code>width=0; height=0;</code></li>
<li>(HTML) <code>width=0</code> and <code>height=0</code></li>
<li>(CSS) <code>font-size:0;</code></li>
<li>(CSS) <code>clip:0;</code></li>
<li>(HTML5) <code>hidden</code> attribute;</li>
<li>(HTML+ARIA) <code>aria-hidden=true</code></li>
</ul>
<p>All text content using one or more of these properties are scoped by the criterion 10.13.</p>
<h2 id="i">I</h2>
<h3 id="mImgDeco">
Image (decorative)
</h3>
<p>An image that has no purpose and that does not convey any particular information regarding the content it is associated with. Examples:
</p>
<ul>
<li>An image used for layout adjustments only,</li>
<li>an image of a rounded corner, used to style a block,</li>
<li>an illustrative image that does not provide any information that helps understanding the text it is associated with.
</li>
</ul>
<h3 id="mImgObj">
Image object
</h3>
<p>
Image inserted or generated via an <code>object</code> tag.
</p>
<h3 id="mImgTextObj">
Image (image of text object)
</h3>
<p>
Image implemented via the <code>object</code> tag and displaying text.
</p>
<h3 id="mImageCaption">
Image caption
</h3>
<p>For an image, a caption is an adjacent text, containing information about the image (for instance a copyright, a date, an author…), or information complementary to the one conveyed by the image (for instance, text associated with an image in a gallery).</p>
<p>When an image has a caption, it is necessary to tie the image and its caption together via a structure relationship, so that assistive technologies can process both as a whole.
</p>
<p>The HTML5 specification defines the <code>figure</code> (container for the image and its caption) and <code>figcaption</code> (container for the caption) tags.
</p>
<p>An image without caption can be:
</p>
<ul>
<li>an image that is not included in a <code>figure</code> element;</li>
<li>an image included in a <code>figure</code> element, with no <code>figcaption</code> element</li>
</ul>
<p><strong>Note:</strong> when the text adjacent to the image can serve as its alternative text, it is not required to use <code>figure</code> and <code>figcaption</code> tags; the image can be considered as decorative in this situation.
</p>
<p>On this subject, you may read <a href="https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text">Requirements for providing text to act as an alternative for images</a>.</p>
<h3 id="mImgInfo">
Image conveying information
</h3>
<p>An image that conveys information needed to understand the content it is associated with.
</p>
<h3 id="mInfoDonneeCouleur">
Image conveying information (provided by color)
</h3>
<p>Image for which all or part of its content conveys information visually, by means of color only.
</p>
<h3 id="mLienImage">
Image link
</h3>
<p>
Link whose content between <code><a href="…"></code> and <code></a></code> is only constituted of an image. The link text of an image link is the content of the text alternative of the image.
</p>
<p>An image link may be constituted of:</p>
<ul>
<li>An image (<code>img</code> tag); the alternative being the content of the <code>alt</code> attribute</li>
<li>A clickable area (<code>area</code> tag) with a <code>href</code> attribute; the alternative being the content of the <code>alt</code> attribute</li>
<li>An image object (<code>object</code> tag); the alternative being the content between <code><object></code> and <code></object></code></li>
<li>A bitmap image (<code>canvas</code> tag); the alternative being the content between <code><canvas></code> and <code></canvas></code></li>
<li>An embedded image (<code>embed</code> tag); the alternative being the content between <code><embed></code> and <code></embed></code></li>
<li>A vector image (<code>svg</code> tag); the alternative being the content of the <code>title</code> attribute, of <code>aria-label</code>, or of the <code>desc</code> tag.</li>
</ul>
<p><strong>Note about <code>embed</code>:</strong> In HTML5, the <code>embed</code> tag has been modified. It is a self-closing tag that can not include alternative content. ARIA properties like <code>aria-label</code>, that could be used as alternatives, not being supported consistently, it is currently not possible to use the <code>EMBED</code> HTML5 element to implement accessible informative images.</p>
<h3 id="mImgReactive">
Image map
</h3>
<ol>
<li> <strong>client-side image map</strong> (<code>usemap</code> attribute): image divided into clickable or non-clickable areas (<code>nohref</code> attribute).
</li>
<li> <strong>Server-side image map</strong> (<code>ismap</code> attribute) : image for which the browser sends the coordinates of the pointing device to the server, each set of coordinates corresponding to a resource (URL). The server-side image map is extremely rare.
</li>
</ol>
<p>
Note: in HTML5, the <code>ismap</code> attribute is obsolete non conformant for form buttons of type image (<code>input type="image"</code>).
</p>
<h3 id="mImgText">
Image of text
</h3>
<p>
Image that displays text.
</p>
<h3 id="mInfoCouleur">
Information conveyed by color
</h3>
<p>Information that is visually conveyed by means of color. Indication that the required fileds of a form are in red; a change of background color to indicate the current page in a navigation menu; a change of text color to indicate that an article is unavailable, inside a list of articles; are all examples of information conveyed by color.</p>
<p>Information conveyed by color must be completed with another means of conveying information, that does not rely on visual perception, for users who do not perceive, or not well enough, colors and their combinations.</p>
<p>It is recommended to use additional text content, or images with appropriate text alternatives, to satisfy this requirement. Purely visual effects (change of style, size, boldness, typography, etc.) would not be considered sufficient, since they would not be perceived by users who do not have access to the graphical version of the page.</p>
<h3 id="mInfoShape">
Information conveyed by shape, size or location
</h3>
<p>It can be, for instance:</p>
<ul>
<li>a visual cue, to indicate the current page in a navigation menu (information conveyed by position),
</li>
<li>a visual effect to make the active tab in a tablist appear like it is in the foreground (information conveyed by shape);
</li>
<li>a change in text size in a tag cloud (information conveyed by size).
</li>
</ul>
<p>Or any other similar effect.</p>
<h3 id="mInfoMNature">Information of same nature</h3>
<p>
In a form, a set of fields that can be considered as a group because of the nature of the expected input.</p>
<p>Examples:</p>
<ul>
<li>Three consecutive fields to enter a date (year/month/day);</li>
<li>Consecutive fields for a phone number;</li>
<li>Fields for the name and address, when several similar blocks of input fields are available in the same form;</li>
<li>A set of radio buttons or checkboxes related to a question asked.</li>
</ul>
<p>These fields must be grouped together via a <code>fieldset</code> tag, and a relevant <code>legend</code> tag. In the case of radio buttons, generally, the legend is the question text.</p>
<p>
<strong>Note:</strong> When the form consists in only one block of input fields of same nature (user name and address, for example) or one single field (a search engine input field, for example), the <code>fieldset</code> tag is not required.</p>
<h3 id="mPresInfo">
Information presentation
</h3>
<p>Visual rendering of content via a graphic browser. Presentation concerns style, position and dimensions of HTML elements and their content. Information presentation must be performed with CSS. Are prohibited these elements: <code>basefont</code>, <code>blink</code>, <code>center</code>, <code>font</code>, <code>marquee</code>, <code>s</code>, <code>strike</code>, <code>tt</code>, <code>u</code>, <code>big</code>, <code>small</code>; and these attributes: <code>align</code>, <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>border</code>, <code>cellpadding</code>, <code>cellspacing</code>, <code>char</code>, <code>charoff</code>, <code>clear</code>, <code>compact</code>, <code>color</code>, <code>frameborder</code>, <code>hspace</code>, <code>link</code>, <code>marginheight</code>, <code>marginwidth</code>, <code>size</code>, <code>text</code>, <code>valign</code>, <code>vlink</code>, <code>vspace</code>. The <code>width</code> and <code>height</code> attributes used on other elements than <code>img</code>, <code>object</code>, <code>embed</code>, <code>canvas</code> and <code>svg</code> tags are also prohibited. </p>
<h3 id="mCadreEnLigne">
Inline frame
</h3>
<p>
HTML element (<code>iframe</code> tag) providing a way to display contents from another page, inside the current web page.
</p>
<h3 id="mControleSaisie">
Input control (form)
</h3>
<p>All the processes designed to inform the user about required fields, expected types and formats, and input errors in a form. These controls can be implemented by the content author, or rely upon HTML attributes (like <code>required</code> or <code>pattern</code>), WAI-ARIA properties (like <code>aria-required</code>) or field types automatically generating input indications or error messages (like <code>url</code>, <code>email</code>, <code>date</code>, <code>time</code>, for example).
</p>
<p>Important: after form submission with input errors, if an error handling page is displayed, the page title must include a mention like "input errors in the form".</p>
<h2 id="l">L</h2>
<h3 id="mLanguageChange">Language change, or Change in human language</h3>
<p>An indication of language change tells user agents which language-specific rules should be applied to render appropriately parts of the content written in a human language different from the main language of the content. This includes, notably, the vocal restitution performed by speech synthesizers. Language changes apply to all contents, including some attributes like <code>title</code>.</p>
<p><strong>Note:</strong> in HTML, it is not technically possible to signal language changes inside an attribute value. In this case, the language change is signalled via the element bearing this attribute. For instance, an hyperlink with a <code>title</code> attribute in German, in a page whose main language is English, should have a <code>lang</code> attribute set to <code>"de"</code>. When the attribute contains several language changes, the criterion is not applicable.
</p>
<h3 id="mCodeLangue">
Language code
</h3>
<p>Code with two characters (ISO 639-1) or 3 characters (ISO 639-2 and following) specifying the default language of a document or a chunk of text. The language code is constituted of two parts separated by a dash on the model <code>lang="[code][-option]</code>".
</p>
<ul>
<li>[code] represents a valid language code of 2 or 3 characters;</li>
<li>[option] is an indication left to the author's judgment.</li>
</ul>
<p>When the [option] is provided, it defines a language regionalisation. For example: <code>"en-us"</code> for American English. When checking for conformance against the RGAA, only the [code] part is evaluated.</p>
<h3 id="mLien">
Link
</h3>
<p>HTML element (<code>a</code> tag) that can be activated by the user (through a mouse, a keyboard…) and that initiates an action (generally, a page or file download) or an event generated by a script. A link has at least:
</p>
<ul>
<li>a resource reference (<code>href</code> attribute);</li>
<li>a link text between <code><a href="…"></code> and <code></a></code>.</li>
</ul>
<h3 id="mLienComposite">
Link (Combined)
</h3>
<p>Link whose content between <code><a href="…"></code> and <code></a></code> is formed with at least 2 elements of different types; for example, text and one or several images. The link text of a combined link is the whole text and the content of the text alternatives of the image(s) between <code><a href="…"></code> and <code></a></code>.
</p>
<p>Important notice: having two identical adjacent links (image and text links, for instance, with the same purposes, URL and link text) is a significant inconvenience for some users? Even though this is not a non-conformance, this practice should be avoided. A way to implement this kinfd of links is to include the image into the text link, in order to obtain a combined link.</p>
<p>On this subject, you may read this WCAG Technique: <a href="http://www.w3.org/TR/WCAG20-TECHS/H2.html">H2 : Combining adjacent image and text links for the same resource</a>.
</p>
<h3 id="mContexteLien">
Link context
</h3>
<p>The link context represents additional information that can be programmatically determined from relationships with a link, combined with the link text, and presented to users in different modalities. Programmatically determined contexts that can make a link explicit are the following:
</p>
<ul>
<li>The content of the sentence enclosing the link;</li>
<li>The content of the paragraph (<code>p</code> tag) containing the link;
</li>
<li>The content of the list item (<code>li</code> tag), or the content of a parent list item (<code>li</code> tag) of the list item, containing the link;
</li>
<li>The content of the heading (<code>h1</code> to <code>h6</code> tags) that is the closest ascendant of the link;
</li>
<li>The content of the table header cell(s) (<code>th</code> tags) associated with the table data cell (<code>td</code> tag) containing the link;
</li>
<li>The content of the table data cell (<code>td</code> tag) containing the link;
</li>
<li>The content of the link title (<code>title</code> attribute);
</li>
<li>The content of the <code>aria-label</code> property;</li>
<li>The content of the chunk(s) of text associated with the link via the <code>aria-labelledby</code> property.</li>
</ul>
<p><strong>Note 1:</strong> One of the 9 link contexts alone must be sufficient to make the link explicit.</p>
<p><strong>Note 2:</strong> The RGAA considers that specific links like <code>mailto</code> links (interpreted by the user agent as a clickable e-mail address) are explicit by nature. therefore it is not required to inform the user, via a link title for instance, that the link triggers the opening of an e-mail client application. Authors are advised, however, to adapt this rule to the situation. For instance, if the page contains multiple clickable e-mail addresses, some opening thee-mail client application, other sending to a contact form, then it may be necessary to provide additional information in order to help the user understand the different uses of this type of links in this context.</p>
<h3 id="mLienIdentique">
Links (Identical)
</h3>
<p>Two links are considered identical when link x (link text only, content of the <code>title</code> attribute or link context) is equal to link y. This definition applies to all types of links: text links, image links (identical images) and combined links.</p>
<p><strong>Warning:</strong> links with identical texts but with different link titles or different link contexts are not identical. Example of non-identical links: <code><a href="link_bar.html" title="click here to download the toolbar">click here</a></code> and <code><a href="link_doc.html" title="click here to download the document">click here</a></code>).
</p>
<h3 id="mIntituleLien">
Link text
</h3>
<p>
Textual information contained between <code><a href="…"></code> and <code></a></code> of a link completed if necessary with context information.</p>
<p> The four different types of links are:</p>
<ul>
<li>text link: text between <code><a href="…"></code> and <code></a></code>, completed, if necessary, with context information;
</li>
<li>image link: text alternative(s) of the image(s) between <code><a href="…"></code> and <code></a></code>, completed, if necessary, with context information;
</li>
<li>combined link: text, and text alternative(s) of the image(s) between <code><a href="…"></code> and <code></a></code>, completed, if necessary, with context information;
</li>
<li>vector link: text alternative of the vector image (<code>svg</code> tag) between <code><a href="…"></code> and <code></a></code> completed, if necessary, with context information. The link text for a vector link is the content of the text alternative for the vector image.
</li>
</ul>
<p><strong>Note 1:</strong> Read the <a href="#mLienImage">image link</a> entry for more information.
</p>
<p><strong>Note 2:</strong> An image link with a missing <code>alt</code> attribute is considered as not applicable for criterion 6.5.
</p>
<h3 id="mTitreLien">
Link title
</h3>
<p>
Content of the <code>title</code> attribute of a link. This content must be set only if it is necessary to identify the link target in an explicit way. A link title must duplicate the link text, and add complementary information. A link title will be considered as not relevant in the following situations:</p>
<ul>
<li>The link title is empty (<code>title=""</code>)</li>
<li>The link title is identical to the link text (see note 1)</li>
<li>The link title does not include the link text</li>
</ul>
<p><strong>Note 1:</strong> By exception, a link title identical to the link text is tolerated in the case of an image link (a link that only contains images), like a clickable icon, for example.
</p>
<p>Authors are warned that relying upon the <code>title</code> attribute to convey information is unsafe. Specifically, contents in <code>title</code> attributes are not rendered visually when navigating through a keyboard, a tactile interface, or when an assistive technology user settings prevent them from being rendered. Therefore, they should be used only as a last resort solution.</p>
<h3 id="mLienNature">
Link whose nature is not obvious
</h3>
<p>Link that can be confused with normal text, when it is indicated through color only, by some types of users who have altered or no color perception. For example, in this text "New strike at SNCF", if the word "strike" is a link that is specified by color alone, its kind can be ignored by users who cannot perceive color and who access content with CSS enabled. On the other hand, in this text "New strike at SNCF, read more" if "read more" is a link, a user who does not perceive colors will have no difficulties to understand its nature.
</p><p>
<strong>Note:</strong> "indicated through color only" means that the link is accompanied by no other visual indication (icon, underline, border…). As a consequence, a link of the same color as the surrounding text is targetted by this criterion.
</p>
<h3 id="mListes">
List
</h3>
<p>Sequence of elements that can be grouped in the form of a structured list as ordered, unordered or definition lists. For example, the links in a navigation menu is an unordered list of links, the different steps in a process are an ordered list of items, the pair term/definition in a glossary is a definition list. In HTML, lists are defined using the following tags:
</p>
<ul>
<li>Ordered list: <code>ol</code> and <code>li</code> tags (each list item is numbered incrementally)
</li>
<li>Unordered list: <code>ul</code> and <code>li</code> tags (each list item is, potentially, marked with a bullet point)
</li>
<li>Definition list: <code>dl</code>, <code>dt</code>: term(s) to be defined, and <code>dd</code>: definition data.
</li>
</ul>
<h2 id="m">M</h2>
<h3 id="mMain">
Main content area
</h3>