blob: 28d6448238b86b878fd9778f6f1b46292d1f677c (
plain)
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
|
---
title: 'ARIA: main ロール'
slug: Web/Accessibility/ARIA/Roles/Main_role
tags:
- ARIA
- ARIA Role
- Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Main_role
---
<p>{{draft}}\{{ariaref}}</p>
<p><code>main</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書の主要なコンテンツを示すために使用されます。 メインコンテンツ領域は、文書の中心的な話題と直接に関連したり発展させるコンテンツや、アプリケーションの中心的な機能のコンテンツで構成されます。</p>
<pre class="brush: html"><div id="main" role="main">
<h1>アボカド</h1>
<!-- メインセクションのコンテンツ -->
</div>
</pre>
<p>これは、アボカドについて議論する文書のメインセクションです。 この文書のサブセクションでは、その歴史、品種の違い、栽培地域などを議論することができます。</p>
<h2 id="Description" name="Description">説明</h2>
<p><code>main</code> ロールは、文書のメイン（main）コンテンツを識別するナビゲーションに関する<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。 ランドマークロールを介してナビゲートする場合、<code>main</code> ロールは「メインコンテンツへスキップする」リンクの代わりです。 文書ごとに1つの <code>main</code> ランドマークロールがあるべきです。</p>
<p>{{htmlelement("main")}} 要素は <code>main</code> ロールを持ちます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p>
<p>文書とアプリケーションは DOM にネストすることができます。 これにより、DOM の子孫として複数のメイン要素が存在する可能性があります。 このような場合は、<code>aria-owns</code> を組み込んで、文書やアプリケーションの祖先に対するメインの関係を識別します。</p>
<h2 id="Example" name="Example">例</h2>
<pre><span class="tag"><body>
<!-- </span>主要なナビゲーション<span class="tag"> -->
<div role="main">
<h1></span>第一次インドシナ戦争</<span class="tag">h1></span>
<!-- 記事のコンテンツ -->
<span class="pln"> </span></div>
<!-- サイドバーとフッター -->
<span class="tag"></body></span>
</pre>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2>
<h3 id="Use_only_one_main_role_per_document" name="Use_only_one_main_role_per_document">文書ごとに1つの <code>main</code> ロールのみを使用する</h3>
<p><code>main</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書ごとに1回のみ使用するべきです。</p>
<p>文書に2つの <code>main</code> ロールが含まれている場合、JavaScript でトリガされたときにページコンテンツを更新するなどで、<code><a href="/ja/docs/Web/HTML/Global_attributes/hidden">hidden</a></code> 属性を切り替えるなどのテクニックによって、非アクティブな <code>main</code> ロールの存在を支援技術から取り除くべきです。</p>
<pre><span class="tag"><main>
<h1></span>アクティブな<span class="tag"> <code>main</code> </span>要素</<span class="tag">h1>
<!-- </span>コンテンツ<span class="tag"> -->
</main</span>
<span class="tag"><main hidden>
<h1></span>隠された<span class="tag"> <code>main</code> </span>要素</<span class="tag">h1>
<!-- </span>コンテンツ<span class="tag"> --></span>
<span class="tag"></main></span>
</pre>
<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2>
<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3>
<p>{{htmlelement("main")}} 要素を使用すると自動的にセクションが <code>main</code> ロールを持つことを伝えます。 可能であれば、<code><main></code> を代わりに使用することをお勧めします。</p>
<h3 id="Skip_navigation" name="Skip_navigation">スキップナビゲーション</h3>
<p>スキップナビゲーション（"skipnav" とも呼ばれる）は、支援技術のユーザーが繰返したコンテンツ（メインナビゲーション、情報バナーなど）の大きなセクションをすばやくバイパスすることを可能にするテクニックです。 これにより、ユーザーはページのメインコンテンツにすばやくアクセスできます。</p>
<p><code>role="main"</code> という宣言を持つ要素に <code><a href="/ja/docs/Web/HTML/Global_attributes/id">id</a></code> 属性を追加すると、それをスキップナビゲーションリンクのターゲットにすることができます。</p>
<pre><span class="tag"><body>
<a href="#main-content"></span>メインコンテンツへスキップする<span class="tag"></a>
<!-- </span>ナビゲーションとヘッダーのコンテンツ<span class="tag"> -->
<div id="main-content" role="main">
<!-- </span>メインページのコンテンツ<span class="tag"> -->
</div>
</body></span>
</pre>
<ul>
<li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li>
</ul>
<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3>
<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p>
<ul>
<li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li>
</ul>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
</tr>
<tr>
<td>{{SpecName("ARIA","#main","ARIA Main Role")}}</td>
<td>{{Spec2('ARIA')}}</td>
</tr>
<tr>
<td>{{SpecName("ARIA Authoring Practices","#aria_lh_main","Main Landmark Role")}}</td>
<td>{{Spec2('ARIA Authoring Practices')}}</td>
</tr>
</tbody>
</table>
<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2>
<p>TBD</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{htmlelement("main")}}: メイン要素</li>
<li><a href="https://www.w3.org/TR/wai-aria/#main">main (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li>
<li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li>
<li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li>
<li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li>
<li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li>
<li><a href="http://html5doctor.com/the-main-element/">The main element | HTML5 Doctor</a></li>
</ul>
|
