WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA18: エラーを特定するために aria-alertdialog を使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

ARIA18 に関するユーザエージェントサポートノート (英語)を参照のこと。WAI-ARIA技術ノートも参照。

解説

この達成方法の目的は、入力エラーが発生していることを利用者に警告することにある。role="alertdialog"を使用することで、通知を作成することができる。この通知は、次のような特徴をもつモーダルであるべきである:

アラートダイアログは、必要とされるまで、支援技術によってアクセスされる方法で存在すべきではないことに注意。これを行う1つの方法は、静的なHTMLに含めない代わりに、エラー状態がトリガーされた時にスクリプトを通してDOMに挿入することである。この挿入は、次のHTMLサンプルに対応する。

事例

事例 1: アラートダイアログ

この例は、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>

実装例: アラートダイアログ

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

(今のところ、なし。)

検証

チェックポイント

  1. アラートダイアログが表示される原因となるエラーをトリガーする。

  2. アラートダイアログは少なくとも1つのフォーカス可能なコントロールを含み、アラートダイアログが開いた際にフォーカスがそのコントロールに移動する。

  3. タブ順序は、タブが開いている間アラートダイアログ内に拘束され、ダイアログを閉じた際に、可能ならば、フォーカスはダイアログが開く前の位置に戻る。

  4. 適用されたrole="alertdialog"をもつ要素を調べる。

  5. aria-label又はaria-labelledby属性のいずれかが、適切にアラートダイアログにアクセシブルな名前を与えるために使用されている。

  6. アラートダイアログのコンテンツが入力エラーを識別している。

  7. アラートダイアログのコンテンツがエラーを修正する方法を提案している。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。