原文：https://pauljadam.com/demos/aria-alert-assertive-validation.html
※このページは動作確認用ページです。一部アクセシビリティに配慮していないコンテンツが含まれます。
DEMO一覧に戻るPaulJAdam.comでさらに詳しく（外部サイト）
WAI-ARIAのみを使用した簡易的なフォーム検証（role=alert、aria-live=assertive）
これらの実装サンプルは、W3C・WCAG WG・ARIA達成方法集に基づいています（Using ARIA Live Regions or role=alert to Identify Errors）。ブラウザや支援技術のサポート差異を確認するために3つのサンプルを用意しました。
解説
この達成方法の目的は、入力エラーが発生した場合にスクリーンリーダーなどの支援技術 (AT) に通知することです。aria-live属性を付与することで、その要素の配下はライブリージョンとなり、エラーメッセージが出力された際に AT がユーザにそれを通知できるようになります。aria-live領域内部のコンテンツは、テキストが表示されている場所に AT がフォーカスしていなくとも自動的に読みあげられます。
すべての例でページロード時にDOMに存在している、エラーメッセージを出力するための空の要素（以下、エラーコンテナ）があります。これらはaria-atomic="true"を持ち、aria-live属性またはrole="alert"を持ちます。
ほとんどのスクリーンリーダーがエラーメッセージを読み上げるには、エラーコンテナがページロード時にDOMに存在する必要があります。aria-atomic="true"は、エラーがある状態で送信ボタンが複数回押された後にもiOS上のVoiceOverにエラーメッセージを読み取らせるために必要です。このサンプルでは送信ボタン押下時に、JavaScriptがテキストフィールドの値が空かどうかを確認し、空の場合はライブリージョンであるエラーコンテナにエラーメッセージを挿入します。新たに送信が試みられるたびに、前のエラーメッセージがエラーコンテナから削除され、新しいエラーメッセージが挿入されます。
OS/UA/AT Support
- OS X 10.8.4 + Safari + VoiceOver
- iOS 6 & 7 + Mobile Safari + VoiceOver
- Windows 7 + Firefox 20 + NVDA 2013.1
- Windows 7 + Firefox 20 + JAWS 14
- Windows 7 + IE 8 + JAWS 14 (
aria-live="assertive"ONLY) - Windows 7 + IE 7 + JAWS 14 (
aria-live="assertive"ONLY)
Support Notes
JAWSおよびNVDAでFirefoxを使用している場合、role="alert"は "Alert"としてアナウンスされ、aria-live="assertive"はその追加テキストを含みません。なお、NVDA 2013.1 + IE 8のサポートはありません。 3番目の例では、一覧にあるすべての組み合わせで機能するより広いUA/ATサポートのために、エラーコンテナーでrole="alert"とaria-live="assertive"を両方とも使用します。
ページ内にアラートや、変更が即座に伝達されるライブリージョンを表示する方法はいくつかありますが、エラーコンテナの作成方法やエラーメッセージの挿入方法によって、「IE 8 + JAWS 14」や「VoiceOver + Safari」などのより難しいブラウザとスクリーンリーダーの組み合わせでも機能するかどうかが決まります。UA / ATサポートの問題についての詳細はHTML5 Accessibility Chops: ARIA role=alert browser supportをご覧ください。