--- title: 'ARIA: heading ロール' slug: Web/Accessibility/ARIA/Roles/heading_role tags: - ARIA - ARIA Role - Accessibility translation_of: Web/Accessibility/ARIA/Roles/heading_role ---

{{MDNSidebar}}\{{ariaref}}

heading ロールは、この要素をページやセクションの見出しとして定義します。ページに構造を与えるために、セクション間の関係を示すレベルも提供するべきです。

<div role="heading" aria-level="1">これはメインページの見出しです</div>

これは div のテキストをページのメインの見出しとして定義します。それは aria-level 属性を介してレベル 1 で示します。

説明

heading ロールは、この要素を見出しのように扱うべきであることを支援技術に示します。スクリーンリーダーは、たとえば、テキストを読み、このテキストが見出しのように書式設定されていることを示します。さらに、レベルは、この見出しが表すページ構造のどの部分を支援技術に伝えるべきかを示すべきです。レベル 1 見出しは、通常、ページのメインの見出しを示し、レベル 2 は、最初のサブセクションを示し、レベル 3 は、そのサブセクションなどとなります。

キーボードインタラクション

このロールは特別なキーボードナビゲーションを必要としません。どんな見出しもそうであるように、ID を与えることで、アンカーリンクから参照できるようになり、キーボードを介してアクセス可能となります。

必要な JavaScript 機能

必要なイベントハンドラ: 無し
属性値の変更: コンテンツを動的に挿入する場合を除き、通常は必須ではありませんが、この場合、新しく追加された見出しには、文書構造の残りの部分と値が整合する aria-level 属性が必要です。

heading ロールと aria-level で <div> または <span> を使用する代わりに、このテキストが見出しであり、それが表す構造の部分を示すために、代わりに <h1> から <h6> の要素を使用することを検討してください。

例

以下は典型的なページ構造を示しています。

<div id="container">
<div role="heading" aria-level="1">メインページ見出し</div>
<p>この記事では、ページ構造の表示について説明します。</p>
<div role="heading" aria-level="2">前書き</div>
<p>導入テキスト。</p>
<div role="heading" aria-level="2">第 1 章</div>
<p>テキスト</p>
<div role="heading" aria-level="3">第 1.1 章</div>
<p>サブセクション内の複数のテキスト。</p>
...</div>

ただし、代わりに次のようにするべきです。

<div id="container">
<h1>メインページ見出し</h1>
<p>この記事では、ページ構造の表示について説明します。</p>
<h2>前書き</h2>
<p>導入テキスト。</p>
<h2>第 1 章</h2>
<p>テキスト</p>
<h3>第 1.1 章</h3>
<p>サブセクション内の複数のテキスト。</p>
...</div>

アクセシビリティに関する懸念

heading ロールと aria-level 属性を使用する必要がある場合は、HTML との整合性を保つために、レベルでレベル 6 を超えないようにしてください。理論的にはそれより大きくすることができますが、一部のスクリーンリーダーでサポートする場合もありますが、他のブラウザーやスクリーンリーダーの組み合わせでは結果が予測できない場合があります。

ベストプラクティス

このロールを使用する最良の方法は、まったく使用しないで、代わりに上記の例に示すようにネイティブの見出しタグ <h1> ～ <h6> を使用することです。 heading ロールと aria-level 属性は、実際には、大きな変更を加えることができないレガシーコードにアクセシビリティを取り入れる場合にのみ使用するべきです。

追加の利点

無し

仕様

仕様	状態
{{SpecName("ARIA","#heading","heading")}}	{{Spec2('ARIA')}}

優先順位

heading ロールは、それが使用されている要素のネイティブな意味論的意味をオーバーライドします。また、aria-level 属性は、どのレベルの見出しが公開されているかに関する情報を提供します。

スクリーンリーダーのサポート

TBD

説明

関連する ARIA のロール、ステート、プロパティ