ライブリージョンが機能しない理由と修正方法

ライブリージョンは単純に見えますが、よく機能しなくなります。よくあるpitfallsを知っておけば、実際のスクリーンリーダーを使った困惑するテストに何時間も費やさずに済みます。🐛

リージョンとそのテキストを同時に作成すると、多くのスクリーンリーダーが見落とします。変更前にregionを空の状態で存在させておく必要があります。

ページの読み込み時にテキストのないライブcontainerを追加し、その後で内容を更新します。その時点では、スクリーンリーダーがすでに監視しています。

同じ文字列を2回書き込むと、スクリーンリーダーには変化がないため、しばしばsilenceになります。繰り返し表示される件数やステータスで特に起こりやすい問題です。

regionを空にしてから、次のティックで新しいテキストを設定します。短いリセットにより、スクリーンリーダーは新しい通知として扱います。

リージョンを大量のテキストで更新すると、ユーザーを圧倒してしまいます。ライブリージョンはページ全体の内容ではなく、短いupdatesのために使います。

aria-atomicをtrueに設定すると、一部が変更されただけでも、変更箇所だけでなくリージョン全体を読み上げます。複数のメッセージを組み合わせる場合に便利です。

aria-relevant属性は、追加や削除など、どの種類の変更を通知するかを制御します。ほとんどの場合、追加とテキストを含むデフォルト設定が適しています。

display noneで隠されたリージョンはアクセシビリティツリーから除外され、通知されません。これは最もよくある間違いの1つです。

ブラウザーのインスペクターだけでは、リージョンが機能することを証明できません。リリース前に、NVDAやVoiceOverなどの実際のscreen readerで必ず確認してください。

同じライブリージョンでも、screen readersやブラウザーによって聞こえ方が異なることがあります。1つだけを信頼せず、いくつかの組み合わせでテストしてください。

ライブリージョンをデバッグできるようになりました。まず空の状態で描画し、繰り返しには空にしてから設定し、display noneを避け、実際のスクリーンリーダーで必ずテストします。✅