ARIA: heading ロール

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

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

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

説明

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

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

aria-level

aria-level 属性は、この見出しが文書構造内にあるレベルを指定します。 レベルが存在しない場合、デフォルト値は 2 です。

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

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

必要な JavaScript 機能

必要なイベントハンドラ

無し

属性値の変更

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

例

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

<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 属性は、実際には、大きな変更を加えることができないレガシーコードにアクセシビリティを取り入れる場合にのみ使用するべきです。

追加の利点

無し

仕様

優先順位

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

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

TBD

関連情報

• <h1>–<h6>: HTML の見出し要素