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
) ランドマークロールは、文書の主要なコンテンツを示すために使用します。 メインコンテンツ領域は、文書の中心的な話題やアプリケーションの中心的な機能と直接関連したり、それらを拡張するコンテンツで構成されます。ナビゲーション (
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 ロールの使用
このテクニックは、
link
ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。- log ロールの使用
このテクニックは、
log
ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。- presentation ロールの使用
このテクニックは、
presentation
ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。- progressbar ロールの使用
このテクニックは、
progressbar
ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。- radio ロールの使用
このテクニックは、
radio
ロールをどのように使用するかを示し、ブラウザーと支援技術に及ぼす影響について説明します。- slider ロールの使用
このテクニックは、
slider
ロールの使い方を示し、ブラウザーと支援技術に及ぼす影響について説明します。- status ロールの使用
このテクニックは、
status
ロールを使用する方法を示し、ブラウザーと支援技術に及ぼす影響について説明します。- toolbar ロールの使用
このテクニックは、
toolbar
ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。
- alertdialog
- banner
- Combobox (en-US)
- Command (en-US)
- Columnheader (en-US) (Estelle)
- complementary (en-US)
- composite (en-US)
- Definition (en-US)
- Directory (en-US)
- Feed
- Gridcell (Eric E)
- Group
- input (en-US)
- landmark (en-US)
- Link - old page
- listbox
- Log - old page
- Marquee (en-US)
- math (en-US)
- menu (en-US)
- menubar (en-US)
- Menuitem
- Menuitemcheckbox (en-US)
- Menuitemradio (en-US)
- none (en-US)
- note (en-US)
- Option (en-US)
- presentation
- Progressbar - old page
- Radio - old page
- radiogroup (en-US)
- range (en-US)
- region
- roletype (en-US)
- rowheader (en-US)(Estelle)
- Scrollbar (en-US)
- searchbox (en-US)
- section (en-US)
- sectionhead (en-US)
- select (en-US)
- separator (en-US)
- Slider - old page
- Spinbutton (en-US)
- Status - old page
- structure (en-US)
- tab
- tablist (en-US) (Michiel)
- Tabpanel (en-US) (Michiel)
- term
- Timer
- toolbar
- Tooltip (en-US)
- Tree (en-US)
- treegrid (en-US)
- Treeitem (en-US)
- widget (en-US)
- window (en-US)