ARIA: region ロール

リージョン (region) ランドマークロールは、文書内で、著者が重要であると識別した領域を識別するために使用されます。 これは、他のランドマークロールのどれも適切でないときでも、汎用のランドマークを提供することで、人々が容易にナビゲートできるようにするために使用されます。

html
<div role="region" aria-label="例">
  <!-- リージョンのコンテンツ -->
</div>

説明

リージョン (region) ロールは、ARIA のランドマークロールです。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。

リージョン (region) ロールは、ユーザーがそのセクションに簡単にナビゲートし、ページの要約にリストされることを望むほど重要なコンテンツのセクションのために予約するべきです。 リージョン (region) ロールはより汎用の用語であり、識別が必要なセクションが、banner、main、contentinfo、complementary、navigation などの他のランドマークロールのいずれかによって正確に説明できない場合にのみ使用するべきです。

リージョン (region) ロールを持つすべての要素には、リージョン内のコンテンツの目的を説明するラベルを含めるべきで、目に見えるヘッダーを参照する aria-labelledby を伴うのが好ましいです。 目に見える適切なヘッダーがない場合は、aria-label を使用するべきです。

リージョン (region) ランドマークロールのコンテンツは、文書のメインコンテンツから分離されている場合にも意味をなすべきです。

<section> 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションがリージョン (region) ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素（この場合は <section>）を常に使用するべきです。

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

aria-labelledby

リージョンにラベルを付けるには、この属性を使用します。 多くの場合、aria-labelledby 属性の値は、セクションのタイトルに使用される要素の ID になります。

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

無し

必要な JavaScript 機能

無し

例

html
<div role="region" aria-labelledby="region-heading">
  <h2 id="region-heading">
    この見出しの
    <code>id</code>
    属性は、このリージョンがアクセス可能な名前を持つのに役立ちます
  </h2>
  <!-- リージョンのコンテンツ -->
</div>

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

控えめに使用してください！ ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

他の関連コンテンツセクショニング要素またはランドマークロールが当てはまらない場合にのみ、リージョン (region) ロールを使用してください。 ページ上に複数のリージョンが存在する場合は、そのページの全体構造を再検討する価値があります。

ベストプラクティス

好ましい HTML

<section> 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションがリージョン (region) ロールを持つことを伝えます。 可能であれば、<section> を代わりに使用することをお勧めします。

ランドマークのラベル付け

文書に複数のリージョン (region) ランドマークロールがある場合は、それぞれにラベルを付けます。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。

html
<div role="region" aria-labelledby="use-discretion">
  <h3 id="use-discretion">
    慎重に <code>region</code> ロールを使用してください
  </h3>
  <!-- コンテンツ -->
</div>

...

<div role="region" aria-labelledby="please-reconsider">
  <h3 id="please-reconsider">文書構造を再検討してください</h3>
  <!-- コンテンツ -->
</div>

この例では、リージョンのラベルは aria-labelledby 属性によって作成されています。

オーバーフローテキストを含むコンテンツ領域のスクロール

tabindex="0" のコンテンツ領域がある場合は、role="region" を追加して、汎用のリージョンであるとスクリーンリーダーのユーザーに伝えます。 これは、キーボードのみのユーザーがオーバーフローテキストを含むリージョンをスクロールできるようにするためです。

SVG

SVG の個々のセクションを説明できるようにするために、SVG の領域上に role="region" を aria-label とともに宣言することができます。

追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。

仕様書

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

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

TBD

関連情報

  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: generic ロール
    17. ARIA: grid ロール
    18. ARIA: gridcell ロール
    19. ARIA: heading ロール
    20. ARIA: img ロール
    21. ARIA: list ロール
    22. ARIA: listbox ロール
    23. ARIA: listitem ロール
    24. ARIA: main ロール
    25. ARIA: navigation ロール
    26. ARIA: none ロール
    27. ARIA: option ロール
    28. ARIA: radio ロール
    29. ARIA: region ロール
    30. ARIA: row ロール
    31. ARIA: rowgroup ロール
    32. ARIA: search ロール
    33. ARIA: spinbutton ロール
    34. ARIA: switch ロール
    35. ARIA: tab ロール
    36. ARIA: table ロール
    37. ARIA: term ロール
    38. ARIA: textbox ロール
    39. ARIA: tooltip ロール
    40. group ロールの使用
    41. link ロールの使用
    42. log ロールの使用
    43. presentation ロールの使用
    44. progressbar ロールの使用
    45. slider ロールの使用
    46. status ロールの使用
    47. toolbar ロールの使用