WAI-ARIA ロール

ARIA のロールには 6 つのカテゴリーがあります。

文書構造ロールは、コンテンツの一部に構造的な記述を提供するために用いられます。ほとんどのブラウザーは同じ意味を持つ意味づけ HTML 要素に対応しているので、これらのロールはもう使用すべきではありません。 HTML に相当するものがないロール、例えばプレゼンテーション、ツールバー、ツールチップのロールのようなものは、同等のネイティブ HTML タグが利用できないため、スクリーンリーダーのような支援技術に文書構造に関する情報を提供します。

• toolbar
• tooltip (en-US)
• feed
• math (en-US)
• presentation / none
• note (en-US)

文書構造ロールの大部分は、意味づけされた HTML と同等の要素が利用でき、対応しています。使用するのは避けてください。

• application
• article （<article> を使用）
• cell （<td> を使用）
• columnheader (en-US) （<th scope="col"> を使用）
• definition (en-US) （<dfn> を使用）
• directory (en-US)
• document
• figure （<figure> を使用）
• group
• heading （h1 から h6 を使用）
• img (en-US) （<img> or <picture> を使用）
• list （either <ul> or <ol> を使用）
• listitem （<li> を使用）
• meter (en-US) （<meter> を使用）
• row （the <tr> を <table> で使用）
• rowgroup （<thead>、<tfoot>、<tbody> を使用）
• rowheader (en-US) （<th scope="row"> を使用）
• separator (en-US) （フォーカス不可の場合は <hr> を使用）
• table （<table> を使用）
• term （<dfn> を使用）

以下のものは完全を期するために記載していますが、ほとんどの場合、使用しても有益なことはほとんどありません。

• associationlist (en-US)
• associationlistitemkey (en-US)
• associationlistitemvalue (en-US)
• blockquote (en-US)
• caption (en-US)
• code (en-US)
• deletion (en-US)
• emphasis (en-US)
• insertion (en-US)
• paragraph (en-US)
• strong (en-US)
• subscript (en-US)
• superscript (en-US)
• time (en-US)

様々なウィジェットのロールは、一般的な操作パターンを定義するために使用します。文書構造ロールと同様に、これらのロールの中には、十分に対応しているネイティブの HTML 要素の意味づけと重複するものがあり、使用すべきではありません。 2 つの一覧の異なる点は、一般的に、ウィジェットロールは JavaScript による操作を要求し、文書構造ロールは必ずしもそうではないということです。

• scrollbar (en-US)
• searchbox (en-US)
• separator (en-US) （フォーカス可能な場合）
• slider
• spinbutton
• switch
• tab
• tabpanel (en-US)
• treeitem (en-US)

完全性を期すために掲載しましたが、 button, checkbox, gridcell, link, menuitem (en-US), menuitemcheckbox (en-US), menuitemradio (en-US), option, progressbar, radio, textbox を使用することは避けてください。ほとんどの場合、アクセシビリティに対応した同等の意味づけの要素が利用でき、対応しています。より詳細な情報については、それぞれのロールのドキュメントを参照してください。

複合ウィジェットロール

• combobox (en-US)
• menu (en-US)
• menubar (en-US)
• tablist (en-US)
• tree (en-US)
• treegrid (en-US)

完全性を期すために掲載しましたが、 grid, listbox, radiogroup を使用することは避けてください。より詳細な情報については、それぞれのロールのドキュメントを参照してください。

ウィジェットロール (role="widget") もありますが、これは抽象ロールであり、ウィジェットロールのカテゴリーにはないことに注意してください。

ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。ページのセクションを分類してラベル付けすることで、レイアウトによって視覚的に伝達される構造情報をプログラムで表現することができます。スクリーンリーダーは、ランドマーク・ロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。これらの使用は控えめにしてください。ランドマークロールが多すぎると、スクリーンリーダーに「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

• banner （文書のヘッダー (<header>)）
• complementary (<aside>)
• contentinfo （文書のフッター (<footer>)）
• form (<form>)
• main (<main>)
• navigation (<nav>)
• region (<section>)
• search (<search>)

ライブリージョンロールは、動的に変更されるコンテンツを持つ要素を定義するために使用されます。視覚ユーザーは、動的な変更が視覚的に目立つときに見ることができます。これらのロールは、弱視や目の不自由なユーザーが、コンテンツが更新されたかどうかを知るのに役立ちます。スクリーンリーダーのような支援技術は、動的なコンテンツの変更を知らせることができます。

• alert
• log
• marquee (en-US)
• status
• timer (en-US)

ウィンドウロールは、ポップアップモーダルダイアログなど、同じウィンドウ内でメインドキュメントウィンドウのサブウィンドウを定義します。

• alertdialog
• dialog

抽象ロールは、ブラウザが文書を整理し合理化するためだけに使用することを意図しています。HTMLマークアップを記述する開発者が使用すべきではありません。そうすることで、支援技術やユーザーに意味のある情報が伝達されることはありません。

command (en-US), composite (en-US), input (en-US), landmark (en-US), range (en-US), roletype (en-US), section (en-US), sectionhead (en-US), select (en-US), structure (en-US), widget (en-US), window (en-US) は使用しないでください。

以下は、 MDN で取り上げられている WAI-ARIA のロールに関するリファレンスページです。

alertdialog ロールの使用

このテクニックは、alertdialog ロールの使用方法を示しています。

ARIA: alert ロール

アラート (alert) ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりにアラートダイアログ (alertdialog) ロールを使用するべきです。

ARIA: application ロール

アプリケーション (application) ロールは、要素とその全ての子要素をデスクトップアプリケーションと同様に扱うべきであり、伝統的な HTML 解釈手法を使用するべきでないと支援技術に指示します。 このロールは、とても動的でデスクトップ的なウェブアプリケーションを定義するためにのみ使用するべきです。

ARIA: article ロール

記事 (article) ロールは、ページ、文書、またはウェブサイト上で容易に自立することができるページのセクションを示します。 これは、通常、コメント、フォーラム投稿、新聞記事、または 1 ページにまとめられたその他項目などの関連コンテンツの項目に設定します。

ARIA: banner ロール

バナー (banner) ロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。

ARIA: button ロール

button ロールは、ユーザーによってアクティブ化されたときに反応を引き起こすクリック可能な要素のためのものです。 role="button" を追加すると、この要素がボタンであるものの、ボタンの機能を提供していないことをスクリーンリーダーに伝えます。代わりに button または input に type="button" を付けたものを使用してください。

ARIA: cell ロール

cell は ARIA の role 属性の値で、要素を列ヘッダーや行ヘッダーの情報を含まない表形式コンテナー内のセルとして識別します。サポートされるには、セルが行 (row) ロールを持つ要素内にネストされている必要があります。

ARIA: checkbox ロール

チェックボックス (checkbox) ロールは、チェック可能なインタラクティブなコントロールに使用します。 role="checkbox" を含む要素には、チェックボックスの状態を支援技術に公開するための aria-checked 属性も含める必要があります。

ARIA: complementary ロール

補足 (complementary) ランドマークロールは、メインコンテンツに関連する補助セクションを指定するために使用され、しかも分離しても単独で成り立つことができます。 これらのセクションは、サイドバーやコールアウトボックスとして表示されることがよくあります。 可能であれば、代わりに HTML の aside 要素を使用してください。

ARIA: contentinfo ロール

コンテンツ情報 (contentinfo) ランドマークロールは、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用します。 このセクションは一般的にフッターと呼ばれます。

ARIA: dialog ロール

ダイアログ (dialog) ロールは、ウェブアプリケーションやウェブページの残りの部分からコンテンツや UI を分離する HTML ベースのアプリケーションのダイアログやウィンドウをマークアップするために使用します。 ダイアログは通常、オーバーレイを使用して残りのページコンテンツの上に配置されます。 ダイアログはノンモーダル (ダイアログ外のコンテンツともやりとり可能) またはモーダル (ダイアログ内のコンテンツのみとやりとり可能) のいずれかになります。

ARIA: document ロール

複雑な複合ウィジェット (en-US)やアプリケーションで一般的に使用される文書 (document) ロールは、コンテキストを読み取りモードに切り替えることを支援技術を知らせることができます。 文書 (document) ロールは、読み取りモードまたは閲覧モードを持つ支援技術に、この要素に含まれるコンテンツを文書モードを使用して読み取るように指示します。

ARIA: feed ロール

フィード (feed) は動的にスクロール可能な記事 (article) のリスト (list) で、ユーザーがスクロールすると記事がリストのどちらかの端から追加または削除されます。 フィード (feed) により、スクリーンリーダーは閲覧モードの読み取りカーソルを使用して、リッチコンテンツのストリームを読み込みながらスクロールすることを可能にし、ユーザーが読むにつれてコンテンツをさらにロードすることで無限にスクロールし続けることができます。

ARIA: figure ロール

ARIA の図表 (figure) ロールは、適切な意味論がまだ存在しないページコンテンツ内の図表を識別するために使用できます。 図表は一般的に、正規のテキストの流れとは異なる方法で情報を伝える、1 つ以上の画像、コードスニペット、またはその他のコンテンツと見なされます。

ARIA: form ロール

フォーム (form) ランドマークロールは、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。

ARIA: generic ロール

generic ロールは、自分自身で意味を持たない名前のないコンテナー要素を作成します。

ARIA: grid ロール

グリッド (grid) ロールは、1 つ以上のセルの行を含むウィジェット用です。 各セルの位置は重要であり、キーボード入力を使用してフォーカスすることができます。

ARIA: gridcell ロール

グリッドセル (gridcell) ロールは、グリッド (grid) やツリーグリッド (treegrid (en-US)) にセルを作成するために使用します。 これは、情報を表スタイルでグループ化する HTML の td 要素の機能を模倣することを意図しています。

ARIA: heading ロール

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

ARIA: list ロール

ARIA のリスト (list) ロールは、項目のリストを識別するために使用できます。 これは通常、リスト内に含まれるリスト項目を識別するために使用するリスト項目 (listitem) ロールと組み合わせて使用します。

ARIA: listbox ロール

リストボックス (listbox) ロールは、HTML の <select> 要素とは異なり、画像を含むことができる、1 つまたは複数の静的な項目をユーザーが選択できるリストに使用します。

ARIA: listitem ロール

ARIA のリスト項目 (listitem) ロールは、項目のリスト内の項目を識別するために使用できます。 これは、通常、リストコンテナーを識別するために使用するリスト (list) ロールと組み合わせて使用します。

ARIA: main ロール

メイン (main) ランドマークロールは、文書の主要なコンテンツを示すために使用します。 メインコンテンツ領域は、文書の中心的な話題やアプリケーションの中心的な機能と直接関連したり、それらを拡張するコンテンツで構成されます。

ARIA: navigation ロール

ナビゲーション (navigation) ランドマークロールは、ウェブサイトやページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用します。

ARIA: none ロール

none ロールは presentation ロールの別名です。どちらも、要素の暗黙の ARIA の意味づけを除去し、アクセシビリティツリーに公開されないようにします。

ARIA: option ロール

option ロールは listbox で選択可能な項目に使用します。

ARIA: region ロール

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

ARIA: row ロール

行ロール (role="row") を持つ要素は、表形式の構造内に並んだセルの一行です。 行には、1 つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 行は、グリッド (grid)、表 (table)、ツリーグリッド (treegrid (en-US)) 内に含まれ、任意で行グループ (rowgroup) 内に含まれることもあります。

ARIA: rowgroup ロール

行グループロール (role="rowgroup") を持つ要素は、表形式の構造内の行 (row) のグループです。 行グループ (rowgroup) には、グリッド (grid)、表 (table)、ツリーグリッド (treegrid (en-US)) 内のセル (cell)、グリッドセル (gridcell)、列ヘッダー (columnheader (en-US))、行ヘッダー (rowheader (en-US)) の行が 1 つ以上含まれます。

ARIA: search ロール

検索 (search) ランドマークロールは、ページ、サイト、またはサイトのコレクションの検索に使用されるページのセクションを識別するために使用します。

ARIA: spinbutton ロール

spinbutton ロールは、ユーザーに離散的な選択肢の中から値を選択することを期待する範囲選択の型を定義します。

ARIA: switch ロール

ARIA のスイッチ (switch) ロールは、チェックボックス (checkbox) ロールと機能的に同じですが、かなり一般的な意味を持つ「チェックされた」状態と「チェックされていない」状態を表す代わりに、スイッチ (switch) ロールは「オン」と「オフ」の状態を表す点が異なります。

ARIA: tab ロール

ARIA のタブ (tab) ロールは、タブリスト (tablist) 内のインタラクティブな要素を示し、アクティブ化されると、関連するタブパネル (tabpanel (en-US)) を表示します。

ARIA: table ロール

ARIA の role 属性の table 値は、このロールを含む要素を、ネイティブの table HTML 要素と同様に、行と列に配置されたデータを含む非インタラクティブな表構造を持つものとして識別します。

ARIA: term ロール

term ロールは、オプションで対応する definition (en-US) を持つ単語やフレーズに使用することができます。

ARIA: textbox ロール

textbox ロールは、自由形式テキストの入力ができる要素を識別するために使用されます。 可能であれば、このロールを使用するのではなく、単一行入力の場合は input 要素の type="text" を、複数行入力の場合は textarea 要素を使用してください。

group ロールの使用

このテクニックは、group ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。

link ロールの使用

このテクニックは、link ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。

log ロールの使用

このテクニックは、log ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。

presentation ロールの使用

このテクニックは、presentation ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。

progressbar ロールの使用

このテクニックは、progressbar ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。

radio ロールの使用

このテクニックは、radio ロールをどのように使用するかを示し、ブラウザーと支援技術に及ぼす影響について説明します。

slider ロールの使用

このテクニックは、slider ロールの使い方を示し、ブラウザーと支援技術に及ぼす影響について説明します。

status ロールの使用

このテクニックは、status ロールを使用する方法を示し、ブラウザーと支援技術に及ぼす影響について説明します。

toolbar ロールの使用

このテクニックは、toolbar ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。

• ARIA の使用: ロール、ステート、プロパティ
• ARIA の状態とプロパティ