WAI-ARIA ロール
ARIA ロールは、コンテンツに意味づけ行い、スクリーンリーダーなどのツールが、その種類のオブジェクトに対するユーザーの期待に一致する方法でオブジェクトを表示し、操作に対応できるようにします。 ARIA ロールは、 HTML にネイティブに存在しない要素や、存在しててもブラウザーの完全な対応がまだない要素を記述するために使用することができます。
既定では、 HTML の多くの意味づけ要素はロールを持っています。例えば、 <input type="radio"> は "radio" ロールを持ちます。 HTML の意味づけがない要素はロールを持ちません。意味を追加していない <div> と <span> は null を返します。 role 属性で意味づけを提供することができます。
ARIA ロールは role="role type" を使用して HTML 要素に追加します。ロールの中には、 ARIA の検証状態やプロパティを含めることを要求されるものもあります。
例えば <ul role="tabpanel"> は、スクリーンリーダーでは「タブパネル」としてアナウンスされます。しかし、タブパネルが入れ子のタブを持たない場合、タブパネルの役割を持つ要素は実際にはタブパネルではなく、アクセシビリティに悪影響を及ぼします。
各ロールに関連する ARIA の状態とプロパティはロールのページに含まれており、各属性も専用のページを保有します。
ARIA ロールの種類
ARIA のロールには 6 つのカテゴリーがあります。
1. 文書構造ロール
文書構造ロールは、コンテンツの一部に構造的な記述を提供するために用いられます。ほとんどのブラウザーは同じ意味を持つ意味づけ HTML 要素に対応しているので、これらのロールはもう使用すべきではありません。 HTML に相当するものがないロール、例えばプレゼンテーション、ツールバー、ツールチップのロールのようなものは、同等のネイティブ HTML タグが利用できないため、スクリーンリーダーのような支援技術に文書構造に関する情報を提供します。
文書構造ロールの大部分は、意味づけされた HTML と同等の要素が利用でき、対応しています。使用するのは避けてください。
- application
- article （
<article>を使用） - cell （
<td>を使用） - columnheader （
<th scope="col">を使用） - definition （
<dfn>を使用） - directory
- document
- figure （
<figure>を使用） - group
- heading （h1 から h6 を使用）
- img （
<img>or<picture>を使用） - list （either
<ul>or<ol>を使用） - listitem （
<li>を使用） - meter （
<meter>を使用） - row （the
<tr>を<table>で使用） - rowgroup （
<thead>、<tfoot>、<tbody>を使用） - rowheader （
<th scope="row">を使用） - separator （フォーカス不可の場合は
<hr>を使用） - table （
<table>を使用） - term （
<dfn>を使用）
以下のものは完全を期するために記載していますが、ほとんどの場合、使用しても有益なことはほとんどありません。
2. ウィジェットロール
様々なウィジェットのロールは、一般的な操作パターンを定義するために使用します。文書構造ロールと同様に、これらのロールの中には、十分に対応しているネイティブの HTML 要素の意味づけと重複するものがあり、使用すべきではありません。 2 つの一覧の異なる点は、一般的に、ウィジェットロールは JavaScript による操作を要求し、文書構造ロールは必ずしもそうではないということです。
完全性を期すために掲載しましたが、 button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, textbox を使用することは避けてください。ほとんどの場合、アクセシビリティに対応した同等の意味づけの要素が利用でき、対応しています。より詳細な情報については、それぞれのロールのドキュメントを参照してください。
複合ウィジェットロール
完全性を期すために掲載しましたが、 grid, listbox, radiogroup を使用することは避けてください。より詳細な情報については、それぞれのロールのドキュメントを参照してください。
ウィジェットロール (role="widget") もありますが、これは抽象ロールであり、ウィジェットロールのカテゴリーにはないことに注意してください。
3. ランドマークロール
ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。ページのセクションを分類してラベル付けすることで、レイアウトによって視覚的に伝達される構造情報をプログラムで表現することができます。スクリーンリーダーは、ランドマーク・ロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。これらの使用は控えめにしてください。ランドマークロールが多すぎると、スクリーンリーダーに「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。
4. ライブリージョンロール
ライブリージョンロールは、動的に変更されるコンテンツを持つ要素を定義するために使用されます。視覚ユーザーは、動的な変更が視覚的に目立つときに見ることができます。これらのロールは、弱視や目の不自由なユーザーが、コンテンツが更新されたかどうかを知るのに役立ちます。スクリーンリーダーのような支援技術は、動的なコンテンツの変更を知らせることができます。
5. ウィンドウロール
ウィンドウロールは、ポップアップモーダルダイアログなど、同じウィンドウ内でメインドキュメントウィンドウのサブウィンドウを定義します。
6. 抽象ロール
抽象ロールは、ブラウザーが文書を整理し合理化するためだけに使用することを意図しています。HTMLマークアップを記述する開発者が使用すべきではありません。そうすることで、支援技術やユーザーに意味のある情報が伝達されることはありません。
command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget, window は使用しないでください。
メモ: サイトやアプリケーションで 抽象ロールを使用しないでください。これらはブラウザーが使用するものです。これらは参照用にのみ含まれています。
警告: "抽象ロールはオントロジーに使用されます。作者はコンテンツで抽象ロールを使用してはなりません。" - WAI-ARIA 仕様書
MDN で定義されているロール
以下は、 MDN で取り上げられている WAI-ARIA のロールに関するリファレンスページです。
- alertdialog ロールの使用
このテクニックは、
alertdialogロールの使用方法を示しています。- ARIA: alert ロール
alertロールは、重要で、通常は時間に敏感な情報のためのものです。alertはアトミックライブリージョンとして処理されるstatusの一種です。- 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: columnheader ロール
ARIA ロール属性の
columnheader値は、要素を列の見出し情報を含む行内のセルとして識別します。これは、列スコープを持つネイティブなth要素と似ています。- ARIA: combobox ロール
comboboxロールは、要素をinputまたはbuttonとして識別し、これらがlistboxやgridなど、ユーザーが値を設定するのに役立つ動的にポップアップ表示される他の要素を制御するものです。combobox は編集可能（テキスト入力を許可）または選択のみ（ポップアップからの選択のみを許可）のいずれかです。- ARIA: command ロール
commandロールは、アクションを実行するが入力データを受け取らないウィジェットを定義します。- ARIA: comment ロール
commentロールは、ページ上のコンテンツまたは以前のコメントに対するコメント/リアクションを意味的に示します。- ARIA: complementary ロール
補足 (
complementary) ランドマークロールは、メインコンテンツに関連する補助セクションを指定するために使用され、しかも分離しても単独で成り立つことができます。 これらのセクションは、サイドバーやコールアウトボックスとして表示されることがよくあります。 可能であれば、代わりに HTML のaside要素を使用してください。- ARIA: composite ロール
composite抽象ロール は、ナビゲート可能な子孫または所有される子を含む可能性があるウィジェットを示します。- ARIA: contentinfo ロール
コンテンツ情報 (
contentinfo) ランドマークロールは、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用します。 このセクションは一般的にフッターと呼ばれます。- ARIA: definition ロール
definitionARIA ロールは、要素が用語や概念の定義であることを示します。- ARIA: dialog ロール
ダイアログ (
dialog) ロールは、ウェブアプリケーションやウェブページの残りの部分からコンテンツや UI を分離する HTML ベースのアプリケーションのダイアログやウィンドウをマークアップするために使用します。 ダイアログは通常、オーバーレイを使用して残りのページコンテンツの上に配置されます。 ダイアログはノンモーダル (ダイアログ外のコンテンツともやりとり可能) またはモーダル (ダイアログ内のコンテンツのみとやりとり可能) のいずれかになります。- ARIA: directory ロール
directoryロールは、グループのメンバーへの参照リスト（静的な目次など）に使用されていました。- ARIA: document ロール
複雑な複合ウィジェットやアプリケーションで一般的に使用される文書 (
document) ロールは、コンテキストを読み取りモードに切り替えることを支援技術を知らせることができます。 文書 (document) ロールは、読み取りモードまたは閲覧モードを持つ支援技術に、この要素に含まれるコンテンツを文書モードを使用して読み取るように指示します。- ARIA: feed ロール
フィード (
feed) は動的にスクロール可能な記事 (article) のリスト (list) で、ユーザーがスクロールすると記事がリストのどちらかの端から追加または削除されます。 フィード (feed) により、スクリーンリーダーは閲覧モードの読み取りカーソルを使用して、リッチコンテンツのストリームを読み込みながらスクロールすることを可能にし、ユーザーが読むにつれてコンテンツをさらにロードすることで無限にスクロールし続けることができます。- ARIA: figure ロール
ARIA の図表 (
figure) ロールは、適切な意味論がまだ存在しないページコンテンツ内の図表を識別するために使用できます。 図表は一般的に、正規のテキストの流れとは異なる方法で情報を伝える、1 つ以上の画像、コードスニペット、またはその他のコンテンツと見なされます。- ARIA: form ロール
フォーム (
form) ランドマークロールは、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。- ARIA: generic ロール
genericロールは、自分自身で意味を持たない名前のないコンテナー要素を作成します。- ARIA: grid ロール
グリッド (
grid) ロールは、1 つ以上のセルの行を含むウィジェット用です。 各セルの位置は重要であり、キーボード入力を使用してフォーカスすることができます。- ARIA: gridcell ロール
グリッドセル (gridcell) ロールは、グリッド (grid) やツリーグリッド (treegrid) にセルを作成するために使用します。 これは、情報を表スタイルでグループ化する HTML の
td要素の機能を模倣することを意図しています。- ARIA: heading ロール
見出し (
heading) ロールは、この要素をページやセクションの見出しとして定義します。 ページに構造を与えるために、セクション間の関係を示すレベルも提供するべきです。- ARIA: img ロール
ARIA の
imgロールは、ページコンテンツ内の複数の要素を単一の画像として扱うべきであると識別するために使用できます。これらの要素は、画像、コードスニペット、テキスト、絵文字、または視覚的に情報を提供するために組み合わせることができるその他のコンテンツである可能性があります。- ARIA: input ロール
input抽象ロールは、ユーザー入力を可能にするウィジェットの汎用タイプです。- ARIA: landmark ロール
ランドマークは、ページの重要なサブセクションです。
landmarkロールは、ユーザーが直接ナビゲートできることを望む可能性が高い、重要なコンテンツセクションの aria ロール値の抽象親クラスです。- ARIA: list ロール
ARIA のリスト (
list) ロールは、項目のリストを識別するために使用できます。 これは通常、リスト内に含まれるリスト項目を識別するために使用するリスト項目 (listitem) ロールと組み合わせて使用します。- ARIA: listbox ロール
リストボックス (
listbox) ロールは、HTML の<select>要素とは異なり、画像を含むことができる、1 つまたは複数の静的な項目をユーザーが選択できるリストに使用します。- ARIA: listitem ロール
ARIA のリスト項目 (
listitem) ロールは、項目のリスト内の項目を識別するために使用できます。 これは、通常、リストコンテナーを識別するために使用するリスト (list) ロールと組み合わせて使用します。- ARIA: main ロール
メイン (
main) ランドマークロールは、文書の主要なコンテンツを示すために使用します。 メインコンテンツ領域は、文書の中心的な話題やアプリケーションの中心的な機能と直接関連したり、それらを拡張するコンテンツで構成されます。- ARIA: mark ロール
markロールは、囲んでいるコンテキストにおいて関連性があるため、参照や注釈の目的でマークまたはハイライトされたコンテンツを示します。- ARIA: marquee ロール
marqueeは、頻繁に変化する重要でない情報を含む ライブリージョン の一種です。- ARIA: math ロール
mathロールは、コンテンツが数式を表すことを示します。menuロールは、ユーザーに選択肢のリストを提供する複合ウィジェットの一種です。menubarは通常は表示されたままで、水平に表示されるmenuの表示です。menuitemロールは、要素がmenuまたはmenubarに含まれる選択肢セットの中のオプションであることを示します。menuitemcheckboxは、可能な値がtrue、false、またはmixedのチェック可能な状態を持つmenuitemです。menuitemradioは同じロールを持つ要素セット内のチェック可能なメニューアイテムで、一度に 1 つだけをチェックできます。- ARIA: meter ロール
meterロールは、メーターとして使用されている要素を識別するために使用されます。ナビゲーション (
navigation) ランドマークロールは、ウェブサイトやページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用します。- ARIA: none ロール
noneロールはpresentationロールの別名です。どちらも、要素の暗黙の ARIA の意味づけを除去し、アクセシビリティツリーに公開されないようにします。- ARIA: option ロール
optionロールはlistboxで選択可能な項目に使用します。- ARIA: presentation ロール
presentationロールとその同義語であるnoneは、要素の暗黙の ARIA の意味づけがアクセシビリティツリーに公開されないようにします。- ARIA: radio ロール
radioロールはradiogroup内のチェック可能なラジオボタンのグループの 1 つで、一度に複数のラジオボタンをチェックすることはできません。- ARIA: radiogroup ロール
radiogroupロールは、radioボタンのグループです。- ARIA: range ロール
range抽象ロールは、値の範囲を表す構造ロールの汎用タイプです。- ARIA: region ロール
regionロールは、著者が重要だと判断した文書内の領域を識別するために使います。これは汎用的なランドマークであり、他のランドマークロールが適切でない場合にナビゲーションを補助するために利用できます。- ARIA: roletype ロール
roletypeロールは、抽象ロール であり、他のすべての ARIA ロールが継承する基底ロールです。- ARIA: row ロール
行ロール (
role="row") を持つ要素は、表形式の構造内に並んだセルの一行です。 行には、1 つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 行は、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内に含まれ、任意で行グループ (rowgroup) 内に含まれることもあります。- ARIA: rowgroup ロール
行グループロール (
role="rowgroup") を持つ要素は、表形式の構造内の行 (row) のグループです。 行グループ (rowgroup) には、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内のセル (cell)、グリッドセル (gridcell)、列ヘッダー (columnheader)、行ヘッダー (rowheader) の行が 1 つ以上含まれます。- ARIA: rowheader ロール
role="rowheader"を持つ要素は、grid、table、またはtreegridの表形式構造内で、row の見出し情報を含む cell です。- ARIA: scrollbar ロール
scrollbarは、表示領域内のコンテンツのスクロールを制御するグラフィカルオブジェクトです。- ARIA: search ロール
検索 (
search) ロールは、ページ、サイト、またはサイトのコレクションの検索に使用されるページのセクションを識別するために使用します。- ARIA: searchbox ロール
searchboxロールは、要素が検索条件を指定するためのtextboxの一種であることを示します。- ARIA: section ロール
sectionロールは、抽象ロールであり、レンダリング可能な構造的格納コンポーネントの親クラスロールです。- ARIA: sectionhead ロール
sectionheadロールは抽象ロールで、関連するセクションのトピックのラベルまたは要約のための親クラスロールです。- ARIA: select ロール
selectロール は抽象ロールで、ユーザーが選択肢の集合から選択を行うことができるフォームウィジェットの親クラスロールです。- ARIA: separator ロール
separatorロールは、要素がコンテンツのセクションやメニューアイテムのグループを分離し区別する区切りであることを示します。ネイティブな主題区切りhr要素の暗黙の ARIA ロールはseparatorです。- ARIA: spinbutton ロール
spinbuttonロールは、ユーザーに離散的な選択肢の中から値を選択することを期待する範囲選択の型を定義します。- ARIA: structure ロール
structureロールは、文書構造要素のためのものです。- ARIA: suggestion ロール
suggestionロールは、編集可能なドキュメントに対する単一の変更提案をセマンティックに表します。これは、insertionロールを持つ要素とdeletionロールを持つ要素をラップする要素に使用してください。- ARIA: switch ロール
ARIA のスイッチ (
switch) ロールは、チェックボックス (checkbox) ロールと機能的に同じですが、かなり一般的な意味を持つ「チェックされた」状態と「チェックされていない」状態を表す代わりに、スイッチ (switch) ロールは「オン」と「オフ」の状態を表す点が異なります。- ARIA: tab ロール
ARIA のタブ (
tab) ロールは、タブリスト (tablist) 内のインタラクティブな要素を示し、アクティブ化されると、関連するタブパネル (tabpanel) を表示します。- ARIA: table ロール
ARIA の role 属性の table 値は、このロールを含む要素を、ネイティブの
tableHTML 要素と同様に、行と列に配置されたデータを含む非インタラクティブな表構造を持つものとして識別します。- ARIA: tablist ロール
tablistロールは、tabsのセットのコンテナーとして機能する要素を識別します。タブコンテンツはtabpanel要素として参照されます。- ARIA: tabpanel ロール
ARIA
tabpanelは、tabに関連付けられた階層化されたコンテンツのリソースのコンテナーです。- ARIA: term ロール
termロールは、オプションで対応するdefinitionを持つ単語やフレーズに使用することができます。- ARIA: textbox ロール
textboxロールは、自由形式テキストの入力ができる要素を識別するために使用されます。 可能であれば、このロールを使用するのではなく、単一行入力の場合はinput要素のtype="text"を、複数行入力の場合はtextarea要素を使用してください。- ARIA: timer ロール
timerロールは、要素が開始点からの経過時間または終了点までの残り時間を示す数値カウンターであることを支援技術に示します。支援技術は、暗黙的なaria-live値がoffであるため、タイマーの更新を通知しません。- ARIA: tooltip ロール
tooltipは要素の説明を表示するテキストバブルで、ポインターにカーソルを当てたり、キーボードフォーカスを当てたりすると現れます。- ARIA: tree ロール
treeは、ユーザーが階層的に整理されたコレクションから 1 つ以上のアイテムを選択できるウィジェットです。- ARIA: treegrid ロール
treegridロールは、要素をtreeと同じ方法で行を展開および折りたたみできるグリッドとして識別します。- ARIA: treeitem ロール
treeitemはtree内のアイテムです。- ARIA: widget ロール
widgetロールは、抽象ロール で、グラフィカルユーザーインターフェイス (GUI) のインタラクティブコンポーネントです。- ARIA: window ロール
windowロールは、ブラウザーまたはアプリのウィンドウを定義します。- ARIA: 文書構造ロール
ARIA 文書構造ロールは、コンテンツのセクションに構造的説明を提供するために使用されます。
- group ロールの使用
このテクニックは、
groupロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。- link ロールの使用
このテクニックは、
linkロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。- log ロールの使用
このテクニックは、
logロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。- progressbar ロールの使用
このテクニックは、
progressbarロールの使い方を示し、ブラウザーや支援技術への影響について説明します。- slider ロールの使用
このテクニックは、
sliderロールの使い方を示し、ブラウザーと支援技術に及ぼす影響について説明します。- status ロールの使用
このテクニックは、
statusロールを使用する方法を示し、ブラウザーと支援技術に及ぼす影響について説明します。- toolbar ロールの使用
このテクニックは、
toolbarロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。