live-region-announcements

ライブリージョンは、ステータスメッセージを読み上げられる状態にしておくことを推奨します

manualWCAG 4.1.3 (AA)確度:medium重大度:moderaterobust

支援技術から隠されているか、busyのままのライブリージョンを検出し、ライブリージョンフックを使う場合は、テキストを入れた状態で追加されたものや、表示と同時にテキストを入れられたものも検出して、手動レビューに回します。

適用範囲:ページが描画しているライブリージョンです。aria-liveがpoliteまたはassertiveである要素、aria-liveがなくロールがstatus、log、alertである要素、そして<output>要素が該当します。aria-live="off"はそのいずれもオフにします。display: none、visibility: hidden、[hidden]で隠されたライブリージョンは対象外です。表示されるのを待っているリージョンは、静止した状態のページの一部だからです。ブラウザーがinertにする、開いているモーダルの<dialog>の背後にあるライブリージョンは、ほかのルールではそうしたコンテンツを対象外にしますが、ここでは含めます。ライブリージョンフック(liveRegionHookScript)を使う場合は、一般に読み上げられない方法でテキストを与えられたことをフックが確認したライブリージョンも、まだページにあるかどうかにかかわらず対象です。

期待される結果:WCAG 4.1.3:ステータスメッセージは、フォーカスを受け取らずに支援技術によってユーザーに提示できます。ライブリージョンは、支援技術が到達できる間にその内容が変わることで、これを実現します。

  • 描画されたライブリージョンが、aria-hidden="true"やinertの中にあるかそれ自体がそうである場合、または開いているモーダルの<dialog>の背後にある場合:cantTell(LIVE_REGION_HIDDEN)。アクセシビリティツリーの外にあるため、与えられたものは何も読み上げられません(ダイアログの背後にある場合は、ダイアログが開いている間)。
  • ページのスキャン時にaria-busy="true"を持つライブリージョン:cantTell(LIVE_REGION_BUSY)。支援技術は、aria-busyが解除されるまでその変更を保留する場合があります。
  • フックが記録したもので、テキストがすでに入った状態でページに追加された、role="alert"以外のライブリージョン:cantTell(LIVE_REGION_INSERTED_WITH_CONTENT)。スクリーンリーダーが一般に読み上げるのは、すでに把握しているリージョンの変更であり、新しいリージョンの内容ではありません。
  • フックが記録したもので、隠れていたライブリージョンが、同じタスクの中で表示され、テキストを与えられたもの:cantTell(LIVE_REGION_SHOWN_AND_FILLED)。テキストが届いたとき、アクセシビリティツリーに含まれていませんでした。
  • それ以外:pass。

ページがそのリージョンをステータスメッセージに使っているか、そしてテキストが変わる前に、リージョンがページにあり、表示され、到達可能であるかを確認してください。

検出結果が報告する内容:

  • politeness:リージョンのpolitenessで、politeまたはassertiveです。
  • hiddenBy:LIVE_REGION_HIDDENの場合、aria-hidden、inert、または開いているモーダルの<dialog>の背後にあるリージョンではmodalです。ダイアログの背後にあるリージョンは、ほかに何がそれを隠していても(リージョン自身やその上位のinertやaria-hidden。includeHiddenElementsの有無を問いません)modalです。ダイアログが開いている間は、それが実際に効いている原因だからです。
  • text:フックによる2つの検出結果の場合、リージョンに与えられたテキスト(最大300文字)です。
  • removed:フックによる2つの検出結果の場合、スキャン時にリージョンがもうページになかったときにtrueです。そのとき検出箇所は文書要素になり、regionがリージョンを示します(tag、role、id)。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<div role="status"></div>

空のstatusリージョンで、メッセージが届く前からページにあり、到達可能です。

can't tell
<div aria-hidden="true"><div role="status"></div></div>

リージョンは支援技術から隠されているため、与えられたものは何も読み上げられません。ページがそれをステータスメッセージに使っているかを、人が確認します。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

LIVE_REGION_BUSY

  1. レポートに示されたライブリージョンを見つけてください。ページのスキャン時にaria-busy="true"が付いていました。
  2. リージョンを更新する操作を行ってから開発者ツールで調べ、更新が終わるとaria-busyがfalseに変わるか削除されるか確認してください。
  3. スクリーンリーダーを起動した状態で操作を繰り返し、メッセージが読み上げられるか聞いてください。
  4. この領域から何も聞こえない場合は、スクリーンリーダーが読み上げる別のステータス領域からなど、ページが同じメッセージを別の方法で伝えているか確認してください。フォーカスを動かさずにメッセージ全体が聞こえる場合にだけ、それを認めます。

満たす場合:更新完了時にaria-busyが解除されるか、ページが同じメッセージを別の方法で伝えるため、フォーカスが移動せずにスクリーンリーダーがメッセージを読み上げます。

満たさない場合:aria-busyがtrueのままで、スクリーンリーダーがメッセージを保留または省略し、ページも他の方法で伝えないため、WCAG 4.1.3を満たしません。

LIVE_REGION_HIDDEN

  1. レポートに示されたライブリージョンを見つけ、それを隠しているものを控えてください(レポートに示されています):それ自身または祖先のaria-hidden="true"やinert、またはその手前に開いているモーダルダイアログです。
  2. ページのスキャン時にモーダルダイアログが開いていたか確認してください。開いていた場合は、開いている間にページがリージョンに書き込むかを控え、ダイアログを閉じて、リージョンがまだ隠されているか確認してください。
  3. スクリーンリーダーを起動した状態で、リージョンを更新する操作(フォームの送信、カートへの追加、検索の実行)を行ってください。
  4. メッセージを聞いてください。何も聞こえない場合は、テキストが変わるときに、この領域または同じメッセージを持つ別のステータス領域がツリーにあるか、開発者ツールのアクセシビリティペインで確認してください。

満たす場合:テキストが変わるときに領域が隠れていない(またはメッセージに使われない)か、隠れていない別のステータス領域が同じメッセージを持つため、フォーカスが移動せずにスクリーンリーダーがメッセージを読み上げます。

満たさない場合:メッセージが届いたときに領域がaria-hidden、inert、または開いているモーダルダイアログで隠れたままで、他に伝えるものもないため、スクリーンリーダーは何も読み上げず、WCAG 4.1.3を満たしません。

LIVE_REGION_INSERTED_WITH_CONTENT

  1. レポートに引用されたメッセージと、それを表示する操作を見つけてください(レポートにテキストとリージョンが示されています)。
  2. スクリーンリーダーを起動してから、その操作を行ってください。
  3. メッセージにフォーカスを移さずに、それが読み上げられるか聞いてください。
  4. 読み上げられない場合は、ページがすでにテキストの入ったリージョンを追加していないか開発者ツールで確認してください。空のリージョンを先にページに置き、後からテキストを書き込む必要があります。

満たす場合:メッセージが現れると、フォーカスが移動しなくてもスクリーンリーダーがそれを読み上げます。

満たさない場合:メッセージは画面に表示されますが、リージョンがテキストの入った状態で追加されたため、スクリーンリーダーが読み上げず、WCAG 4.1.3を満たしません(ARIA22)。

LIVE_REGION_SHOWN_AND_FILLED

  1. レポートに引用されたメッセージと、それを表示する操作を見つけてください。
  2. スクリーンリーダーを起動してから、その操作を行ってください。
  3. メッセージにフォーカスを移さずに、それが読み上げられるか聞いてください。
  4. 読み上げられない場合は、テキストが設定される瞬間までリージョンが隠されていないか開発者ツールで確認してください。テキストが届く前に、リージョンは表示されている(または空の状態で存在している)必要があります。

満たす場合:メッセージが現れると、フォーカスが移動しなくてもスクリーンリーダーがそれを読み上げます。

満たさない場合:メッセージは表示されますが、リージョンが表示されると同時にテキストが入ったため、スクリーンリーダーが読み上げず、WCAG 4.1.3を満たしません(ARIA22)。

ソースコードを見る