画面に出ても読み上げられないステータスメッセージ

領域と文言が一緒に現れ、一緒に消えるため、見ていた領域の中で文言が変わったことにブラウザーは気づきません。メッセージは画面に出ても、読み上げられません。

role="status" の p は最初から空のままHTMLにあるため、文言が変わる時点でブラウザーはこの領域を見ています。スクリーンリーダーは読み上げ中の内容を終えてから「10:42に下書きを保存しました」と読みます。カーソルは本文に残ります。この行は編集欄のすぐ下にあり、画面拡大ソフトの利用者も、画面が見える人も、もともと見ている場所です。時刻があるので、保存が新しいことも分かります。

どちらも、フォーカスを動かさずに「下書きを保存しました」を伝えます。編集欄のそばのステータス行を使ってください。コードの量は同じで、失うものがありません。メッセージが利用者の見ている場所に残り、画面拡大ソフトの利用者が見つける前に消えることもありません。トーストのコンテナーが合うのは、サイトがすでにメッセージをトーストで表示していて、それを変えられない場合です。すべてのトーストが一度に直ります。トーストを使う場合は、読むのに十分な時間を表示し、対応が必要な内容はトーストに入れないでください。

領域を先に用意します。 コンポーネントのフレームワークでは、領域をレイアウトか編集欄のマークアップに置きます。メッセージと一緒に現れる {#if} や条件付きの描画の中には置きません。メッセージと一緒に追加される領域は、書き方が違うだけで同じ失敗です。

隠れた領域は読み上げられません。 display: none、visibility: hidden、aria-hidden="true" の中のライブリージョンは読み上げられません。隠していた領域を文言と一緒に表示すると、新しい領域として扱うブラウザーもあります。ステータス行を見た目だけ隠して読み上げさせたい場合は、display: none ではなく、視覚的に隠すクラスを使います。

役割そのものがライブリージョンです。 role="status" は aria-live="polite" と aria-atomic="true" を含んでいます。役割のない div に aria-live="polite" aria-atomic="true" を付けても同じように動きます。通常の保存に aria-live="assertive" や role="alert" を使わないでください。手を止めるたびに、聞いていた内容が遮られます。

伝えるタイミング。 保存が終わったときに伝えます。キー入力のたびや、数秒ごとの「保存中…」は伝えません。同じ文言を続けて書き込むと、2回目を読まないスクリーンリーダーがあります。「10:42に下書きを保存しました」のように時刻を入れれば文言が変わります。または、書き込む前に領域を空にします。

失敗も言葉で伝えます。 「下書きを保存できませんでした」もステータスメッセージです。ページを離れると作業が失われる場合は、保存が回復するまで編集欄のそばにも表示しておきます。

閉じるボタン。 トーストに閉じるボタンを付けることはできますが、ライブリージョン内のボタンは、メッセージと一緒に読まれることがあります（「下書きを保存しました、閉じる」）。それでも問題はありません。ボタンの名前は短くします。避けるためにトーストへ別のライブリージョンを付けると、「修正前」と同じ失敗に戻ります。ボタンだけに頼らず、読むのに十分な時間がたてばトーストが自然に消えるようにもします。

修正にならないもの。 トーストへフォーカスを移せば読み上げられますが、カーソルが本文から抜け、4.1.3が求める方法でもありません。<output> 要素はstatusの役割を持ちますが、変化の読み上げは明示的な role="status" ほど安定していません。