2. HTML で ARIA を使う上での注意
2.1 ARIA 使用の1番目のルール
要素を再利用したり、アクセシブルにするために ARIA ロール（role）やステート（state）、プロパティ（property）を追加する代わりに、セマンティクスや組み込み済みであるあなたが必要とする挙動を持つネイティブの HTML 要素または属性 [HTML5] を使用することができるなら、そうしてください。
これはどのような状況下では、利用できないかもしれないのか
- 機能が HTML [HTML5] として利用可能だが、実装されていないか、実装されているが、アクセシビリティのサポートをしていない場合。
- 要素が必要に応じてスタイルできないため、ビジュアルデザインの制約が特定のネイティブ要素の使用を無視する場合。
- 機能が、HTML で現在利用できない場合。
2.2 ARIA 使用の2番目のルール
本当に必要としない限り、ネイティブのセマンティクスを変更しないでください。
例：開発者は、ボタンである見出しを作りたいと望んでいる。
こうしないでください：
<h1 role=button>heading button</h1>
こうしてください：
<h1><button>heading button</button></h1>
または、正しい要素を使用することができない場合、こうしてください：
<h1><span role=button>heading button</span></h1>
注：非インタラクティブ要素が、インタラクティブな要素のための基礎として使用される場合、開発者は ARIA を使用するセマンティクスとスクリプトを使用する適切なインタラクションの振る舞いを追加する必要があります。ボタンの場合、例えば、それはちょうど（ネイティブ HTML）ボタンを使用するのが、より良くそして容易です。
注：フォールバックのために、ARIA ロールを使用して、同様のセマンティクスを持つネイティブ HTML 要素を使用することは問題ありません。例えば、ARIA 対応の骨格のために HTML リスト要素を使用して、ツリーウィジェットを記述します。
2.3 ARIA 使用の3番目のルール
すべてのインタラクションな ARIA コントロールは、キーボードで使用できなければなりません。
ユーザーが、クリック、タップ、ドラッグ、ドロップ、スライド、スクロールできるウィジェットを制作した場合、ユーザーは、キーボードを使用してウィジェットへの移動と同等のアクションの実行もまた可能でなければなりません。
すべてのインタラクティブなウィジェットは、適切に標準的なキーストロークやキーストロークの組み合わせに反応するために準備されなければなりません。
例えば、role=button を使用する要素が、適切にフォーカスできなければならず、ユーザーが、enter キー（Win OS）または return キー（Mac OS）と space キーの両方を使用する要素に関連したアクションをアクティブにできなければなりません。
WAI-ARIA 1.0 オーサリングプラクティス（WAI-ARIA 1.0 Authoring Practices）のキーボードと構造化ナビゲーション（keyboard and structural navigation）とデザインパターン（design patterns）のセクションを参照してください。
2.4 ARIA 使用の4番目のルール
目に見えるフォーカス可能な要素に role="presentation" または aria-hidden="true" を使用しないでください。
目に見えるフォーカス可能な要素にこれらのいずれかを使用することは、一部のユーザーが「無」に焦点を合わせる結果になるでしょう。
こうしないでください：
<button role=presentation>press me</button>
こうしないでください：
<button aria-hidden="true">press me</button>
注：インタラクティブな要素を見ることができなかったり、インタラクトすることができない場合、例えば、aria-hidden を適用することができます：
button {display:none}
<button
aria-hidden="true">press me</button>
2.5 ARIA 使用の5番目のルール
すべてのインタラクティブな要素は、accessible name を持たなければなりません。
インタラクティブな要素は、アクセシビリティ API の accessible name（または同等物）が値を持つとき、accessible name のみを持ちます。
例えば、下のコード例 input type=text は、目に見えるラベル「user name」を持っているが、accessible name は持っていない：
user name <input type="text">
or
<!-- label element used, but not associated with the control
it is supposed to label -->
<label>user name</label> <input type="text">
操作している MSAA の accName プロパティは空です：
比較すると、下のコード例 input type=text は、目に見えるラベル「user name」と accessible name を持っています。この例で、input 要素はラベル（label）付け可能な要素であり、label 要素は正確に入力に対してラベルテキストを関連付けするために使用されるから、accessible name を持っています。
<!-- Note: use of for/id or wrapping label around text
and control methods will result in an accessible name -->
<label>user name <input type="text"></label>
or
<label for="uname">user name</label> <input type="text" id="uname">
操作している MSAA の accName プロパティは「user name」の値を持っています：
2.6 ロールの追加はネイティブのセマンティクスに何を起こすか
ARIA ロールを追加すると、アクセシビリティ API を介して伝えられるアクセシビリティ ツリー（accessibility tree）のネイティブなロールのセマンティクスを上書きするので、その結果として ARIA は、間接的にスクリーンリーダーまたは他の支援技術のために伝えられるものに影響します。
例えば、この HTML ツリーのコードは、
<h1 role=button>text</h1>
アクセシビリティ ツリーではこうなります。
ロールの追加により成されないこと
ARIA ロールを追加しても、支援技術を使用しない人々に対し、要素を異なって見せたり、動作させたりはしないでしょう。ホスト要素の挙動やステート、プロパティは変化せず、ネイティブなロールのセマンティクスのみです。
例えば、この HTML ツリーのコードは、
<button role=heading aria-level=1>text</button>
アクセシビリティツリーではこうなります。
しかし、それはまだ押すことができ、それはまだ標準のタブの順番であり、まだボタンのように見え、押された時はまだ任意の関連づけられた動作を引き起こします。そういうわけで、見出しをボタンに変更することは HTML5 適合性として誤りです。
注：要素のロールを変更すると、使用されるロールに挙動またはプロパティ、ステートを追加しません。ARIA は、ブラウザでの見せ方や動作の方法を変化させません。例えば、リンクがボタンのように振る舞うために使用されるとき、role=button を追加しただけでは十分ではありません。ネイティブのボタンは、エンターキーまたはスペースバーを使用することで作動させることができるので、ネイティブのボタンのように動作するように space キーを聞き入れるキー イベント ハンドラを包含することによって、ボタンのように動作させることが必要になります。
2.7 ARIA の追加はインラインかスクリプト経由か
ARIA ロールや aria-* 属性がインタラクションの挙動を提供するためにスクリプトに依存しないなら、それは ARIA マークアップをインラインで包含するほうが安全です。例えば、それは ARIA landmark ロールまたは ARIA ラベルと記述の属性をインラインで追加しても良いです。
コンテンツとインタラクションが、スクリプトが実行可能な状態で閲覧するコンテクストのみサポートしている場合、例えば Google docs（動作のために JavaScript が実行可能であることを求めるアプリケーション）は、それは単純に JavaScript が実行可能でないと（誰にでも）動作しないアプリケーションとしてインラインで ARIA マークアップを包含するのが同様に安全です。
そうでない場合は、スクリプト経由で ARIA を挿入や変更、取り除きます。例えば、ツリー ウィジェットの折り畳まれたセクションは、このように見えるかもしれません：
<li role=treeitem aria-expanded=false ...
ユーザーがセクションを開くとき、JavaScript を使用してこれに変えられます：
<li role=treeitem aria-expanded=true ...
2.8 ARIA の検証
もっとも簡単な方法は、ARIA マークアップを持つ HTML5 DOCTYPE を使用し、W3C Nu Markup Validation Service を使用して妥当性を確認することです。ARIA は、任意の他の DOCTYPE で同等に動作しますが、関連する DTD は、ARIA マークアップを認識するように更新されていないか、思いもよらなかったとして、妥当性を確認するツールは、ARIA マークアップと遭遇した時、エラーを生成するでしょう。
HTML5 で以前の HTML バージョンにおけるこれらの妥当性検査エラーは、現実世界のアクセシビリティの問題を作り出しているのが ARIA ではないし、ネガティブなユーザーエクスペリエンスを意味することでもありません。それらは単純に ARIA アクセシビリティのアノテーションに適合しない古い自動化された妥当性検査テストの結果に過ぎません。
注：ARIA のチェックのための W3C Nu Markup Conformance Checker のサポートは進行中の作業であり、（それはとても良いものですが！）完全な拠り所となる正確な結果を提供できません。あなたが ARIA 仕様や HTML5 仕様の ARIA 適合性要件と一致しない結果に遭遇した場合、バグレポートを上げることをお勧めします。
2.9 role=presentation の使用
role=presentation は、それが接している要素からセマンティクスを削除します。
例えば、この HTML ツリーのコードは、
<h1 role=presentation>text</h1>
アクセシビリティツリーではこうなります。
言い換えれば、それはセマンティクスとして意味を持たないテキストの文字列としてアクセシビリティツリーに伝えられています。
必須の子を持たない要素は、role=presentation を持つ要素の内側にネストされたどの要素も、それらのセマンティクスを保持します。
例えば、この HTML ツリーのコードは、
<h1 role=presentation><abbr>API</abbr></h1>
アクセシビリティツリーではこうなります。
（ul や table のように）必須の子を持つ要素は、role=presentation を持つ要素の内側にネストされたどの必須の子もまた同様にセマンティクスが削除されます。
例えば、この HTML ツリーのコードは、
<table role=presentation>
<tr><td><abbr>API</abbr></td><tr>
</table>
アクセシビリティツリーではこうなります。
注：role=presentation を持つ要素の子が必須ではない任意の要素は、それらのセマンティクスを保持します。これには、ネストされたリストや表のように必須の子を持つ他の要素を包含します。
例えば、この HTML ツリーのコードは、
<table role=presentation>
<tr><td>
<table>
<tr><td><abbr>API</abbr></td><tr>
</table>
</td><tr>
</table>
アクセシビリティツリーではこうなります。
2.10 aria-labelledby と aria-describedby
現在の aria-labelledby と aria-describedby は、より確実にインタラクティブなコンテンツの要素のサブセットにテキストコンテンツを関連付けるためにサポートされています。これを書いている現在、リンク先は正しく作業されておらず、埋め込みコンテンツのサポートは未知数ですが、多くの input タイプを包含しているフォームコントロールで安全に使用することができます。
Internet Explorer で、あなたが、複数の id を参照する aria-labelledby または単一か複数の id を参照する aria-describedby を使用する場合、参照された要素は、アクセシブルな HTML 要素として Microsoft の用語でなければなりません。
複数の参照を持つ aria-labelledby の以下の例は、追加された tabindex=-1 を持つ span を使用します。非アクセシブルな要素をアクセシブルにする方法を参照してください。
<label id="l1" for="f3">label text</label>
<input type="text" id="f3" aria-labelledby="l1 l2">
<p>other content</p>
<span tabindex="-1"
id="l2"
>more label text</span>
要素が、ARIA ロール（role）を持っているとき、要素はまた、Internet Explorer でアクセス可能な HTML 要素となります。たとえば、
<div aria-describedby="test">text</div>
<div id="test" role="tooltip">tooltip text</div>
2.11 ARIA role=application の使用
role="application" はどのようにスクリーンリーダーに影響を与えるか
今日、多くの一般的なスクリーンリーダーは、ユーザーがブラウズモードのとき、ほとんどのキーストロークは、Web ページではなくスクリーンリーダーによって占拠されます。これは、単ページの効率的なナビゲーションに必要である。この執筆の時点で、アプリケーションモードが設定されている場合、多くのスクリーンリーダーは、キーストロークを妨害するのを中止し、ブラウザのために直接すべてのキーストロークを渡します。そのときユーザーは、同じぐらい簡単にページをナビゲートすることはできないでしょう。例えば、それは見出しによってページのあちこちにスキップしたり、静的テキストの行から行の段落を読むことができなくなるでしょう。しかしながら、いくつかのスクリーンリーダーは、アプリケーションロールがセットされているとき、異なる振る舞いをしません。
それで、わたしはいつそれを使うべきで、いつそうしないべきか
role=application を使う時に重要なのは、とりわけ、スクリーンリーダーのキーボード ショートカットの長所が、それらの機能の損失として不利に働くことを考慮するべきです。それは一般的に使用されるべきではないし、それがもしある場合、スクリーンリーダー利用者によるユーザビリティテストを行うべきです。
コントロールのセットは、標準の HTML の一部なので、これらのウィジェットが含まれている場合、role="application" を使用しないでください。それらをマークアップし、WAI-ARIA ロール（role）の代わりに、標準的な HTML ウィジェットを使用してインタラクションモデルを作成する場合にも適用されます。
注：制作者が独自のテキスト入力ウィジェットを開発することはお勧めしません。これらのためにネイティブの入力を使用することは大抵一番うまくいきます。
text boxこれはまた、パスワードや検索、電話番号、その他の新しい入力タイプの派生に適用されます。textareacheck boxbuttonradio button（通常は fieldset/legend 要素のラッパーの内側）select + option(s)links、paragraphs、headingsと Web 上のドキュメントへの伝統的な/ネイティブな他の要素。
ウィジェットが、以下のより動的で非ネイティブなウィジェットのいずれかの場合、application ロールを使用しないでください。WAI-ARIA をサポートするスクリーンリーダーと他の支援技術も、標準でこれらのブラウズとフォーカスモデルの間の切り替えをサポートするでしょう。
tree viewslider- フォーカス可能な項目と、例えば、特定の情報を提供する電子メールのメッセージのリストを、矢印キーを介してナビゲートされる
table。他の例として、インタラクティブなグリッドやツリーグリッドなどがあります。 - ユーザーが、左矢印キーと右矢印キーを介してタブを選択するタブ（
tab, tablist）のリスト。あなたはこのためにキーボードナビゲーションモデルを実装する必要があることに留意してください！ dialogとalertdialog。これらは、その内部の操作へフォーカスが移動する（暗黙的な）アプリケーションモードのような状態になるスクリーンリーダーで発生します。これらがより良く機能するために、ロールがdialogである要素のaria-describedby属性に、ダイアログの目的を解説するテキストのidを設定し、そしてあなたがそれを開くときに最初のインタラクティブコントロールにフォーカスするよう設定することに注意してください。
<div role="dialog" aria-label="login" aria-describedby="log1">
<div id="log1" tabindex="-1">Provide user name and password to login.</div>
...
...
</div>toolbarとtoolbar buttons、menusとmenu itemsも同様。
あなたは、あなたが提供しているコンテンツが only をフォーカスし、インタラクティブコントロールで構成されている場合、role=application だけを使用することを望み、そしてそれらは本物のデスクトップアプリケーションをエミュレートした主として高度なウィジェットです。現在、Web アプリケーションと呼ばれているものが多く在るにもかかわらず、これら Web アプリケーションの大部分の内容は、それが、Facebook のポストとコメント、ブログ、Twitter フィードであれ、まだドキュメントベースの情報であり、動的に情報の特定のタイプの表示と非表示をするアコーディオンであることに留意してください。わたし達は、表面上はそれらをデスクトップに在るかの如きに感じることがあっても、主としてまだ Web のドキュメントとして扱います。
ユーザーがスクリーンリーダーでフォーム（フォーカス）モードのとき、コントロール固有のキーボード ショートカットを持つために role=application を使用することは必須ではありません。例えば、ARIA role=listbox を持つカスタムコントロールは、利用者がそれとインタラクションしている間、容易に矢印キーを含め、押されたすべてのキーを取り込むことができます。
要するに、あなたが実際に role=application を使用するであろう機会は、とても稀なケースです！
それで、わたしは稀なケースである role=application をどこに加えれば訳に立ちますか？
ウィジェットの要素を含んでいる最も身近な、例えば、外側の最も大きなウィジェット要素である要素の親 div に加えてください。外側の div が、アプリケーションのインタラクションモデルを必要とするウィジェットのみをラップする場合、これはフォーカスモードが、このウィジェットの外にあるユーザーのタブを一旦オフに切り替えていることを確認するでしょう。
ページが単にウィジェットかすべてをフォーカスモードに切り替えさせるのに必要なウィジェットのセットから構成される場合、body 要素にそれを加えるだけにしてください。これらのウィジェットの多くを持っているだけでなくユーザーが閲覧するのを望む何かを持っている場合、ページのドキュメントのような部分の最も外側の要素に role=document を使用します。それは role=application と対であり、この部分に閲覧モードを使用するように、あなたはスクリーンリーダーに伝えることができるでしょう。また、ユーザーがそれに到達するための機会を得るために、tabindex=0 を設定することによってタブ付けできる要素を作ります。
経験からいって、もしあなたのページがウィジェットにより90から95パーセントの割合で構成されている場合、role=application は適切であるかもしれません。その場合でも、実際に、role=application の有無でどのモデルがより良く動作するかについて向き合い、この二つのバージョンをテストすることができる知識を持つ人を見つけてください。
ページが主に、伝統的なウィジェットまたはユーザーがフォーカスモードでインタラクトすることのないリンクのようなページ要素で構成されている場合、body のような広範囲を含む要素に role=application を加えないでください。これは、あなたのサイト/アプリケーションを使おうとしているどのような支援技術のユーザーにも大きな悩みのタネになるでしょう。
role=application の使用についての詳細な情報は“If you use the WAI-ARIA role "application", please do so wisely!”を参照してください。
2.12 リコメンデーションテーブル：
凡例
’制作者は明示的にデフォルトの ARIA セマンティクスを定義するべきですか？’列
- NO = すでにデフォルトのセマンティクスがブラウザによって実装されているので、要素または属性に関連付けられている暗黙的なロールやステート、プロパティを使用する必要はありません。これらはデフォルトのセマンティクスが有用である状況を示しています。
- N/A = デフォルトの ARIA セマンティクスはありませんが、ブラウザによって実装されたアクセシビリティ API セマンティクスがあるかもしれません。
- Yes = デフォルトのセマンティクスはブラウザの間で実装されておらず、デフォルトの暗黙的なロールやステート、プロパティ、推奨されているセマンティクスは（ARIA の標準がない場合）は使用しても良いです。
’どのような他の ARIA ロールやステート、プロパティを使っても良いか？’列
NONE = 要素は ARIA ロールとステート、プロパティをサポートしない。要素がドキュメント内で表示されないから当然です。
| HTML 言語の機能 | 標準の ARIA セマンティクス | 制作者は明示的にデフォルトの ARIA セマンティクスを定義するべきですか | どのような他の ARIA ロールやステート、プロパティを使っても良いか |
|---|---|---|---|
| すべての要素 | 変化する | 変化する | ロール：フォーカス可能な要素または 'role=presentation にしてはいけません' 警告を持つか NONE が示されているそれらを除く presentation |
href を持つ a 要素 |
role=link |
NO | ロール： 許可されたロールを適用される任意のグローバル
|
address |
NONE | N/A | ロール： |
href を持つ area |
role=link |
NO |
|
article |
role=article |
YES 注 0 | ロール： 注 0：NO は |
aside |
role=complementary |
YES |
ロール： |
audio |
NONE | N/A | ロール： |
base |
NONE | N/A | NONE |
body |
role=document |
NO | 任意のグローバル aria-* 属性 |
button |
role=button |
NO 注 0a |
ロール： 注 0a：YES は
|
button type="menu"
|
aria-haspopup=true を持つ role=button |
NO 注 0b |
ロール： 注 0b：YES は
|
caption |
NONE | N/A | 任意のグローバル aria-* 属性 |
| NONE | N/A | NONE | |
datalist |
aria-multiselectable=false を持つ role=listbox |
NO 注 1 | 任意のグローバル 注 1：YES は 概要リストには直接的な ARIA ロールに一致するものがないので、制作者がDL要素の不適切な使用で組み込まない限り、ネイティブのロールが上書きされることは適切です。 |
dd、dt
|
NONE | N/A | 任意のグローバル aria-* 属性 |
details |
role=group |
YES | 任意のグローバル aria-* 属性と group ロールを適用できる任意の aria-* 属性。 |
open 属性を持たない dialog |
aria-hidden =true を持つ role=dialog |
YES |
任意のグローバル
|
div |
NONE | N/A | ロール：任意 任意のグローバル Note: ネイティブのセマンティクスを持つHTML要素をフォールバックとして使用される場合を除いて、任意のスクリプト化されたウィジェットはセマンティクスとしてニュートラルな |
dl |
role=list |
NO | |
embed |
NONE | N/A | ロール： 任意のグローバル |
figure |
NONE | N/A | ロール：任意の推奨された 任意のグローバル |
footer |
NONE | N/A | ページの主な |
form |
role=form |
NO | |
他の場所で記載されていないコンテンツの要素をグループ化する： |
NONE | N/A | ロール：任意 Note: 掲載された要素はいかなるデフォルトの ARIA セマンティクスを持たないとはいえ意味を持ち、そしてロールとステート、プロパティで示されるかもしれないこの意味は ARIA によって提供されませんが、アクセシビリティ API には存在します。したがって、制作者が掲載された要素のセマンティクスを上書きするよりはむしろ、 任意のグローバル |
h1 から h6 要素 |
aria-level に等しい要素のアウトラインの深さを持つ role=heading |
NO | 任意のグローバル aria-* 属性 |
head |
NONE | N/A | NONE |
header |
NONE | YES | ページの主な |
hr |
role=separator |
NO | 任意のグローバル aria-* 属性と separator ロールを適用できる任意の aria-* 属性。 |
html |
NONE | N/A | NONE |
iframe |
NONE | N/A | ロール： 任意のグローバル |
iframe (seamless) |
EDITOR:任意の一般的なグループ分けしたロールを上書きしても OK です。 | N/A | ロール： 任意のグローバル |
alt="" を持つ img |
role=presentation |
NO | NONE |
alt="some text" を持つ img |
role=img |
NO | ロール：任意 任意のグローバル |
input type= button |
role=button |
NO 注 1b | ロール： 任意のグローバル 注 1a：YES は
|
input type= checkbox |
要素の不確定な IDL 属性が真の場合は aria-checked=mixed または checked 属性が存在する場合は aria-checked=true です。 |
NO 注 2 |
注 2：YES は三種の状態のある checkbox の第三の状態を伝える
|
input type = color |
NONE | N/A |
|
input type = date |
NONE | N/A |
|
input type = datetime |
NONE | N/A |
|
list 属性を持たない input type = email |
role=textbox |
NO |
|
input type = file |
NONE | N/A |
|
input type = hidden |
NONE | N/A | NONE |
input type= image |
role=button |
NO 注 2a | ロール： 任意のグローバル 注 2a：YES は
|
input type = month |
NONE | N/A |
|
input type = number |
role=spinbutton は、要素が readonly 属性を持つ場合、aria-readonly プロパティに「true」がセットされ、aria-valuemax プロパティは、要素の maximum がセットされ、aria-valuemin プロパティは、要素の minimum がセットされ、そして要素の値に浮動小数点値を解析するためのルールを適用した結果が数値の場合、aria-valuenow プロパティは数値になります。
|
NO 注 3 | 任意のグローバル 注 3： YES は 明確なロールを持つ持たないに関わらず、
|
input type = password |
role=textbox |
NO |
|
input type = radio |
role=radio |
NO | Role: 任意のグローバル
|
input type = range |
aria-valuemax プロパティは、要素の maximum がセットされ、aria-valuemin プロパティに要素の minimum がセットされた role=slider。 |
NO 注 4 | 任意のグローバル 注 4：YES は 明確なロールを持つ持たないに関わらず、aria-valuetext を使用しても大丈夫です。
|
input type= reset |
button ロール |
NO |
|
list 属性を持たない input type = search
|
textbox ロール |
NO |
|
input type = submit |
button ロール |
NO |
|
list 属性を持たない input type = tel
|
textbox ロール |
NO |
|
list 属性を持たない input type = text
|
textbox ロール |
NO |
|
list 属性を持つ input type = text または search、tel、url、email
|
list 属性として同じ値となる aria-owns プロパティを持つ combobox ロール |
NO 注 5 | 任意のグローバル 注 5：YES は
|
input type= time |
NONE | NO |
|
list 属性を持たない input type = url |
textbox ロール |
NO |
|
input type = week |
NONE | NO |
|
| NONE | N/A | ロール：任意 Note: 掲載された要素はいかなるデフォルトの ARIA セマンティクスを持たないとはいえ意味を持ち、そしてロールとステート、プロパティで示されるかもしれないこの意味は ARIA によって提供されませんが、アクセシビリティ API には存在します。したがって、制作者が掲載された要素のセマンティクスを上書きするよりはむしろ、 |
|
keygen |
NONE | N/A |
|
label |
NONE | N/A | 任意のグローバル aria-* 属性 |
親が ol または ul の li 要素 |
role=listitem |
NO 注 5a | ロール： 注 5a：YES は |
href を持つ link |
role=link |
NO | NONE |
main |
role=main |
YES | 任意のグローバル aria-* 属性 |
map |
NONE | N/A | NONE |
math |
NONE | YES | 任意のグローバル aria-* 属性 |
menu type = toolbar |
role=toolbar |
NO 注 7 | 注 7：YES は 任意のグローバル
|
menuitem type = command |
role=menuitem |
NO 注 7a | 注 7a：YES は 任意のグローバル
|
menuitem type = checkbox
|
role=menuitemcheckbox |
NO 注 7b | 注 7b：YES は 任意のグローバル
|
menuitem type = radio
|
role=menuitemradio |
NO 注 7c | 注 7c：YES は 任意のグローバル
|
meta |
NONE | N/A | NONE |
meter |
role=progressbar |
N/A | 任意のグローバル aria-* 属性 |
nav |
role=navigation |
YES | 任意のグローバル aria-* 属性 |
noscript |
NONE | N/A | NONE |
object |
NONE | N/A | ロール： 任意のグローバル |
ol
|
role=list |
NO | Role: Any global |
optgroup |
NONE | N/A | 任意のグローバル aria-* 属性 |
オプションのリスト内または datalist 内で提案を表示する option 要素 |
selected 属性が存在するなら aria-selected=true さもなければ aria-selected=false を持つ role=option。 |
NO |
|
output |
role=status |
DEPENDS | ロール：任意、 任意のグローバル 注： |
param |
NONE | N/A | NONE |
picture
|
NONE | N/A | NONE |
progress |
プログレスバーが確定した場合、progressbar ロールは、aria-valuemax プロパティにプログレスバーの最大値を設定し、aria-valuemin プロパティに 0 を設定し、そして aria-valuenow プロパティにプログレスバーの現在の値を設定します 。 |
NO 注 8 | 注 8：YES は 明確なロールの有無に関わらず、ここ（例えば、“ステップ 10 の 2）に 任意のグローバル |
script |
NONE | N/A | NONE |
section |
role=region |
NO | ロール： 任意のグローバル |
multiple 属性を持つ select 要素 |
aria-multiselectable=true を持つ role=listbox |
NO |
|
multiple 属性を持たない select 要素 |
aria-multiselectable=false を持つ role=listbox |
NO |
|
source |
NONE | N/A | NONE |
span |
NONE | N/A | ロール：任意 任意のグローバル Note: ネイティブのセマンティクスを持つ HTML 要素をフォールバックとして使用される場合を除いて、任意のスクリプト化されたウィジェットはセマンティクスとしてニュートラルな |
style |
NONE | N/A | NONE |
SVG |
NONE | N/A | ロール： 任意のグローバル |
summary |
NONE | N/A |
任意のグローバル |
table |
NONE | N/A | ロール：任意 注 1：scripted data grid の一部として使用される場合を除いて、ARIA ロールを持つ 注 2： 任意のグローバル |
template
|
NONE | N/A | NONE |
textarea |
role=textbox |
NO |
|
role=rowgroup |
No | ロール：任意 Note:ロールを追加しても、これら非表示の要素上でどのような効果も現しません。 |
|
title |
NONE | N/A | NONE |
td |
NONE | N/A | ロール：任意 Note: scripted data grid の一部として使用される場合を除いて、ARIA ロールを持つ 任意のグローバル |
他の場所に掲載されていないテキストレベルのセマンティクス要素：
|
NONE | N/A | ロール：任意 Note: 掲載された要素はいかなるデフォルトの ARIA セマンティクスを持たないとはいえ意味を持ち、そしてロールとステート、プロパティで示されるかもしれないこの意味は ARIA によって提供されませんが、アクセシビリティ API には存在します。したがって、制作者が掲載された要素のセマンティクスを上書きするよりはむしろ、 任意のグローバル |
th |
NONE | N/A | ロール：任意 Note: scripted data grid の一部として使用される場合を除いて、ARIA ロールを持つ 任意のグローバル |
カラムのキー ordinality が1であるソート可能な th 要素である th 要素。 |
要素のカラムソート方向が通常の場合、aria-sort ステートに「ascending」を持ち、そうでなければ「descending」を持つ role=columnheader。 |
NO | Any グローバル
|
| NONE | N/A | ロール：任意 Note: scripted data grid の一部として使用される場合を除いて、ARIA ロールを持つ 任意のグローバル |
|
track |
NONE | N/A | NONE |
ul |
role=list |
NO | ロール： 任意のグローバル |
video |
NONE | N/A | ロール： 任意のグローバル |
disabled 属性を持つ要素 |
aria-disabled="true" |
NO |
HTML5 で HTML5 で |
required 属性を持つ要素 |
aria-required="true" |
NO | HTML5 で
|
readonly 属性を持つ要素 |
aria-readonly=true |
NO | HTML5 で HTML5 で |
hidden 属性を持つ要素 |
aria-hidden=true |
NO | CSS の display:none プロパティと組み合わせて hidden 属性を使用します。 |
| （リンクやボタンなど）ネイティブにフォーカス可能な要素 | NONE | NO | role=presentation にしてはいけません |
（li や span、div など）ネイティブにフォーカス可能ではない要素 |
DEPENDS | YES | role=presentation にしてはいけません
例えば、 |
| 制約バリデーションの候補ではあるが、制約の要求を満たさない要素 | aria-invalid=true |
NO | データの入力やインタラクトをする前にフィールドが無効であるとユーザーが考慮する重要な手段を設定するために、フォームが有効になった後、 （編集者注）ユーザーが“有意義”な操作と共にインタラクトする構成を定義する HTML へのリンクを提供します。ARIA は |
2.13 ARIA ロール（Role）、ステート（State）、プロパティ（Property）のクイックリファレンス
（Accessible Rich Internet Applications (WAI-ARIA) 1.0 を再フォーマットと再編成した情報）
表に示されているステートとプロパティに加えて、以下のグローバルなステートとプロパティはすべてのロールでサポートされます。
グローバルなステート（State）とプロパティ（Property）
| ロール | 説明 | 必須のプロパティ | サポートされるプロパティ - Global + |
|---|---|---|---|
alert |
重要で、通常は一刻を争う情報を伴ったメッセージ。関連する alertdialog および status も参照。 |
NONE | |
alertdialog |
初期のフォーカスがこのダイアログ内の要素に置かれるアラートメッセージを伴ったダイアログの一種。関連する alert および dialog も参照。 |
NONE | |
application |
Web ドキュメントとは反対に、Web アプリケーションとして宣言された領域。 | NONE | |
article |
ドキュメント、ページまたはサイト内の独立した部分の構成から成るページのセクション。 | NONE | |
banner |
ページの固有のコンテンツよりはむしろ主にサイトの方向性を示すコンテンツを含む領域。 | NONE | |
button |
クリックされたり押されたりした時に、ユーザが引き起こしたアクションを可能にする入力。関連する link を見てください。 |
NONE | |
checkbox |
true、false、mixed の三つの値を持つ可能性があるチェック可能な入力。 |
|
|
columnheader |
列の見出し情報を含んだセル。 | NONE | |
combobox |
選択表現のひとつで、ユーザーがオプションを選択する前に入力するか、リスト内に新しい項目として任意のテキストを入力できるテキストボックスに通常は似ています。関連する listbox を参照。 |
||
complementary |
DOM 階層内の同等のレベルでメインコンテンツを補完するよう設計されているが、メインのコンテンツから切り離しても意味を保持する、文書の補足的なセクション。 | NONE | |
contentinfo |
親のドキュメントに関する情報を含める大きな知覚できる領域。 | NONE | |
definition |
用語または概念の定義。 | NONE | |
dialog |
ダイアログは、情報の入力や応答の要求を促すようにアプリケーションの処理中に中断されるよう設計されたアプリケーションウィンドウ。関連する Alertdialog も参照。 |
NONE | |
directory |
たとえば静的な目次など、グループのメンバーへの参照のリスト。 | NONE | |
document |
Web アプリケーションとは対照的にドキュメントコンテンツとして宣言されている関連情報を含んでいる領域。 | NONE | |
form |
総じて、フォームを作成するために組み合わした項目とオブジェクトのコレクションを含んでいる landmark 領域。関連する search を参照。 |
NONE | |
grid |
グリッドには、テーブルと同様に、行と列に配列された表形式データのセルが含まれるインタラクションのコントロール。 | NONE | |
gridcell |
グリッドまたはツリーグリッド内のセル。 | NONE | |
group |
支援技術によってページサマリまたは目次に含まれることを意図されていないユーザーインタフェースオブジェクトのセット。 | NONE | |
heading |
ページのセクションのための見出し。 | NONE | |
img |
画像を形成する要素のコレクションのためのコンテナ。 | NONE | |
link |
活性化されたとき、ユーザーエージェントは、そのリソースへの移動を引き起こし、内部または外部のリソースへの対話型の参照。関連する button を参照。 |
NONE | |
list |
非インタラクティブなリスト項目のグループ。関連する listbox を参照。 |
NONE | |
listbox |
ユーザーに選択肢のリストからひとつ以上の項目を選ぶことを許可するウィジェット。関連する combobox と list を参照。 |
NONE | |
listitem |
リストまたはディレクトリ内の単一の項目。 | NONE | |
log |
新しい情報が意味のある順番に追加され、また古い情報が消えることもあるライブ領域のタイプ。関連する marquee も参照。 |
NONE | |
main |
ドキュメントのメインコンテンツ。 | NONE | |
marquee |
重要でない情報が頻繁に変更されるライブ領域のタイプ。関連する log も参照。 |
NONE | |
math |
数学表現のためのコンテンツ。 | NONE | |
menu |
ユーザーに選択肢のリストを示すウィジェットのタイプ。 | NONE | |
menubar |
通常は表示され続け、また横方向に提示される 制作者は、メニューバーのインタラクションが典型的なデスクトップのグラフィカル ユーザ インタフェースのメニューバーのインタラクションに似ていることを確認するべきです。これは、実のところサイトのナビゲーションのリスト項目をマークアップするためのものではありません。 |
NONE | |
menuitem |
menu または menubar によって含まれた選択肢のグループ内のオプション。 |
NONE | |
menuitemcheckbox |
true、false、mixed の三つの値を持つ可能性があるチェック可能な menuitem。 |
||
menuitemradio |
一度にひとつだけチェックできる menuitemradio ロール（role）のグループ内にあるチェック可能な menuitem。 |
||
navigation |
ドキュメントまたは関連する文書をナビゲートするためのナビゲーション要素（通常はリンク）のコレクション。 | NONE | |
note |
そのリソースのメインのコンテンツに対して挿入的または付随的なコンテンツのセクション。 | NONE | |
option |
select リスト内にある選択可能な item。 |
NONE | |
presentation |
暗黙的なネイティブのロールセマンティクスの要素は、アクセシビリティ API にマッピングされない。 | NONE | |
progressbar |
長時間を要するタスクの進行状況を表示する要素。 | NONE | |
radio |
一度にひとつだけチェックできる radio ロール（role）のグループにあるチェック可能な入力。 |
||
radiogroup |
ラジオボタンのグループ。 | NONE | |
region |
例えば、ライブのスポーツイベントの統計を含むページの領域など、制作者がページサマリーまたは目次に包含されるのに十分に重要と思うような Web ページまたはドキュメントの大きな知覚できるセクション。 | NONE | |
row |
グリッド内のセルの行。 | NONE | |
rowgroup |
グリッド内のひとつ以上の行の要素に含んでいる group。 |
NONE | |
rowheader |
グリッド内の行の見出し情報を含んでいるセル。 | NONE | |
scrollbar |
コンテンツが表示領域内に完全に表示されているかどうかにかかわらず、表示領域内のコンテンツのスクロールをコントロールするグラフィカルなオブジェクト。 | ||
search |
総じて、検索機能を作成するために組み合わした項目とオブジェクトのコレクションを含む landmark 領域。関連する form を参照。 |
NONE | |
separator |
コンテンツのセクションまたは menuitem のグループを区切ったり識別する仕切り。 |
|
|
slider |
特定の範囲内でユーザーが値を選択するユーザー入力。 | ||
spinbutton |
個別の選択肢の間からユーザーが選択するのを期待している range のフォーム。 |
||
status |
ユーザーのための通知情報だが、アラートにするほど重要ではないコンテンツを含むコンテナで、しばしば、ステータスバーとして表示する必要性もない。関連する Alert も参照。 |
NONE | |
tab |
ユーザーに表示されるタブコンテンツを選択するためのメカニズムを提供しているグループ化した label。 |
NONE | |
tablist |
tabpanel 要素へ参照している tab 要素のリスト。 |
NONE | |
tabpanel |
各 tab が tablist に含まれている tab に関連付けられたリソースのコンテナ。 |
NONE | |
textbox |
値を自由記述形式のテキストとして許可する入力。 | NONE | |
timer |
開始時からの経過時間、または終了時までの残り時間を示す数値カウンタを含むライブ領域のタイプ。 | NONE | |
toolbar |
コンパクトに視覚的な形式で示される一般的に使用される機能ボタンのコレクション。 | NONE | |
tooltip |
要素の説明を表示するコンテクストなポップアップ。 | NONE | |
tree |
展開や折り畳みができるサブレベルに入れ子になったグループを含む list のタイプ。 |
NONE | |
treegrid |
tree と同様に展開または折り畳むことができる行の grid。 |
NONE | |
treeitem |
tree のオプション項目。これは、treeitem のサブレベルグループを含んでいる場合、展開や折り畳みができる tree 内の要素です。 |
NONE |
2.14 ステート（state）とプロパティ（property）の定義（すべての aria-* 属性）
以下は、リッチインターネットアプリケーションの制作者によって使われる ARIA ステート（state）とプロパティ（property）のアルファベット順のリストです。各 ARIA ステートとプロパティの詳細な定義は、以下の（Accessible Rich Internet Applications (WAI-ARIA) 1.0 で定義されているそれらへの）属性のリンクによって見つけることができます。
aria-activedescendant- コンポジットウィジェットの現時点でアクティブな子孫を特定します。
aria-atomic- 支援技術が、
aria-relevant属性によって定義された変更通知に基づいて変更された領域が、全体または一部のみなのかを示します。関連するaria-relevantも参照。 aria-autocomplete- ユーザーの入力を補完する提案が提供されるかどうかを示します。
aria-busy (state)- 要素およびそのサブツリーが現在更新されているかどうかを示します。
aria-checked (state)- チェックボックス、ラジオボタン、その他のウィジェットのステート（state）が現在チェック済みかを示します。関連する
aria-pressedおよびaria-selectedも参照。 aria-controls- 現在の要素によってコンテンツまたは存在が制御されている要素を識別します。関連する
aria-ownsも参照。 aria-describedby- オブジェクトを記述する要素を識別します。関連する
aria-labelledbyも参照。 aria-disabled (state)- 要素は知覚可能ですが無効になっており、結果として編集または操作可能ではないことを示します。関連する
aria-hiddenおよびaria-readonlyも参照。 aria-dropeffect- ドラッグされたオブジェクトがドロップ対象の上にあるとき、どのような機能が実行できるかを示します。選択肢のポップアップメニューがアプリケーションによって提供されるかどうかを含め、ユーザーが利用可能なドラッグのオプションの可能性を伝えることを支援技術に許可します。典型的に、ドロップエフェクトの機能は、利用可能なドロップエフェクトの機能はオブジェクトがドラッグされていることに依存し、ドラッグ操作で掴まれているオブジェクトに一度だけ提供することができます。ドラッグされたオブジェクトがドロップターゲット上でリリースされた時のドラッグ＆ドロップの効果を示します。
aria-expanded (state)- 要素またはそれを制御している他のグループの要素が、現在、展開されているのか折り畳まれているのかを示します。
aria-flowto- ユーザーの判断で、支援技術がドキュメントのソース順の読み上げの一般的なデフォルトを上書きすることを許可し、コンテンツの代替の読み上げ順序内における次の要素を示します。
aria-grabbed (state)- ドラッグ＆ドロップの操作で、要素が“つかまれた”状態を示します。
aria-haspopup- 要素がポップアップのコンテキストメニューあるいはサブレベルのメニューを持っていることを示します。
aria-hidden (state)- 要素とその子孫のすべてが、制作者によって実装され、どのユーザーにも視覚的あるいは知覚可能ではないことを示します。関連する
aria-disabledを参照。 aria-invalid (state)- 入力された値が、アプリケーションによって期待されるフォーマットに従わないことを示します。
aria-label- 現在の要素にラベル付けする文字列の値を定義します。関連する
aria-labelledbyを参照。 aria-labelledby- 現在の要素にラベル付けする要素を識別します。関連する
aria-labelとaria-describedbyを参照。 aria-level- 構造内の要素の階層的なレベルを定義します。
aria-live- 要素が更新されることををを示し、ユーザーエージェント、支援技術またはユーザーがライブ領域に期待することができる更新のタイプを記述します。
aria-multiline- テキストボックスが入力の複数行または単一行のみを受け入れるかどうかを示します。
aria-multiselectable- ユーザーが現在の選択可能な子孫からひとつの項目以上を選択するかもしれないことを示します。
aria-orientation- 要素と方向が水平か垂直かどうかを示します。
aria-owns- DOM 階層が関係性を表現するために使われることができない DOM 要素の間の、視覚的、機能的、あるいは文脈上の親/子関係を定義するための要素を識別します。関連する
aria-controlsを参照。 aria-posinsetlistitemまたはtreeitemの現在のセットにおける要素の数あるいは位置を定義します。DOM 内にセットのすべての要素が存在する場合は、必須ではありません。関連するaria-setsizeを参照。aria-pressed (state)- トグルボタンの現在“押されている”状態を示します。関連する
aria-checkedとaria-selectedも参照。 aria-readonly- 要素は編集可能ではないが、操作は可能であることを示します。関連する
aria-disabledも参照。 aria-relevant- ユーザーエージェントが通知（追加、削除など）支援技術の変更を、ライブ領域内で受けとれるであろうことを示します。関連する
aria-atomicも参照。 aria-required- フォームを送信する前に、ユーザーの入力が要素へ必須であることを示します。
aria-selected (state)- 様々なウィジェットの現在“選択された”状態を示します。関連する
aria-checkedとaria-pressedも参照。 aria-setsizelistitemまたはtreeitemの現在のセット中の項目の数を定義します。セット内のすべての要素が、DOM 内に存在している場合は必須ではありません。関連するaria-posinsetも参照。aria-sort- テーブルまたはグリッド内の項目が、昇順か降順でソートされているかどうかを示します。
aria-valuemax- range ウィジェットの最大許可値を定義します。
aria-valuemin- range ウィジェットの最小許可値を定義します
aria-valuenow- range ウィジェットの現在の値を定義します。関連する
aria-valuetextも参照。 aria-valuetext- range ウィジェットのための
aria-valuenowの人間が可読できる代替えテキストを定義します。
2.15 抽象ロール
彼らが何もしないように、以下の抽象ロールは使用しないでください！
以下のロールは、一般的なロール概念を定義する目的のために WAI-ARIA ロールのタクソノミーをサポートするために使用されています。抽象ロールはオントロジーのために使用されます。制作者はコンテンツに抽象ロールを使用してはいけません（MUST NOT）。