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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

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

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

解説

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

アラートダイアログは、必要とされるまで、支援技術によってアクセスされる方法で存在すべきではないことに注意。これを行う一つの方法は、静的な 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. アラートダイアログは少なくとも一つのフォーカス可能なコントロールを含み、アラートダイアログが開いた際にフォーカスがそのコントロールに移動することを判断する。
  3. タブ順序は、タブが開いている間アラートダイアログ内に拘束され、ダイアログを閉じた際に、可能ならば、フォーカスはダイアログが開く前の位置に戻ることを判断する。
  4. 適用された role="alertdialog" をもつ要素を調べる。
  5. aria-label 又は aria-labelledby 属性のいずれかが、適切にアラートダイアログにアクセシブルな名前を与えるために使用されていることを判断する。
  6. アラートダイアログのコンテンツが入力エラーを識別していることを判断する。
  7. アラートダイアログのコンテンツがエラーを修正する方法を提案しているかどうかを判断する。

期待される結果

  • 2.、3.、5. 及び 6. の結果が真である。達成基準 3.3.3 を達成するためには、7 の結果も真である。