forked from momdo/momdo.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
WCAG20-TECHS_aria.html
1185 lines (1079 loc) · 194 KB
/
WCAG20-TECHS_aria.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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"><head><title>ARIA Techniques | Techniques for WCAG 2.0 日本語訳
</title><link rel="canonical" href="http://www.w3.org/TR/WCAG20-TECHS/aria"/><link rel="stylesheet" type="text/css" href="http://www.w3.org/WAI/GL/2014/WD-WCAG20-TECHS-20140107/slicenav.css"/><link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WG-NOTE.css"/><link rel="stylesheet" type="text/css" href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/additional.css"/><link rel="stylesheet" type="text/css" href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/bytech.css"/></head><body class="slices">
<div class="notice" style="border-radius: 20px; border: solid lightpink 3px;padding:0 1em;">
<p>この文書は、「<a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/">Techniques for WCAG 2.0</a>（W3C Working Group Note 2015-02-26）」における、<a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/aria.html">ARIA Techniques for WCAG 2.0</a>部分の日本語訳です。日本語訳は参考情報であって、公式な文書ではありません。また、翻訳に誤りがありえます。
</p>
<p>また、この文書は、<a href="http://waic.jp/docs/WCAG-TECHS/Overview.html">WCAG 2.0 実装方法集（Techniques for WCAG 2.0 日本語訳）｜WCAG 2.0 実装方法集</a>の補完を意図する部分訳です。訳者の持つ二次著作権に関しては<a href="http://creativecommons.org/publicdomain/zero/1.0/">パブリックドメイン</a>扱いとします。訳者に断ることなく、訳の補完、再利用その他を行って構いません。</p>
<p>訳者への連絡先、他の仕様の翻訳等については、<a href="https://github.com/momdo/momdo.github.io/wiki">Wiki</a>を参照ください。</p>
</div>
<div id="masthead"><p class="logo"><a href="http://www.w3.org/"><img width="72" height="48" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p><p class="collectiontitle"><a href="./">Techniques for WCAG 2.0</a></p></div><div id="skipnav"><p class="skipnav"><a href="#maincontent">Skip to Content (Press Enter)</a></p></div><a name="top"> </a><div class="div1"><a name="maincontent"/><h1 id="techs">ARIA Techniques for WCAG 2.0</h1><p>このウェブページは、<a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/Overview.html">Techniques and Failures for Web Content Accessibility Guidelines 2.0</a>からARIAテクニックを記載したものです。技術特有のテクニックは、一般的なテクニックを置き換えません：テクニックは適合に向けて作業中なので、コンテンツ開発者は、一般的なテクニックと技術特有のテクニックの両方を考慮すべきです。</p><p>特定の技術に対するテクニックの公開は、技術がWCAG2.0の達成基準と適合性要件を満たすコンテンツを作成するためにすべての状況で使用できることを意味するものではありません。開発者は、特定の技術の限界を認識し、障害をもつ人にアクセシブルな方法でコンテンツを提供する必要があります。 </p><p>テクニックに関する情報については、<a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/intro.html">Introduction to Techniques for WCAG 2.0</a>を参照してください。他の技術に対するテクニックのリストについては、<a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/Overview.html#contents">目次</a>を参照してください。</p><div class="toc">
<hr/><h2><a name="contents" id="contents"> </a>目次</h2><ul class="toc"><li><a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/#abstract">概要 </a></li><li><a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/#status">この文書の位置付け </a></li><li><a href="#wai-aria_notes">WAI-ARIA技術ノート</a></li><li><a href="#ARIA1">ARIA1：ユーザーインターフェースコントロールに対する説明ラベルを提供するために、aria-describedbyプロパティーを使用する</a></li><li><a href="#ARIA2">ARIA2：aria-requiredプロパティーとともに要求されるフィールドを識別する</a></li><li><a href="#ARIA4">ARIA4：ユーザーインターフェースコンポーネントのロールを公開するWAI-ARIAロールを使用する</a></li><li><a href="#ARIA5">ARIA5：ユーザーインターフェースコンポーネントのステートを公開するためにWAI-ARIAステートおよびプロパティー属性を使用する</a></li><li><a href="#ARIA6">ARIA6：オブジェクトのラベルを提供するためにaria-labelを使用する</a></li><li><a href="#ARIA7">ARIA7：リンクの目的に対してaria-labelledbyを使用する</a></li><li><a href="#ARIA8">ARIA8：リンクの目的に対してaria-labelを使用する</a></li><li><a href="#ARIA9">ARIA9：複数のテキストノードからラベルを連結するaria-labelledbyを使用する</a></li><li><a href="#ARIA10">ARIA10：非テキストコントロールに対して代替テキストを提供するためにaria-labelledbyを使用する</a></li><li><a href="#ARIA11">ARIA11：ページの領域を識別するためにARIAランドマークを使用する</a></li><li><a href="#ARIA12">ARIA12：見出しを識別するためにrole=headingを使用する</a></li><li><a href="#ARIA13">ARIA13：領域とランドマークを名付けるためにaria-labelledbyを使用する</a></li><li><a href="#ARIA14">ARIA14：可視ラベルが使用できない場合に不可視ラベルを提供するためにaria-labelを使用する</a></li><li><a href="#ARIA15">ARIA15：画像の説明を提供するためにaria-describedbyを使用する</a></li><li><a href="#ARIA16">ARIA16：ユーザーインターフェースコントロールの名前を提供するためにaria-labelledbyを使用する</a></li><li><a href="#ARIA17">ARIA17：関連するフォームコントロールを識別するためにグループ化するロールを使用する</a></li><li><a href="#ARIA18">ARIA18：エラーを識別するためにaria-alertdialogを使用する</a></li><li><a href="#ARIA19">ARIA19：エラーを識別するためにARIA role=alertまたはライブ領域を使用する</a></li><li><a href="#ARIA20">ARIA20：ページの領域を識別するためにregionロールを使用する</a></li><li><a href="#ARIA21">ARIA21：エラーフィールドを示すためにaria-invalidを使用する</a></li></ul></div><hr/><div class="body"><div class="div1">
<div class="div2"> <h3><a name="wai-aria_notes" id="wai-aria_notes"> </a>WAI-ARIA技術ノート</h3><p>アクセシビリティーを向上させるために、WAI-ARIAは、その時ブラウザーに公開されるウェブページやリッチインターネットウィジェットに次のセマンティック情報を追加するオプションをウェブ開発者に提供します。 </p><ul><li><p>"menu"、"treeitem"、"slider"、"progressbar"のような、提示されたウィジェットの種類を記述するためのロール。 </p></li><li><p>見出し、範囲、検索領域およびナビゲーション領域のような、ウェブページの構造を記述するためのロール。 </p></li><li><p>チェックボックスのための"checked"、サブメニューやその他ポップアップを描画するメニューのための"haspopup"、およびツリーノードのための"expanded/collapsed"のような、ステート・ウィジェットを記述するためのプロパティー。 </p></li><li><p>（たとえば株価情報のような）更新情報を取得する可能性が高いページの<a href="http://momdo.github.io/wai-aria/states_and_properties.html#attrs_liveregions">ライブ領域</a>だけでなく、この更新情報に対する割込みポリシーを定義するためのプロパティー。支援技術は、レンダリングされるとすぐに重要な更新情報を提示してもよい。しかし、偶発的な更新情報は、現在のタスクを完了した後のみに表示されます。たとえば、スクリーンリーダーは、現在の段落を読み終えた後にのみ偶発的な更新情報をユーザーに通知します。 </p></li><li><p>ドラッグソースおよびドロップターゲットを記述するドラッグ・アンド・ドロップのプロパティー。 </p></li><li><p>リッチインターネットウィジェットにキーボードナビゲーションを提供するための方法。</p></li></ul><p>これらの機能とDOM構造によって伝えられる構造情報の組み合わせは、著者が支援技術に相互運用可能な解決策を作り出すことを可能にします。（出典：<a href="http://www.w3.org/WAI/intro/aria">WAI-ARIA Overview</a>）</p><div class="div3"><h3><a name="wai-aria_ua_support" id="wai-aria_ua_support"> </a>WAI-ARIAに対するユーザーエージェントのサポート</h3><p>WAI-ARIAに対するユーザーエージェントのサポートは変化しますが、全般的なWAI-ARIAのサポートは改善しています。WAI-ARIAをサポートするブラウザーは、プラットフォームアクセシビリティーAPIにWAI-ARIAロールおよびプロパティーを対応づけます。 </p><ul><li><p> Firefox 1.5とFirefox 2.0は部分的にWAI-ARIAをサポートしますが、名前空間を使用する必要があり、ライブ領域の使用をサポートしません。</p></li><li><p> Firefox 3以上はライブ領域を含む、WAI-ARIAに対するより良いサポートを含みます。</p></li><li><p> IE8は、部分的にWAI-ARIAをサポートします。 </p></li><li><p> JAWS 8およびWindow-Eyes 5.5以上は、部分的にWAI-ARIAをサポートします。</p></li><li><p> Jaws 10以上はWAI-ARIAをサポートします。 </p></li><li><p> Firefoxの音声拡張であるFireVoxはまた、直接のDOMアクセスを経由してWAI-ARIAをサポートします。 </p></li><li><p>NVDAは、部分的にWAI-ARIAをサポートします。</p></li></ul></div><div class="div3"><h3><a name="wai-aria_accessibility_support" id="wai-aria_accessibility_support"> </a>WAI-ARIAに対するアクセシビリティーサポート</h3><p>アクセシビリティー・サポーテッドな方法で技術を使用することは、適合性要求のために必要です。詳細は<a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/appendixB.html#accessibility-support-documenting" class="understanding-ref">アクセシビリティーサポート</a>についてを読んでください。WCAGワーキンググループは、ARIA仕様がW3C勧告の状態に到達する際に、WAI-ARIAテクニックが十分であるかどうかの見直しをする予定です。【訳注：WAI-ARIA 1.0仕様は勧告になりました。】WAI-ARIAのステータスに関する最新情報については、<a href="http://www.w3.org/WAI/intro/aria">WAI-ARIA Overview</a>を参照してください。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA1" id="ARIA1"> </a>ARIA1：ユーザーインターフェースコントロールに対する説明ラベルを提供するために、aria-describedbyプロパティーを使用する</h2><div class="applicability"><h3 id="ARIA1-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#content-structure-separation-programmatic">
達成基準1.3.1（情報及び関係性）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#content-structure-separation-programmatic">
How to Meet 1.3.1 (Info and Relationships)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">
達成基準1.3.1（情報及び関係性）を理解する
</a></li></ul></li><li><a href="http://waic.jp/docs/WCAG20/Overview.html#minimize-error-cues">
達成基準3.3.2（ラベルまたは説明文）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#minimize-error-cues">
How to Meet 3.3.2 (Labels or Instructions)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/minimize-error-cues.html">
達成基準 3.3.2 を理解する（ラベルまたは説明文）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.1.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA1">User Agent Support Notes for ARIA1</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA1-description">解説</h3><div class="textbody"><p>このテクニックの目的は、プログラムで決定される、ユーザーインターフェース要素に関する記述的な情報を提供するために、どのようにWAI-ARIA <a href="http://momdo.github.io/wai-aria/states_and_properties.html#aria-describedby">aria-describedby</a>プロパティーを使用するかを示すことにあります。<code>aria-describedby</code>プロパティーは、ID参照リストの使用を通して1つ以上の要素に記述的情報を添付するために使用してもよいものです。ID参照リストは、1つ以上のユニークな要素IDを含みます。 </p><p>XHTMLやHTMLとともにWAI-ARIAステートおよびプロパティーを提供する方法については、<a href="http://www.w3.org/TR/wai-aria-primer/#ariahtml">Supporting ARIA in XHTML and HTML 4.01</a>を参照ください。なお、WAI-ARIAステートおよびプロパティーは他の言語との互換性があります。詳しくはその言語における文書の活用を参照ください。 </p><div class="note"><p class="prefix"><em>注：</em><code>aria-describedby</code>プロパティーは、外部リソース上の説明を参照するように設計されていません―これはIDなので、同一DOM文書で要素を参照しなければなりません。</p></div></div><h3 class="small-head" id="ARIA1-examples">事例</h3><h4 class="small-head" id="ARIA1-ex1">例1：「閉じる」ボタンの動作を記述するためにaria-describedbyプロパティーを使用する </h4><div class="example"><div class="textbody"><p>ダイアログ上の「閉じる」ボタンとして機能するボタンは、文書中の他の場所で記述されます。<code>aria-describedby</code>プロパティーは、リンクと説明を関連付けるために使用されます。</p><div class="code"><pre><code><button aria-label="Close" aria-describedby="descriptionClose"
onclick="myDialog.close()">X</button>
...
<div id="descriptionClose">Closing this window will discard any information entered and
return you back to the main page</div>
</code></pre></div><p>作業例：<a href="http://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA1/describedby-close.html" class="ex-ref">例1</a>
</p></div></div><h4 class="small-head" id="ARIA1-ex2">例2：フォームフィールドと指示を関連付けるためにaria-describedbyを使用する</h4><div class="example"><div class="textbody"><p>フォームラベルと同時に、フォームフィールドに指示を関連付けるために<code>aria-describedby</code>を使用するサンプルフォームフィールド。</p><div class="code"><pre><code><form>
<label for="fname">First name</label>
<input name="" type="text" id="fname" aria-describedby="int2">
<p id="int2">A bit of instructions for this field linked with aria-describedby. </p>
</form>
</code></pre></div></div></div><h4 class="small-head" id="ARIA1-ex3">例3：ボタンに関するより詳細な情報を提供するためにaria-describedbyプロパティーを使用する</h4><div class="example"><div class="textbody"><div class="code"><pre><code><p><span id="fontDesc">Select the font faces and sizes to be used on this page</span>
<button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">Fonts</button>
</p>
<p><span id="colorDesc">Select the colors to be used on this page</span>
<button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">Colors</button>
</p>
<p><span id="customDesc">Customize the layout and styles used on this page</span>
<button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">Customize</button>
</p>
</code></pre></div></div></div><h4 class="small-head" id="ARIA1-ex4">例4：フォームフィールドとツールチップを関連付けるためにaria-describedbyを使用する</h4><div class="example"><div class="textbody"><p><a href="http://test.cita.uiuc.edu/aria/tooltip/tooltip1.php">iCITA</a>サイト由来の次のコード断片は、フォーカスが要素に置かれたときに、ツールチップを表示するために、<code>aria-describedby</code>とonfocus="tooltipShow()"関数を使用する方法を示します。</p><div class="code"><pre><code><html lang="en-us">
<head>
<title>inline: Tooltip Example 1</title>
<link rel="stylesheet" href="css/tooltip1_inline.css" type="text/css">
<script type="text/javascript" src="js/tooltip1_inline.js"></script>
<script type="text/javascript" src="../js/widgets_inline.js"></script>
<script type="text/javascript" src="../js/globals.js"></script>
<link rel="icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon">
</head>
...
<body onload="initApp()">
<div id="container">
<h1>Tooltip Example 1</h1>
<h2>Create Account</h2>
<div class="text">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" size="20"
onmouseover="tooltipShow(event, this, 'tp1');"
onfocus="tooltipShow(event, this, 'tp1');"
aria-describedby="tp1"
aria-required="false"/>
<div id="tp1" role="tooltip" aria-hidden="true">Your first name is optional. </div>
</div>
</code></pre></div></div></div><h4 class="small-head" id="ARIA1-ex5">例5：XHTML</h4><div class="example"><div class="textbody"><p>この例は、application/xhtml+xmlのMIMEタイプをもつXHTMLでコーディングされています。このMIMEタイプは、すべてのユーザーエージェントでサポートされません。aria-describedbyプロパティーは、XHTMLマークアップに直接追加され、追加のスクリプトを必要としません。 </p></div><div class="code"><p><strong>コード例：</strong></p><pre><code><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Demonstration of aria-describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
float:left;
width:400px;
}
.right {
width:100px;
text-align:right;
}
</style>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications aria-describedby property
to provide more detailed information about the button action</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">
Fonts </button></span></p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">
Colors </button></span></p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">
Customize </button></span></p>
</div>
</body>
</html>
</code></pre></div></div><h4 class="small-head" id="ARIA1-ex6">例6：HTML</h4><div class="example"><div class="textbody"><p>この例は、ページ上のボタンにaria-describedbyプロパティーを追加するためにスクリプトを使用しています。この例は、説明テキストを含む要素のidを保持するためにbuttonIds配列変数を作成します。setDescribedBy()関数は、windowオブジェクトのonloadイベントから呼び出されます。 </p><p>setDescribedBy()関数は、ボタン要素のすべてをループし、aria-describedbyプロパティーを設定するために各ボタン要素上でsetAttribute()を呼び出します。各ボタンのaria-describedbyプロパティーは、その説明のテキストを含む要素のidに設定されます。 </p><p>WAI-ARIAをサポートするユーザーエージェントおよび/または支援技術を使用して、ユーザーインターフェースコントロールがフォーカスを受け取る際に説明は提供されます。 </p></div><div class="code"><p><strong>コード例：</strong></p><pre><code><html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demonstration of aria-describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
float:left;
width:400px;
}
.right {
width:100px;
text-align:right;
}
</style>
<script type="text/javascript">
//<![CDATA[
// array entries for each button on the page that associates the button id
// with the id of the element containing the text which describes the button
var buttonIds = new Array();
buttonIds["fontB"]= "fontDesc";
buttonIds["colorB"] = "colorDesc";
buttonIds["customB"] = "customDesc";
// function that is run after the page has loaded to set the aria-describedBy
// property on each of the elements referenced by the array of id values
function setDescribedBy(){
if (buttonIds){
var buttons = document.getElementsByTagName("button");
if (buttons){
var buttonId;
for(var i=0; i<buttons.length; i++){
buttonId = buttons[i].id;
if (buttonId && buttonIds[buttonId]){
buttons[i].setAttribute("aria-describedby", buttonIds[buttonId]);
}
}
}
}
}
// simulated action function - currently just displays an alert
function doAction(theAction){
alert("Perform the " + theAction + " action");
}
window.onload=setDescribedBy;
//]]>
</script>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications
aria-describedby property to provide more detailed information
about the button action.
</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
</p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
</p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
</p>
</div>
</body>
</code></pre></div></div><h3 id="ARIA1-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/WAI/intro/aria">WAI-ARIA Overview</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</p></li><li><p>
<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">Using the aria-describedby attribute (MDN)</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>
</p></li></ul></div><h3 id="ARIA1-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="#ARIA2">ARIA2：aria-requiredプロパティーとともに要求されるフィールドを識別する</a></li><li><a href="#ARIA7">ARIA7：リンクの目的に対してaria-labelledbyを使用する</a></li></ul></div><h3 id="ARIA1-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA1-procedure">手順</h4><ol class="enumar"><li><p>一意なIDを経由して1つ以上の要素を参照する<code>aria-describedby</code>属性を持つユーザーインタフェースコントロールがあることをチェックします。</p></li><li><p>参照される要素または、要素がユーザーインターフェースコントロールに関する追加情報を提供することをチェックします。</p></li></ol><h4 class="small-head" id="ARIA1-results">判定基準</h4><ul><li><p>チェック#1と#2がtrueになる。 </p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA2" id="ARIA2"> </a>ARIA2：aria-requiredプロパティーとともに要求されるフィールドを識別する</h2><div class="applicability"><h3 id="ARIA2-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#content-structure-separation-programmatic">
達成基準1.3.1（情報及び関係性）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#content-structure-separation-programmatic">
How to Meet 1.3.1 (Info and Relationships)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">
達成基準1.3.1（情報及び関係性）を理解する
</a></li></ul></li><li><a href="http://waic.jp/docs/WCAG20/Overview.html#minimize-error-suggestions">
達成基準3.3.3（入力エラー修正方法の提示）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#minimize-error-suggestions">
How to Meet 3.3.3 (Error Suggestion)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/minimize-error-suggestions.html">
達成基準3.3.3（入力エラー修正方法の提示）を理解する
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.2.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA2">User Agent Support Notes for ARIA2</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA2-description">解説</h3><div class="textbody"><p>このテクニックの目的は、（プレゼンテーションを通して要求されることを示す）フォームフィールドがフォームの正常送信のために必須であるプログラム的な指標を提供することです。</p><p>要素が要求されるという事実は多くの場合、（テキストまたは非テキストのシンボル、または入力が要求されることをテキスト、または色/スタイルを経由して）視覚的に提示されますが、これは、フィールド名の一部としてプログラム的に決定できません。</p><p>WAI-ARIA <code>aria-required</code>プロパティーは、ユーザー入力が送信前に要求されることを示します。<code>aria-required</code>プロパティーは、"true"または"false"値を持つことができます。たとえば、ユーザーが住所のフィールドに入力しなければならない場合、<code>aria-required</code>は"true"に設定されます。</p><div class="note"><p class="prefix"><em>注1：</em>注： <code>aria-required="true"</code>の使用は、一部の支援技術のユーザーに対して<code>required</code>プロパティーを補強できるので、アスタリスクや他のテキストシンボルがプログラム的にフィールドに関連付けられる場合にも有益であるかもしれません。</p><p class="prefix"><em>注2：</em>多くの場合、要素が要求されるという事実は、（コントロールの後にサインまたはシンボルのように）視覚的に提示されます。視覚的なプレゼンテーションに加えて<code>aria-required</code>プロパティーを使用することは、ユーザーエージェント固有の方法でユーザーにこの重要な情報を伝えることをユーザーエージェントに対してはるかに簡単にします。XHTMLやHTMLとともにWAI-ARIAステートおよびプロパティーを提供する方法については、<a href="http://www.w3.org/TR/wai-aria-primer/#ariahtml">Supporting ARIA in XHTML and HTML 4.01</a>を参照ください。なお、WAI-ARIAステートおよびプロパティーは他の言語との互換性があります。詳しくはその言語における文書の活用を参照ください。 </p></div></div><h3 class="small-head" id="ARIA2-examples">事例</h3><h4 class="small-head" id="ARIA2-ex1">例1： </h4><div class="example"><div class="textbody"><p><code>required</code>プロパティーはlabel要素の次に置かれるアスタリスクによって示されます：</p><div class="code"><pre><code>
<form action="#" method="post" id="login1" onsubmit="return errorCheck1()">
<p>Note: [*]denotes mandatory field</p>
<p>
<label for="usrname">Login name: </label>
<input type="text" name="usrname" id="usrname" aria-required="true"/>[*]
</p>
<p>
<label for="pwd">Password</label>
<input type="password" name="pwd" id="pwd" size="12" aria-required="true" />[*]
</p>
<p>
<input type="submit" value="Login" id="next_btn" name="next_btn"/>
</p>
</form> </code></pre></div></div></div><h4 class="small-head" id="ARIA2-ex2">例2： </h4><div class="example"><div class="textbody"><p><code>required</code>プロパティーは<code>label</code>要素の次に置かれる単語"required"によって示されます：</p><div class="code"><pre><code><head>
<form action="#" method="post" id="step1" onsubmit="return errorCheck2()">
<p>
<label for="fname">First name: </label>
<input type="text" id="fname" aria-required="true" />
[required]
</p>
<p>
<label for="mname">Middle name: </label>
<input type="text" id="mname" />
</p>
<p>
<label for="lname">Last name: </label>
<input type="text" id="lname" aria-required="true" />
[required]
</p>
<p>
<label for="email">Email address: </label>
<input type="text" id="email" aria-required="true" />
[required]
</p>
<p>
<label for="zip_post">Zip / Postal code: </label>
<input type="text" id="zip_post" size="6" aria-required="true" />
[required]
</p>
<p>
<input type="submit" value="Next Step" id="step_btn" name="step_btn" />
</p>
</form> </code></pre></div></div></div><h4 class="small-head" id="ARIA2-ex3">例3： </h4><div class="example"><div class="textbody"><p>必須フィールドは、フィールドの周りの赤いボーダーと<code>content:before</code>を使用するCSSを経由してレンダリングされる星のアイコンで示されます。この例はまた、<code>role=radio</code>をもつカスタムラジオボタンを使用しますが、スパンをラジオボタンのように実際に動作させるためのスクリプトは、この例に含まれていません。フォームの下にあるCSSプロパティーが利用可能です。
</p><div class="code"><pre><code><head>
<form action="#" method="post" id="alerts1">
<label for="acctnum" data-required="true">Account Number</label>
<input size="12" type="text"
aria-required="true" name="acctnum" />
<p id="radio_label">Please send an alert when balance exceeds $3,000.</p>
<ul id="rg" role="radiogroup" aria-labelledby="radio_label">
<li id="rb1" role="radio" aria-required="true">Yes</li>
<li id="rb2" role="radio" aria-required="true">No</li>
</ul>
</form>
</code></pre></div><div class="code"><pre><code><head>
[aria-required=true] {
border: red thin solid;
}
[aria-required=true]:before {
content: url('/iconStar.gif');
}
[data-required=true]:after {
content: url('/iconStar.gif');
}
</code></pre></div></div></div><h4 class="small-head" id="ARIA2-ex4">例4：XHTMLにおける必須のテキスト入力フィールド</h4><div class="example"><div class="textbody"><p>次の例は、フォームフィールドが送信されなければならないことを示すために<code>aria-required</code>プロパティーを使用するXHTML文書を示します。フィールドの必須性質はまた、WAI-ARIAをサポートしないユーザーエージェントのためにフォールバックとしてラベルで表示されます。 </p></div><div class="code"><p><strong>コード例：</strong></p><pre><code>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Required Input</title>
</head>
<body>
<h1>Required Input</h1>
<p>The following form input field must be completed by the user
before the form can be submitted.</p>
<form action="http://example.com/submit">
<p>
<label for="test">Test (required)</label>
<input name="ariaexample" id="example" aria-required="true" aria-label="Test"/>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
</code></pre></div></div><h4 class="small-head" id="ARIA2-ex5">例5：スクリプト経由でaria-requiredプロパティーを追加する</h4><div class="example"><div class="textbody"><p>この例は、フォーム要素に<code>aria-required</code>プロパティーを追加するためにスクリプトを使用します。要求されるプロパティーは、<code>setAttribute()</code>APIを使用して割り当てられます。 </p><p>配列変数<var>requiredIds</var>は、要求されるとしてマークされる必要がある要素のIDとともに作成されます。<code>setRequired()</code>関数は、<code>window</code>オブジェクトの<code>onload</code>イベントから呼び出されます。 </p><p><code>setRequired()</code>関数は、提供されたIDのすべてをループし、要素を取得し、setAttribute()関数を使用してtrueの<code>aria-required</code>プロパティーを割り当てます。 </p><p>このページがFirefox 3.0以降およびWAI-ARIAをサポートするスクリーンリーダーを使用してアクセスされる場合、入力フィールドのラベルを読む際にスクリーンリーダーは"required"を伝えます。 </p></div><div class="code"><p><strong>コード例：</strong></p><pre><code><head>
<script type="text/javascript">
//<![CDATA[
// array or ids on the required fields on this page
var requiredIds = new Array( "firstName", "lastName");
// function that is run after the page has loaded to set the aria-required property on each of the
//elements in requiredIds array of id values
function setRequired(){
if (requiredIds){
var field;
for (var i = 0; i< requiredIds.length; i++){
field = document.getElementById(requiredIds[i]);
field.setAttribute("aria-required", "true");
}
}
}
window.onload=setRequired;
//]]>
</script>
</head>
<body>
<p>Please enter the following data. Required fields have been programmatically identified
as required and marked with an asterisk (*) following the field label.</p>
<form action="submit.php">
<p>
<label for="firstName">First Name *: </label><input type="text" name="firstName"
id="firstName" value="" />
<label for="lastName">Last Name *: </label><input type="text" name="lastName"
id="lastName" value="" />
</p>
</form>
</body>
</code></pre></div></div><h3 id="ARIA2-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/WAI/intro/aria">WAI-ARIA Overview</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.deque.com/blog/aria-requiredtrue-wcag-2-compliance-practice/">Aria-required=true: WCAG 2 Compliance versus Best Practice</a>
</p></li></ul></div><h3 id="ARIA2-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA2-procedure">手順</h4><p>要求されることをプレゼンテーションを経由して示される各コントロールに対して。</p><ol class="enumar"><li><p><code>aria-required</code>属性が存在するかどうかをチェックします。</p></li><li><p><code>aria-required</code>属性値が、ユーザーインターフェースコンポーネントの正しいrequired状態であるかどうかをチェックします。</p></li></ol><h4 class="small-head" id="ARIA2-results">判定基準</h4><ul><li><p>チェック#1と#2がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA4" id="ARIA4"> </a>ARIA4：ユーザーインターフェースコンポーネントのロールを公開するWAI-ARIAロールを使用する</h2><div class="applicability"><h3 id="ARIA4-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。</p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#ensure-compat-rsv">
達成基準4.1.2（名前、ロール、値）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#ensure-compat-rsv">
How to Meet 4.1.2 (Name, Role, Value)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">
達成基準4.1.2 を理解する（名前、ロール、値）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.3.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA4">User Agent Support Notes for ARIA4</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA4-description">解説</h3><div class="textbody"><p>このテクニックの目的は、<a href="http://momdo.github.io/wai-aria/roles.html#role_definitions">ロールのWAI-ARIAの定義</a>で定義されたいずれかの非抽象の値を持つ<code>role</code>属性を用いて要素のロールを定義することです。WAI-ARIA仕様は、どのようにロールが他のロール、そして各ロールのステートおよびプロパティーと関係するのか、各ロールの有益な説明を提供します。リッチインターネットアプリケーションロールが新しいユーザーインターフェースウィジェットを定義する場合、ロールの公開はユーザーがウィジェットおよびウィジェットと対話する方法を理解できるようにします。</p></div><h3 class="small-head" id="ARIA4-examples">事例</h3><h4 class="small-head" id="ARIA4-ex1">例1：単純なツールバー</h4><div class="example"><div class="textbody"><p>WAI-ARIAオーサリングプラクティス文書は、<a href="http://www.w3.org/TR/2010/WD-wai-aria-practices-20100916/#accessiblewidget">3つのボタンを含むツールバーを示します</a>。<code>div</code>要素は"toolbar"のロールを持ち、<code>img</code>要素は"button"のロールを持ちます：</p><div class="code"><pre><code>
<div role="toolbar"
tabindex="0"
id="customToolbar"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);"
onclick="return optionClickEvent(event);"
onblur="hideFocus()"
onfocus="showFocus()"
>
<img src="img/btn1.gif"
role="button"
tabindex="-1"
alt="Home"
id="b1"
title="Home">
<img src="img/btn2.gif"
role="button"
tabindex="-1"
alt="Refresh"
id="b2"
title="Refresh">
<img src="img/btn3.gif"
role="button"
tabindex="-1"
alt="Help"
id="b3"
title="Help">
</div>
</code></pre></div><p>AEGISプロジェクトのウェブサイトは、<a href="http://access.aol.com/aegis/#goto_menubar">メニューバーの実例</a>を含みます。</p></div></div><h4 class="small-head" id="ARIA4-ex2">例2：ツリーウィジェット</h4><div class="example"><div class="textbody"><p>WAI-ARIA Primerは、<a href="http://www.w3.org/TR/wai-aria-primer/#exampletree">ツリーウィジェットを示します</a>。ツリーとその構造を識別するためのロール"tree"、"treeitem"、"group"に注目してください。コード由来の単純化した抜粋は以下のとおりです：</p><div class="code"><pre><code>
<ul role="tree" tabindex="0">
<li role="treeitem">Birds</li>
<li role="treeitem">Cats
<ul role="group">
<li role="treeitem">Siamese</li>
<li role="treeitem">Tabby</li>
代わりに<c0><a1>ul</a1></c0>を使用する。
</li>
<li role="treeitem">Dogs
<ul role="group">
<li role="treeitem">Small Breeds
<ul role="group">
<li role="treeitem">Chihuahua</li>
<li role="treeitem">Italian Greyhound</li>
<li role="treeitem">Japanese Chin</li>
代わりに<c0><a1>ul</a1></c0>を使用する。
</li>
<li role="treeitem"">Medium Breeds
<ul role="group">
<li role="treeitem">Beagle</li>
<li role="treeitem">Cocker Spaniel</li>
<li role="treeitem">Pit Bull</li>
代わりに<c0><a1>ul</a1></c0>を使用する。
</li>
<li role="treeitem">Large Breeds
<ul role="group">
<li role="treeitem">Afghan</li>
<li role="treeitem">Great Dane</li>
<li role="treeitem">Mastiff</li>
代わりに<c0><a1>ul</a1></c0>を使用する。
</li>
代わりに<c0><a1>ul</a1></c0>を使用する。
</li>
</ul>
</code></pre></div><p>AEGISプロジェクトのウェブサイトは、<a href="http://access.aol.com/aegis/#goto_tree">ツリーの実例</a>を含みます。</p></div></div><h3 id="ARIA4-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://momdo.github.io/wai-aria/usage.html#usage_intro">Accessible Rich Internet Applications (WAI-ARIA) 1.0、ロール</a>
</p></li><li><p>
<a href="http://momdo.github.io/wai-aria/roles.html">Accessible Rich Internet Applications (WAI-ARIA) 1.0、ロールモデル</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/html-aapi/#html-element-to-accessibility-api-role-mapping-matrix">HTML to Platform Accessibility APIs Implementation Guide: HTML Element to Accessibility API Role Mapping Matrix</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/wai-aria-primer/">WAI-ARIA 1.0 Primer</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>
</p></li></ul></div><h3 id="ARIA4-related-techs">関連する実装方法</h3><div class="textbody"><p>（現在挙げられるものはありません）</p></div><h3 id="ARIA4-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA4-procedure">手順</h4><p><code>role</code>属性を使用するユーザーインターフェースコンポーネントの場合：</p><ol class="enumar"><li><p>role属性の値が、WAI-ARIA仕様で定義された値から非抽象ロールのいずれかであることをチェックしてください。</p></li><li><p>ユーザーインターフェースコンポーネントの特性がロールで記述されていることをチェックしてください。</p></li></ol><h4 class="small-head" id="ARIA4-results">判定基準</h4><ul><li><p>#1と#2がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA5" id="ARIA5"> </a>ARIA5：ユーザーインターフェースコンポーネントのステートを公開するためにWAI-ARIAステートおよびプロパティー属性を使用する</h2><div class="applicability"><h3 id="ARIA5-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#ensure-compat-rsv">
達成基準4.1.2（名前、ロール、値）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#ensure-compat-rsv">
How to Meet 4.1.2 (Name, Role, Value)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">
達成基準4.1.2 を理解する（名前、ロール、値）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.4.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA5">User Agent Support Notes for ARIA5</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA5-description">解説</h3><div class="textbody"><p>このテクニックの目的は、支援技術によって読み込まれて設定できるようにするため、および支援技術がこの値に変更を通知するために、ユーザーインターフェースコンポーネントのステート、プロパティーおよび値を公開することで<a href="http://momdo.github.io/wai-aria/states_and_properties.html">WAI-ARIAステートおよびプロパティー</a>を使用することです。WAI-ARIA仕様は、各属性の規範的記述、およびユーザーインターフェース要素がサポートするロールを提供します。リッチインターネットアプリケーションロールが新しいユーザーインターフェースウィジェットを定義する場合、ステートおよびプロパティー属性の公開はユーザーにウィジェットを理解できるようにし、そしてウィジェットと対話できるようにします。</p></div><h3 class="small-head" id="ARIA5-examples">事例</h3><h4 class="small-head" id="ARIA5-ex1">例1：トグルボタン</h4><div class="example"><div class="textbody"><p>ボタンが属性<code>aria-pressed</code>を実装する場合にロールボタン<code>button</code>を持つウィジェットはトグルボタンとして動作します。<code>aria-pressed</code>がtrueである場合、ボタンは"pressed"状態にあります。<code>aria-pressed</code>がfalseである場合、押されていません。属性が存在しない場合、ボタンは単純なコマンドボタンです。</p><p>オープンAjaxのアクセシビリティーの例から次の断片、例38は、太字のテキストを選択するトグルボタンに対するWAI-ARIAマークアップを示します：</p><div class="code"><pre><code>
<li id="bold1"
class="toggleButton"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="bold_label"
aria-controls="text1">
<img src="http://www.oaa-accessibility.org/media/examples/images/button-bold.png" alt="bold text" align="middle">
</li>
</code></pre></div><p><code>li</code>要素は、"button"と"aria-pressed"属性のロールを持ちます。この例のJavaScriptからの抜粋は、"aria-pressed"属性値を更新します：</p><div class="code"><pre><code>
/**
* togglePressed() toggles the aria-pressed atribute between true or false
*
* @param ( id object) button to be operated on
*
* @return N/A
*/
function togglePressed(id) {
// reverse the aria-pressed state
if ($(id).attr('aria-pressed') == 'true') {
$(id).attr('aria-pressed', 'false');
}
else {
$(id).attr('aria-pressed', 'true');
}
}
</code></pre></div><p>このボタンは、OpenAjaxアライアンスのサイトで、<a href="http://www.oaa-accessibility.org/examplep/toolbar1/">視覚的な状態のためにインライン画像を使用するツールバー―例38の実施例</a>の一部として提供されています。</p></div></div><h4 class="small-head" id="ARIA5-ex2">例2：スライダー</h4><div class="example"><div class="textbody"><p>ロール<code>slider</code>をもつウィジェットは、ユーザーに指定した範囲内から値を選択させます。スライダーは、スライダーの大きさやつまみの位置によって、現在の値および可能な値の範囲を表します。スライダーのプロパティーは、属性<code>aria-valuemin</code>、<code>aria-valuemax</code>、および<code>aria-valuenow</code>で表されます。</p><p>Open Ajaxアクセシビリティーの例から次の断片、例32は、JavaScriptで作成されたスライダーに対するWAI-ARIAマークアップを示しています。JavaScriptが属性aria-valuemin、aria-valuemax、およびaria-valuenowを設定することに注目してください：</p><div class="code"><pre><code> var handle = '<img id="' + id + '" class="' + (this.vert == true ? 'v':'h') +'sliderHandle" ' +
'src="http://www.oaa-accessibility.org/media/examples/images/slider_' + (this.vert == true ? 'v':'h') + '.png" ' + 'role="slider" ' +
'aria-valuemin="' + this.min +
'" aria-valuemax="' + this.max +
'" aria-valuenow="' + (val == undefined ? this.min : val) +
'" aria-labelledby="' + label +
'" aria-controls="' + controls + '" tabindex="0"></img>';</code></pre></div><p>この例のJavaScriptからの抜粋は、スライダーのつまみの値が変更された場合に"aria-valuenow"属性値を更新します：</p><div class="code"><pre><code> slider.prototype.positionHandle = function($handle, val) {
...
// Set the aria-valuenow position of the handle
$handle.attr('aria-valuenow', val);
...
}
</code></pre></div><p>このスライダーは、OpenAjaxアライアンスのサイトで、<a href="http://oaa-accessibility.org/example/32/">スライダー― 例32の実施例</a>の一部として提供されています。</p></div></div><h3 id="ARIA5-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://momdo.github.io/wai-aria/usage.html#usage_intro">Accessible Rich Internet Applications (WAI-ARIA) 1.0、ロール</a>
</p></li><li><p>
<a href="http://momdo.github.io/wai-aria/roles.html">Accessible Rich Internet Applications (WAI-ARIA) 1.0、ロールモデル</a>
</p></li><li><p>
<a href="http://momdo.github.io/wai-aria/states_and_properties.html">Accessible Rich Internet Applications (WAI-ARIA) 1.0、サポートされるステートおよびプロパティー</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/html-aapi/#html-element-to-accessibility-api-role-mapping-matrix">HTML to Platform Accessibility APIs Implementation Guide: HTML Element to Accessibility API Role Mapping Matrix</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/wai-aria-primer/">WAI-ARIA 1.0 Primer</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>
</p></li></ul></div><h3 id="ARIA5-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="#ARIA4">ARIA4：ユーザーインターフェースコンポーネントのロールを公開するWAI-ARIAロールを使用する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/H91.html">H91： HTMLのフォーム・コントロール及びリンクを用いる</a></li></ul></div><h3 id="ARIA5-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA5-procedure">手順</h4><p>
<a href="http://momdo.github.io/wai-aria/roles.html#roles_categorization">WAI-ARIA仕様、5.3節、ロールの分類</a>は、要求されかつ継承される各ロールに対するステートおよびプロパティーを定義します。</p><p>WAI-ARIAロール属性を使用するユーザーインターフェースコンポーネントの場合：</p><ol class="enumar"><li><p>ロールに対する要求されるステートおよびプロパティーが存在することをチェックしてください。</p></li><li><p>要求、サポート、継承のいずれも存在しないWAI-ARIAステートまたはプロパティーをチェックしてください。</p></li><li><p>ユーザーインターフェースコンポーネントが状態を変更する際に、ステートおよびプロパティーの値が現在の状態を反映するように更新されていることをチェックしてください。</p></li></ol><h4 class="small-head" id="ARIA5-results">判定基準</h4><ul><li><p>#1、#2と#3がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA6" id="ARIA6"> </a>ARIA6：オブジェクトのラベルを提供するためにaria-labelを使用する</h2><div class="applicability"><h3 id="ARIA6-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#text-equiv-all">
達成基準1.1.1（非テキストコンテンツ）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#text-equiv-all">
How to Meet 1.1.1 (Non-text Content)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/text-equiv-all.html">
達成基準 1.1.1 を理解する（非テキストコンテンツ）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.5.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA6">User Agent Support Notes for ARIA6</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA6-description">解説</h3><div class="textbody"><p>このテクニックの目的は、支援技術によって読み取りすることができるオブジェクトのラベルを提供することです。<code>aria-label</code>属性は、ボタンなど、オブジェクトのテキストラベルを提供します。スクリーンリーダーがオブジェクトに遭遇する場合、<code>aria-label</code>テキストは読み込まれ、ユーザーがそのオブジェクトがどのようなものかを知ります。</p><p>著者は、<code>aria-labelledby</code>が同じオブジェクトに使用される状況で支援技術によって<code>aria-label</code>が無視されてもよいことに注意すべきです。名前階層の詳細については、<a href="http://momdo.github.io/wai-aria/roles.html#textalternativecomputation">ARIA仕様</a>およびHTML to Platform Accessibility APIs Implementation Guideにおける<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">アクセシブルな名前と説明計算</a>を参照してください。著者は、<code>aria-label</code>の使用が<code>for</code>属性を使用するフォームフィールドに関連する画像の<code>alt</code>または<code>label</code>として任意のネイティヴな名前を上書きすることに注意すべきです。</p></div><h3 class="small-head" id="ARIA6-examples">事例</h3><h4 class="small-head" id="ARIA6-ex1">例1：ナビゲーションランドマークを区別する</h4><div class="example"><div class="textbody"><p>次の例は、同じページ上のランドマークの同じ種類のうちの2個以上が存在し、ラベルとして参照できるページで既存のテキストが存在しない場合、<code>aria-label</code>がHTML4とXHTML1.0文書で2つのナビゲーションランドマークを識別するために使用できる方法を示しています。</p><div class="code"><pre><code><div role="navigation" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div></code></pre></div></div></div><h4 class="small-head" id="ARIA6-ex2">例2：領域のランドマークを識別する</h4><div class="example"><div class="textbody"><p>次の例は、一般的な"region"ランドマークが気象ポートレットに追加する可能性のある方法を示しています。<code>aria-label</code>でラベル付けされているため、ラベルとして参照できるページに既存のテキストは存在しません。</p><div class="code"><pre><code><div role="region" aria-label="weather portlet">
...
</div></code></pre></div></div></div><h4 class="small-head" id="ARIA6-ex3">例3：数学のラベルを提供する</h4><div class="example"><div class="textbody"><p>以下はmathロール、適切なラベル、およびMathMLのレンダリングを使用する、MathMLの機能の例を示します：</p><div class="code"><pre><code><div role="math" aria-label="6 divided by 4 equals 1.5">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mn>6</mn>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mn>1.5</mn>
</math>
</div></code></pre></div></div></div><h3 id="ARIA6-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/html-aapi/#html-element-to-accessibility-api-role-mapping-matrix">HTML to Platform Accessibility APIs Implementation Guide: HTML Element to Accessibility API Role Mapping Matrix</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li></ul></div><h3 id="ARIA6-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="#ARIA16">ARIA16：ユーザーインターフェースコントロールの名前を提供するためにaria-labelledbyを使用する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/H44.html">H44: label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける</a></li></ul></div><h3 id="ARIA6-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA6-procedure">手順</h4><p><code>aria-label</code>属性が存在する各要素に対して。</p><ol class="enumar"><li><p>テキストの説明が正確にオブジェクトをラベル付けする、またはその目的の説明を提供する、または同等の情報を提供するかどうかを検査します。</p></li></ol><h4 class="small-head" id="ARIA6-results">判定基準</h4><ul><li><p>#1がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA7" id="ARIA7"> </a>ARIA7：リンクの目的に対してaria-labelledbyを使用する</h2><div class="applicability"><h3 id="ARIA7-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#navigation-mechanisms-refs">
達成基準 2.4.4 （文脈におけるリンクの目的）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#navigation-mechanisms-refs">
How to Meet 2.4.4 (Link Purpose (In Context))
</a></li><li><a href="http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/navigation-mechanisms-refs.html">
達成基準 2.4.4 を理解する（文脈におけるリンクの目的）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.6.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA7">User Agent Support Notes for ARIA7</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA7-description">解説</h3><div class="textbody"><p><code>aria-labelledby</code>属性とともに、著者は、フォーカス可能な要素（フォームコントロールまたはリンク）のラベルとしてページ上で可視テキスト要素を使用することができます。たとえば、"read more..."（続きを読む）のリンクは、リンクの目的を明確にするために、先行するセクションの見出しテキストと関連付けることができるかもしれません（例1を参照）。</p><p><code>aria-labelledby</code>の支援をフォーカス可能な要素にテキストを関連付ける場合、ターゲットのテキスト要素は、フォーカス可能な要素の<code>aria-labelledby</code>属性値で参照されるIDが与えられます。</p><p>フォーカス可能な要素のラベルとして、ページ上に複数のテキスト要素を使用することも可能です。それぞれの使用されるテキスト要素は、<code>aria-labelledby</code>属性の値でID（IDREF）の文字列として参照される一意なIDを与えられなければなりません。そしてラベルテキストは、<code>aria-labelledby</code>属性の値でIDの順序に従って連結されるべきです。</p><p>リンクを適用する場合、<code>aria-labelledby</code>は、目の見えるユーザーに対して直ちに明白かもしれないが、スクリーンリーダーのユーザーにはあまり明らかではないリンクの目的を識別するために使用することができます。</p><p><code>aria-labelledby</code>の指定された動作は、関連付けられたラベルテキストが（リンクテキストに加えるのでなく）リンクテキストの代わりに告知されるものです。リンクテキスト自身がラベルテキストに含まれるべきである場合、リンクのIDは、<code>aria-labelledby</code>属性の値を構成するIDの文字列の中も同様に参照されるべきです。</p><p>名前階層の詳細については、<a href="http://momdo.github.io/wai-aria/roles.html#textalternativecomputation">ARIA仕様</a>とHTML to Platform Accessibility APIs Implementation Guideで<a href="http://www.w3.org/TR/html-aapi/#a-element">リンクに対するアクセシブルな名前と説明計算</a>を参照してください。</p></div><h3 class="small-head" id="ARIA7-examples">事例</h3><h4 class="small-head" id="ARIA7-ex1">例1：リンクに追加情報を提供する</h4><div class="example"><div class="textbody"><p>この例は、画面に表示されるリンクテキストがリンクに対するアクセシブルな名前の始まりとして使用されることを意味します。JAWSやNVDAのような人気のあるスクリーンリーダーは、これを"Read more ...Storms hit east coast"と告知し、リンクによって閲覧することができるスクリーンリーダーのユーザーに対して非常に便利なリンク一覧で同じテキストを表示します。</p><div class="code"><pre><code><h2 id="headline">Storms hit east coast</h2>
<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p></code></pre></div></div></div><h4 class="small-head" id="ARIA7-ex2">例2：複数のソース由来のリンクテキストを連結する</h4><div class="example"><div class="textbody"><p>著者が参照されるコードのセクションの周りにタグを配置する場合です。</p><p>注：<code>span</code>要素上の<code>tabindex="-1"</code>の使用は、スクリプトによってフォーカスをサポートすることを意味するものではありません―ここでは、単に一部のブラウザー（IE9、IE10）がアクセシビリティーツリーで<code>span</code>要素を含むことを確認するためのものであり、したがって<code>aria-labelledby</code>で参照できるようにタグを利用可能にします。詳細については、<a href="https://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">アクセシブルなHTML要素</a>を参照してください。</p><div class="code"><pre><code><p>Download <span id="report-title" tabindex="-1">2012 Sales Report</span>:
<a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="#" id="ppt">Powerpoint</a></p></code></pre></div></div></div><h3 id="ARIA7-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</p></li></ul></div><h3 id="ARIA7-related-techs">関連する実装方法</h3><div class="textbody"><p>（現在挙げられるものはありません）</p></div><h3 id="ARIA7-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA7-procedure">手順</h4><p><code>aria-labelledby</code>属性を持つ各リンクに対して：</p><ol class="enumar"><li><p><code>aria-labelledby</code>属性値で各IDがリンクの目的の一部として使用されるテキスト要素のIDと一致することをチェックします。</p></li><li><p><code>aria-labelledby</code>属性で1つ以上のIDによって参照されるテキストの合成値が、link要素の目的を適切に説明していることをチェックします。</p></li></ol><h4 class="small-head" id="ARIA7-results">判定基準</h4><ul><li><p>チェック#1と#2がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA8" id="ARIA8"> </a>ARIA8：リンクの目的に対してaria-labelを使用する</h2><div class="applicability"><h3 id="ARIA8-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#navigation-mechanisms-refs">
達成基準 2.4.4 （文脈におけるリンクの目的）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#navigation-mechanisms-refs">
How to Meet 2.4.4 (Link Purpose (In Context))
</a></li><li><a href="http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/navigation-mechanisms-refs.html">
達成基準 2.4.4 を理解する（文脈におけるリンクの目的）
</a></li></ul></li><li><a href="http://waic.jp/docs/WCAG20/Overview.html#navigation-mechanisms-link">
達成基準 2.4.9（リンクの目的）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#navigation-mechanisms-link">
How to Meet 2.4.9 (Link Purpose (Link Only))
</a></li><li><a href="http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/navigation-mechanisms-link.html">
達成基準 2.4.9 を理解する（リンクの目的）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.7.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA8">User Agent Support Notes for ARIA8</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA8-description">解説</h3><div class="textbody"><p>このテクニックの目的は、<code>aria-label</code>属性を使用して、リンクの目的を説明することです。オブジェクトを記述するページ上に可視要素が存在しない場合、<code>aria-label</code>属性は、リンクのようなオブジェクト上で説明的なテキストラベルを配置する方法を提供します。説明的な要素がページ上で可視である場合、<code>aria-labelledby</code>属性は、<code>aria-label</code>の代わりに使用されるべきです。説明的なテキストラベルを提供することにより、ユーザーに他の宛先に至るウェブページ内のリンクからリンクを区別させ、ユーザーがリンクをたどるかどうかを判断するのを助けます。一部の支援技術において<code>aria-label</code>値は、実際のリンクテキストの代わりにリンクのリストで表示します。</p><p><a href="http://momdo.github.io/wai-aria/roles.html#textalternativecomputation">WAI-ARIA仕様</a>と<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide</a>によって、<code>aria-label</code>テキストは、リンク内で与えられたテキストを上書きします。与えられたテキスト自体は、支援技術によってリンクテキストの代わりに使用されます。このため、リンク内で使用されるテキストをもつ<code>aria-label</code>で使用されるテキストを始めることを推奨します。これは、ユーザー間で一貫性のあるコミュニケーションを可能にします。</p></div><h3 class="small-head" id="ARIA8-examples">事例</h3><h4 class="small-head" id="ARIA8-ex1">例1：aria-labelを使用して、HTML内のリンクの目的を説明する</h4><div class="example"><div class="textbody"><p>一部の状況において、デザイナーは、"read more"（続きを読む）のような短く、繰り返されるリンクテキストを使用することで、ページ上のリンクの外観を軽減させるように選択してもよいです。この状況は、より単純という点でaria-labelに対して役立つユースケースを提供し、ページ上の非記述的な"read more"テキストは、説明的なリンクのラベルで置き換えることができます。単語'read more'は、ユーザー間の一貫性のあるコミュニケーションを可能にするために（"[Read more...]"の元アンカーテキストに置き換える）aria-labelで繰り返されます。</p><div class="code"><pre><code> <h4>Neighborhood News</h4>
<p>Seminole tax hike: Seminole city managers are proposing a 75% increase in
property taxes for the coming fiscal year.
<a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
</p>
<p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year
old Willy "Dusty" Williams in yesterday's mayoral election.
<a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
</p></code></pre></div></div></div><h3 id="ARIA8-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</p></li><li><p>
<a href="http://momdo.github.io/wai-aria/roles.html#textalternativecomputation">WAI-ARIA Text Alternative Computation</a>
</p></li></ul></div><h3 id="ARIA8-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="#ARIA6">ARIA6：オブジェクトのラベルを提供するためにaria-labelを使用する</a></li><li><a href="#ARIA14">ARIA14：可視ラベルが使用できない場合に不可視ラベルを提供するためにaria-labelを使用する</a></li><li><a href="#ARIA7">ARIA7：リンクの目的に対してaria-labelledbyを使用する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/G91.html">G91： リンクの目的を説明したリンクのラベルを提供する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/H30.html">H30： a 要素のリンクの目的を説明するテキストリンクを提供する</a></li></ul></div><h3 id="ARIA8-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA8-procedure">手順</h4><p><code>aria-label</code>属性を使用するリンク要素に対して：</p><ol class="enumar"><li><p><code>aria-label</code>属性値がlink要素の目的を正確に説明していることをチェックします。</p></li></ol><h4 class="small-head" id="ARIA8-results">判定基準</h4><ul><li><p>#1がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA9" id="ARIA9"> </a>ARIA9：複数のテキストノードからラベルを連結するaria-labelledbyを使用する</h2><div class="applicability"><h3 id="ARIA9-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#text-equiv-all">
達成基準1.1.1（非テキストコンテンツ）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#text-equiv-all">
How to Meet 1.1.1 (Non-text Content)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/text-equiv-all.html">
達成基準 1.1.1 を理解する（非テキストコンテンツ）
</a></li></ul></li><li><a href="http://waic.jp/docs/WCAG20/Overview.html#minimize-error-cues">
達成基準3.3.2（ラベルまたは説明文）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#minimize-error-cues">
How to Meet 3.3.2 (Labels or Instructions)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/minimize-error-cues.html">
達成基準 3.3.2 を理解する（ラベルまたは説明文）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.8.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA9">User Agent Support Notes for ARIA9</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA9-description">解説</h3><div class="textbody"><p><code>aria-labelledby</code>プロパティーは、すべての視覚オブジェクトをラベル付けするために使用することができます。入力に適用される<code>aria-labelledby</code>プロパティーは、ネイティヴ入力だけでなく、<code>div contenteditable="true"</code>とともに構築されるカスタムテキスト入力のような非ネイティヴ要素をラベル付けすることができます。</p><p><code>aria-labelledby</code>の1つの特定の用途は、意味のあるラベルが複数のラベル文字列で構成されるべき状況におけるテキスト入力のためのものです。</p><p>著者は、<code>input</code>要素のラベルとして連結されるためにラベル文字列に一意の<code>id</code>を割り当てます。<code>aria-labelledby</code>属性の値は、参照されたラベル文字列がスクリーンリーダーによって読み取られるべき順序内の全<code>id</code>のスペースで区切られたリストです。サポートするユーザーエージェントは、参照されたラベル文字列を連結して、入力の1つの連続ラベルとしてそのラベル文字列を読み取ります。</p><p>ラベル文字列の連結は、さまざまな理由で便利です。例1において、入力は完全な文のコンテキスト内でネストされています。希望するスクリーンリーダー出力は、"Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20"です。テキスト入力の<code>id</code>はaria-labelledbyで参照される<code>id</code>の文字列に含まれているので、入力の値は右の位置で連結されたラベルに含まれます。</p><p>入力の次に視覚ラベルを提供するためのスペースが存在しない場合、またはネイティヴラベルの使用が不必要な冗長性を作成する場合、<code>aria-labelledby</code>の別のアプリケーションとなります。ここで、<code>aria-labelledby</code>の使用は、そのような入力のラベルとしてページ上に可視要素を関連付けることを可能にさせます。テーブルの列および行の見出しがテーブル内部のテキスト入力要素のラベルに連結される状況を例2に示します。</p><div class="note"><p class="prefix"><em>注：</em><a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">ARIA accessible name and description calculation</a>は、<code>aria-labelledby</code>で指定された文字列がプロパティーを伝える要素のコンテンツに追加するのではなく、むしろ置換するべきものを指定します。ラベル自体が<code>aria-labelledby</code>で<code>id</code>のシーケンスの一部として参照されない限り、ネイティヴラベルに<code>aria-labelledby</code>プロパティーの追加は、そのラベル内部のテキストコンテンツを置換すべきです。</p></div></div><h3 class="small-head" id="ARIA9-examples">事例</h3><h4 class="small-head" id="ARIA9-ex1">例1：連結されたラベルをもつタイムアウト入力フィールド</h4><div class="example"><div class="textbody"><p>テキスト入力は、タイムアウトが発生する前に、ユーザーがデフォルトの時間を延長することを可能にします。</p><p>文字列"Extend time-out to"は、ネイティヴ<code>label</code>要素に含まれており、<code>id="timeout-duration"</code>による入力に関連付けられます。このラベルは、ARIAをサポートしないユーザーエージェントのみにfor/id関連付けを使用するこの入力に関連付けられます。ARIAをサポートするユーザーエージェント上で、for/id関連付けは無視され、入力用のラベルは、HTML to Platform Accessibility APIs Implementation Guideにおける<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">アクセシブルな名前と説明計算</a>ごとに、<code>aria-labelledby</code>のみによって提供されます。</p><p>テキスト入力上の<code>aria-labelledby</code>属性は、3つの要素を参照します：(1) ネイティヴラベルを含む<code>span</code>、(2) デフォルトテキスト'20'を含むテキスト入力（この入力が、ラベルテキストに関連するfor/idでラベル付けされないことを思い出してください）、(3) <code>span</code>に含まれる文字列'minutes'。これらの要素は、テキスト入力に対する完全なラベルを提供するために連結されるべきです。</p><div class="note"><p class="prefix"><em>注：</em><code>span</code>要素上の<code>tabindex="-1"</code>の使用は、スクリプトによってフォーカスをサポートすることを意味するものではありません―ここでは、単に一部のブラウザー（IE9、IE10）がアクセシビリティーツリーで<code>span</code>要素を含むことを確認するためのものであり、したがって<code>aria-labelledby</code>で参照できるようにタグを利用可能にします。詳細については、<a href="https://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">アクセシブルなHTML要素</a>を参照してください。
</p></div><div class="code"><pre><code><form>
<p><span id="timeout-label" tabindex="-1"><label for="timeout-duration">Extend time-out to</label></span>
<input type="text" size="3" id="timeout-duration" value="20"
aria-labelledby="timeout-label timeout-duration timeout-unit">
<span id="timeout-unit" tabindex="-1"> minutes</span></p>
</form></code></pre></div><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA9/ex1.html" class="ex-ref">連結されたラベルをもつタイムアウト入力フィールド</a>実施例は、Easy ARIA tip #2から編集しました：例は<code>aria-labelledby</code>と<code>aria-describedby</code>、Marco Zeheによってまとめられました。</p></div></div><h4 class="small-head" id="ARIA9-ex2">例2：テキスト入力を備えた単純なデータテーブル</h4><div class="example"><div class="textbody"><p>テキスト入力を含む単純なデータテーブル。入力ラベルは、それぞれの列および行のヘッダーを参照する<code>aria-labelledby</code>を通して連結されます。</p><div class="code"><pre><code><table>
<tr>
<td></td>
<th id="tpayer">Taxpayer</th>
<th id="sp">Spouse</th>
</tr>
<tr>
<th id="gross">W2 Gross</th>
<td><input type="text" size="20" aria-labelledby="tpayer gross" /></td>
<td><input type="text" size="20" aria-labelledby="sp gross" /></td>
</tr>
<tr>
<th id="div">Dividends</th>
<td><input type="text" size="20" aria-labelledby="tpayer div" /></td>
<td><input type="text" size="20" aria-labelledby="sp div" /></td>
</tr>
</table></code></pre></div><p>Jim Thatcherによる例に基づく、<a href="http://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA9/ex2.html" class="ex-ref">テキスト入力をもつ単純なテーブルに対するaria-labelledbyを使用する</a>作業例。</p></div></div><h4 class="small-head" id="ARIA9-ex3">例3：会議ワークショップ予約テーブル</h4><div class="example"><div class="textbody"><p>2つの平行なトラックをもつ会議ワークショップ予約テーブルは、ユーザーが参加したいワークショップを選択することを可能にします。テーブルにおけるチェックボックスの入力を通したタブ移動の場合、トラック（1または2）、タイトル、および隣接するチェックボックスのラベル"Attend"に続くワークショップのスピーカーは、<code>aria-labelledby</code>経由のチェックボックスに対する連結ラベルとして提供されます。</p><p>一部のブラウザー/スクリーンリーダーの組み合わせ（たとえばMozilla FirefoxとNVDA）は、さらに関連するテーブルセルのヘッダーを話します。</p><div class="code"><pre><code><h1>Dinosaur Conference workshops timetable Thursday, 14. & Friday, 15. March 2013</h1>
<table>
<caption>Dinosaur Conference workshop booking table</caption>
<tbody><tr>
<td rowspan="2"></td>
<th colspan="2" scope="colgroup">Thursday</th>
<th colspan="2" scope="colgroup">Friday</th>
</tr>
<tr>
<th scope="col" id="am1">9 to 12 AM</th>
<th scope="col" id="pm1">2 to 5 PM</th>
<th scope="col" id="am2">9 to 12 AM</th>
<th scope="col" id="pm2">2 to 5 PM</th>
</tr>
<tr>
<th id="track1" scope="row">track 1</th>
<td>
<h2 id="title-TM1">The Paleozoic era </h2>
<p>2 places left</p>
<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
<label id="TM1-att" for="TM1">Attend</label></p>
</td>
<td>
<h2 id="title-TA1">The Mesozoic era overview</h2>
<p>2 places left</p>
<p><input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
<label id="TA1-att" for="TA1">Attend</label></p>
</td>
<td>
<h2 id="title-FM1">The Triassic period, rise of the dinosaurs</h2>
<p>1 place left</p>
<p><input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
<label id="FM1-att" for="FM1">Attend</label></p>
</td>
<td>
<h2 id="title-FA1">The Jurassic period</h2>
<p>11 places left</p>
<p><input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
<label id="FA1-att" for="FA1">Attend</label></p>
</td>
</tr>
<tr>
<th id="track2" scope="row">track 2</th>
<td>
<h2 id="title-TM2">The Cretaceous period</h2>
<p>18 places left</p>
<p><input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
<label id="TM2-att" for="TM2">Attend</label></p>
</td>
<td>
<h2 id="title-TA2">The end of the dinosaurs</h2>
<p>2 places left</p>
<p><input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
<label id="TA2-att" for="TA2">Attend</label></p>
</td>
<td>
<h2 id="title-FM2">First discoveries of dinosaurs</h2>
<p>2 places left</p>
<p><input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
<label id="FM2-att" for="FM2">Attend</label></p>
</td>
<td>
<h2 id="title-FA2">Emerging scholarship</h2>
<p>19 places left</p>
<p><input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
<label id="FA2-att" for="FA2">Attend</label></p>
</td>
</tr>
</tbody>
</table></code></pre></div><p>作業例：<a href="http://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA9/ex3.html" class="ex-ref">会議ワークショップ予約テーブル</a></p></div></div><h3 id="ARIA9-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>：2.7 ARIA の追加はインラインかスクリプト経由か</p></li></ul></div><h3 id="ARIA9-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="#ARIA6">ARIA6：オブジェクトのラベルを提供するためにaria-labelを使用する</a></li><li><a href="#ARIA16">ARIA16：ユーザーインターフェースコントロールの名前を提供するためにaria-labelledbyを使用する</a></li></ul></div><h3 id="ARIA9-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA9-procedure">手順</h4><p><code>aria-labelledby</code>を使用する入力に対して：</p><ol class="enumar"><li><p><code>aria-labelledby</code>で参照される<code>id</code>が一意であり、かつ一緒にラベルを提供するテキストノードの<code>id</code>と一致することをチェックします</p></li><li><p><code>aria-labelledby</code>によって参照される要素の連結されたコンテンツがラベル付けされた要素の目的または機能に対する記述であることをチェックします</p></li></ol><h4 class="small-head" id="ARIA9-results">判定基準</h4><ul><li><p>#1と#2がtrueになる。</p><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA10" id="ARIA10"> </a>ARIA10：非テキストコントロールに対して代替テキストを提供するためにaria-labelledbyを使用する</h2><div class="applicability"><h3 id="ARIA10-applicability">適用範囲</h3><div class="textbody"><p>このテクニックは、<a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をもつHTMLに適用されます。</p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#text-equiv-all">
達成基準1.1.1（非テキストコンテンツ）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#text-equiv-all">
How to Meet 1.1.1 (Non-text Content)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/text-equiv-all.html">
達成基準 1.1.1 を理解する（非テキストコンテンツ）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.9.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA10">User Agent Support Notes for ARIA10</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA10-description">解説</h3><div class="textbody"><p>このテクニックの目的は、<code>aria-labelledby</code>属性を使用することで支援技術（AT）によって読み取ることのできる要素に対する短い説明を提供することにあります。<code>aria-labelledby</code>属性は、ラベル付けする要素のID属性とマッチするID参照値を使用することで、ページ上の他の場所で視覚的であるテキストと要素を関連づけます。スクリーンリーダーのような支援技術は、 属性をもつ要素に対して代替テキストとして<code>aria-labelledby</code>属性値によって識別される要素のテキストを使用します。</p></div><h3 class="small-head" id="ARIA10-examples">事例</h3><h4 class="small-head" id="ARIA10-ex1">例1：複合図形に短い説明を提供する</h4><div class="example"><div class="textbody"><p>この例は、星の格付けパターンの読み取り専用複合図形に対する短いテキストの説明を提供するために<code>aria-labelledby</code>属性を使用する方法を示しています。図形は複数の画像要素で構成されます。図形に対する代替テキストは、星パターンのすぐ下にページで可視なラベルです。</p><div class="code"><pre><code><div role="img" aria-labelledby="star_id">
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="emptystar.png" alt=""/>
</div>
<div id="star_id">4 of 5</div></code></pre></div><p>作業例：<a href="http://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA10/ARIA10-example1.html" class="ex-ref">Providing a short description for a complex graphic</a>。
</p></div></div><h3 id="ARIA10-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</p></li><li><p>
<a href="http://momdo.github.io/wai-aria/roles.html#textalternativecomputation">Accessible Rich Internet Applications (WAI-ARIA) 1.0、5.2.7.3節 代替テキスト計算</a>
</p></li></ul></div><h3 id="ARIA10-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="http://waic.jp/docs/WCAG-TECHS/H37.html">H37： img 要素の alt 属性を用いる</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/F65.html">F65： 達成基準 1.1.1 の不適合事例 － img要素、area要素、及び type "image" のinput要素のalt属性を省略している</a></li></ul></div><h3 id="ARIA10-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA10-procedure">手順</h4><ol class="enumar"><li><p><code>aria-labelledby</code>要素が存在してかつ要素が <code>alt</code>属性をサポートしない場合に各要素を検査します。</p></li><li><p><code>aria-labelledby</code> 属性値がウェブページ上で要素のidであるかどうかをチェックします。</p></li><li><p>要素を正確に分類する <code>aria-labelledby</code>属性によって識別される要素のテキストを決定し、等価な情報を提供します。</p></li></ol><h4 class="small-head" id="ARIA10-results">判定基準</h4><ul><li><p>#2と#3がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA11" id="ARIA11"> </a>ARIA11：ページの領域を識別するためにARIAランドマークを使用する</h2><div class="applicability"><h3 id="ARIA11-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#content-structure-separation-programmatic">
達成基準1.3.1（情報及び関係性）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#content-structure-separation-programmatic">
How to Meet 1.3.1 (Info and Relationships)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">
達成基準1.3.1（情報及び関係性）を理解する
</a></li></ul></li><li><a href="http://waic.jp/docs/WCAG20/Overview.html#navigation-mechanisms-skip">
達成基準2.4.1（ブロック・スキップ）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#navigation-mechanisms-skip">
How to Meet 2.4.1 (Bypass Blocks)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">
達成基準2.4.1（ブロック・スキップ）を理解する
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.10.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA11">User Agent Support Notes for ARIA11</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA11-description">解説</h3><div class="textbody"><p>このテクニックの目的は、ウェブページのセクションにプログラムのアクセスを提供することです。ランドマークロール（またはランドマーク）は、ページのセクションをプログラム的に識別します。ランドマークは、支援技術（AT）ユーザーがページに順応するのを支援し、様々なページのセクションにより簡単にナビゲートするのに役立ちます。
</p><p>ランドマークはまた、複数ページで繰り返され、かつページのプログラム構造を通知するコンテンツのブロックをスキップする支援技術のユーザーに容易な方法を提供します。たとえば、すべてのページに見られる共通のナビゲーションメニューが存在する場合、ランドマークロールは、ナビゲーションメニューをスキップし、セクションからセクションにナビゲートするために使用することができます。これは、伝統的な"スキップリンク"メカニズムそっくりな、支援技術ユーザーとキーボードユーザーの面倒を省き、ユーザーが実際に後続にあるものを見つけるために大量のコンテンツを通してタブ移動する時間を節約します。（支援技術サポートの詳細については上記のユーザーエージェントノートを参照してください）。ニュースサイトのメニューに精通しているだろう、トップニュースを得ることにのみ関心がある目の不自由なユーザーは、より容易に"main"ランドマークにナビゲートして、多数のメニューリンクを無視することができます。別の状況で、目の不自由なユーザーは、すぐにナビゲーションメニューを検索したいかもしれず、ナビゲーションランドマークにジャンプすることでこれを実現することができます。
</p><p>ランドマークはまた、目の見えるキーボードユーザーが<a href="http://www.paciellogroup.com/blog/2013/07/enabling-landmark-based-keyboard-navigation-in-firefox/">ブラウザープラグイン</a>を使用して、ページのセクションにナビゲートするのを支援することができます。
</p><p>ランドマークは、セクションをマークする要素上のrole属性を使用してページに挿入されます。属性値は、ランドマークの名前です。ロールの値は次のとおりです：
</p><ul><li><p>banner：ページの主見出しまたは内部タイトルを含む領域。
</p></li><li><p>complementary： 主要コンテンツをサポートし、さらに独立しかつ意味がある、文書の任意のセクション。
</p></li><li><p>contentinfo:：著作権やプライバシーに関する声明へのリンクなど、親文書に関する情報を含む領域。
</p></li><li><p>form：処理するためにサーバーに送信可能な、編集可能な値を表すことができる一部の、フォーム関連要素のコレクションを表す文書の領域。
</p></li><li><p>main：文書における主要コンテンツ。ほとんどの場合において、1つのページは1つのみのrole="main"を持つ。
</p></li><li><p>navigation：文書または関連する文書をナビゲートする場合に、用途に適したリンクのコレクション。
</p></li><li><p>search：ウェブ文書の検索ツール。
</p></li><li><p>application：ウェブ文書とは対照的な、ウェブアプリケーションとして宣言された領域。（注：applicationロールが通常のウェブナビゲーションコントロールをオフにするために読み込みソフトウェアを表示する信号を与えるため、注意して使用すべきです。ウェブページのようにすべてで使用されるべきでなく、かつ多くのユーザーに支援技術でテストなしで使用してはならない場合を除き、単純なウィジェットは、一般にapplicationロールを与えるべきでも、全体ウェブページにapplicationロールを付与するべきでもありません。）
</p></li></ul><p>主要および補助ナビゲーションメニュー上など、特定のランドマークロールがページ上で複数回使用することができる場合があります。この場合において、同一ロールは、ラベル付けする領域に有効な技術を使用して互いに曖昧さをなくすべきです（下記の例を参照）。
</p><p>ランドマークは、HTMLの見出し、リスト、およびその他の構造的マークアップのようなネイティヴセマンティックマークアップの補足となるべきです。ランドマークは、WAI-ARIA対応の支援技術によって解釈可能であり、ブラウザーによってユーザーに直接公開されません。
</p><p>ランドマークでページ上のすべてのコンテンツを含めることはベストプラクティスであり、結果としてセクションからセクションへナビゲートするためにランドマークに依存するスクリーンリーダーユーザーは、コンテンツの現状が分からなくなることはありません。
</p></div><h3 class="small-head" id="ARIA11-examples">事例</h3><h4 class="small-head" id="ARIA11-ex1">例1：単純なランドマーク</h4><div class="example"><div class="textbody"><p>次の例は、ランドマークがHTML4やXHTML 1.0文書に追加される可能性のある方法を示しています：</p><div class="code"><pre><code><div id="header" role="banner">A banner image and introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">...a list of links here ... </div>
<div id="content" role="main"> ... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">....an advertisement here...</div>
<div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div></code></pre></div></div></div><h4 class="small-head" id="ARIA11-ex2">例2：同じ種類の複数のランドマークとaria-labelledby</h4><div class="example"><div class="textbody"><p>次の例は、同じページで2つ以上の同じ種類のランドマークが存在する状況で、どのようにランドマークがHTML4やXHTML1.0文書に追加される可能性のあるベストプラクティスを示しています。たとえば、navigationロールがウェブページ上で複数回使用される場合、各インスタンスは<code>aria-labelledby</code>を使用して、指定された一意のラベルを持ってもよいです：
</p><div class="code"><pre><code><div id="leftnav" role="navigaton" aria-labelledby="leftnavheading">
<h2 id="leftnavheading">Institutional Links</h2>
<ul><li>...a list of links here ...</li> </ul></div>
<div id="rightnav" role="navigation" aria-labelledby="rightnavheading">
<h2 id="rightnavheading">Related topics</h2>
<ul><li>...a list of links here ...</li></ul></div></code></pre></div></div></div><h4 class="small-head" id="ARIA11-ex3">例3：同じ種類の複数のランドマークとaria-label</h4><div class="example"><div class="textbody"><p>次の例は、同じページで2つ以上の同じ種類のランドマークが存在する状況で、ラベルとして参照できるページでテキストが存在しない場合、ランドマークがHTML4やXHTML1.0文書に追加される可能性のあるベストプラクティスを示しています。</p><div class="code"><pre><code><div id="leftnav" role="navigaton" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div id="rightnav" role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div></code></pre></div></div></div><h4 class="small-head" id="ARIA11-ex4">例4：検索フォーム</h4><div class="example"><div class="textbody"><p>次の例は、"search"ランドマークをもつ検索フォームを示します。searchロールは、一般にフォームフィールドや検索フォームを囲むdivを機能させます。</p><div class="code"><pre><code><form role="search">
<label for="s6">search</label><input id="s6" type="text" size="20">
...
</form> </code></pre></div></div></div><h3 id="ARIA11-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://momdo.github.io/wai-aria/usage.html#usage_intro">Accessible Rich Internet Applications (WAI-ARIA) 1.0、ロール</a>
</p></li><li><p>
<a href="http://momdo.github.io/wai-aria/states_and_properties.html">Accessible Rich Internet Applications (WAI-ARIA) 1.0、サポートされるステートおよびプロパティー</a>
</p></li><li><p>
<a href="http://www.paciellogroup.com/blog/2013/07/enabling-landmark-based-keyboard-navigation-in-firefox/">Enabling landmark-based keyboard navigation in Firefox</a>
</p></li><li><p>
<a href="http://accessibleculture.org/articles/2011/02/not-all-aria-widgets-deserve-role-application/">Not All ARIA Widgets Deserve role="application"</a>
</p></li><li><p>
<a href="https://developer.yahoo.com/blogs/ydn/aria-role-application-53608.html">When Should You Use ARIA Role="Application"?</a>
</p></li></ul></div><h3 id="ARIA11-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="http://waic.jp/docs/WCAG-TECHS/H69.html">H69： コンテンツの各セクションの開始位置に見出し要素を提供する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/SCR28.html">SCR28： 展開可能及び折り畳み可能なメニューを用いて、コンテンツのブロックをバイパスする</a></li></ul></div><h3 id="ARIA11-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA11-procedure">手順</h4><ol class="enumar"><li><p><a href="http://momdo.github.io/wai-aria/roles.html#landmark_roles">ランドマークロール</a>をもつ各要素を検査します。
</p></li><li><p>ランドマークロール属性が、そのロールに対応するページのセクションに適用されているかどうかを調べます。（すなわち、"navigation"ロールはナビゲーションセクションで適用され、"main"ロールはメインコンテンツが始まる場所に適用されます。）
</p></li></ol><h4 class="small-head" id="ARIA11-results">判定基準</h4><ul><li><p>#1と#2がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA12" id="ARIA12"> </a>ARIA12：見出しを識別するためにrole=headingを使用する</h2><div class="applicability"><h3 id="ARIA12-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#content-structure-separation-programmatic">
達成基準1.3.1（情報及び関係性）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#content-structure-separation-programmatic">
How to Meet 1.3.1 (Info and Relationships)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">
達成基準1.3.1（情報及び関係性）を理解する
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.11.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA12">User Agent Support Notes for ARIA12</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA12-description">解説</h3><div class="textbody"><p>このテクニックの目的は、支援技術（AT）に見出しとしてひとまとまりのコンテンツを識別するための手段を提供することです。あたかも要素が見出しであったかのように、要素に<code>role="heading"</code>を適用することは、（スクリーンリーダーなどの）支援技術に要素を扱わせます。
</p><p>ページ上に複数の見出しがあり、かつ見出し階層が視覚的なプレゼンテーションを通して定義される場合、<code>aria-level</code>属性は、見出しの階層レベルを示すために使用されるべきです。
</p><p>可能な場合、ネイティヴな見出しマークアップを直接使用します。たとえば、<code><div role="heading" aria-level="1"></code>を使用するのではなく、<code>h1</code>を使用するのが好ましいです。しかし、headingロールを使用することは、見出しマークアップの代わりに必要な場合があります。たとえば、スクリプトが既存の要素の階層構造に依存するレガシーサイトを改装する場合など。
</p><p><code>heading</code>ロールとネスティングレベルの用途は、<a href="http://www.w3.org/WAI/PF/aria-practices/#kbd_layout_nesting">WAI-ARIA 1.0 Authoring Practices</a>で説明されます。
</p></div><h3 class="small-head" id="ARIA12-examples">事例</h3><h4 class="small-head" id="ARIA12-ex1">例1：単純な見出し</h4><div class="example"><div class="textbody"><p>この例は、スクリプトが既存の要素の階層構造に依存する、またはレベルが不明であるレガシーなサイトを改装する際に、role="heading"を使用した簡単な見出しを実装する方法を示します。たとえば、さまざまなソースからシンジケートされたウェブコンテンツは、最終的なプレゼンテーションがどうなるかの知識なしで構築することができます。
</p><div class="code"><pre><code><div role="heading">Global News items</div>
... a list of global news with editorial comment....
<div role="heading">Local News items</div>
... a list of local news, with editorial comment ...</code></pre></div></div></div><h4 class="small-head" id="ARIA12-ex2">例2：追加の見出しレベル</h4><div class="example"><div class="textbody"><p>この例は、role="heading"と<code>aria-level</code>属性を用いてレベル7見出しを実装する方法を示します。HTMLはレベル6までの見出しのみをサポートしているため、このセマンティックを提供するためのネイティヴ要素は存在しません。</p><div class="code"><pre><code>...
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
...
<div role="heading" aria-level="7">Jonagold/div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p></code></pre></div></div></div><h3 id="ARIA12-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://momdo.github.io/wai-aria/roles.html#heading">Accessible Rich Internet Applications (WAI-ARIA) 1.0, Heading in the Roles Model</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li></ul></div><h3 id="ARIA12-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="http://waic.jp/docs/WCAG-TECHS/H42.html">H42： h1要素～h6要素を用いて、見出しを特定する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/H69.html">H69： コンテンツの各セクションの開始位置に見出し要素を提供する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/G141.html">G141： 見出しを用いてウェブページを構造化する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/F2.html">F2： 達成基準 1.3.1 の不適合事例 － 適切なマークアップ又はテキストを用いずに、テキストの見た目の表現の変化を用いて情報を伝えている</a></li></ul></div><h3 id="ARIA12-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA12-procedure">手順</h4><ol class="enumar"><li><p> 属性role="heading"をもつ各要素を調べます。
</p></li><li><p> 要素のコンテンツが見出しとして適切であるかどうかを判断します。
</p></li><li><p> 要素が<code>aria-level</code>属性を持つ場合、値が適切な階層レベルであるかどうかを決定します。
</p></li></ol><h4 class="small-head" id="ARIA12-results">判定基準</h4><ul><li><p>#2と#3がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA13" id="ARIA13"> </a>ARIA13：領域とランドマークを名付けるためにaria-labelledbyを使用する</h2><div class="applicability"><h3 id="ARIA13-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#content-structure-separation-programmatic">
達成基準1.3.1（情報及び関係性）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#content-structure-separation-programmatic">
How to Meet 1.3.1 (Info and Relationships)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">
達成基準1.3.1（情報及び関係性）を理解する
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.12.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA13">User Agent Support Notes for ARIA13</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA13-description">解説</h3><div class="textbody"><p>このテクニックの目的は、支援技術によって読み取ることができるページの領域に対して名前を提供することです。<code>aria-labelledby</code>属性は、要素を分類するページ上でテキストをもつ領域またはランドマークとしてマークアップされるページのセクションを関連付ける方法を提供します。
</p><p>ランドマークロール（またはランドマーク）は、ページのセクションをプログラム的に識別します。ランドマークは、支援技術（AT）ユーザーがページに順応するのを支援し、様々なページのセクションにより簡単にナビゲートするのに役立ちます。
</p><p><code>aria-describedby</code>のように、<code>aria-labelledby</code>は、スペース区切りのリストを使用して、ページの他の領域を指すための複数のIDを受け入れることができます。また、この集合を定義するIDに制限されています。
</p></div><h3 class="small-head" id="ARIA13-examples">事例</h3><h4 class="small-head" id="ARIA13-ex1">例1：ページ上テキストをもつランドマークを識別する</h4><div class="example"><div class="textbody"><p>以下は、complementaryランドマークに使用される<code>aria-labelledby</code>の一例です。見出しが関係する文書の領域は、ヘッダーに対する<code>id</code>値を含む<code>aria-labelledby</code>プロパティーとともにマークすることができます。</p><div class="code"><pre><code><p role="complementary" aria-labelledby="hdr1">
<h1 id="hdr1">
Top News Stories
</h1>
</p></code></pre></div></div></div><h4 class="small-head" id="ARIA13-ex2">例2：アプリケーションランドマークの識別</h4><div class="example"><div class="textbody"><p>次のコード断片は、静的な文をもつアプリケーションランドマークです。タイプapplicationの領域ランドマークがあり、かつ静的な説明テキストが利用可能である場合、次に示すように、applicationランドマークで、アプリケーションと静的テキストを関連付けるためのaria-describedbyの参照を含みます。</p><div class="code"><pre><code><div role="application" aria-labelledby="p123" aria-describedby="info">
<h1 id="p123">Calendar<h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
....
</div></code></pre></div></div></div><h3 id="ARIA13-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</p></li></ul></div><h3 id="ARIA13-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="#ARIA10">ARIA10：非テキストコントロールに対して代替テキストを提供するためにaria-labelledbyを使用する</a></li><li><a href="#ARIA6">ARIA6：オブジェクトのラベルを提供するためにaria-labelを使用する</a></li><li><a href="#ARIA9">ARIA9：複数のテキストノードからラベルを連結するaria-labelledbyを使用する</a></li><li><a href="#ARIA16">ARIA16：ユーザーインターフェースコントロールの名前を提供するためにaria-labelledbyを使用する</a></li><li><a href="#ARIA7">ARIA7：リンクの目的に対してaria-labelledbyを使用する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/G92.html">G92： 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する長い説明を提供する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/H45.html">H45： longdesc 属性を用いる</a></li></ul></div><h3 id="ARIA13-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA13-procedure">手順</h4><ol class="enumar"><li><p>属性<code>role=region</code>をもつまたは<code>aria-labelledby</code>属性もまた存在する場合、<a href="http://momdo.github.io/wai-aria/roles.html#landmark_roles">ランドマークロール</a>をもつ各要素を調べます。
</p></li><li><p><code>aria-labelledby</code>属性値が、ページ上の要素の<code>id</code>であることをチェックします。
</p></li><li><p>その<code>id</code>を持つ要素のテキストを正確にページのセクションを分類することをチェックします。
</p></li></ol><h4 class="small-head" id="ARIA13-results">判定基準</h4><ul><li><p>#2と#3がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA14" id="ARIA14"> </a>ARIA14：可視ラベルが使用できない場合に不可視ラベルを提供するためにaria-labelを使用する</h2><div class="applicability"><h3 id="ARIA14-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#ensure-compat-rsv">
達成基準4.1.2（名前、ロール、値）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#ensure-compat-rsv">
How to Meet 4.1.2 (Name, Role, Value)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">
達成基準4.1.2 を理解する（名前、ロール、値）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.13.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="#ARIA14">User Agent Support Notes for ARIA14</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA14-description">解説</h3><div class="textbody"><p>目の見えるユーザーの場合、要素のコンテキストおよび外観は目的を決定するために十分な手がかりを提供することができます。一例は、ポップアップのdiv（ライトボックス）を閉じるためのコントロールを示すために、このdivの右上隅でよく使用される'X'です。
</p><p>ある状況において、設計手法またはレイアウトの選択の結果、可視ラベルが存在しないが、コントロールのコンテキストおよび視覚的な外観が目的を明確にする場合、要素は、状況に対してアクセシブルな名前を提供するために属性<code>aria-label</code>を与えることができます。
</p><p>他の状況において、ネイティヴHTMLラベル要素がコントロールでサポートされない場合に、要素は、アクセシブルな名前を提供するために属性<code>aria-label</code>を与えることができます―たとえば、<code>contentEditable</code>に設定される<code>div</code>は、よりリッチなテキスト編集体験を提供するために<code>input type="text"</code>または<code>textarea</code>などのネイティヴフォーム要素の代わりに使用されます。
</p></div><h3 class="small-head" id="ARIA14-examples">事例</h3><h4 class="small-head" id="ARIA14-ex1">例1：ポップアップボックスにおける閉じるボタン（X）</h4><div class="example"><div class="textbody"><p>ページ上で、リンクは追加情報をもつポップアップボックス（div）を表示します。'close'（閉じる）要素は、単に文字'x'を含むボタンとして実装されます。プロパティー<code>aria-label="close"</code>は、ボタンにアクセシブルな名前を提供するために使用されます。
</p><div class="code"><pre><code><div id="box">
This is a pop-up box.
<button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>
</div></code></pre></div><p>作業例：<a href="http://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA14/box.html" class="ex-ref">閉じるボタンの例</a>。
</p></div></div><h4 class="small-head" id="ARIA14-ex2">例2：複数のフィールドを持つ電話番号</h4><div class="example"><div class="textbody"><div class="code"><pre><code><div role="group" aria-labelledby="groupLabel">
<span id="groupLabel>Work Phone</span>
+<input type="number" aria-label="country code">
<input type="number" aria-label="area code">
<input type="number" aria-label="subscriber number">
</div></code></pre></div></div></div><h3 id="ARIA14-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</p></li></ul></div><h3 id="ARIA14-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="#ARIA6">ARIA6：オブジェクトのラベルを提供するためにaria-labelを使用する</a></li><li><a href="#ARIA16">ARIA16：ユーザーインターフェースコントロールの名前を提供するためにaria-labelledbyを使用する</a></li></ul></div><h3 id="ARIA14-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA14-procedure">手順</h4><p><code>aria-label</code>を使用する要素に対して：
</p><ol class="enumar"><li><p>ユーザーの入力が要求される場所で<code>aria-label</code>属性の値が適切に要素の目的を説明していることをチェックしてください
</p></li></ol><h4 class="small-head" id="ARIA14-results">判定基準</h4><ul><li><p>#1がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA15" id="ARIA15"> </a>ARIA15：画像の説明を提供するためにaria-describedbyを使用する</h2><div class="applicability"><h3 id="ARIA15-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#text-equiv-all">
達成基準1.1.1（非テキストコンテンツ）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#text-equiv-all">
How to Meet 1.1.1 (Non-text Content)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/text-equiv-all.html">
達成基準 1.1.1 を理解する（非テキストコンテンツ）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.14.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA15">User Agent Support Notes for ARIA15</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA15-description">解説</h3><div class="textbody"><p>このテクニックの目的は、簡潔な代替テキストがオブジェクトで提供される機能や情報を適切に伝達しない場合に、画像の説明を提供することです。
</p><p>WAI-ARIAの特徴は、<code>aria-describedby</code>プロパティーを使用して、セクション、描画、フォーム要素、画像などと説明テキストを関連付けできることです。これは、ユーザーが複雑な画像を理解するのを助ける追加情報を提供するのに両者が有用であるという点において<code>longdesc</code>属性に似ています。<code>longdesc</code>のように、<code>aria-describedby</code>を使用して提供される説明テキストは、HTMLで<code>alt</code>属性を使用して提供される短い名前とは別のものです。<code>longdesc</code>と異なり、<code>aria-describedby</code>は画像を含むページの外で記述を参照することはできません。画像と同じページからコンテンツを使用して長い説明を提供する利点は、支援技術を持たない目の見える人を含め、代替が誰でも利用可能であることです。<code>longdesc</code>属性のほとんどの実装は、追加の説明を読むために明示的な動作を取るようユーザーに要求するのに反して―執筆時点（2013年10月）で、一部の支援技術がユーザーの有効化なしに画像のalt属性情報の直後に<code>aria-describedby</code>のコンテンツを読み取ることは注目に値します。
</p><p><code>aria-labelledby</code>のように、<code>aria-describedby</code>は、スペース区切りのリストを使用してページの他の領域を指すための複数のIDを受け入れることができます。また、この集合を定義するIDに制限されています。
</p></div><h3 class="small-head" id="ARIA15-examples">事例</h3><h4 class="small-head" id="ARIA15-ex1">例1：画像を記述する</h4><div class="example"><div class="textbody"><p>次の例は、テキストの説明が画像と同じページ上にある場所で、長い説明を提供するためにどのように<code>aria-describedby</code>が画像に適用されるかを示します。
</p><div class="code"><pre><code><img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1">
<p id="p1">This painting dates back to 1730 and is oil on canvas. It was created by
Jean-Guy Millome, and represents ...</p></code></pre></div></div></div><h3 id="ARIA15-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</p></li></ul></div><h3 id="ARIA15-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="#ARIA6">ARIA6：オブジェクトのラベルを提供するためにaria-labelを使用する</a></li><li><a href="#ARIA16">ARIA16：ユーザーインターフェースコントロールの名前を提供するためにaria-labelledbyを使用する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/G92.html">G92： 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する長い説明を提供する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/H45.html">H45： longdesc 属性を用いる</a></li></ul></div><h3 id="ARIA15-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA15-procedure">手順</h4><ol class="enumar"><li><p><code>aria-describedby</code>属性が存在する場所で各画像要素を調べます。
</p></li><li><p>記述として使用されるテキストが見つかった場所で要素の<code>id</code>属性を経由して、<code>aria-describedby</code>属性がテキスト記述を持つ要素をプログラム的に関連付けるかどうかを調べます。
</p></li><li><p>結合される同等のテキストと関連するテキスト記述は、オブジェクトと同等の目的を正確に説明するまたは提供するかどうかを調べます。
</p></li></ol><h4 class="small-head" id="ARIA15-results">判定基準</h4><ul><li><p>#1、#2と#3がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA16" id="ARIA16"> </a>ARIA16：ユーザーインターフェースコントロールの名前を提供するためにaria-labelledbyを使用する</h2><div class="applicability"><h3 id="ARIA16-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#content-structure-separation-programmatic">
達成基準1.3.1（情報及び関係性）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#content-structure-separation-programmatic">
How to Meet 1.3.1 (Info and Relationships)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">
達成基準1.3.1（情報及び関係性）を理解する
</a></li></ul></li><li><a href="http://waic.jp/docs/WCAG20/Overview.html#ensure-compat-rsv">
達成基準4.1.2（名前、ロール、値）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#ensure-compat-rsv">
How to Meet 4.1.2 (Name, Role, Value)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">
達成基準4.1.2 を理解する（名前、ロール、値）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.15.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA16">User Agent Support Notes for ARIA16</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA16-description">解説</h3><div class="textbody"><p>このテクニックの目的は、支援技術によって読み取ることができるユーザーインターフェースコントロールの名前を提供することです。WAI-ARIAは、<code>aria-describedby</code>プロパティーを使用して、セクション、描画、フォーム要素、画像などとテキストを関連付けるための方法を提供します。このテクニックは、コントロールを分類するページ上のテキストをもつ、フォームフィールドなどのユーザーインターフェースコントロールを関連付ける<code>aria-labelledby</code>属性を使用します。
</p><p><code>aria-describedby</code>のように、<code>aria-labelledby</code>は、スペース区切りのリストを使用して、ページの他の要素を指すように複数のIDを受け入れることができます。この能力は、目の見えるユーザーがコントロールを識別するために周囲のコンテキストからの情報を使用する状況において、<code>aria-labelledby</code>を特に有用にします。<a href="#ARIA9">複数のテキストノードからラベルを連結するためのaria-labelledbyの使用</a>は、名前がページ上の他の複数のテキスト要素から作成される状況において、より多くの例を含みます。
</p><p>aria-labelledbyの機能はネイティヴHTML label要素のように表示されますが、いくつか違いがあります：
</p><ul><li><p>
<code>aria-labelledby</code>は複数のテキスト要素を参照することができ、<code>label</code>は1つだけを参照できます。</p></li><li><p>
<code>label</code>要素のみがフォーム要素で使用することができる一方で、<code>aria-labelledby</code>はさまざまな要素に対して使用することができます。</p></li><li><p> <code>label</code>をクリックすると、関連付けられたフォームフィールドをフォーカスします。これは<code>aria-labelledby</code>で起きません。この動作が必要な場合、<code>label</code>を使用するか、スクリプトを使用してこの機能を実装します。
</p></li></ul><p>2013年12月の時点で、特に古いブラウザーや支援技術で、<code>label</code>が<code>aria-labelledby</code>よりもより良いサポートを持つことに注意してください。
</p></div><h3 class="small-head" id="ARIA16-examples">事例</h3><h4 class="small-head" id="ARIA16-ex1">例1：単純なテキストフィールドをラベル付けする</h4><div class="example"><div class="textbody"><p>以下は、専用のラベルに使用可能なテキストがないものの、正確にコントロールをラベル付けするために使用することができるページ上の他のテキストがある状況で、ラベルを提供するために単純なテキストフィールドで使用される<code>aria-labelledby</code>の一例です。</p><div class="code"><pre><code><input name="searchtxt" type="text" aria-labelledby="searchbtn">
<input name="searchbtn" id="searchbtn" type="submit" value="Search"></code></pre></div></div></div><h4 class="small-head" id="ARIA16-ex2">例2：スライダーをラベル付けする</h4><div class="example"><div class="textbody"><p>以下は、スライダーコントロールにラベルを提供するために使用される<code>aria-labelledby</code>の一例です。この場合、ラベルテキストがより長い隣接するテキスト文字列の中から選択されます。この例は、単にラベル付けの関係を示すために簡略化されていることに注意してください。カスタムコントロールを実装する著者はまた、コントロールが他の成功基準を満たしていることを確認する必要があります。</p><div class="code"><pre><code><p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p>
<div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"></div></code></pre></div></div></div><h4 class="small-head" id="ARIA16-ex3">例3：複数のソースからのラベル</h4><div class="example"><div class="textbody"><p>複数の参照をもつ以下の<code>aria-labelledby</code>の例は、<code>label</code>要素を使用します。<code>aria-labelledby</code>をもつラベルに複数の情報源を連結する追加の詳細については、<a href="#ARIA9">複数のテキストノードからラベルを連結するaria-labelledbyを使用する</a>テクニックを参照してください。
</p><div class="code"><pre><code><label id="l1" for="f3">Notify me</label>
<select name="amt" id="f3" aria-labelledby="l1 f3 l2">
<option value="1">1</option>
<option value="2">2</option>
</select>
<span id="l2" tabindex="-1">days in advance</span></code></pre></div><p>注：<code>label</code>要素の使用は多くの理由が含まれます。ユーザーが<code>label</code>要素のテキストをクリックする場合、対応するフォームフィールドは、器用さの問題を持つ人に対してクリックターゲットが大きくなり、フォーカスを受け取ります。また、<code>label</code>要素は常にアクセシビリティーAPIを介して公開されます。<code>span</code>が使用されている可能性（ただし、もしそうならば、spanがInternet ExplorerのすべてのバージョンでアクセシビリティーAPIを介して公開されるように、spanは<code>tabindex="-1"</code>を受信すべきです）。しかし、<code>span</code>はより大きなクリック可能な領域の利点を失うことになります。
</p></div></div><h3 id="ARIA16-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI ARIA 1.0 Authoring Practices</a>
</p></li><li><p>
<a href="http://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</p></li></ul></div><h3 id="ARIA16-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="#ARIA10">ARIA10：非テキストコントロールに対して代替テキストを提供するためにaria-labelledbyを使用する</a></li><li><a href="#ARIA6">ARIA6：オブジェクトのラベルを提供するためにaria-labelを使用する</a></li><li><a href="#ARIA9">ARIA9：複数のテキストノードからラベルを連結するaria-labelledbyを使用する</a></li><li><a href="#ARIA7">ARIA7：リンクの目的に対してaria-labelledbyを使用する</a></li><li><a href="#ARIA13">ARIA13：領域とランドマークを名付けるためにaria-labelledbyを使用する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/G92.html">G92： 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する長い説明を提供する</a></li><li><a href="http://waic.jp/docs/WCAG-TECHS/H45.html">H45： longdesc 属性を用いる</a></li></ul></div><h3 id="ARIA16-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA16-procedure">手順</h4><p><code>aria-labelledby</code>属性が存在する場合に各ユーザーインターフェースコントロール要素に対して：
</p><ol class="enumar"><li><p><code>aria-labelledby</code>属性の値は、要素またはウェブページ上の<code>id</code>のスペース区切りリストの<code>id</code>であることをチェックしてください。
</p></li><li><p>参照される要素または要素のテキストが正確にユーザーインターフェースコントロールにラベル付けすることをチェックしてください。
</p></li></ol><h4 class="small-head" id="ARIA16-results">判定基準</h4><ul><li><p>#1と#2がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA17" id="ARIA17"> </a>ARIA17：関連するフォームコントロールを識別するためにグループ化するロールを使用する</h2><div class="applicability"><h3 id="ARIA17-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#content-structure-separation-programmatic">
達成基準1.3.1（情報及び関係性）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#content-structure-separation-programmatic">
How to Meet 1.3.1 (Info and Relationships)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">
達成基準1.3.1（情報及び関係性）を理解する
</a></li></ul></li><li><a href="http://waic.jp/docs/WCAG20/Overview.html#minimize-error-cues">
達成基準3.3.2（ラベルまたは説明文）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#minimize-error-cues">
How to Meet 3.3.2 (Labels or Instructions)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/minimize-error-cues.html">
達成基準 3.3.2 を理解する（ラベルまたは説明文）
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.16.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="/WAI/WCAG20/Techniques/ua-notes/aria#ARIA17">User Agent Support Notes for ARIA17</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA17-description">解説</h3><div class="textbody"><p>このテクニックの目的は、グループのようなフォーム内部で関連するコントロールのセットをマークアップすることです。グループに関連付けられた任意のラベルは、グループで個別のコントロールに対する共通のラベルまたは修飾子としても機能を果たします。グループの中と外にナビゲートするので、支援技術は、グループおよびグループのラベルの開始と終了を示すことができます。これは、ユーザーインターフェースのデザインがfieldset-legendテクニック（<a href="http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H71">H71</a>）を採用することが困難である場合に、プログラム的にフォームコントロールをグループ化するための実行可能な代替です。</p><p>ラジオボタングループの場合、<code>role="group"</code>の代わりに<code>role="radiogroup"</code>を使用することができます。</p><p>グループは<code>aria-labelledby</code>を使用して分類することができます。</p><p>このテクニックは、<code>role="group"</code>をもつ単一のコンテナ内にフォーム上のすべてのコントロールを包むためのものではありません。</p></div><h3 class="small-head" id="ARIA17-examples">事例</h3><h4 class="small-head" id="ARIA17-ex1">例1：社会保障番号</h4><div class="example"><div class="textbody"><p>9桁の長さで3つのセグメントに分割される社会保障番号フィールドは、<code>role="group"</code>を使用してグループ化することができます。</p><div class="code"><pre><code><div role="group" aria-labelledby="ssn1">
<span id="ssn1">Social Security#</span>
<span style="color: #D90D0D;"> * </span>
<input size="3" type="text" aria-required="true" title="First 3 digits" />-
<input size="2" type="text" aria-required="true" title="Next 2 digits" />-
<input size="4" type="text" aria-required="true" title="Last 4 digits" />
</div></code></pre></div><p>作業例：<a href="http://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA17/ssn.html" class="ex-ref">複数パーツのフィールドグループ</a>。</p></div></div><h4 class="small-head" id="ARIA17-ex2">例2：ラジオグループを識別する</h4><div class="example"><div class="textbody"><p>この例は、role=radiogroupを説明します。ラジオボタンがrole=radioをもつカスタムコントロールであることにも注意してください。（しかしspanを実際にラジオボタンのように動作させるためのスクリプトは、この例に含まれません。）1つは、必要に応じて、グループの関係を視覚的に強化するためにフィールドのようにグループの周りにボーダーを配置するためにCSSを使用してもよいです。フォームの下にあるCSSプロパティーが利用可能です。</p><div class="code"><pre><code><h3>Set Alerts for your Account</h3>
<div role="radiogroup" aria-labelledby="alert1">
<p id="alert1">Send an alert when balance exceeds $ 3,000</p>
<div>
<span role="radio" aria-labelledby="a1r1" name="a1radio"></span>
<span id="a1r1">Yes</span>
</div>
<div>
<span role="radio" aria-labelledby="a1r2" name="a1radio"></span>
<span id="a1r2">No</span>
</div>
</div>
<div role="radiogroup" aria-labelledby="alert2">
<p id="alert2">Send an alert when a charge exceeds $ 250</p>
<div>
<span role="radio" aria-labelledby="a2r1" name="a2radio"></span>
<span id="a2r1">Yes</span>
</div>
<div>
<span role="radio" aria-labelledby="a2r2" name="a2radio"></span>
<span id="a2r2">No</span>
</div>
</div>
<p><input type="submit" value="Continue" id="continue_btn" name="continue_btn" /></p></code></pre></div><p>関連するCSSスタイル定義は、フィールドのグループの周りにボーダーを配置します：</p><div class="code"><pre><code>div[role=radiogroup] {
border: black thin solid;
} </code></pre></div><p>作業例：<a href="http://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA17/grouping-roles-example.html" class="ex-ref">関連するフォームコントロールを識別するためにグループ化ロールを使用する</a>。</p></div></div><h3 id="ARIA17-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://momdo.github.io/wai-aria/roles.html#group">Accessible Rich Internet Applications (WAI-ARIA) 1.0、ロールモデル</a>
</p></li></ul></div><h3 id="ARIA17-related-techs">関連する実装方法</h3><div class="textbody"><ul><li><a href="http://waic.jp/docs/WCAG-TECHS/H71.html">H71: fieldset要素及びlegend要素を用いて、フォーム・コントロールのグループに関する説明を提供する </a></li></ul></div><h3 id="ARIA17-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA17-procedure">手順</h4><p>各コントロールに対する個別のラベルが十分な説明を提供せず、かつ追加のグループレベルの記述が必要とされる場合、関連するコントロールグループに対して：
</p><ol class="enumar"><li><p> 論理的に関連するinputまたはselect要素のグループがrole=groupをもつ要素内に含まれているかをチェックしてください。
</p></li><li><p> このグループが<code>aria-label</code>または<code>aria-labelledby</code>を使用して定義されるアクセシブルな名前を持つことをチェックしてください。
</p></li></ol><h4 class="small-head" id="ARIA17-results">判定基準</h4><ul><li><p>#1と#2がtrueになる。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA18" id="ARIA18"> </a>ARIA18：エラーを識別するためにaria-alertdialogを使用する</h2><div class="applicability"><h3 id="ARIA18-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#minimize-error-identified">
達成基準3.3.1（入力エラー箇所の特定）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#minimize-error-identified">
How to Meet 3.3.1 (Error Identification)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/minimize-error-identified.html">
達成基準3.3.1（入力エラー箇所の特定）を理解する
</a></li></ul></li><li><a href="http://waic.jp/docs/WCAG20/Overview.html#minimize-error-suggestions">
達成基準3.3.3（入力エラー修正方法の提示）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#minimize-error-suggestions">
How to Meet 3.3.3 (Error Suggestion)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/minimize-error-suggestions.html">
達成基準3.3.3（入力エラー修正方法の提示）を理解する
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.17.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA18">User Agent Support Notes for ARIA18</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA18-description">解説</h3><div class="textbody"><p>このテクニックの目的は、入力エラーが発生している人に警告を出すことにあります。<code>role="alertdialog"</code>を使用して通知を作成します。この通知は、次のような特徴をもつモーダルであるべきです：
</p><ul><li><p>
<code>aria-label</code>または<code>aria-labelledby</code>属性は、アラートダイアログにアクセシブルな名前を与えます。
</p></li><li><p>
<code>aria-describedby</code>は、アラートのテキストへの参照を提供します。
</p></li><li><p>アラートダイアログは、少なくとも1つのフォーカス可能なコントロールを含み、アラートダイアログが開く際にフォーカスがそのコントロールに移動すべきです。
</p></li><li><p>タブ順序は、タブが開いている間アラートダイアログの内部に拘束されます。
</p></li><li><p>ダイアログが閉じられる場合、可能であれば、フォーカスはダイアログが開く前の位置に戻ります。
</p></li></ul><p>アラートダイアログは、必要とされるまで支援技術によってアクセスされる方法で存在すべきではないことに注意してください。これを行う1つの方法は、静的なHTMLに含めない代わりに、エラー状態がトリガーされる場合にスクリプトを通してDOMに挿入することです。この挿入は、次のHTMLサンプルに対応します。
</p></div><h3 class="small-head" id="ARIA18-examples">事例</h3><h4 class="small-head" id="ARIA18-ex1">例1：アラートダイアログ</h4><div class="example"><div class="textbody"><p>この例は、<code>role="alertdialog"</code>を使用する通知が無効な情報を入力した人に通知するためにどのように使用することができるかを示します。</p><div class="code"><pre><code><div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
<h1 id="alertHeading">Error</h1>
<div id="alertText">Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</div>
<button>Save and Continue</button>
<button>Return to page and correct error</button>
</div></code></pre></div><p>作業例：<a href="/WAI/WCAG20/Techniques/working-examples/ARIA18/aria-role-alertdialog.html" class="ex-ref">アラートダイアログ</a></p></div></div><h3 id="ARIA18-resources">リソース</h3><div class="textbody"><p>リソースは情報提供のみが目的であり、支持を意味するものではありません。</p><ul><li><p>
<a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
</p></li></ul></div><h3 id="ARIA18-related-techs">関連する実装方法</h3><div class="textbody"><p>（現在挙げられるものはありません）</p></div><h3 id="ARIA18-tests">検証</h3><div class="textbody"><h4 class="small-head" id="ARIA18-procedure">手順</h4><ol class="enumar"><li><p>アラートダイアログが表示される原因となるエラーをトリガーします。
</p></li><li><p>アラートダイアログは少なくとも1つのフォーカス可能なコントロールを含み、アラートダイアログが開いた際にフォーカスがそのコントロールに移動することを測定します。
</p></li><li><p>タブ順序は、タブが開いている間アラートダイアログ内に拘束され、ダイアログを閉じた際に、可能ならば、フォーカスはダイアログが開く前の位置に戻ることを測定します。
</p></li><li><p>適用された<code>role="alertdialog</code>をもつ要素を調べます。
</p></li><li><p><code>aria-label</code>または<code>aria-labelledby</code>属性のいずれかが正確にアラートダイアログにアクセシブルな名前を与えるために使用されていることを測定します。
</p></li><li><p>アラートダイアログのコンテンツが入力エラーを識別していることを測定します。
</p></li><li><p>アラートダイアログのコンテンツがエラーを修正する方法を提案しているかどうかを測定します。
</p></li></ol><h4 class="small-head" id="ARIA18-results">判定基準</h4><ul><li><p>チェックポイント2、3、5および6がtrueになる。SC3.3.3の場合は、チェック7も同様にtrueです。</p></li></ul><p>これが達成基準に対して十分なテクニックである場合、このテスト手順を失敗しても、このテクニックがうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではありません。</p></div></div><div class="technique"><hr class="divider" title="Beginning of new technique"/><h2><a name="ARIA19" id="ARIA19"> </a>ARIA19：エラーを識別するためにARIA role=alertまたはライブ領域を使用する</h2><div class="applicability"><h3 id="ARIA19-applicability">適用範囲</h3><div class="textbody"><p><a href="http://momdo.github.io/wai-aria/">Accessible Rich Internet Applications（WAI-ARIA）</a>をサポートする技術。 </p></div></div><p class="referenced">このテクニックが関連するもの：</p><ul><li><a href="http://waic.jp/docs/WCAG20/Overview.html#minimize-error-identified">
達成基準3.3.1（入力エラー箇所の特定）</a><ul><li><a href="http://www.w3.org/WAI/WCAG20/quickref/20150226/#minimize-error-identified">
How to Meet 3.3.1 (Error Identification)
</a></li><li><a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/minimize-error-identified.html">
達成基準3.3.1（入力エラー箇所の特定）を理解する
</a></li></ul></li></ul><div class="ua-issues"><h3 class="small-head" id="ua1.18.1"> ユーザーエージェントおよび支援技術サポートノート</h3><p><a href="http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA19">User Agent Support Notes for ARIA19</a>を参照のこと。<a href="#wai-aria_notes">WAI-ARIA技術ノート</a>も参照のこと。</p></div><h3 id="ARIA19-description">解説</h3><div class="textbody"><p>このテクニックの目的は、入力エラーが発生した場合に支援技術（AT）に通知することです。エラーメッセージがライブ領域コンテナに注入される場合、<code>aria-live</code>属性はAT（スクリーンリーダーなど）が通知することを可能にします。<code>aria-live</code>領域内部のコンテンツは、テキストが表示されている場所でATがフォーカスする必要なしに、ATによって自動的に読み取られます。
</p><p>ライブ領域のプロパティーを直接適用する代わりに使用することができる<a href="http://www.w3.org/WAI/PF/aria-practices/#chobet">特殊ケースのライブ領域</a>のロールも多数あります。</p></div><h3 class="small-head" id="ARIA19-examples">事例</h3><h4 class="small-head" id="ARIA19-ex1">例1：DOM内にすでに存在するrole=alertをもつコンテナの中にエラーメッセージを注入する</h4><div class="example"><div class="textbody"><p>次の例は、<code>aria-live=assertive</code>を使用するのと同じ<code>role=alert</code>を使用します。
</p><p>例において、ページロード時にDOMに存在する<code>aria-atomic=true</code>および<code>aria-live</code>プロパティーまたは<code>alert</code>ロールをもつ空のエラーメッセージコンテナ要素が存在します。エラーコンテナは、ほとんどのスクリーンリーダーで読み上げられるようためにエラーメッセージに対して、ページロード時にDOMに存在しなければなりません。<code>aria-atomic=true</code>は、複数の無効な投稿した後にエラーメッセージをiOSのVoiceoverに読み上げさせるために必要です。