WAI-ARIA ロール

このページは、MDN で説明されているすべての WAI-ARIA ロールをカバーするリファレンスページを一覧にしています。ロールの完全なリストについては、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: 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: 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: 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 ロールは、自由形式テキストの入力を可能にする要素を識別するために使用されます。 可能であれば、このロールを使用するのではなく、単一行入力の場合は type="text" の input 要素を使用し、複数行入力の場合は textarea 要素を使用してください。

group ロールの使用

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

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

log ロールの使用

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

presentation ロールの使用

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

progressbar ロールの使用

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

radio ロールの使用

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

slider ロールの使用

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

status ロールの使用

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

toolbar ロールの使用

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