ARIA: heading ロール

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

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

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

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

aria-level

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

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

必要なイベントハンドラ

無し

属性値の変更

コンテンツを動的に挿入しない限り、通常は必要ありません。 万一そのようなことがあるならば、新しく追加された見出しには、文書構造の残りの部分と整合性のある値を持つ 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 属性は、大きな変更を加えることができないレガシーコードのアクセシビリティを改良するためにのみ使用するべきです。

無し

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

TBD

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