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" を追加すると、要素がスクリーンリーダーにボタンコントロールとして表示されます。このロールを aria-pressed 属性と組み合わせて使用することで、トグルボタンを作成できます。
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 ロール: {{ariaref}}
ARIA: textbox ロール: textbox ロールは、自由形式テキストの入力を可能にする要素を識別するために使用されます。可能であれば、このロールを使用するのではなく、単一行入力の場合は type="text" の input 要素を使用し、複数行入力の場合は textarea 要素を使用してください。
group ロールの使用: このテクニックは、group ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。
link ロールの使用: このテクニックは、link ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。
log ロールの使用: このテクニックは、log ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。
presentation ロールの使用: このテクニックは、presentation ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。
progressbar ロールの使用: このテクニックは、progressbar ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。
radio ロールの使用: このテクニックは、radio ロールをどのように使用するかを示し、ブラウザーと支援技術に及ぼす影響について説明します。
slider ロールの使用: このテクニックは、slider ロールの使い方を示し、ブラウザーと支援技術に及ぼす影響について説明します。
status ロールの使用: このテクニックは、status ロールを使用する方法を示し、ブラウザーと支援技術に及ぼす影響について説明します。
toolbar ロールの使用: このテクニックは、toolbar ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。