blob: 878060fd2094cd2176057844f0e10a54ffb426f4 (
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
132
133
134
135
|
---
title: 'ARIA: main ロール'
slug: Web/Accessibility/ARIA/Roles/Main_role
tags:
- ARIA
- ARIA Role
- Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Main_role
---
<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>) ロールは、文書のメインコンテンツを識別する、ナビゲーションに関する<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>です。 ランドマークは、支援技術によって、文書の大きなセクションをすばやく識別してナビゲートするために使用できます。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝えられる構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。 ランドマークロールを介してナビゲートする場合、メインロールは「メインコンテンツへスキップする (Skip to main content) 」リンクの代わりになります。 メイン (<code>main</code>) ランドマークロールは、文書ごとに1つだけあるべきです。</p>
<p><a href="/ja/docs/Web/HTML/Element/main"><code><main></code> 要素</a>は、メイン (<code>main</code>) ロールを持ちます。 開発者は、ARIA を使用するよりも、正しい意味論の HTML 要素を使用することを常に好むべきです。</p>
<p>文書 (<code>document</code>) とアプリケーション (<code>application</code>) は DOM 内でネストすることができます。 これにより、DOM の子孫として複数のメイン要素を持つことになる可能性があります。 このような場合には、メインとその祖先である文書やアプリケーションとの関係を識別するために <code>aria-owns</code> を含めます (訳注: aria-owns は、DOM 階層で親子関係に無い要素において、親に指定することで子でない要素を子として組み込むためのものであり、文書やアプリケーションとメインが DOM 階層で親子関係にあれば必要ありません) 。</p>
<h2 id="Example" name="Example">例</h2>
<pre class="brush: html"><body>
<!-- 主要なナビゲーション -->
<div role="main">
<h1>第一次インドシナ戦争</h1>
<!-- 記事のコンテンツ -->
</div>
<!-- サイドバーとフッター -->
</body>
</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">文書ごとに <code>main</code> ロールを1つのみ使用する</h3>
<p>メイン (<code>main</code>) <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、文書ごとに1回のみ使用するべきです。</p>
<p>JavaScript によってトリガーされたときにページコンテンツを更新するなどで、文書に2つのメイン (<code>main</code>) ロールが含まれている場合、<a href="/ja/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code> 属性</a>をトグルするなどの手法によって、アクティブでないメイン (<code>main</code>) ロールの存在を支援技術から取り除くべきです。</p>
<pre class="brush: html"><main>
<h1>アクティブな <code>main</code> 要素</h1>
<!-- コンテンツ -->
</main>
<main hidden>
<h1>隠された <code>main</code> 要素</h1>
<!-- コンテンツ -->
</main>
</pre>
<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2>
<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3>
<p><a href="/ja/docs/Web/HTML/Element/main"><code><main></code> 要素</a>を使用すると自動的にセクションがメイン (<code>main</code>) ロールを持つことを伝えます。 可能な限り、<code><main></code> 要素を代わりに使用することをお勧めします。</p>
<h3 id="Skip_navigation" name="Skip_navigation">スキップナビゲーション</h3>
<p>スキップナビゲーション (スキップナビ (skipnav) とも呼ばれる) は、支援技術のユーザーが繰り返されるコンテンツの大きなセクション (メインナビゲーション、情報バナーなど) をすばやくバイパスできるようにする手法です。 これにより、ユーザーはページのメインコンテンツにすばやくアクセスできます。 (訳注: このページでも、ページが表示されたらすぐ Tab キーを押すことで、ページ上部にリンクが表示されるようになっています。)</p>
<p><code>role="main"</code> という宣言を持つ要素に <a href="/ja/docs/Web/HTML/Global_attributes/id"><code>id</code> 属性</a>を追加すると、それをスキップナビゲーションリンクのターゲットにすることができます。</p>
<pre class="brush: html"><body>
<a href="#main-content">メインコンテンツへスキップする</a>
<!-- ナビゲーションとヘッダーのコンテンツ -->
<div id="main-content" role="main">
<!-- メインページのコンテンツ -->
</div>
</body>
</pre>
<ul>
<li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a> (<a href="https://raw.githubusercontent.com/Wind1808/Translated-into-Japanese/main/WebAIM/skipnav.txt">日本語対訳</a>)</li>
</ul>
<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3>
<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。</p>
<ul>
<li><a href="https://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><a href="/ja/docs/Web/HTML/Element/main"><main>: メイン要素</a></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/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</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="https://html5doctor.com/the-main-element/">The main element | HTML5 Doctor</a></li>
</ul>
<section id="Quick_links">
<ol>
<li><a href="/ja/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA ロール</strong></a>{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/ARIA/Roles")}}</li>
</ol>
</section>
|
