読む前や元に戻す前に消えるトースト

メッセージを取り戻す唯一の手段が、4秒で消えるトーストの中にあります。その時間を解除する、延ばす、延長する方法もありません。読む、動かす、トーストを見つけるのが遅い人にとっては、「元に戻す」はもう消えています。

トーストの見た目と読み上げはそのままですが、タイマーでは消えません。「元に戻す」か「閉じる」を押したとき、または次のトーストに置き換わったときに消えます。利用者は必要なだけ時間をかけて、読み、Tabで移動し、判断できます。トーストのコンテナーがDOMのどこにあるかが重要です。キーボードの利用者はTabでたどり着くため、ページの最後ではなく、伝える内容の直後に置きます。残っている間、一覧を覆わないようにもします。

どちらも2.2.1を満たし、メッセージの読み上げも保たれます。どれが合うかは、削除がどこで起きるかで決まります。並びが変わらない一覧の1行なら、項目のあった場所に「元に戻す」を置きます。フォーカスがすでにそこにあり、ページの上に何も浮かばず、Tabで探す必要もありません。そうした場所がない場合、たとえば一括削除、並べ替えやページ送りのある一覧、項目自体のページからの削除では、閉じるまで残るトーストを使います。すでにメッセージをトーストで表示しているサイトにとっては、最も手早い変更でもあります。多くのサイトでは両方を使うことになるでしょう。

ホバーやフォーカスでの一時停止だけでは足りません。 トーストに届いた時点でタイマーを止めるだけなので、間に合った人にしか効きません。それでも、タイマーが残るトーストでは必ず行ってください。ポインターが乗っている間やフォーカスが中にある間に、何かが消えてはいけません。

ゴミ箱があれば、トーストを時間で消せます。 削除した項目を「復元」できるゴミ箱にすでに残しているサイトなら、自動で閉じるトーストも2.2.1を満たします。同じ操作を別の方法でできるためで、W3Cが挙げている場合に当たります。トーストではどこへ移したか（「ゴミ箱に移動しました」）を伝え、ポインターやフォーカスが届いたらタイマーを止めます。間に合わなかった人は、ボタン1回で済む復元に何手順もかけることになります。タイマーを残すためだけにゴミ箱を作るのはやめましょう。

設定でも満たせますが、見つけてもらえれば、です。 2.2.1は、制限に出会う前に解除できる方法や、10倍以上に延ばせる方法も認めています。アカウント設定の「通知を閉じるまで表示する」などです。ほとんどの人はその設定を目にしないため、ほかの理由で時間で消えるトーストを残すサイト向けで、主な修正には向きません。

操作のないトースト。 「設定を保存しました」には操作がなく、保存された状態がページで見えるなら、消えても何も失われません。それでも読める時間は表示し、失敗など対応が必要な内容は、残り続ける場所に出します。

削除が実際に行われるとき。 元の場所の「元に戻す」も、残るトーストも、削除を保留にしています。タイマーではなく、利用者の次の操作か、ページを離れたときに確定させます。サーバーの状態も正しく保ちます。すぐに削除を送って「元に戻す」で復元を呼ぶか、確定したときに削除を送るかのどちらかです。タブを閉じると作業が失われるおそれがあるなら、前者のほうが安全です。

フォーカスの行き先。 押した操作部品が消えたら、フォーカスを移す必要があります。そのままにするとbodyに落ち、キーボードの利用者はページの先頭からやり直すことになります。行の代わりに現れた「元に戻す」へフォーカスを移すのは自然です。ほかの作業の途中で、ページの端のトーストへフォーカスを移すのはそうではありません。それは、利用者が答える必要のあるメッセージに限ります。

トーストが重なる場合。 残り続けるトーストが積み重なると、ページを覆います。残るトーストの修正のように前のトーストを次のトーストで置き換えるか、数に上限を設けて「すべて閉じる」を用意します。

修正にならないもの。 role="alert" や aria-live="assertive" にすれば早く読み上げられますが、操作できる時間は変わらず、スクリーンリーダーが読んでいた内容を遮ります。10秒などに延ばしても固定の制限であることに変わりはなく、間に合わない人がいます。