このページは、MDN で説明されているすべての WAI-ARIA ロールをカバーするリファレンスページを一覧にしています。ロールの完全なリストについては、ARIA を使用する: ロール、ステート、プロパティをご覧ください。
- ARIA: alert ロール
- {{ariaref}}
alertロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりにalertdialogロールを使用するべきです。 - ARIA: application ロール
applicationロールは、要素とその全ての子要素をデスクトップアプリケーションと同様に扱うべきであり、伝統的な HTML 解釈テクニックを使用するべきでないと支援技術に指示します。 このロールは、とても動的でデスクトップ的なウェブアプリケーションを定義するためにのみ使用するべきです。- ARIA: article ロール
- {{ariaref}}
articleロールは、ページ、ドキュメント、またはウェブサイト上で容易に自立することができるページのセクションを示します。 これは、通常、コメント、フォーラム投稿、新聞記事、または1ページにまとめられたその他項目などの関連コンテンツの項目に設定します。 - ARIA: banner ロール
- {{ariaref}}
bannerロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。 - ARIA: cell ロール
- ARIA の
role属性のcell値は、要素を列ヘッダーや行ヘッダーの情報を含まない表形式コンテナ内のセルとして識別します。 サポートされるには、セルがrowロールを持つ要素内にネストされている必要があります。 - ARIA: complementary ロール
complementaryランドマークロールは、メインコンテンツに関連する補助セクションを指定するために使用され、しかも分離しても単独で成り立つことができます。 これらのセクションは、サイドバーやコールアウトボックスとして表示されることがよくあります。 可能であれば、代わりに HTML のaside要素を使用してください。- ARIA: contentinfo ロール
contentinfoランドマークロールは、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用されます。 このセクションは一般的にフッターと呼ばれます。- ARIA: dialog ロール
dialogロールは、ウェブアプリケーションまたはウェブページの他の部分からコンテンツまたは UI を分離する HTML ベースのアプリケーションのダイアログまたはウィンドウをマークアップするために使用されます。 ダイアログは、通常、オーバーレイを使用してページコンテンツの残りの部分の上に配置されます。 ダイアログは非モーダル（ダイアログの外のコンテンツとやりとりすることは可能です）またはモーダル（ダイアログ内のコンテンツのみがやり取りできる）のいずれかになります。- ARIA: document ロール
- 複雑な複合ウィジェットやアプリケーションで一般的に使用される
documentロールは、コンテキストを読み取りモードに切り替えることを支援技術を知らせることができます。documentロールは、ドキュメントモードを使用して、この要素に含まれるコンテンツを読み取るための読み取りモードまたはブラウズモードを支援技術に指示します。 - ARIA: feed ロール
- フィード（
feed）は動的にスクロール可能な記事（article）のリスト（list）で、ユーザーがスクロールすると記事がリストの両端から追加または削除されます。feedを使用すると、スクリーンリーダーはブラウズモードの読み取りカーソルを使用して、ユーザーが読むにつれてより多くのコンテンツをロードすることで無限にスクロールし続けることができるリッチコンテンツのストリームを読み、スクロールすることができます。 - ARIA: figure ロール
- ARIA の
figureロールは、適切な意味論が存在しないページコンテンツ内の図表を識別するために使用できます。 図表は、通常、1つまたは複数の画像、コードスニペット、または情報を通常のテキストの流れとは異なる方法で配置するその他のコンテンツとみなされます。 - ARIA: form ロール
formランドマークロールは、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。- ARIA: grid ロール
gridロールは、1つ以上のセルの行を含むウィジェット用です。 各セルの位置は重要であり、キーボード入力を使用してフォーカスすることができます。- ARIA: heading ロール
headingロールは、この要素をページやセクションの見出しとして定義します。 ページに構造を与えるために、セクション間の関係を示すレベルも提供するべきです。- ARIA: img ロール
- ARIA の
imgロールは、単一の画像とみなすべきページコンテンツ内の複数の要素を識別するために使用できます。 これらの要素は、画像、コードスニペット、テキスト、絵文字、または視覚的に情報を伝達するために組み合わせることができる他のコンテンツであってもよい。 - ARIA: list ロール
- ARIA の
listロールは、項目のリスト（list）を識別するために使用できます。 これは、通常、リスト内に含まれるリスト項目（list item）を識別するために使用されるlistitemロールと組み合わせて使用されます。 - ARIA: listbox ロール
listboxロールは、ユーザーが静的な1つ以上の項目を選択するリストに使用され、HTML の<select>要素とは異なり、画像を含むことがあります。- ARIA: listitem ロール
- ARIAの
listitemロールは、項目のリスト内の項目を識別するために使用できます。 これは、通常、リストコンテナを識別するために使用されるlistロールとともに使用されます。 - ARIA: main ロール
- {{ariaref}}
- ARIA: navigation ロール
navigationランドマークロールは、ウェブサイトまたはページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用されます。- ARIA: region ロール
regionランドマークロールは、文書内で、著者が重要であると識別した領域を識別するために使用されます。 これは、他のランドマークロールのどれも適切でないときでも、汎用のランドマークを提供することで、人々が容易にナビゲートできるようにするために使用されます。- ARIA: row ロール
role="row"の要素は、表形式の構造内のセルの行（row）です。 行には、grid、table、treegrid内の1つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 オプションでrowgroup内にも含まれます。- ARIA: rowgroup ロール
- role="rowgroup" を持つ要素は、表構造内の行（
row）のグループです。 行グループ（rowgroup）には、グリッド(grid)、表（table）、またはツリーグリッド（treegrid）内のセル（cell）、グリッドセル（gridcell）、列ヘッダー（columnheader）、または行ヘッダー（rowheader）の1つ以上の行が含まれます。 - ARIA: search ロール
searchランドマークロールは、ページ、サイト、またはサイトのコレクションを検索するために使用されるページのセクションを識別するために使用されます。- ARIA: switch ロール
- ARIA の
switchロールは、checkboxロールと機能的に同じですが、"checked" と "unchecked" の状態を表す代わりに、その意味ではかなり一般的なもので、switchロールは、「オン」と「オフ」の状態を表します。 - ARIA: table ロール
- ARIA の role 属性の table 値は、このロールを含む要素を、ネイティブの
tableHTML 要素と同様に、行と列に配置されたデータを含む非インタラクティブな表構造を持つものとして識別します。 - ARIA: textbox ロール
textboxロールは、自由形式テキストの入力を可能にする要素を識別するために使用されます。- チェックボックスロールの使用
- チェックボックスロールはチェック可能なインタラクティブなコントロールに使用されます。もし要素が
role="checkbox"を使っていたら 、支援技術へチェックボックスのステートを公開するためにaria-checked属性も持つ必要があります。ネイティブHTMLのチェックボックスフォームコントロールが２つののみ（ "checked" もしくは "not checked" ）をもてる一方で、role=checkbox要素はaria-checkedを通して３つのステートを公開できます: - ボタンロールの使用
- ボタンロールはユーザーが操作した際にレスポンスをトリガーするクリック可能な要素に使用されなければなりません。
role="button"だけで、どんな要素 (例えばp、spanやdiv) でもボタンコントロールとしてスクリーンリーダーへ認識させることができます。さらにこのロールは、トグルボタンを作るためにaria-pressedと組み合わせて使うことが出来ます。