原文：https://pauljadam.com/demos/aria-alert-validation.html
※このページは動作確認用ページです。一部アクセシビリティに配慮していないコンテンツが含まれます。
DEMO一覧に戻るPaulJAdam.comでさらに詳しく（外部サイト）
ARIA Live Regionsまたはrole="alert"を使用してエラーを特定する
ユーザエージェントについて
対象環境
- 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)
対応していない環境
- Windows 7 + IE 8 + NVDA 2013.1 (NO support)
Support Notes
JAWSおよびNVDAでFirefoxを使用している場合、role="alert"は "Alert"としてアナウンスされ、aria-live="assertive"はその追加テキストを含みません。なお、NVDA 2013.1 + IE 8のサポートはありません。エラーコンテナーでrole="alert"とaria-live="assertive"を両方とも使用することで、一覧にあるすべての組み合わせで機能し、より広いUA/ATの組み合わせをサポートすることができます。
ページ内にアラートや、変更が即座に伝達されるライブリージョンを表示する方法はいくつかありますが、エラーコンテナの作成方法やエラーメッセージの挿入方法によって、「IE 8 + JAWS 14」や「VoiceOver + Safari」などのより難しいブラウザとスクリーンリーダーの組み合わせでも機能するかどうかが決まります。
適用範囲
このテクニックはWAI-ARIAを使ったHTMLに適用されます。
この技法は達成基準（SC）3.3.1に関連します。（エラー識別）：
解説
この達成方法の目的は、入力エラーが発生した場合にスクリーンリーダーなどの支援技術 (AT) に通知することです。aria-live属性を付与することで、その要素の配下はライブリージョンとなり、エラーメッセージが出力された際に AT がユーザにそれを通知できるようになります。aria-live領域内部のコンテンツは、テキストが表示されている場所に AT がフォーカスしていなくとも自動的に読みあげられます。
すべての例でページロード時にDOMに存在している、エラーメッセージを出力するための空の要素（以下、エラーコンテナ）があります。これらはaria-atomic="true"を持ち、aria-live属性またはrole="alert"を持ちます。
ライブリージョンのプロパティを直接適用する代わりに使用できる特殊ケースのライブリージョンのロールも多数あります。
実装例
次の例では、role="alert"を使用します。これは、aria-live="assertive"を使用するのと同等です。
この例ではページロード時にDOMに存在している、エラーメッセージを出力するための空の要素（以下、エラーコンテナ）があります。これらはaria-atomic="true"を持ち、aria-live属性またはrole="alert"を持ちます。
ほとんどのスクリーンリーダーがエラーメッセージを読み上げるには、エラーコンテナがページロード時にDOMに存在する必要があります。aria-atomic="true"は、エラーがある状態で送信ボタンが複数回押された後にもiOS上のVoiceOverにエラーメッセージを読み取らせるために必要です。
このサンプルでは送信ボタン押下時に、JavaScriptがテキストフィールドの値が空かどうかを確認し、空の場合はライブリージョンであるエラーコンテナにエラーメッセージを挿入します。新たに送信が試みられるたびに、前のエラーメッセージがエラーコンテナから削除され、新しいエラーメッセージが挿入されます。