ARIA: heading ロール

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

html

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

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

説明

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

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

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

必要な JavaScript 機能

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

メモ: 見出し (heading) ロールと aria-level を持つ <div> または <span> を使用する代わりに、ネイティブの <h1> から <h6> 要素を使用して、このテキストが見出しであり、構造のどの部分を表しているかを示すことを検討してください。

例

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

html

<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>

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

html

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

Specification
Accessible Rich Internet Applications (WAI-ARIA) # heading
Unknown specification # when_to_use_structural_roles

優先順位

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

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

TBD

ARIA: heading ロール

説明

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

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

必要な JavaScript 機能

例

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

ベストプラクティス

追加の利点

仕様

優先順位

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

関連情報