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
属性が必要です。
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
属性は、実際には、大きな変更を加えることができないレガシーコードにアクセシビリティを取り入れる場合にのみ使用するべきです。
追加の利点
無し
仕様
優先順位
heading
ロールは、それが使用されている要素のネイティブな意味論的意味をオーバーライドします。 また、aria-level
属性は、どのレベルの見出しが公開されているかに関する情報を提供します。
スクリーンリーダーのサポート
TBD