-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathusing_wai-aria_in_html.xhtml
2474 lines (2284 loc) · 187 KB
/
using_wai-aria_in_html.xhtml
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 [
<!ENTITY nbsp " ">
<!ENTITY copy "©">
<!ENTITY trade "™">
<!ENTITY reg "®">
]>
<html lang="ja" typeof="bibo:Document w3p:WD" about="" property="dcterms:language" content="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Using WAI-ARIA in HTML（日本語訳）</title>
<style>
table {
border-collapse: collapse;
border: 1px solid #630;
font: normal 95% arial, Verdana, helvetica, sans-serif;
}
caption {font-weight: bold}
th, td
{
text-align: left;
vertical-align: top;
padding: 0.3em;
border: 1px solid #630;
}
td h1 {font-size:85%;margin:0 0 0 0;}
td p {margin:5px 2px 5px 2px;}
thead th {
font-weight: bold;
text-align: center;
}
caption {text-align:left}
/*
.support {color:#090;font-size:1.2em }
.partial {color:#939393;font-size:1.2em }
.nosupport{color:#F00;font-size:1.2em }
*/
.support {color:#090;}
.partial {color:#939393;}
.nosupport{color:#F00;}
div.example{border: 1px dashed #b8860b;padding: 5px;margin-top:5px;background:#FFFFFF}
sup {font-size: 80%}
td ul {padding-left:4px;list-style-type:none}
img {border:none}
code.block {color:#BF3400;padding: 10px;display:block;background:#EBEBEB;min-width:20em;max-width:48em;}
code.blockat {color:#BF3400;padding: 10px;display:block;background:#FFFFD0;min-width:20em;max-width:48em;}
mark {background-color:#FF9}
div, section, hr {margin-top:10px}
code {color:#BF3400 !important;}
.example {margin-left:30px;}
</style>
<style>
/*****************************************************************
* ReSpec 3 CSS
* Robin Berjon - http://berjon.com/
*****************************************************************/
/* --- INLINES --- */
em.rfc2119 {
text-transform: lowercase;
font-variant: small-caps;
font-style: normal;
color: #900;
}
h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
border: none;
}
dfn {
font-weight: bold;
}
a.internalDFN {
color: inherit;
border-bottom: 1px solid #99c;
text-decoration: none;
}
a.externalDFN {
color: inherit;
border-bottom: 1px dotted #ccc;
text-decoration: none;
}
a.bibref {
text-decoration: none;
}
cite .bibref {
font-style: normal;
}
code {
color: #ff4500;
}
/* --- TOC --- */
.toc a, .tof a {
text-decoration: none;
}
a .secno, a .figno {
color: #000;
}
ul.tof, ol.tof {
list-style: none outside none;
}
.caption {
margin-top: 0.5em;
font-style: italic;
}
/* --- TABLE --- */
table.simple {
border-spacing: 0;
border-collapse: collapse;
border-bottom: 3px solid #005a9c;
}
.simple th {
background: #005a9c;
color: #fff;
padding: 3px 5px;
text-align: left;
}
.simple th[scope="row"] {
background: inherit;
color: inherit;
border-top: 1px solid #ddd;
}
.simple td {
padding: 3px 10px;
border-top: 1px solid #ddd;
}
.simple tr:nth-child(even) {
background: #f0f6ff;
}
/* --- DL --- */
.section dd > p:first-child {
margin-top: 0;
}
.section dd > p:last-child {
margin-bottom: 0;
}
.section dd {
margin-bottom: 1em;
}
.section dl.attrs dd, .section dl.eldef dd {
margin-bottom: 0;
}
@media print {
.removeOnSave {
display: none;
}
}
</style>
<style>
div.issue-title, div.note-title {
padding-right: 1em;
min-width: 7.5em;
color: #b9ab2d;
}
div.issue-title { color: #e05252; }
div.note-title { color: #2b2; }
div.issue-title span, div.note-title span {
text-transform: uppercase;
}
div.note, div.issue {
margin-top: 1em;
margin-bottom: 1em;
}
.note > p:first-child, .issue > p:first-child { margin-top: 0 }
.issue, .note {
padding: .5em;
border-left-width: .5em;
border-left-style: solid;
}
div.issue, div.note {
padding: 1em 1.2em 0.5em;
margin: 1em 0;
position: relative;
clear: both;
}
span.note, span.issue { padding: .1em .5em .15em; }
.issue {
border-color: #e05252;
background: #fbe9e9;
}
.note {
border-color: #52e052;
background: #e9fbe9;
}
</style>
<!-- 訳者追加 -->
<style>
p, li, dt, dd {line-height:1.6;}
</style>
<link rel="stylesheet" type="text/css" href="css/translation-memo.css"/>
<!-- .訳者追加 -->
<link href="https://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet"/>
</head>
<body class="h-entry" role="document" id="respecDocument">
<div class="translation-attention">
<p>この文書は <a href="http://www.w3.org/TR/2014/WD-aria-in-html-20140626/">Using WAI-ARIA in HTML</a>(Working Draft 26 June 2014) の日本語訳です。最新の文書は <a href="http://www.w3.org/TR/2014/WD-aria-in-html-20140626/">Using WAI-ARIA in HTML</a> です。原文もしくは完全な情報は、 <a href="http://www.w3.org/TR/2014/WD-aria-in-html-20140626/">Using WAI-ARIA in HTML</a> を参照してください。</p>
<p>この日本語訳は参考である。公式な文書ではなく、翻訳・解釈の正確性を保証していません。</p>
<p>「<a href="#aria-role-state-and-property-quick-reference">2.11 ARIA ロール（Role）、ステート（State）、プロパティ（Property）のクイックリファレンス</a>」と「<a href="#definitions-of-states-and-properties-all-aria--attributes">2.12 ステート（State）とプロパティ（Property）の定義（すべての aria-* 属性）</a>」の一部の訳は、<a href="http://www.hitachi.co.jp/universaldesign/ria/ajax/wai-aria/index.html">WAI-ARIA（日本語訳）：日立のユニバーサルデザイン</a>の<a href="http://www.hitachi.co.jp/universaldesign/ria/ajax/wai-aria/wd_20090224/index.html">アクセシブル・リッチ・インターネット・アプリケーション（WAI-ARIA）1.0</a>を引用し、修正して掲載しました。</p>
<dl>
<dt>公開日:</dt>
<dd>2014-04-09</dd>
<dt>改定日:</dt>
<dd>2015-03-18</dd>
<dt>翻訳者:</dt>
<dd>Wataru Yoshimura</dd>
</dl>
</div>
<div class="head" role="contentinfo" id="respecHeader">
<p>
<a href="http://www.w3.org/"><img width="72" height="48" src="https://www.w3.org/Icons/w3c_home" alt="W3C"/></a>
</p>
<h1 class="title p-name" id="title" property="dcterms:title">Using <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> in HTML（日本語訳）</h1>
<h2 property="dcterms:issued" datatype="xsd:dateTime" content="2014-06-26T04:00:00.000Z" id="w3c-working-draft-26-june-2014"><abbr title="World Wide Web Consortium">W3C</abbr> Working Draft <time class="dt-published" datetime="2014-06-26">2014年6月26日</time></h2>
<dl>
<dt>このバージョン：</dt>
<dd><a class="u-url" href="http://www.w3.org/TR/2014/WD-aria-in-html-20140626/">http://www.w3.org/TR/2014/WD-aria-in-html-20140626/</a></dd>
<dt>最新の公開バージョン：</dt>
<dd><a href="http://www.w3.org/TR/aria-in-html/">http://www.w3.org/TR/aria-in-html/</a></dd>
<dt>最新のエディターズドラフト：</dt>
<dd><a href="http://w3c.github.io/aria-in-html/">http://w3c.github.io/aria-in-html/</a></dd>
<dt>前のバージョン：</dt>
<dd><a rel="dcterms:replaces" href="http://www.w3.org/TR/2013/WD-aria-in-html-20131003/">http://www.w3.org/TR/2013/WD-aria-in-html-20131003/</a></dd>
<dt>策定者：</dt>
<dd class="p-author h-card vcard" rel="bibo:editor" inlist=""><span typeof="foaf:Person"><span property="foaf:name" class="p-name fn">Steve Faulkner</span>, The Paciello Group, <span class="ed_mailto"><a class="u-email email" rel="foaf:mbox" href="mailto:[email protected]">[email protected]</a></span></span>
</dd>
<dd class="p-author h-card vcard" rel="bibo:editor" inlist=""><span typeof="foaf:Person"><span property="foaf:name" class="p-name fn">Hans Hillen</span>, The Paciello Group, <span class="ed_mailto"><a class="u-email email" rel="foaf:mbox" href="mailto:[email protected]">[email protected]</a></span></span>
</dd>
<dd class="p-author h-card vcard" rel="bibo:editor" inlist=""><span typeof="foaf:Person"><span property="foaf:name" class="p-name fn">David MacDonald</span>, CanAdapt Solutions Inc., <span class="ed_mailto"><a class="u-email email" rel="foaf:mbox" href="mailto:[email protected]">[email protected]</a></span></span>
</dd>
</dl>
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2014 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>R</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. <abbr title="World Wide Web Consortium">W3C</abbr>の<a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">免責事項</a>、<a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">商標</a>、<a href="http://www.w3.org/Consortium/Legal/copyright-documents">文書利用</a>に関する規定が適用されます。</p>
<hr/>
</div>
<section id="abstract" class="introductory" property="dcterms:abstract" datatype="" typeof="bibo:Chapter" resource="#abstract" rel="bibo:Chapter">
<h2 aria-level="1" role="heading" id="h2_abstract">要約</h2>
<p role="contentinfo">このドキュメントは、障碍に接している人々にとって Web コンテンツと Web アプリケーションがよりアクセシブルになる方法を定義した Accessible Rich Internet Applications 仕様 [<cite><a class="bibref" href="#bib-WAI-ARIA">WAI-ARIA</a></cite>] を用いて、HTML の要素にアクセシビリティ情報を追加する方法を、開発者に向けた実装ガイドです。このドキュメントは、動的コンテンツや Ajax や HTML、JavaScript、関連した技術により開発された高度なユーザーインターフェースを特に支援する [<cite><a class="bibref" href="#bib-HTML5">HTML5</a></cite>] に <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> を使用する方法を明示します。</p>
</section>
<section id="sotd" class="introductory" typeof="bibo:Chapter" resource="#sotd" rel="bibo:Chapter">
<h2 aria-level="1" role="heading" id="h2_sotd">このドキュメントのステータス</h2>
<p><em>このセクションは、公開された時点での、このドキュメントの位置付けを説明しています。他のドキュメントは、このドキュメントに取って代わるかもしれません。現在の <abbr title="World Wide Web Consortium">W3C</abbr> の刊行物とこの技術レポートの最新の改訂版のリストは、http://www.w3.org/TR/ の <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> 技術レポートインデックス</a>で見ることができます。</em></p>
<div class="note">
<div class="note-title" aria-level="2" role="heading" id="h_note_1"><span>Note</span></div>
<p class="">このドキュメントは参考情報のみです。リソースは、情報のみを目的としており、説明を想定していません。</p>
</div>
<p>これは、<a href="http://www.w3.org/WAI/PF/html-task-force">HTML Accessibility Taskforce</a> を通じて開発され、<a href="http://www.w3.org/WAI/PF/">Protocols and Formats Working Group</a> による承認を得て、<a href="http://www.w3.org/html/wg/">HTML Working Group</a> によって発行されています。</p>
<p>これはドラフトのドキュメントであり、内容は予告なしに変更することがあります。</p>
<p>このドキュメントはワーキング ドラフトとして、<a href="http://www.w3.org/html/wg/">HTML Working Group</a> によって発行されました。</p>
<p>最後の<a href="http://www.w3.org/TR/2013/WD-aria-in-html-20131003/">ワーキング ドラフト</a>についてのフィードバックの後に、多くの<a href="https://www.w3.org/Bugs/Public/buglist.cgi?bug_status=ASSIGNED&bug_status=REOPENED&bug_status=RESOLVED&bug_status=CLOSED&chfieldfrom=2013-10-03&chfieldto=2014-06-10&component=%20Using%20ARIA%20in%20HTML&list_id=39839&product=HTML%20WG&query_format=advanced">バグ</a>が上げられ、そして解決されました。結果の変化を識別する<a href="http://www.w3.org/WAI/PF/HTML/aria-in-html/CH-aria-in-html-20140624.html">差分</a>ファイルが利用可能です。注目すべき変更には、ARIA 使用の<a href="#fourth-rule-of-aria-use">4番目</a>と<a href="#fifth-rule-of-aria-use">5番目</a>のルールの追加が含まれています。このドキュメントに関するコメントをしたい場合は、<a href="mailto:[email protected]">[email protected]</a>（<a href="mailto:[email protected]?subject=subscribe">サブスクライブ</a>、<a href="http://lists.w3.org/Archives/Public/public-html/">アーカイブ</a>）に送信してください。すべてのコメントを歓迎しています。バグも<a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG&component=Using%20ARIA%20in%20HTML">この仕様の W3C バグ トラッカー</a>に直接提出することができます。</p>
<p>ワーキング ドラフトとしての発行は、<abbr title="World Wide Web Consortium">W3C</abbr> メンバーによる承認を意味するものではありません。これはドラフトのドキュメントであり、常に他の文書によって更新または置換、廃止されることがあります。このドキュメントは作業中であり、作業結果として引用することは不適切です。</p>
<p>このドキュメントは、<a id="sotd_patent" about="" rel="w3p:patentRules" href="http://www.w3.org/Consortium/Patent-Policy-20040205/">2004年2月5日 <abbr title="World Wide Web Consortium">W3C</abbr> 特許方針</a>の下で活動するグループによって作成されました。<abbr title="World Wide Web Consortium">W3C</abbr> はグループの成果物に関連する<a href="http://www.w3.org/2004/01/pp-impl/40318/status" rel="disclosure">あらゆる特許の開示の公開リスト</a>を維持し、そのページには特許を開示するための指示もまた包含しています。<a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">エッセンシャルクレイム</a>を含んでいると思われる特許について実際の知識を有している人は、<a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure"><abbr title="World Wide Web Consortium">W3C</abbr> 特許方針のセクション 6</a> に従って情報を開示しなければなりません。</p>
</section>
<section id="toc">
<h2 class="introductory" aria-level="1" role="heading" id="h2_toc">目次</h2>
<ul class="toc" role="directory" id="respecContents">
<li class="tocline"><a href="#intro" class="tocxref"><span class="secno">1. </span>はじめに</a></li>
<li class="tocline"><a href="#notes-on-aria-use-in-html" class="tocxref"><span class="secno">2. </span>HTML で <abbr title="Accessible Rich Internet Applications">ARIA</abbr> を使う上での注意</a>
<ul class="toc">
<li class="tocline"><a href="#first-rule-of-aria-use" class="tocxref"><span class="secno">2.1 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の1番目のルール</a></li>
<li class="tocline"><a href="#second-rule-of-aria-use" class="tocxref"><span class="secno">2.2 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の2番目のルール</a></li>
<li class="tocline"><a href="#third-rule-of-aria-use" class="tocxref"><span class="secno">2.3 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の3番目のルール</a></li>
<li class="tocline"><a href="#fourth-rule-of-aria-use" class="tocxref"><span class="secno">2.4 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の4番目のルール</a></li>
<li class="tocline"><a href="#fifth-rule-of-aria-use" class="tocxref"><span class="secno">2.5 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の5番目のルール</a></li>
<li class="tocline"><a href="#what-does-adding-a-role-do-to-the-native-semantics" class="tocxref"><span class="secno">2.6 </span>ロールの追加はネイティブのセマンティクスに何を起こすか</a></li>
<li class="tocline"><a href="#add-aria-inline-or-via-script" class="tocxref"><span class="secno">2.7 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> の追加はインラインかスクリプト経由か</a></li>
<li class="tocline"><a href="#aria-validation" class="tocxref"><span class="secno">2.8 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> の検証</a></li>
<li class="tocline"><a href="#use-of-role-presentation" class="tocxref"><span class="secno">2.9 </span>role=presentation の使用</a></li>
<li class="tocline"><a href="#aria-labelledby-and-aria-describedby" class="tocxref"><span class="secno">2.10 </span>aria-labelledby と aria-describedby</a></li>
<li class="tocline"><a href="#using-aria-role-application" class="tocxref"><span class="secno">2.11 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> role=application の使用</a></li>
<li class="tocline"><a href="#recommendations-table" class="tocxref"><span class="secno">2.12 </span>リコメンデーションテーブル：</a></li>
<li class="tocline"><a href="#aria-role-state-and-property-quick-reference" class="tocxref"><span class="secno">2.13 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロール（Role）、ステート（State）、プロパティ（Property）のクイックリファレンス</a></li>
<li class="tocline"><a class="tocxref" href="#definitions-of-states-and-properties-all-aria--attributes"><span class="secno">2.14</span> ステート（State）とプロパティ（Property）の定義（すべての aria-* 属性）</a></li>
<li class="tocline"><a class="tocxref" href="#abstract-roles-1"><span class="secno">2.15 </span>抽象ロール</a></li>
</ul>
</li>
<li class="tocline"><a href="#references" class="tocxref"><span class="secno">A. </span>参照・参考</a>
<ul class="toc">
<li class="tocline"><a href="#normative-references" class="tocxref"><span class="secno">A.1 </span>参照文献</a></li>
<li class="tocline"><a href="#informative-references" class="tocxref"><span class="secno">A.2 </span>参考文献</a></li>
</ul>
</li>
</ul>
</section>
<div><hr/></div>
<section tabindex="-1" id="intro" typeof="bibo:Chapter" resource="#intro" rel="bibo:Chapter">
<!--OddPage--><h2 aria-level="1" role="heading" id="h2_intro"><span class="secno">1. </span>はじめに</h2>
<p>このドキュメントは、障碍に接している人々にとって Web コンテンツと Web アプリケーションがよりアクセシブルになる方法を定義した Accessible Rich Internet Applications 仕様 [<cite><a class="bibref" href="#bib-WAI-ARIA">WAI-ARIA</a></cite>] を用いて、HTML の要素にアクセシビリティ情報を追加する方法を、開発者に向けた実装ガイドです。このドキュメントは、動的コンテンツや Ajax、HTML、JavaScript や関連した技術により開発された高度なユーザーインターフェースを特に助け、[HTML5] で <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> を使用する方法を明示します。</p>
<p>このドキュメントは、どの <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 属性を [<cite><a class="bibref" href="#bib-HTML5">HTML5</a></cite>] の各要素に使用するのが適切であるかを提案しています。</p>
<p><abbr title="Accessible Rich Internet Applications">ARIA</abbr> の使用に関する一般的なベストプラクティスの情報については、[<cite><a class="bibref" href="#bib-WAI-ARIA-PRACTICES">WAI-ARIA-PRACTICES</a></cite>] ドキュメントを参照してください。</p>
<p>以下は、適切な情報を提供するリソースの、より長いリストです：</p>
<ul>
<li><a href="http://www.w3.org/WAI/PF/aria-practices/"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> 1.0 Authoring Practices</a></li>
<li><a href="http://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (<abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>) 1.0</a></li>
<li><a href="http://www.w3.org/html/wg/drafts/html/master/">HTML5</a></li>
<li><a href="http://www.html5accessibility.com">HTML5 Accessibility</a></li>
</ul>
</section>
<section role="main" typeof="bibo:Chapter" resource="#notes2" rel="bibo:Chapter" id="notes-on-aria-use-in-html">
<!--OddPage-->
<h2 tabindex="-1" id="notes2" aria-level="1" role="heading"><span class="secno">2. </span>HTML で <abbr title="Accessible Rich Internet Applications">ARIA</abbr> を使う上での注意</h2>
<section typeof="bibo:Chapter" resource="#rule1" rel="bibo:Chapter" id="first-rule-of-aria-use">
<h3 tabindex="-1" id="rule1" aria-level="2" role="heading"><span class="secno">2.1 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の1番目のルール</h3>
<p>要素を再利用したり、アクセシブルにするために <abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロール（role）やステート（state）、プロパティ（property）を追加する代わりに、セマンティクスや<strong>組み込み</strong>済みであるあなたが必要とする挙動を持つネイティブの HTML 要素または属性 [<cite><a class="bibref" href="#bib-HTML5">HTML5</a></cite>] を使用することが<em>できる</em>なら、<strong>そうしてください</strong>。</p>
<h3 id="not-possible">これはどのような状況下では、利用できないかもしれないのか</h3>
<ul>
<li>機能が HTML [<cite><a class="bibref" href="#bib-HTML5">HTML5</a></cite>] として利用可能だが、実装されていないか、実装されているが、<a href="http://www.html5accessibility.com">アクセシビリティのサポート</a>をしていない場合。</li>
<li>要素が必要に応じてスタイルできないため、ビジュアルデザインの制約が特定のネイティブ要素の使用を無視する場合。</li>
<li>機能が、<a href="http://blog.paciellogroup.com/2010/04/html5-and-the-myth-of-wai-aria-redundance/">HTML で現在利用できない</a>場合。</li>
</ul>
</section>
<section typeof="bibo:Chapter" resource="#second" rel="bibo:Chapter" id="second-rule-of-aria-use">
<h3 id="second" tabindex="-1" aria-level="2" role="heading"><span class="secno">2.2 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の2番目のルール</h3>
<p>本当に必要としない限り、ネイティブのセマンティクスを変更しないでください。</p>
<p>例：開発者は、ボタンである見出しを作りたいと望んでいる。</p>
<p>こう<strong>しないで</strong>ください：</p>
<code class="block"><<mark>h1</mark> <mark>role=button</mark>>heading button</<mark>h1</mark>></code>
<p>こう<strong>して</strong>ください：</p>
<code class="block"><h1><mark><button></mark>heading button<mark></button></mark></h1></code>
<p>または、正しい要素を使用することができない場合、こう<strong>して</strong>ください：</p>
<code class="block"><h1><mark><</mark><mark>span</mark> <mark>role=button</mark>>heading button<mark></span></mark></h1></code>
<p><strong>注：</strong>非インタラクティブ要素が、インタラクティブな要素のための基礎として使用される場合、開発者は <abbr title="Accessible Rich Internet Applications">ARIA</abbr> を使用するセマンティクスとスクリプトを使用する適切なインタラクションの振る舞いを追加する必要があります。ボタンの場合、例えば、それは<a href="http://blog.paciellogroup.com/2011/04/html5-accessibility-chops-just-use-a-button/">ちょうど（ネイティブ HTML）ボタン</a>を使用するのが、<strong>より良く</strong>そして容易です。</p>
<p><strong>注：</strong>フォールバックのために、<abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロールを使用して、同様のセマンティクスを持つネイティブ HTML 要素を使用することは問題ありません。例えば、<abbr title="Accessible Rich Internet Applications">ARIA</abbr> 対応の骨格のために HTML <a href="http://dev.w3.org/html5/spec-author-view/the-ul-element.html#the-ul-element">リスト要素</a>を使用して、<a href="http://hanshillen.github.io/jqtest/#goto_tree">ツリーウィジェット</a>を記述します。</p>
</section>
<section typeof="bibo:Chapter" resource="#third" rel="bibo:Chapter" id="third-rule-of-aria-use">
<h3 tabindex="-1" id="third" aria-level="2" role="heading"><span class="secno">2.3 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の3番目のルール</h3>
<p>すべてのインタラクションな <abbr title="Accessible Rich Internet Applications">ARIA</abbr> コントロールは、キーボードで使用できなければなりません。</p>
<p>ユーザーが、クリック、タップ、ドラッグ、ドロップ、スライド、スクロールできるウィジェットを制作した場合、ユーザーは、キーボードを使用してウィジェットへの移動と同等のアクションの実行もまた可能でなければなりません。</p>
<p>すべてのインタラクティブなウィジェットは、適切に標準的なキーストロークやキーストロークの組み合わせに反応するために準備されなければなりません。</p>
<p>例えば、<code>role=button</code> を使用する要素が、適切にフォーカスできなければならず、ユーザーが、<kbd>enter</kbd> キー（Win OS）または <kbd>return</kbd> キー（Mac OS）と <code>space</code> キーの<strong>両方</strong>を使用する要素に関連したアクションをアクティブにできなければなりません。</p>
<p><a href="http://www.w3.org/WAI/PF/aria-practices/"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> 1.0 オーサリングプラクティス（<abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> 1.0 Authoring Practices）</a>の<a href="http://www.w3.org/WAI/PF/aria-practices/#keyboard">キーボードと構造化ナビゲーション（keyboard and structural navigation）</a>と<a href="http://www.w3.org/WAI/PF/aria-practices/#aria_ex">デザインパターン（design patterns）</a>のセクションを参照してください。</p>
</section>
<section typeof="bibo:Chapter" resource="#fourth" rel="bibo:Chapter" id="fourth-rule-of-aria-use">
<h3 tabindex="-1" id="fourth" aria-level="2" role="heading"><span class="secno">2.4 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の4番目のルール</h3>
<p><em>目に見える</em><strong>フォーカス可能な</strong>要素に <code>role="presentation"</code> または <code>aria-hidden="true"</code> を使用しないでください。</p>
<p><em>目に見える</em><strong>フォーカス可能な</strong>要素にこれらのいずれかを使用することは、一部のユーザーが「無」に焦点を合わせる結果になるでしょう。</p>
<p>こう<strong>しないで</strong>ください：</p>
<code class="block"><<mark>button</mark> <mark>role=presentation</mark>>press me</<mark>button</mark>></code>
<p>こう<strong>しないで</strong>ください：</p>
<code class="block"><<mark>button</mark> <mark>aria-hidden="true"</mark>>press me</<mark>button</mark>></code>
<p><strong>注：</strong>インタラクティブな要素を見ることができなかったり、インタラクトすることができない場合、例えば、<code>aria-hidden</code> を適用することができます：</p>
<code class="block"><mark>button {display:none}</mark><br/>
<br/>
<<mark>button</mark>
<mark>aria-hidden="true"</mark>>press me</<mark>button</mark>></code>
</section>
<section typeof="bibo:Chapter" resource="#fifth" rel="bibo:Chapter" id="fifth-rule-of-aria-use">
<h3 tabindex="-1" id="fifth" aria-level="2" role="heading"><span class="secno">2.5 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の5番目のルール</h3>
<p>すべてのインタラクティブな要素は、<a href="http://www.w3.org/TR/wai-aria/terms#def_accessible_name">accessible name</a> を持たなければなりません。</p>
<p>インタラクティブな要素は、アクセシビリティ API の <em>accessible name</em>（または同等物）が値を持つとき、accessible name のみを持ちます。</p>
<p>例えば、下のコード例 <code>input type=text</code> は、目に見えるラベル「user name」を持っているが、accessible name は持っていない：</p>
<pre><code class="block">
user name <input type="text">
or
<!-- label element used, but not associated with the control
it is supposed to label -->
<mark><label></mark>user name<mark></label></mark> <input type="text">
</code></pre>
<p>操作している <a href="http://en.wikipedia.org/wiki/Microsoft_Active_Accessibility">MSAA</a> の <code>accName</code> プロパティは空です：</p>
<p><img src="noname.png" width="277" height="143" alt="example control with MSAA name and role information displayed. The accName property has no value, the accRole property is 'editable text'."/></p>
<p>比較すると、下のコード例 <code>input type=text</code> は、目に見えるラベル「user name」と accessible name を持っています。この例で、<code>input</code> 要素は<a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#category-label">ラベル（label）付け可能な要素</a>であり、<a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element"><code>label</code></a> 要素は正確に入力に対してラベルテキストを関連付けするために使用されるから、accessible name を持っています。</p>
<pre><code class="block">
<!-- <strong>Note:</strong> use of for/id or wrapping label around text
and control methods will result in an accessible name -->
<mark><label></mark>user name <input type="text"><mark></label></mark>
or
<mark><label for="uname">user name</label></mark> <input type="text" <mark>id="uname"</mark>>
</code></pre>
<p>操作している <a href="http://en.wikipedia.org/wiki/Microsoft_Active_Accessibility">MSAA</a> の <code>accName</code> プロパティは「user name」の値を持っています：</p>
<p><img src="name.png" width="277" height="143" alt="example control with MSAA name and role information displayed. The accName property has a value of 'user name', the accRole property is 'editable text'."/></p>
</section>
<section typeof="bibo:Chapter" resource="#do" rel="bibo:Chapter" id="what-does-adding-a-role-do-to-the-native-semantics">
<h3 tabindex="-1" id="do" aria-level="2" role="heading"><span class="secno">2.6 </span>ロールの追加はネイティブのセマンティクスに何を起こすか</h3>
<p><abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロールを追加すると、<a href="http://www.w3.org/WAI/PF/aria-implementation/#def_accessibility_api">アクセシビリティ API</a> を介して伝えられる<a href="http://www.w3.org/WAI/PF/aria-implementation/#def_accessibility_tree">アクセシビリティ ツリー（accessibility tree）</a>のネイティブなロールのセマンティクスを<strong>上書き</strong>するので、その結果として <abbr title="Accessible Rich Internet Applications">ARIA</abbr> は、間接的にスクリーンリーダーまたは他の支援技術のために伝えられるものに影響します。</p>
<p>例えば、この HTML ツリーのコードは、</p>
<code class="block"><h1 role=button>text</h1></code>
<p>アクセシビリティ ツリーではこうなります。</p>
<code class="block"><img src="heading-button.png" width="199" height="24" alt="button with a label of 'heading text'"/></code>
<h3 id="role-not">ロールの追加により成されないこと</h3>
<p><abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロールを追加しても、支援技術を使用<strong>しない</strong>人々に対し、要素を異なって見せたり、動作させたりはしないでしょう。ホスト要素の挙動やステート、プロパティは変化<strong>せず</strong>、ネイティブなロールのセマンティクスのみです。</p>
<p>例えば、この HTML ツリーのコードは、</p>
<code class="block"><button <mark>role=heading</mark> <mark>aria-level=1</mark>>text</button></code>
<p>アクセシビリティツリーではこうなります。</p>
<code class="block"><img src="heading.png" width="167" height="38" alt="a heading"/></code>
<p><strong>しかし</strong>、それはまだ押すことができ、それはまだ標準のタブの順番であり、まだボタンのように見え、押された時はまだ任意の関連づけられた動作を引き起こします。そういうわけで、見出しをボタンに変更することは HTML5 適合性として誤りです。</p>
<p><strong>注：</strong>要素のロールを変更すると、使用されるロールに挙動またはプロパティ、ステートを追加<strong>しません</strong>。<abbr title="Accessible Rich Internet Applications">ARIA</abbr> は、ブラウザでの見せ方や動作の方法を変化させません。例えば、リンクがボタンのように振る舞うために使用されるとき、<code>role=button</code> を追加しただけでは十分ではありません。ネイティブのボタンは、エンターキーまたはスペースバーを使用することで作動させることができるので、ネイティブのボタンのように動作するように <code>space</code> キーを聞き入れる<a href="http://blog.paciellogroup.com/2011/04/html5-accessibility-chops-just-use-a-button/">キー イベント ハンドラ</a>を包含することによって、ボタンのように動作させることが必要になります。</p>
</section>
<section id="add-aria-inline-or-via-script" rel="bibo:chapter" resource="#inline" typeof="bibo:Chapter">
<h3 tabindex="-1" id="inline" aria-level="2" role="heading"><span class="secno">2.7 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> の追加はインラインかスクリプト経由か</h3>
<p><abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロールや <code>aria-*</code> 属性がインタラクションの挙動を提供するためにスクリプトに<strong>依存しない</strong>なら、それは <abbr title="Accessible Rich Internet Applications">ARIA</abbr> マークアップをインラインで包含するほうが<strong>安全です</strong>。例えば、それは <a href="http://blog.paciellogroup.com/2010/10/using-wai-aria-landmark-roles/"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> <code>landmark</code> ロール</a>または <a href="http://www.w3.org/WAI/PF/aria-practices/#relations_labeling"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> ラベルと記述の属性</a>をインラインで追加しても良いです。
</p>
<p>コンテンツとインタラクションが、<strong>スクリプトが実行可能な状態で閲覧するコンテクストのみ</strong>サポートしている場合、例えば <a href="http://docs.google.com/">Google docs</a>（動作のために JavaScript が実行可能であることを求めるアプリケーション）は、それは単純に JavaScript が実行可能でないと（誰にでも）動作しないアプリケーションとしてインラインで <abbr title="Accessible Rich Internet Applications">ARIA</abbr> マークアップを包含するのが<strong>同様に安全</strong>です。</p>
<p><strong>そうでない場合は</strong>、スクリプト経由で <abbr title="Accessible Rich Internet Applications">ARIA</abbr> を挿入や変更、取り除きます。例えば、ツリー ウィジェットの折り畳まれたセクションは、このように見えるかもしれません：</p>
<code class="block"><li role=treeitem <mark>aria-expanded=false</mark> ...</code>
<p>ユーザーがセクションを開くとき、JavaScript を使用してこれに変えられます：</p>
<p><code class="block"><li role=treeitem <mark>aria-expanded=true</mark> ...</code></p>
</section>
<section typeof="bibo:Chapter" resource="#validation" rel="bibo:Chapter" id="aria-validation">
<h3 tabindex="-1" id="validation" aria-level="2" role="heading"><span class="secno">2.8 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> の検証</h3>
<p>もっとも簡単な方法は、<abbr title="Accessible Rich Internet Applications">ARIA</abbr> マークアップを持つ <a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-doctype">HTML5 DOCTYPE</a> を使用し、<a href="http://validator.w3.org/nu/"><abbr title="World Wide Web Consortium">W3C</abbr> Nu Markup Validation Service</a> を使用して妥当性を確認することです。<abbr title="Accessible Rich Internet Applications">ARIA</abbr> は、任意の他の <code>DOCTYPE</code> で同等に動作しますが、関連する DTD は、<abbr title="Accessible Rich Internet Applications">ARIA</abbr> マークアップを認識するように更新されていないか、思いもよらなかったとして、妥当性を確認するツールは、<abbr title="Accessible Rich Internet Applications">ARIA</abbr> マークアップと遭遇した時、エラーを生成するでしょう。</p>
<p>HTML5 で以前の HTML バージョンにおけるこれらの妥当性検査エラーは、現実世界のアクセシビリティの問題を作り出しているのが <abbr title="Accessible Rich Internet Applications">ARIA</abbr> ではないし、ネガティブなユーザーエクスペリエンスを意味することでもありません。それらは単純に <abbr title="Accessible Rich Internet Applications">ARIA</abbr> アクセシビリティのアノテーションに適合しない古い自動化された妥当性検査テストの結果に過ぎません。</p>
<p><strong>注：</strong><abbr title="Accessible Rich Internet Applications">ARIA</abbr> のチェックのための <a href="http://validator.w3.org/nu/"><abbr title="World Wide Web Consortium">W3C</abbr> Nu Markup Conformance Checker</a> のサポートは進行中の作業であり、（それは<em>とても</em>良いものですが！）完全な拠り所となる正確な結果を提供できません。あなたが <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 仕様や HTML5 仕様の <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 適合性要件と一致しない結果に遭遇した場合、<a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=Validator%20%28Nu%29">バグレポートを上げる</a>ことをお勧めします。</p>
</section>
<section typeof="bibo:Chapter" resource="#presentation" rel="bibo:Chapter" id="use-of-role-presentation">
<h3 tabindex="-1" id="presentation" aria-level="2" role="heading"><span class="secno">2.9 </span>role=presentation の使用</h3>
<p><a href="http://www.w3.org/WAI/PF/aria-practices/#presentation_role"><code>role=presentation</code></a> は、それが接している要素からセマンティクスを削除します。</p>
<p>例えば、この HTML ツリーのコードは、</p>
<code class="block"><h1 <mark>role=presentation</mark>>text</h1></code>
<p>アクセシビリティツリーではこうなります。</p>
<code class="block"><img src="text.png" width="149" height="25" alt="text, no heading"/></code>
<p>言い換えれば、それはセマンティクスとして意味を持たないテキストの文字列としてアクセシビリティツリーに伝えられています。</p>
<p><a href="http://www.w3.org/WAI/PF/aria-practices/#presentation_inheritance">必須の子を持たない</a>要素は、<code>role=presentation</code> を持つ要素の内側にネストされたどの要素も、それらのセマンティクスを保持します。</p>
<p>例えば、この HTML ツリーのコードは、</p>
<code class="block"><h1 <mark>role=presentation</mark>><abbr>API</abbr></h1></code>
<p>アクセシビリティツリーではこうなります。</p>
<code class="block"><img src="abbr.png" width="162" height="39" alt="abbr with text of API"/></code>
<p>（<code>ul</code> や <code>table</code> のように）必須の子を持つ要素は、<code>role=presentation</code> を持つ要素の内側にネストされたどの必須の子もまた同様にセマンティクスが削除されます。</p>
<p>例えば、この HTML ツリーのコードは、</p>
<code class="block"><table <mark>role=presentation</mark>><br/>
<tr><td><abbr>API</abbr></td><tr><br/>
</table></code>
<p>アクセシビリティツリーではこうなります。</p>
<code class="block"><img src="abbr.png" width="162" height="39" alt="abbr with text of API"/></code>
<p><strong>注：</strong><code>role=presentation</code> を持つ要素の子が必須ではない任意の要素は、それらのセマンティクスを保持します。これには、ネストされたリストや表のように必須の子を持つ他の要素を包含します。</p>
<p>例えば、この HTML ツリーのコードは、</p>
<code class="block"><table <mark>role=presentation</mark>><br/>
<tr><td><br/>
<table><br/>
<tr><td><abbr>API</abbr></td><tr><br/>
</table><br/>
</td><tr><br/>
</table></code>
<p>アクセシビリティツリーではこうなります。</p>
<code class="block"><img src="table.png" width="222" height="95" alt="table with 1 row and 1 cell containing an abbr element"/></code>
</section>
<section typeof="bibo:Chapter" resource="#label" rel="bibo:Chapter" id="aria-labelledby-and-aria-describedby">
<h3 tabindex="-1" id="label" aria-level="2" role="heading"><span class="secno">2.10 </span>aria-labelledby と aria-describedby</h3>
<p>現在の <code>aria-labelledby</code> と <code>aria-describedby</code> は、より確実に<a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#interactive-content-0">インタラクティブなコンテンツ</a>の要素のサブセットにテキストコンテンツを関連付けるためにサポートされています。これを書いている現在、<a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-a-element">リンク</a>先は正しく作業<strong>されておらず</strong>、<a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#embedded-content-0">埋め込みコンテンツ</a>のサポートは未知数ですが、多くの <a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-input-element"><code>input</code></a> タイプを包含しているフォームコントロールで安全に使用することができます。</p>
<p>Internet Explorer で、あなたが、複数の <code>id</code> を参照する <code>aria-labelledby</code> または単一か複数の <code>id</code> を参照する <code>aria-describedby</code> を使用する場合、参照された要素は、<a href="http://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">アクセシブルな HTML 要素</a>として Microsoft の用語でなければなりません。</p>
<p>複数の参照を持つ <code>aria-labelledby</code> の以下の例は、追加された <code>tabindex=-1</code> を持つ <code>span</code> を使用します。<a href="http://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Making_Nonaccessible_Elements_Accessible">非アクセシブルな要素をアクセシブルにする方法</a>を参照してください。</p>
<code class="block"><label <mark>id="l1"</mark> for="f3">label text</label><br/>
<br/>
<input type="text" id="f3" <mark>aria-labelledby="l1 l2"</mark>><br/>
<br/>
<p>other content</p><br/>
<br/>
<span <mark>tabindex="-1"</mark>
<mark>id="l2"</mark>
>more label text</span></code>
<p>要素が、<abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロール（role）を持っているとき、要素はまた、Internet Explorer で<a href="http://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">アクセス可能な HTML 要素</a>となります。たとえば、</p>
<code class="block"><div aria-describedby="test">text</div><br/>
<br/>
<div id="test" <mark>role="tooltip"</mark>>tooltip text</div>
</code>
</section>
<section id="using-aria-role-application">
<h3 tabindex="-1" aria-level="2" role="heading" id="h3_using-aria-role-application"><span class="secno">2.11 </span><abbr title="Accessible Rich Internet Applications">ARIA</abbr> role=application の使用</h3>
<h3 id="not">role="application" はどのようにスクリーンリーダーに影響を与えるか</h3>
<p>今日、多くの一般的なスクリーンリーダーは、ユーザーがブラウズモードのとき、ほとんどのキーストロークは、Web ページではなくスクリーンリーダーによって占拠されます。これは、単ページの効率的なナビゲーションに必要である。この執筆の時点で、アプリケーションモードが設定されている場合、多くのスクリーンリーダーは、キーストロークを妨害するのを中止し、ブラウザのために直接すべてのキーストロークを渡します。そのときユーザーは、同じぐらい簡単にページをナビゲートすることはできないでしょう。例えば、それは見出しによってページのあちこちにスキップしたり、静的テキストの行から行の段落を読むことができなくなるでしょう。しかしながら、いくつかのスクリーンリーダーは、アプリケーションロールがセットされているとき、異なる振る舞いをしません。</p>
<h3 id="so-when-should-i-use-it-and-when-not">それで、わたしはいつそれを使うべきで、いつそうしないべきか</h3>
<p><code>role=application</code> を使う時に重要なのは、とりわけ、スクリーンリーダーのキーボード ショートカットの長所が、それらの機能の損失として不利に働くことを考慮するべきです。それは一般的に使用されるべきではないし、それがもしある場合、スクリーンリーダー利用者によるユーザビリティテストを行うべきです。</p>
<p>コントロールのセットは、標準の HTML の一部なので、これらのウィジェットが含まれている場合、<code>role="application"</code> を使用<strong>しないでください</strong>。それらをマークアップし、<abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> ロール（role）の代わりに、標準的な HTML ウィジェットを使用してインタラクションモデルを作成する場合にも適用されます。</p>
<p>注：制作者が独自のテキスト入力ウィジェットを開発することはお勧めしません。これらのためにネイティブの入力を使用することは大抵一番うまくいきます。</p>
<ul>
<li><code>text box</code> これはまた、パスワードや検索、電話番号、その他の新しい入力<em>タイプ</em>の派生に適用されます。</li>
<li><code>textarea</code></li>
<li><code>check box</code></li>
<li><code>button</code></li>
<li><code>radio button</code> （通常は fieldset/legend 要素のラッパーの内側）</li>
<li><code>select + option</code>(s)</li>
<li><code>links</code>、<code>paragraphs</code>、<code>headings</code> と Web 上のドキュメントへの伝統的な/ネイティブな他の要素。</li>
</ul>
<p>ウィジェットが、以下のより動的で非ネイティブなウィジェットのいずれかの場合、<code>application</code> ロールを使用<strong>しないでください</strong>。<abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> をサポートするスクリーンリーダーと他の支援技術も、標準でこれらのブラウズとフォーカスモデルの間の切り替えをサポートするでしょう。</p>
<ul>
<li><code>tree view</code></li>
<li><code>slider</code></li>
<li>フォーカス可能な項目と、例えば、特定の情報を提供する電子メールのメッセージのリストを、矢印キーを介してナビゲートされる <code>table</code>。他の例として、インタラクティブなグリッドやツリーグリッドなどがあります。</li>
<li>ユーザーが、左矢印キーと右矢印キーを介してタブを選択するタブ（<code>tab, tablist</code>）のリスト。<strong>あなた</strong>はこのためにキーボードナビゲーションモデルを実装する必要があることに留意してください！</li>
<li><code>dialog</code> と <code>alertdialog</code>。これらは、その内部の操作へフォーカスが移動する（暗黙的な）アプリケーションモードのような状態になるスクリーンリーダーで発生します。これらがより良く機能するために、ロールが <code>dialog</code> である要素の <code>aria-describedby</code> 属性に、ダイアログの目的を解説するテキストの <code>id</code> を設定し、そしてあなたがそれを開くときに最初のインタラクティブコントロールにフォーカスするよう設定することに注意してください。<br/>
<p><code class="block"><div <mark>role="dialog"</mark> aria-label="login" <mark>aria-describedby="log1"</mark>><br/>
<br/>
<div <mark>id="log1"</mark> tabindex="-1">Provide user name and password to login.</div><br/>
<br/>
...<br/>
...<br/>
<br/>
</div></code></p></li>
<li><code>toolbar</code> と <code>toolbar buttons</code>、<code>menus</code> と <code>menu items</code> も同様。</li>
</ul>
<p>あなたは、あなたが提供しているコンテンツが <code>only</code> をフォーカスし、インタラクティブコントロールで構成されている場合、<code>role=application</code> <strong>だけ</strong>を使用することを望み、そしてそれらは本物のデスクトップアプリケーションをエミュレートした主として高度なウィジェットです。現在、Web アプリケーションと呼ばれているものが多く在るにもかかわらず、これら Web アプリケーションの大部分の内容は、それが、Facebook のポストとコメント、ブログ、Twitter フィードであれ、まだドキュメントベースの情報であり、動的に情報の特定のタイプの表示と非表示をするアコーディオンであることに留意してください。わたし達は、表面上はそれらをデスクトップに在るかの如きに感じることがあっても、主としてまだ Web のドキュメントとして扱います。</p>
<p>ユーザーがスクリーンリーダーでフォーム（フォーカス）モードのとき、コントロール固有のキーボード ショートカットを持つために role=application を使用することは必須ではありません。例えば、<abbr title="Accessible Rich Internet Applications">ARIA</abbr> <code>role=listbox</code> を持つカスタムコントロールは、利用者がそれとインタラクションしている間、容易に矢印キーを含め、押されたすべてのキーを取り込むことができます。</p>
<p>要するに、あなたが実際に <code>role=application</code> を使用する<strong>であろう</strong>機会は、<strong>とても稀な</strong>ケースです！</p>
<h4 id="where" aria-level="2" role="heading">それで、わたしは稀なケースである <code>role=application</code> をどこに加えれば訳に立ちますか？</h4>
<p>ウィジェットの要素を含んでいる最も身近な、例えば、外側の最も大きなウィジェット要素である要素の親 <code>div</code> に加えてください。外側の <code>div</code> が、アプリケーションのインタラクションモデルを必要とするウィジェットのみをラップする場合、これはフォーカスモードが、このウィジェットの外にあるユーザーのタブを一旦オフに切り替えていることを確認するでしょう。</p>
<p>ページが単にウィジェットかすべてをフォーカスモードに切り替えさせるのに必要なウィジェットのセットから構成される場合、<code>body</code> 要素にそれを加える<strong>だけ</strong>にしてください。これらのウィジェットの多くを持っているだけでなくユーザーが閲覧するのを望む何かを持っている場合、ページのドキュメントのような部分の最も外側の要素に <code>role=document</code> を使用します。それは <code>role=application</code> と対であり、この部分に閲覧モードを使用するように、あなたはスクリーンリーダーに伝えることができるでしょう。また、ユーザーがそれに到達するための機会を得るために、<code>tabindex=0</code> を設定することによってタブ付けできる要素を作ります。</p>
<p>経験からいって、もしあなたのページがウィジェットにより90から95パーセントの割合で構成されている場合、<code>role=application</code> は適切で<strong>あるかもしれません</strong>。その場合でも、実際に、<code>role=application</code> の有無でどのモデルがより良く動作するかについて向き合い、この二つのバージョンをテストすることができる知識を持つ人を見つけてください。</p>
<p>ページが主に、伝統的なウィジェットまたはユーザーがフォーカスモードでインタラクトすることの<strong>ない</strong>リンクのようなページ要素で構成されている場合、<code>body</code> のような広範囲を含む要素に <code>role=application</code> を加えないで<strong>ください</strong>。これは、あなたのサイト/アプリケーションを使おうとしているどのような支援技術のユーザーにも大きな悩みのタネになるでしょう。</p>
<p><code>role=application</code> の使用についての詳細な情報は“<a href="http://www.marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely/">If you use the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role "application", please do so wisely!</a>”を参照してください。</p>
</section>
<hr/>
<section typeof="bibo:Chapter" resource="#rec" rel="bibo:Chapter" id="recommendations-table">
<h3 tabindex="-1" id="rec" aria-level="2" role="heading"><span class="secno">2.12 </span>リコメンデーションテーブル：</h3>
<h3 id="rec-legend">凡例</h3>
<p><strong>’制作者は明示的にデフォルトの <abbr title="Accessible Rich Internet Applications">ARIA</abbr> セマンティクスを定義するべきですか？’列</strong></p>
<ul>
<li><strong class="nosupport">NO</strong> = すでにデフォルトのセマンティクスがブラウザによって実装されているので、要素または属性に関連付けられている暗黙的なロールやステート、プロパティを使用する必要はありません。これらはデフォルトのセマンティクスが有用である状況を示しています。</li>
<li><strong class="partial">N/A</strong> = デフォルトの <abbr title="Accessible Rich Internet Applications">ARIA</abbr> セマンティクスはありませんが、ブラウザによって実装された<a href="https://dvcs.w3.org/hg/html-api-map/raw-file/tip/Overview.html">アクセシビリティ API</a> セマンティクスがあるかもしれません。</li>
<li><strong class="support">Yes</strong> = デフォルトのセマンティクスはブラウザの間で実装されておらず、デフォルトの暗黙的なロールやステート、プロパティ、推奨されているセマンティクスは（<abbr title="Accessible Rich Internet Applications">ARIA</abbr> の標準がない場合）は使用しても良いです。</li>
</ul>
<p><strong>’どのような他の <abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロールやステート、プロパティを使っても良いか？’列</strong></p>
<p><strong class="nosupport">NONE</strong> = 要素は <abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロールとステート、プロパティを<strong>サポートしない</strong>。要素がドキュメント内で表示されないから当然です。</p>
<table>
<caption>HTML 言語の機能によって推奨される <abbr title="Accessible Rich Internet Applications">ARIA</abbr> の使用方法</caption>
<tbody>
<tr>
<th>HTML 言語の機能</th>
<th>標準の <abbr title="Accessible Rich Internet Applications">ARIA</abbr> セマンティクス</th>
<th>制作者は明示的にデフォルトの <abbr title="Accessible Rich Internet Applications">ARIA</abbr> セマンティクスを定義するべきですか</th>
<th>どのような他の <abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロールやステート、プロパティを使っても良いか</th>
</tr>
<tr>
<td>すべての要素</td>
<td>変化する</td>
<td>変化する</td>
<td>ロール：フォーカス可能な要素または '<code>role=presentation</code> <strong>にしてはいけません</strong>' 警告を持つか <strong class="nosupport">NONE</strong> が示されているそれらを除く <a href="#indexpresentation">presentation</a></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-href"><code>href</code></a> を持つ <a href="http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-a-element"><code>a</code></a> 要素</td>
<td><code>role=</code><a href="#indexlink"><code>link</code></a></td>
<td class="nosupport"><strong>NO</strong></td>
<td><p>ロール：<a href="#indexbutton"><code>button</code></a> または <a href="#indexcheckbox"><code>checkbox</code></a>、<a href="#indexmenuitem"><code>menuitem</code></a>、<a href="#indexmenuitemcheckbox"><code>menuitemcheckbox</code></a>、<a href="#indexmenuitemradio"><code>menuitemradio</code></a>、<a href="#indextab"><code>tab</code></a>、<a href="#indextreeitem"><code>treeitem</code></a></p>
<p>許可されたロールを適用される任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と任意の <code>aria-*</code> 属性</p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-address-element"><code>address</code></a></td>
<td>NONE</td>
<td class="partial"><strong> N/A</strong></td>
<td><p>ロール：<a href="#indexcontentinfo"><code>contentinfo</code></a><br/>
任意の <a href="#global">グローバル <code>aria-*</code> 属性</a></p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-href"><code>href</code></a> を持つ <a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-area-element"><code>area</code></a></td>
<td><code>role=</code><a href="#indexlink"><code>link</code></a></td>
<td class="nosupport"><strong>NO</strong></td>
<td><p><a href="#indexlink"><code>link</code></a> ロールを適用できる任意の <code>aria-*</code> 属性。任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-article-element"><code>article</code></a></td>
<td><code>role=</code><a href="#indexarticle"><code>article</code></a></td>
<td class="support"><span class="support"><strong>YES</strong></span><strong><sup> <a href="#note0">注 0</a></sup></strong></td>
<td><p>ロール：<code>presentation</code> または <code>article</code>、<code>document</code>、<code>application</code>、<code>main</code>。<br/>
任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性。</p>
<p><a id="note0" tabindex="-1"><strong>注 0：<span class="nosupport">NO</span></strong></a> は <code>article</code> 要素の子またはコメントをマークアップするために使用する場合です。</p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-aside-element"><code>aside</code></a></td>
<td><code>role=</code><a href="#indexcomplementary"><code>complementary</code></a></td>
<td class="support"><strong>YES</strong></td>
<td>
<p>ロール：<a href="#indexnote"><code>note</code></a> または <a href="#indexcomplementary"><code>complementary</code></a>、<a href="#indexsearch"><code>search</code></a>。</p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p>
</td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-audio-element"><code>audio</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>ロール：<a href="#indexapplication"><code>application</code></a><br/>
<a href="#indexapplication"><code>application</code></a> ロールを適用できる任意の <code>aria-*</code> 属性。任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p></td>
</tr>
</tbody><tbody>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-base-element"><code>base</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><strong class="nosupport">NONE</strong></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element"><code>body</code></a></td>
<td><code>role=</code><a href="#indexdocument"><code>document</code></a></td>
<td class="nosupport"><strong>NO</strong></td>
<td>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#the-button-element"><code>button</code></a></td>
<td><code>role=</code><a href="#indexbutton"><code>button</code></a></td>
<td class="nosupport"><strong>NO <sup><a href="#note0a">注 0a</a></sup></strong></td>
<td>
<p>ロール：<a href="#indexlink"><code>link</code></a>、<a href="#indexmenuitem"><code>menuitem</code></a>、<a href="#indexmenuitemcheckbox"><code>menuitemcheckbox</code></a>、<a href="#indexmenuitemradio"><code>menuitemradio</code></a>、<a href="#indexradio"><code>radio</code></a>。<br/>
任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p>
<p><a id="note0a" tabindex="-1"><strong>注 0a：<span class="support">YES</span></strong></a> は <code>aria-pressed</code> 属性が <code>button</code> 要素に使用されている場合です。</p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p>
</td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#the-button-element"><code>button</code></a> <a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#attr-button-type-menu-state"><code>type="menu"</code></a>
</td>
<td><code>aria-haspopup=true</code> を持つ <code>role=button</code></td>
<td class="nosupport"><strong>NO <sup><a href="#note0a">注 0b</a></sup></strong></td>
<td>
<p>ロール：<a href="#indexlink"><code>link</code></a>、<a href="#indexmenuitem"><code>menuitem</code></a>、<a href="#indexmenuitemcheckbox"><code>menuitemcheckbox</code></a>、<a href="#indexmenuitemradio"><code>menuitemradio</code></a>、<a href="#indexradio"><code>radio</code></a>。<br/>
任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p>
<p><a id="note0b" tabindex="-1"><strong>注 0b：<span class="support">YES</span></strong></a> は <a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-button-element"><code>button</code></a> <a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#attr-button-type"><code>type="menu"</code></a> が <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">scripted polyfill</a> で使用されている場合です。</p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-caption-element"><code>caption</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></td>
</tr>
<tr>
<td>
<p><a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-col-element"><code>col</code></a>、<a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-colgroup-element"><code>colgroup</code></a></p>
</td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><strong class="nosupport">NONE</strong></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#the-datalist-element"><code>datalist</code></a></td>
<td><code>aria-multiselectable=false</code> を持つ <code>role=listbox</code></td>
<td class="nosupport"><strong>NO <sup><a href="#note1">注 1</a></sup></strong></td>
<td><p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と <code>listbox</code> ロールを適用できる任意の <code>aria-*</code> 属性。</p>
<p><a id="note1" tabindex="-1"><strong>注 1：<span class="support">YES</span></strong></a> は <code>datalist</code> が <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">scripted polyfill</a> で使用されている場合です。</p>
<p>概要リストには直接的な <abbr title="Accessible Rich Internet Applications">ARIA</abbr> ロールに一致するものがないので、制作者がDL要素の不適切な使用で組み込まない限り、ネイティブのロールが上書きされることは適切です。</p>
</td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-dd-element"><code>dd</code></a>、<a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-dt-element"><code>dt</code></a>
</td>
<td>NONE</td>
<td><strong class="partial">N/A</strong></td>
<td>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-details-element"><code>details</code></a></td>
<td><code>role=group</code></td>
<td class="support"><strong>YES</strong></td>
<td>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と <code>group</code> ロールを適用できる任意の <code>aria-*</code> 属性。</td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#attr-dialog-open"><code>open</code></a> 属性を持たない <a href="http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-dialog-element"><code>dialog</code></a></td>
<td><code>aria-hidden</code> <code>=</code><code>true</code> を持つ <code>role=dialog</code></td>
<td class="support"><strong>YES</strong></td>
<td>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と <code>dialog</code> ロールを適用できる任意の <code>aria-*</code> 属性。（<code>hidden</code>/<code>aria-hidden</code> の代わりに CSS の <code>display:none</code> の使用を勧めます）</p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-div-element"><code>div</code></a></td>
<td>NONE</td>
<td><strong class="partial">N/A</strong></td>
<td><p>ロール：任意</p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p>
<p><strong>Note:</strong> ネイティブのセマンティクスを持つHTML要素をフォールバックとして使用される場合を除いて、任意のスクリプト化されたウィジェットはセマンティクスとしてニュートラルな <code>div</code> または <code>span</code> を使用することを勧めます。</p>
</td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-dl-element"><code>dl</code></a></td>
<td><code>role=list</code></td>
<td><strong class="nosupport">NO</strong></td>
<td><p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-embed-element"><code>embed</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>ロール：<code>application</code> または <code>document</code>、<code>img</code></p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element"><code>figure</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>ロール：任意の推奨された <code>role=group</code></p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-footer-element"><code>footer</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>ページの主な <code>footer</code> の <code>contentinfo</code> ロールに使用します。</p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a> </p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#the-form-element"><code>form</code></a></td>
<td><code>role=form</code></td>
<td><strong class="nosupport">NO</strong></td>
<td><p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p></td>
</tr>
<tr>
<td><p>他の場所で記載されていないコンテンツの要素をグループ化する：</p>
<p><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-p-element"><code>p</code></a>、<a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-pre-element"><code>pre</code></a>、<a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-blockquote-element"><code>blockquote</code></a></p></td>
<td>NONE</td>
<td><strong class="partial">N/A</strong></td>
<td><p>ロール：任意</p>
<p><strong>Note:</strong> 掲載された要素はいかなるデフォルトの <abbr title="Accessible Rich Internet Applications">ARIA</abbr> セマンティクスを持たないとはいえ<em>意味</em>を持ち、そしてロールとステート、プロパティで示されるかもしれないこの意味は <abbr title="Accessible Rich Internet Applications">ARIA</abbr> によって提供されませんが、<a href="https://dvcs.w3.org/hg/html-api-map/raw-file/tip/Overview.html">アクセシビリティ API</a> には存在します。したがって、制作者が掲載された要素のセマンティクスを上書きするよりはむしろ、<code>div</code> や <code>span</code> のようなセマンティクスとしてニュートラルな要素に <code>role</code> 属性を追加するのを考慮することを勧めます。<a href="#second"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 使用の2番目のルール</a>を参照してください。</p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements"><code>h1</code></a> から <a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements"><code>h6</code></a> 要素</td>
<td><code>aria-level</code> に等しい要素の<a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#outline-depth">アウトラインの深さ</a>を持つ <code>role=heading</code></td>
<td class="nosupport"><strong>NO</strong></td>
<td><span>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a> </span></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-head-element"><code>head</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><strong class="nosupport">NONE</strong></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-header-element"><code>header</code></a></td>
<td>NONE</td>
<td><strong class="support">YES</strong></td>
<td><p>ページの主な <code>header</code> の <code>banner</code> に使用します。</p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a> </p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-hr-element"><code>hr</code></a></td>
<td><code>role=separator</code></td>
<td class="nosupport"><strong>NO</strong></td>
<td>任意のグローバル <code>aria-*</code> 属性と <code>separator</code> ロールを適用できる任意の <code>aria-*</code> 属性。</td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element"><code>html</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td class="nosupport"><strong>NONE</strong></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-iframe-element"><code>iframe</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>ロール：<code>application</code> または <code>document</code>、<code>img</code></p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-iframe-element"><code>iframe (seamless)</code></a></td>
<td>EDITOR:任意の一般的なグループ分けしたロールを上書きしても OK です。</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>ロール：<code>application</code> または <code>document</code>、<code>img</code></p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-alt"><code>alt</code></a><code>=""</code> を持つ <a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-img-element"><code>img</code></a></td>
<td><code>role=presentation</code></td>
<td class="nosupport"><strong>NO</strong></td>
<td class="nosupport"><strong>NONE</strong></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-alt"><code>alt</code></a><code>="<em>some text</em>"</code> を持つ <a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-img-element"><code>img</code></a></td>
<td><code>role=img</code></td>
<td class="nosupport"><strong>NO</strong></td>
<td><p>ロール：任意</p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p></td>
</tr>
<tr>
<td><code>input type= </code><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#button-state-(type=button)"><code>button</code></a></td>
<td><code>role=button</code></td>
<td><strong class="nosupport">NO <sup><a href="#note1a">注 1b</a></sup></strong></td>
<td><p>ロール：<code>link</code>、<code>menuitem</code>、<code>menuitemcheckbox</code>、<code>menuitemradio</code>、<code>radio</code></p>
<p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a>と許可されたロールを適用できる任意の <code>aria-*</code> 属性</p>
<p><a id="note1a" tabindex="-1"><strong>注 1a：<span class="support">YES</span></strong></a> は <code>aria-pressed</code> 属性が <code>input type=button</code> 要素に使用されている場合です。</p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><code>input type= </code><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#checkbox-state-(type=checkbox)"><code>checkbox</code></a></td>
<td>要素の<a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#dom-input-indeterminate">不確定な</a> IDL 属性が真の場合は <code>aria-checked=mixed</code> または <code>checked</code> 属性が存在する場合は <code>aria-checked=true</code> です。</td>
<td class="nosupport"><strong>NO <sup><a href="#note2">注 2</a></sup> <sup><a href="#note1"></a></sup></strong></td>
<td><p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p>
<p><a id="note2" tabindex="-1"><strong>注 2：</strong></a><strong class="support">YES</strong> は三種の状態のある checkbox の第三の状態を伝える <code>input type=checkbox</code> の <code>aria-checked="mixed"</code> を使用する場合です。</p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><code>input type = </code><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#color-state-(type=color)"><code>color</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><code>input type = </code><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#date-state-(type=date)"><code>date</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><code>input type = </code><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#date-and-time-state-(type=datetime)"><code>datetime</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#attr-input-list"><code>list</code></a> 属性を持たない <code>input type = </code><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#e-mail-state-(type=email)"><code>email</code></a></td>
<td><code>role=textbox</code></td>
<td class="nosupport"><strong>NO</strong></td>
<td><p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p>
</td>
</tr>
<tr>
<td><code>input type = </code><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#file-upload-state-(type=file)"><code>file</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><p>任意の<a href="#global">グローバル <code>aria-*</code> 属性</a></p>
<p><code>role=presentation</code> <strong>にしてはいけません</strong></p></td>
</tr>
<tr>
<td><code>input type = </code><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#hidden-state-(type=hidden)"><code>hidden</code></a></td>
<td>NONE</td>
<td class="partial"><strong>N/A</strong></td>
<td><strong class="nosupport">NONE</strong></td>
</tr>
<tr>