読み上げられないフォームの送信結果

段落は最初からページにありますが、ライブリージョンではないため、書き込んでも変わるのは見た目だけで、読み上げは何も変わりません。フォーカスは変化のない「登録する」に残るので、そこにもスクリーンリーダーが新しく読むものはありません。

もとからある段落に role="status" を付けるので、文言が変わるときには、ブラウザーがすでにこの領域を監視しています。スクリーンリーダーは読み上げ中の内容を終えてから「ありがとうございます。確認メールをお送りしました。」と読みます。フォーカスは「登録する」に残り、利用者はそのまま続けられます。失敗も同じように読まれます。announce() は行を空にし、0.1秒後に文言を書き込むため、同じ文言の2回目の失敗も変化になります。この間がないと、オフラインのようにすぐ失敗するリクエストでは、空にするのと書き込むのが同時に起き、2回目が読まれないことがあります。メッセージはフォームの下に残り、ボタンを押したばかりの人がもう見ている場所にあります。

領域を先に用意します。 コンポーネントのフレームワークでは、ステータス行を空の状態でフォームと一緒に描画します。結果と一緒に現れる {#if} の中には置きません。メッセージと一緒に現れる領域は、読み上げられないことがよくあります。この失敗は画面に出ても読み上げられないステータスメッセージで詳しく扱っています。

読み上げの強さ。 role="status" はスクリーンリーダーの読み上げが終わるのを待ちます。ここではそれで十分です。利用者は「登録する」を押したばかりで、答えを待っているからです。role="alert" は、すぐに対応が必要なメッセージのためにとっておきます。理由は定型の通知でもVoiceOverの読み上げを遮るアラートで説明しています。

送信中。 ボタンは押せるままにして、送信中に押されても無視します。フォーカスのあるボタンに disabled を付けると、ブラウザーがフォーカスをページに落とすことがあり、利用者は自分の位置を見失います。サービスの応答が遅くなりうる場合は、同じステータス行に「登録しています…」と書き込み、結果で置き換えます。読み上げられない読み込み中の表示が読み込み中のメッセージに使っているのと同じやり方です。応答が来たら取り消す短いタイマーから書き込めば、すぐに応答が来たときに2回伝えずに済みます。

欄のエラー。 ブラウザーやサーバーが受け付けないアドレスは、送信の結果ではなく欄のエラーです。直し方がわからないフォームエラーのように、欄のそばに、欄と結び付けて出します。項目の多いフォームで複数のエラーが出る場合は、どの欄が誤りか示さないエラー概要のように、すべての欄を挙げる概要が必要です。そのときステータス行では、送信できなかったことだけを伝えます。

お礼のページ。 再読み込みしたり新しいページへ移ったりするフォームは、ステータスメッセージではありません。新しいページのタイトルと見出しが、何が起きたかを伝えます。シングルページアプリでお礼の画面へ切り替わる場合は、新しい画面として伝える必要があります。読み上げられないSPAの画面遷移で扱っています。

埋め込みのフォーム。 メール配信サービスやマーケティングサービスが提供するフォームには、独自のスクリプトと成功メッセージが付いてきます。中には、フォーカスを移さずにフォームを差し替えるものもあります。自分のページに埋め込んだ状態で確認してください。スクリプトを変えられない場合は、お礼のページへ移動させる設定がサービスにないか確かめます。

修正にならないもの。 フォームがページに残るのにメッセージへフォーカスを移せば、読み上げられはしますが、直したいかもしれないフォームから利用者を引き離します。ステータス行なら、利用者を動かさずに済みます。フォーカスを移すのが修正になるのは、フォームが消える場合だけです。お礼の文に差し替わるフォームのガイドで扱っています。メッセージを書き込むのと同時に段落へ aria-live を付けるのは、ステータスメッセージのガイドのトーストと同じ失敗です。ライブリージョンと文言が一緒に現れます。ボタンの title や aria-label を変えても、確実には読まれず、失敗も伝わりません。