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: 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: generic ロール
generic
ロールは、自分自身で意味を持たない名前のないコンテナー要素を作成します。- ARIA: grid ロール
グリッド (
grid
) ロールは、1 つ以上のセルの行を含むウィジェット用です。 各セルの位置は重要であり、キーボード入力を使用してフォーカスすることができます。- ARIA: gridcell ロール
グリッドセル (gridcell) ロールは、グリッド (grid) やツリーグリッド (treegrid) にセルを作成するために使用します。 これは、情報を表スタイルでグループ化する HTML の
td
要素の機能を模倣することを意図しています。- ARIA: heading ロール
見出し (
heading
) ロールは、この要素をページやセクションの見出しとして定義します。 ページに構造を与えるために、セクション間の関係を示すレベルも提供するべきです。- ARIA: img ロール
ARIA の
img
ロールは、ページコンテンツ内の複数の要素を単一の画像として扱うべきであると識別するために使用できます。これらの要素は、画像、コードスニペット、テキスト、絵文字、または視覚的に情報を提供するために組み合わせることができるその他のコンテンツである可能性があります。- ARIA: list ロール
ARIA のリスト (
list
) ロールは、項目のリストを識別するために使用できます。 これは通常、リスト内に含まれるリスト項目を識別するために使用するリスト項目 (listitem
) ロールと組み合わせて使用します。- ARIA: listbox ロール
リストボックス (
listbox
) ロールは、HTML の<select>
要素とは異なり、画像を含むことができる、1 つまたは複数の静的な項目をユーザーが選択できるリストに使用します。- ARIA: listitem ロール
ARIA のリスト項目 (
listitem
) ロールは、項目のリスト内の項目を識別するために使用できます。 これは、通常、リストコンテナーを識別するために使用するリスト (list
) ロールと組み合わせて使用します。- ARIA: main ロール
メイン (
main
) ランドマークロールは、文書の主要なコンテンツを示すために使用します。 メインコンテンツ領域は、文書の中心的な話題やアプリケーションの中心的な機能と直接関連したり、それらを拡張するコンテンツで構成されます。ナビゲーション (
navigation
) ランドマークロールは、ウェブサイトやページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用します。- ARIA: none ロール
none
ロールはpresentation
ロールの別名です。どちらも、要素の暗黙の ARIA の意味づけを除去し、アクセシビリティツリーに公開されないようにします。- ARIA: option ロール
option
ロールはlistbox
で選択可能な項目に使用します。- ARIA: radio ロール
radio
ロールはradiogroup
内のチェック可能なラジオボタンのグループの 1 つで、一度に複数のラジオボタンをチェックすることはできません。- ARIA: region ロール
リージョン (
region
) ランドマークロールは、文書内で、著者が重要であると識別した領域を識別するために使用されます。 これは、他のランドマークロールのどれも適切でないときでも、汎用のランドマークを提供することで、人々が容易にナビゲートできるようにするために使用されます。- ARIA: row ロール
行ロール (
role="row"
) を持つ要素は、表形式の構造内に並んだセルの一行です。 行には、1 つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 行は、グリッド (grid
)、表 (table
)、ツリーグリッド (treegrid
) 内に含まれ、任意で行グループ (rowgroup
) 内に含まれることもあります。- ARIA: rowgroup ロール
行グループロール (
role="rowgroup"
) を持つ要素は、表形式の構造内の行 (row
) のグループです。 行グループ (rowgroup
) には、グリッド (grid
)、表 (table
)、ツリーグリッド (treegrid
) 内のセル (cell
)、グリッドセル (gridcell
)、列ヘッダー (columnheader
)、行ヘッダー (rowheader
) の行が 1 つ以上含まれます。- ARIA: search ロール
検索 (
search
) ロールは、ページ、サイト、またはサイトのコレクションの検索に使用されるページのセクションを識別するために使用します。- ARIA: spinbutton ロール
spinbutton
ロールは、ユーザーに離散的な選択肢の中から値を選択することを期待する範囲選択の型を定義します。- ARIA: switch ロール
ARIA のスイッチ (
switch
) ロールは、チェックボックス (checkbox
) ロールと機能的に同じですが、かなり一般的な意味を持つ「チェックされた」状態と「チェックされていない」状態を表す代わりに、スイッチ (switch
) ロールは「オン」と「オフ」の状態を表す点が異なります。- ARIA: tab ロール
ARIA のタブ (
tab
) ロールは、タブリスト (tablist
) 内のインタラクティブな要素を示し、アクティブ化されると、関連するタブパネル (tabpanel
) を表示します。- ARIA: table ロール
ARIA の role 属性の table 値は、このロールを含む要素を、ネイティブの
table
HTML 要素と同様に、行と列に配置されたデータを含む非インタラクティブな表構造を持つものとして識別します。- ARIA: term ロール
term
ロールは、オプションで対応するdefinition
を持つ単語やフレーズに使用することができます。- ARIA: textbox ロール
textbox
ロールは、自由形式テキストの入力ができる要素を識別するために使用されます。 可能であれば、このロールを使用するのではなく、単一行入力の場合はinput
要素のtype="text"
を、複数行入力の場合はtextarea
要素を使用してください。- ARIA: tooltip ロール
tooltip
は要素の説明を表示するテキストバブルで、ポインターにカーソルを当てたり、キーボードフォーカスを当てたりすると現れます。- group ロールの使用
このテクニックは、
group
ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。- link ロールの使用
このテクニックは、
link
ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。- log ロールの使用
このテクニックは、
log
ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。- presentation ロールの使用
このテクニックは、
presentation
ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。- progressbar ロールの使用
このテクニックは、
progressbar
ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。- slider ロールの使用
このテクニックは、
slider
ロールの使い方を示し、ブラウザーと支援技術に及ぼす影響について説明します。- status ロールの使用
このテクニックは、
status
ロールを使用する方法を示し、ブラウザーと支援技術に及ぼす影響について説明します。- toolbar ロールの使用
このテクニックは、
toolbar
ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。