WAI-ARIA ロール
このページは、MDN で説明されているすべての WAI-ARIA ロールをカバーするリファレンスページを一覧にしています。ロールの完全なリストについては、ARIA を使用する: ロール、ステート、プロパティをご覧ください。
- ARIA: alert ロール
- アラート (
alert) ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりにアラートダイアログ (alertdialog) ロールを使用するべきです。 - ARIA: application ロール
- アプリケーション (
application) ロールは、要素とその全ての子要素をデスクトップアプリケーションと同様に扱うべきであり、伝統的な HTML 解釈手法を使用するべきでないと支援技術に指示します。 このロールは、とても動的でデスクトップ的なウェブアプリケーションを定義するためにのみ使用するべきです。 - ARIA: article ロール
- 記事 (
article) ロールは、ページ、文書、またはウェブサイト上で容易に自立することができるページのセクションを示します。 これは、通常、コメント、フォーラム投稿、新聞記事、または1ページにまとめられたその他項目などの関連コンテンツの項目に設定します。 - ARIA: banner ロール
- {{ariaref}}
bannerロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。 - ARIA: button ロール
- ボタン (button) ロールは、ユーザーによってアクティブ化されたときに反応を引き起こすクリック可能な要素に使用する必要があります。
role="button"を追加すると、要素がスクリーンリーダーにボタンコントロールとして表示されます。 このロールをaria-pressed属性と組み合わせて使用することで、トグルボタンを作成できます。 - ARIA: cell ロール
- ARIA の
role属性のcell値は、要素を列ヘッダーや行ヘッダーの情報を含まない表形式コンテナ内のセルとして識別します。 サポートされるには、セルがrowロールを持つ要素内にネストされている必要があります。 - ARIA: checkbox ロール
- チェックボックス (checkbox) ロールは、チェック可能なインタラクティブなコントロールに使用します。
role="checkbox"を含む要素には、チェックボックスの状態を支援技術に公開するためのaria-checked属性も含める必要があります。 - 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: gridcell ロール
- グリッドセル (gridcell) ロールは、グリッド (grid) やツリーグリッド (treegrid) にセルを作成するために使用します。 これは、情報を表スタイルでグループ化する HTML の
td要素の機能を模倣することを意図しています。 - 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ロールは、自由形式テキストの入力を可能にする要素を識別するために使用されます。