blob: 156371cecc252b1c52f399dc66a73839d897cad7 (
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
|
---
title: 'ARIA: banner ロール'
slug: Web/Accessibility/ARIA/Roles/Banner_role
tags:
- ARIA
- ARIA Role
- Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Banner_role
---
<p class="summary">\{{ariaref}} <span class="seoSummary"><code>banner</code> ロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。 </span></p>
<pre class="brush: html"><div role="banner">
<img src="companylogo.svg" alt="会社名">
<h1>タイトル<h1>
<h2>サブタイトル</h2>
</div></pre>
<p>HTML5 の {{htmlelement("header")}} 要素は、{{htmlelement("aside")}}、{{htmlelement("article")}}、{{htmlelement("main")}}、{{htmlelement("nav")}}、または {{htmlelement("section")}} の子孫でない限り、<code>banner</code> ランドマークと同じ意味を持ちます。</p>
<ul>
</ul>
<h2 id="Description" name="Description">説明</h2>
<p><code>banner</code> ランドマークロールは、それが適用されたコンテナ要素をヘッダーに変換します。 これは、一般的に全ページ上部にあるサイト全体共通のサイトヘッダーのコンテンツ用に予約されているべきです。</p>
<p>バナー（banner）には、通常ロゴやコーポレートアイデンティティ、おそらくサイト固有の検索ツールが含まれており、一般的にマーケティングチームがサイトのヘッダーやトップバナーと呼ぶものです。 {{htmlelement("header")}} 要素技術がそのバナーで使用されていない場合は、支援技術に対して <code>banner</code> ランドマーク（landmark）を定義するために、<code>role="banner"</code> の宣言を使用するべきです。</p>
<p>支援技術は、{{htmlelement("body")}} 要素の子孫であり、<code><article></code>、<code><aside></code>、<code><main></code>、<code><nav></code> または <code><section></code> サブセクション内にネストされていない場合、バナーとしてページのメイン <code><header></code> 要素を識別できます。</p>
<p>各ページに <code>banner</code> ランドマークを持っていてもかまいませんが、各ページは <code>banner</code> ロールを持つ1つの <code><header></code> に限定するべきです。 ネストされた <code>document</code> ロールおよび/または <code>application</code> ロールを含むページの場合、ネストされたそれぞれの <code>document</code> ロールや <code>application</code> ロールは、1つの <code>banner</code> ランドマークを持っていてもかまいません。 ページに複数の <code>banner</code> ランドマークが含まれている場合は、それぞれに固有のラベルを付けるべきです。</p>
<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3>
<p>無し</p>
<h3 id="Keyboard_interactions" name="Keyboard_interactions">キーボードインタラクション</h3>
<p>無し</p>
<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3>
<p>無し</p>
<h2 id="Examples" name="Examples">例</h2>
<p>ここでは、ナビゲーションへ飛ぶリンク、ロゴ、タイトル、サブタイトルを含む簡単なバナーがあります。 これがサイトのメインヘッダーであるため、<code>banner</code> ランドマークロールをコンテナ要素に追加しました。</p>
<pre class="brush: html"><div role="banner">
<a href="#nav" id="skipToMenu" class="skiptocontent">キーボードナビゲーションへ飛ぶ</a>
<img src="images/w3c.png" alt="W3C ロゴ">
<h1>ARIA ランドマーク</h1>
<p>容易なナビゲーションのためのページのサブセクションの特定</p>
</div></pre>
<p>また、上記の HTML の <code><header></code> 要素で記述することもできます。</p>
<pre class="brush: html"><header>
<a href="#nav" id="skipToMenu" class="skiptocontent">キーボードナビゲーションへ飛ぶ</a>
<img src="images/w3c.png" alt="W3C ロゴ">
<h1>ARIA ランドマーク</h1>
<p>容易なナビゲーションのためのページのサブセクションの特定</p>
</header></pre>
<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2>
<p><code><header></code> 要素を使用して、ページの任意のサブセクションの子孫でないことを保証するのが最善ですが、場合によっては基になる HTML にアクセスできません。 この場合、JavaScript を使用してページのメインヘッダーに <code>banner</code> ロールを追加できます。 この方法でページのバナーを特定すると、サイトのアクセシビリティが向上します。</p>
<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","#banner","ARIA: banner role")}}</td>
<td>{{Spec2('ARIA')}}</td>
</tr>
<tr>
<td>{{SpecName("ARIA Authoring Practices","#aria_lh_banner","Banner 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>HTML {{htmlelement("header")}} 要素</li>
<li><a href="https://w3c.github.io/aria-practices/examples/landmarks/banner.html">WC3 Landmarks Example</a></li>
</ul>
|
