このページは、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 値は、このロールを含む要素を、ネイティブの
table
HTML 要素と同様に、行と列に配置されたデータを含む非インタラクティブな表構造を持つものとして識別します。 - ARIA: textbox ロール
textbox
ロールは、自由形式テキストの入力を可能にする要素を識別するために使用されます。- チェックボックスロールの使用
- チェックボックスロールはチェック可能なインタラクティブなコントロールに使用されます。もし要素が
role="checkbox"
を使っていたら 、支援技術へチェックボックスのステートを公開するためにaria-checked
属性も持つ必要があります。ネイティブHTMLのチェックボックスフォームコントロールが2つののみ( "checked" もしくは "not checked" )をもてる一方で、role=checkbox
要素はaria-checked
を通して3つのステートを公開できます: - ボタンロールの使用
- ボタンロールはユーザーが操作した際にレスポンスをトリガーするクリック可能な要素に使用されなければなりません。
role="button"
だけで、どんな要素 (例えばp
、span
やdiv
) でもボタンコントロールとしてスクリーンリーダーへ認識させることができます。さらにこのロールは、トグルボタンを作るためにaria-pressed
と組み合わせて使うことが出来ます。