ARIA: heading ロール
=================

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


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


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

説明
--

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

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

`aria-level`

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

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

このロールは特別なキーボードナビゲーションを必要としません。 どんな見出しもそうであるように、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>
```

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

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

ベストプラクティス
---------

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

### 追加の利点

無し

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # heading |
| Unknown specification # when\_to\_use\_structural\_roles |

優先順位
----

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

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

TBD

関連情報
----

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

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`