【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA18 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、入力エラーが発生していることを利用者に警告することにある。role="alertdialog"を使用することで、通知を作成することができる。この通知は、次のような特徴をもつモーダルであるべきである:
aria-label 又は aria-labelledby 属性で、アラートダイアログにアクセシブルな名前を与えている。
aria-describedby で、アラートのテキストへの参照を提供している。
そのアラートダイアログは、少なくとも一つのフォーカス可能なコントロールを含んでおり、アラートダイアログが開く際にフォーカスがそのコントロールに移動すべきである。
タブ順序は、タブが開いている間アラートダイアログの内部に拘束される。
ダイアログが閉じられる場合、可能であれば、フォーカスはダイアログが開く前の位置に戻る。
アラートダイアログは、必要とされるまで、支援技術によってアクセスされる方法で存在すべきではないことに注意。これを行う一つの方法は、静的な HTML に含めない代わりに、エラー状態がトリガーされた時にスクリプトを通して DOM に挿入することである。この挿入は、次の HTML サンプルに対応する。
この例は、role="alertdialog"を使用する通知が、無効な情報を入力した人に通知するためにどのように使用できるかを示す。
<div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
<h1 id="alertHeading">Error</h1>
<div id="alertText">Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</div>
<button>Save and Continue</button>
<button>Return to page and correct error</button>
</div>実装例: アラートダイアログ。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
(今のところ、なし。)
アラートダイアログが表示される原因となるエラーをトリガーする。
アラートダイアログは少なくとも一つのフォーカス可能なコントロールを含み、アラートダイアログが開いた際にフォーカスがそのコントロールに移動することを判断する。
タブ順序は、タブが開いている間アラートダイアログ内に拘束され、ダイアログを閉じた際に、可能ならば、フォーカスはダイアログが開く前の位置に戻ることを判断する。
適用された role="alertdialog" をもつ要素を調べる。
aria-label 又は aria-labelledby 属性のいずれかが、適切にアラートダイアログにアクセシブルな名前を与えるために使用されていることを判断する。
アラートダイアログのコンテンツが入力エラーを識別していることを判断する。
アラートダイアログのコンテンツがエラーを修正する方法を提案しているかどうかを判断する。
2.、3.、5. 及び 6. の結果が真である。達成基準 3.3.3 を達成するためには、7 の結果も真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。