サーチ…
構文
- アリアライブ
- アリア関連
- アリアオートコンプリート
- アリアチェック
- アリア障害者
- アリア拡張
- aria-haspopup
- アリア - 隠された
- アリア無効
- アリアラベル
- アリアレベル
- アリア - マルチライン
- アリア - マルチセレクティブ
- アリアオリエンテーション
- アリアプレス
- アリアリードオンリー
- アリアが必要
- アリア選択
- アリアソート
- アリアバリューマックス
- アリアバジェットミン
- アリアバリュー
- アリアバリューテキスト
- アリア原子
- アリア・ビジー
- アリア・ジロフェクト
- アリアドラッグ
- アリア活動家
- アリアコントロール
- aria-describedby
- アリアフロー
- アリアラベルドビー
- アリア所有
- アリア・ポジシェット
- アリアセサイズ
備考
ARIAは、リッチWebアプリケーションを意味論的に記述するための仕様です。 ARIA標準に従うことで、補助的な技術（スクリーンリーダなど）を使ってコンテンツにアクセスするユーザーのアクセシビリティを高めることができます。
ロール= "アラート"
重要で、通常は時間に敏感な情報を含むメッセージ。
<div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div>
私は
role="alert"とaria-live="assertive"両方role="alert"同時に含んでいます。これらは同義の属性ですが、一部のスクリーンリーダーではどちらか一方しかサポートしていません。両方を同時に使用することにより、ライブ領域が期待どおりに機能する可能性を最大にすることができます。ソース - Heydon Pickering '実用的なARIAの例
role = "alertdialog"
アラートメッセージを含むダイアログの一種。初期フォーカスはダイアログ内の要素に移動します。
<div role="alertdialog">
<h1>Warning</h1>
<div role="alert">Your session will expire in 60 seconds.</div>
</div>
ロール= "アプリケーション"
Webドキュメントではなく、Webアプリケーションとして宣言された領域。この例では、アプリケーションは2つの数値を加算する単純な電卓です。
<div role="application">
<h1>Calculator</h1>
<input id="num1" type="text"> + <input id="num2" type="text"> =
<span id="result"></span>
</div>
ロール= "記事"
ドキュメント、ページ、またはサイトの独立した部分を構成するコンポジションで構成されるページのセクション。
<article>
<h1>My first article</h1>
<p>Lorem ipsum...</p>
</article>
非セマンティック要素に対してrole=articleを使用します（推奨されていない、無効です）
<div role="article">
<h1>My first article</h1>
<p>Lorem ipsum...</p>
</div>
role=article W3Cエントリ
role = "banner"
ページ固有のコンテンツではなく、ほとんどがサイト指向のコンテンツを含む領域。
<div role="banner">
<h1>My Site</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
ロール= "ボタン"
クリックまたは押されたときにユーザーがトリガーするアクションを可能にする入力。
<button role="button">Add</button>
ロール= "セル"
表形式のコンテナ内のセル。
<table>
<thead>
<!-- etc -->
</thead>
<tbody>
<td role="cell">95</td>
<td role="cell">14</td>
<td role="cell">25</td>
</tbody>
</table>
ロール= "チェックボックス"
チェック可能な入力には、true、false、またはmixedの3つの値があります。
<p>
<input type="checkbox" role="checkbox" aria-checked="false">
I agree to the terms
</p>
ロール= "列ヘッダー"
列のヘッダー情報を含むセル。
<table role="grid">
<thead>
<tr>
<th role="columnheader">Day 1</th>
<th role="columnheader">Day 2</th>
<th role="columnheader">Day 3</th>
</tr>
</thead>
<tbody>
<!-- etc -->
</tbody>
<table>
ロール= "コンボボックス"
選択のプレゼンテーション。ユーザーが先に入力してオプションを選択できるテキストボックスに似ています。また、入力して任意のテキストを新しい項目としてリストに入力することもできます。
<input type="text" role="combobox" aria-expanded="false">
通常、JavaScriptを使用して、先読みまたはリスト選択機能の残りの部分を構築します。
ロール= "相補的"
DOM階層の同様のレベルでメインコンテンツと補完的になるように設計されているが、メインコンテンツから分離しても意味をなさない文書のサポートセクション。
<div role="complementary">
<h2>More Articles</h2>
<ul>
<!-- etc -->
</ul>
</div>
ロール= "contentinfo"
親文書に関する情報を含む大きな知覚可能な領域。
<p role="contentinfo">
Author: Albert Einstein<br>
Published: August 15, 1940
</p>
ロール= "定義"
用語や概念の定義。
<span role="term" aria-labelledby="def1">Love</span>
<span id="def1" role="definition">an intense feeling of deep affection.</span>
ロール= "ダイアログ"
ダイアログは、アプリケーションの現在の処理を中断して、ユーザーに情報の入力や応答の要求を促すように設計されたアプリケーションウィンドウです。
<div role="dialog">
<p>Are you sure?</p>
<button role="button">Yes</button>
<button role="button">No</button>
</div>
role = "directory"
静的な目次など、グループのメンバーへの参照のリスト。
<ul role="directory">
<li><a href="/chapter-1">Chapter 1</a></li>
<li><a href="/chapter-2">Chapter 2</a></li>
<li><a href="/chapter-3">Chapter 3</a></li>
</ul>
ロール= "ドキュメント"
ウェブアプリケーションではなく、ドキュメントコンテンツとして宣言された関連情報を含む領域。
<div role="document">
<h1>The Life of Albert Einstein</h1>
<p>Lorem ipsum...</p>
</div>
ロール= "フォーム"
ランドマーク領域は、全体としてフォームを作成するために結合するアイテムとオブジェクトのコレクションを含んでいます。
意味的に正しいHTML要素を使用して<form>意味、デフォルトARIAのセマンティクスを意味role=form使用してロールは、要素のネイティブのセマンティクスをオーバーライドする追加するなど、すでにセマンティックある要素に対照的な役割を適用するべきではないとして要求されていません。
<form action="">
<fieldset>
<legend>Login form</legend>
<div>
<label for="username">Your username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Your username is your email address</div>
</div>
<div>
<label for="password">Your password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
</div>
</fieldset>
</form>
非意味要素ではrole=formを使用します（推奨されない、無効なもの）
<div role=form>
<input type="email" placeholder="Your email address">
<button>Sign up</button>
</div>
ロール= "グリッド"
グリッドはテーブルのような行と列に配置された表形式のデータのセルを含むインタラクティブなコントロールです。
<table role="grid">
<thead>
<!-- etc -->
</thead>
<tbody>
<!-- etc -->
</tbody>
</table>
ロール= "グリッドセル"
グリッドまたはツリーグリッドのセル。
<table role="grid">
<thead>
<!-- etc -->
</thead>
<tbody>
<tr>
<td role="gridcell">17</td>
<td role="gridcell">64</td>
<td role="gridcell">18</td>
</tr>
</tbody>
<table>
ロール= "グループ"
補助技術によってページサマリーまたは目次に含まれないように意図された一連のユーザーインターフェースオブジェクト。
<div role="group">
<button role"button">Previous</button>
<button role"button">Next</button>
</div>
ロール= "見出し"
ページのセクションの見出し。
<h1 role="heading">Introduction</h1>
<p>Lorem ipsum...</p>
ロール= "img"
イメージを形成する要素のコレクションのためのコンテナ。
<figure role="img">
<img alt="A cute cat." src="albert.jpg">
<figcaption>This is my cat, Albert.</figcaption>
<figure>
ロール= "リンク"
アクティブにすると、ユーザーエージェントがそのリソースにナビゲートする原因となる内部または外部リソースへの対話型参照。
ほとんどの場合、 デフォルトの暗黙のARIAセマンティクスに一致するARIAロールおよび/またはaria- *属性を設定することは不要であり、これらのプロパティはブラウザによってすでに設定されているため推奨されません。
ロール= "リスト"
非対話型リスト項目のグループ。
<ul role="list">
<li role="listitem">One</li>
<li role="listitem">Two</li>
<li role="listitem">Three</li>
</ul>
ロール= "リストボックス"
ユーザーが選択肢のリストから1つ以上の項目を選択できるようにするウィジェット。
<ul role="listbox">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
通常、JavaScriptを使用して複数選択機能を構築します。
role = "listitem"
リストまたはディレクトリ内の単一項目。
<ul role="list">
<li role="listitem">One</li>
<li role="listitem">Two</li>
<li role="listitem">Three</li>
</ul>
ロール= "ログ"
新しい情報が意味のある順序で追加され、古い情報が消えるライブ領域の一種。
<ul role="log">
<li>User 1 logged in.</li>
<li>User 2 logged in.</li>
<li>User 1 logged out.</li>
</ul>
role = "main"
ドキュメントの主な内容
<!-- header & nav here -->
<div role="main">
<p>Lorem ipsum...</p>
</div>
<!-- footer here -->
ロール= "マーキー"
重要でない情報が頻繁に変化するライブ領域の一種。
<ul role="marquee">
<li>Dow +0.26%</li>
<li>Nasdaq +0.54%</li>
<li>S&P +0.44%</li>
</ul>
ロール= "数学"
数式を表すコンテンツ。
<img role="math" alt="y=mx+b" src="slope.png">
ロール= "メニュー"
ユーザーに選択肢のリストを提供するウィジェットの一種。
<ul role="menu">
<li role="menuitem">New</li>
<li role="menuitem">Open</li>
<li role="menuitem">Save</li>
<li role="menuitem">Close</li>
</ul>
role = "menubar"
通常表示され、通常は水平に表示されるメニューのプレゼンテーション。
<ul role="menubar">
<li role="menuitem">File</li>
<li role="menuitem">Edit</li>
<li role="menuitem">View</li>
<li role="menuitem">Help</li>
</ul>
ロール= "menuitem"
メニューまたはメニューバーに含まれる選択肢のグループ内のオプション。
<ul role="menubar">
<li role="menuitem">File</li>
<li role="menuitem">Edit</li>
<li role="menuitem">View</li>
<li role="menuitem">Help</li>
</ul>
ロール= "menuitemcheckbox"
可能性のある3つの値、true、false、またはmixedのチェック可能なmenuitem。
<ul role="menu">
<li role="menuitem">Console</li>
<li role="menuitem">Layout</li>
<li role="menuitemcheckbox" aria-checked="true">Word wrap</li>
</ul>
ロール= "menuitemradio"
menuitemradioの役割のグループのチェック可能なmenuitem、そのうちの1つだけが一度にチェックすることができます。
<ul role="menu">
<li role="menuitemradio" aria-checked="true">Left</li>
<li role="menuitemradio" aria-checked="false">Center</li>
<li role="menuitemradio" aria-checked="false">Right</li>
</ul>
ロール= "ナビゲーション"
ドキュメントや関連ドキュメントをナビゲートするためのナビゲーション要素のコレクション（通常はリンク）。
<ul role="navigation">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
ロール= "メモ"
コンテンツが括弧内であるか、リソースのメインコンテンツの補助的なセクション。
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p role="note">Lorem ipsum...</p>
role = "option"
選択リスト内の選択可能な項目。
<ul role="listbox">
<li role="option">Option 1</li>
<li role="option">Option 2</li>
<li role="option">Option 3</li>
</ul>
ロール= "プレゼンテーション"
暗黙的なネイティブ・ロールのセマンティクスがアクセシビリティーAPIにマップされないエレメント。
<div style="float:left;">Some content on the left.</div>
<div style="float:right;">Some content on the right</div>
<div role="presentation" style="clear:both;"></div> <!-- Only used to clear floats -->
role = "progressbar"
長い時間がかかるタスクの進捗状況を表示する要素。
<progress role="progressbar" value="25" max="100">25%</progress>
ロール= "ラジオ"
ラジオの役割のグループのチェック可能な入力。一度に1つのみをチェックできます。
<div role="radiogroup">
<input role="radio" type="radio" aria-checked="true"> One<br>
<input role="radio" type="radio" aria-checked="false"> Two<br>
<input role="radio" type="radio" aria-checked="false"> Three
</div>
ロール= "地域"
著者が感じるWebページや文書の大きな知覚可能なセクションは、ページの要約や目次に含めるほど重要です（たとえば、スポーツスポーツイベントの統計情報を含むページの領域など）。
<div role="region">
Home team: 4<br>
Away team: 2
</div>
role = "radiogroup"
ラジオボタンのグループ。
<div role="radiogroup">
<input role="radio" type="radio" aria-checked="true"> One<br>
<input role="radio" type="radio" aria-checked="false"> Two<br>
<input role="radio" type="radio" aria-checked="false"> Three
</div>
ロール= "行"
表形式のコンテナ内のセルの行。
<table>
<thead>
<!-- etc -->
</thead>
<tbody>
<tr role="row">
<!-- etc -->
</tr>
</tbody>
</table>
ロール= "行グループ"
グリッド内に1つ以上の行要素を含むグループ。
<table>
<thead role="rowgroup">
<!-- etc -->
</thead>
<tbody role="rowgroup">
<!-- etc -->
</tbody>
</table>
ロール= "rowheader"
グリッド内の行のヘッダー情報を含むセル。
<table role="grid">
<thead>
<!-- etc -->
</thead>
<tbody>
<tr>
<th role="rowheader">Day 1</th>
<td>65</td>
</tr>
<tr>
<th role="rowheader">Day 2</th>
<td>74</td>
</tr>
</tbody>
</table>
ロール= "スクロールバー"
コンテンツが表示領域内に完全に表示されているかどうかにかかわらず、表示領域内のコンテンツのスクロールを制御するグラフィカルオブジェクト。
<div id="content1">Lorem ipsum...</div>
<div
role="scrollbar"
aria-controls="content1"
aria-orientation="vertical"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25">
<div class="scrollhandle"></div>
</div>
ロール= "検索"
ランドマーク領域で、アイテムとオブジェクトのコレクションを含み、全体として検索機能を作成します。
<div role="search">
<input role="searchbox" type="text">
<button role="button">Search</button>
</div>
role = "searchbox"
検索条件を指定するためのテキストボックスの一種。
<div role="search">
<input role="searchbox" type="text">
<button role="button">Search</button>
</div>
role = "separator"
コンテンツのセクションまたはメニューアイテムのグループを分けて区別するディバイダ。
<p>Lorem ipsum...</p>
<hr role="separator">
<p>Lorem ipsum...</p>
ロール= "スライダー"
ユーザーが指定された範囲内の値を選択するユーザー入力。
<div
role="slider"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25">
<div class="sliderhandle"></div>
</div>
ロール= "スピンボタン"
ユーザが個別の選択肢の中から選択することを期待する範囲の形式。
<input
role="spinbutton"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25"
type="number"
value="25">
ロール= "ステータス"
コンテントがユーザの助言情報であるが、必ずしもステータスバーとして提示される必要はないがアラートを正当化するのに十分ではないコンテナ。
<div role="status">Online</div>
role = "switch"
チェック/チェックされていない値とは対照的に、オン/オフ値を表すチェックボックスの一種。
<select role="switch" aria-checked="false">
<option>On</option>
<option selected>Off</option>
</select>
ロール= "タブ"
ユーザーに表示されるタブコンテンツを選択するためのメカニズムを提供するグループ化ラベル。
<ul role="tablist">
<li role="tab">Introduction</li>
<li role="tab">Chapter 1</li>
<li role="tab">Chapter 2</li>
</ul>
ロール= "テーブル"
行と列に配置されたデータを含むセクション。表の役割は、インタラクティブではない表形式のコンテナを対象としています。
<table role="table">
<thead>
<!-- etc -->
</thead>
<tbody>
<!-- etc -->
</tbody>
</table>
ロール= "タブリスト"
tabpanel要素への参照であるタブ要素のリスト。
<ul role="tablist">
<li role="tab">Introduction</li>
<li role="tab">Chapter 1</li>
<li role="tab">Chapter 2</li>
</ul>
role = "tabpanel"
タブに関連付けられたリソースのコンテナ。各タブはタブリストに含まれます。
<ul role="tablist">
<li role="tab">Introduction</li>
<li role="tab">Chapter 1</li>
<li role="tab">Chapter 2</li>
</ul>
<div role="tabpanel">
<!-- etc -->
</div>
ロール= "テキストボックス"
自由形式のテキストをその値として許可する入力。
<textarea role="textbox"></textarea>
ロール= "タイマー"
始点からの経過時間、または終点までの残り時間を示す数値カウンタを含むライブ領域の一種。
<p>
<span role="timer">60</span> seconds remaining.
</p>
ロール= "ツールバー"
コンパクトなビジュアル形式で表現された一般的に使用されるファンクションボタンの集まり。
<ul role="toolbar">
<li><img alt="New" src="new.png"></li>
<li><img alt="Open" src="open.png"></li>
<li><img alt="Save" src="save.png"></li>
<li><img alt="Close" src="close.png"></li>
</ul>
ロール= "ツールチップ"
要素の説明を表示するコンテキストポップアップ。
<span aria-describedby="slopedesc">Slope</span>
<div role="tooltip" id="slopedesc">y=mx+b</div>
通常、ヒントは非表示になります。 JavaScriptを使用すると、ユーザーが記述した要素の上にユーザーが移動したときに、ツールチップが遅れて表示されます。
ロール= "ツリー"
折りたたむことができるサブレベルのネストされたグループを含む可能性があるリストのタイプ。
<ul role="tree">
<li role="treeitem">
Part 1
<ul>
<li role="treeitem">Chapter 1</li>
<li role="treeitem">Chapter 2</li>
<li role="treeitem">Chapter 3</li>
</ul>
</li>
<li role="treeitem">
Part 2
<ul>
<li role="treeitem">Chapter 4</li>
<li role="treeitem">Chapter 5</li>
<li role="treeitem">Chapter 6</li>
</ul>
</li>
<li role="treeitem">
Part 3
<ul>
<li role="treeitem">Chapter 7</li>
<li role="treeitem">Chapter 8</li>
<li role="treeitem">Chapter 9</li>
</ul>
</li>
</ul>
ロール= "ツリーグリッド"
ツリーと同じ方法で行を展開して折りたたむことができるグリッド。
role = "treeitem"
ツリーのオプション項目。ツリー内の要素で、ツリーレベルのサブツリーのグループが含まれている場合、展開または折りたたむことができます。
<ul role="tree">
<li role="treeitem">
Part 1
<ul>
<li role="treeitem">Chapter 1</li>
<li role="treeitem">Chapter 2</li>
<li role="treeitem">Chapter 3</li>
</ul>
</li>
<li role="treeitem">
Part 2
<ul>
<li role="treeitem">Chapter 4</li>
<li role="treeitem">Chapter 5</li>
<li role="treeitem">Chapter 6</li>
</ul>
</li>
<li role="treeitem">
Part 3
<ul>
<li role="treeitem">Chapter 7</li>
<li role="treeitem">Chapter 8</li>
<li role="treeitem">Chapter 9</li>
</ul>
</li>
</ul>
