原文：https://pauljadam.com/demos/aria-atomic-relevant.html
※このページは動作確認用ページです。一部アクセシビリティに配慮していないコンテンツが含まれます。
DEMO一覧に戻るPaulJAdam.comでさらに詳しく（外部サイト）
aria-liveリージョン内のaria-atomicとaria-relevant
解説
これはテキストフィールドに280文字以下の入力制限があることをスクリーンリーダー利用者に伝えるデモです。たとえば、Twitterの文字数制限のようなものを想定しています。
テキストを入力すると残り文字数が更新されます。WAI-ARIAのLive Regionsを利用すると、残りの入力可能文字数が変化するたびに値が読み上げられるため、スクリーンリーダー利用者にも伝わります。このテストケースではデフォルトを使用してから、aria-atomicおよびaria-relevant属性を使用してLive Regionsの高度なオプションを調査してみます。
対象環境
- OS X 10.9.3 + Safari + VoiceOver
- iOS 7 + Mobile Safari + VoiceOver
（aria-live="assertive"のみサポート） - Windows 7 + Firefox 29.0.1 + NVDA 2014.2
- Windows 7 + IE 8 + NVDA 2014.2
（aria-relevant非対応） - Windows 7 + IE 8 + JAWS 14
- Android 4.4.2 + Chrome 34.01847.114 + TalkBack 3.5.1
（announces full live region only） - Android 4.4.2 + Firefox 29.0.1 + TalkBack 3.5.1
（aria-atomic="true"およびaria-relevant非対応）
Support Notes
VoiceOver for OS Xでは期待通りに動作します。 例えば、aria-relevant="additions"は、aria-atomic="true"のライブリージョン全体がアナウンスされるのを防ぎます。
NVDA + FirefoxおよびJAWS + IEはaria-relevant="additions"を解釈せず、aria-atomic="true"を上書きせず、ライブリージョン全体を読み上げます。
iOSのVoiceOverでは、即座に読み上げられるaria-live="assertive"でのみ動作します(・︵・)。
iOSのVoiceOverはaria-relevant="additions"がaria-atomic="true"を上書きしませんが、OS XのVoiceOverでは正しく動作します。
Windows 7 + Firefox 29.0.1 + JAWS 14 はバグだらけです。イベントが発生するたびに、ライブリージョンではなくテキストフィールド用のアクセシブルネーム全体を読み上げます。
Android 4.4.2 + Chrome 34.01847.114 + TalkBack 3.5.1はaria-atomicまたはaria-relevantを解釈しません。TalBackはイベントが発生するたびにライブリージョン全体を読み上げます。
Notes
aria-relevant属性のデフォルト値は「additions text」ですから、初期値ではノードの削除は関連性を持たないと判断されます。
Android版のFirefoxでは、ユーザの入力時にchangeイベント、keyupイベントが走らないため、デバイスに依存しないinputイベントを使用する必要があります。IE8以下はinputイベントをサポートしていないため、IE9以上にだけをサポートするわけではない場合、onpropertychangeイベントを利用しなければなりません(・◡・)。