読み上げられないお礼の文に差し替わるフォーム

失敗は伝わります。ステータス行に書き込まれ、フォームもフォーカスのあるボタンも残るからです。抜けているのは成功のときです。新しい段落には役割がなく、フォーカスも移されないため、読まれません。さらに replaceWith() がフォーカスのあった「登録する」ボタンを削除するため、フォーカスはページのbodyに落ちます。

デザインはそのままです。お礼の文には tabindex="-1" を付けます。Tabの順序には加えずに、スクリプトからフォーカスを移せるようにするためです。ページに入れた直後にフォーカスを移すので、スクリーンリーダーはフォーカスが届いたときに読み上げ、次のTabもそこから、フォームの後ろへ続きます。位置を見失う人はいません。失敗のときは変わりません。フォームが残り、フォーカスは「登録する」に残り、何が起きたかはステータス行が伝えます。

どちらもお礼の文を読み上げさせ、消えたボタンにフォーカスを置き去りにしません。デザイン上どうしてもフォームを差し替えるなら、お礼の文へフォーカスを移します。スクリプト2行で済み、見た目は描かれたとおりです。デザインを変えられるなら、フォームを残します。フォーカスは動かず、一つのステータス行で成功も失敗も伝えられ、アドレスも画面に残って確かめられます。どちらが良いかはサイトによります。フォームを消す必要があるかどうかで決まります。

メッセージ全体にフォーカスを移します。 アイコン、「完了」とだけ書いた見出し、ページの先頭ではなく、結果を文で伝えている要素にフォーカスを移します。お礼の文は一度で読み切れる短さにします。見出しが必要なら、「登録が完了しました」のように見出しで結果を伝え、その見出しにフォーカスを移します。

新しいマークアップの描画後に。 コンポーネントのフレームワークでは、成功の分岐でフォームを {#if} の中で入れ替えたり、フッター全体を描き直したりすることがよくあります。これも replaceWith() と同じく、フォーカスのあるボタンを削除します。新しい内容がページに入ってから（Svelteの tick()、Reactのエフェクト、Vueの nextTick() のあとで）フォーカスを移し、あとの描き直しでフォーカスした要素が置き換わらないことも確かめます。

フォーカスの枠。 キーボードで操作したあとは、フォーカスを受けた段落の周りに、たいていのブラウザーがフォーカスの枠を描きます。消さないでください。画面を見ながらキーボードで操作する人には、この枠がいまの位置の目印になります。マウスでクリックしたあとは、通常は表示されません。

失敗のときはそのまま。 送信に失敗したらフォームを差し替えてはいけません。もう一度送るためにフォームが必要だからです。どちらの修正でも、フォーカスは「登録する」に残し、失敗はステータス行に書き込みます。この行と、メッセージの前に行を空にする理由は、読み上げられないフォームの送信結果で説明しています。

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

修正にならないもの。 新しい段落を作るときに role="status" や aria-live を付けると、領域が文言と一緒に現れることになり、読まれないことがよくあります。この失敗は画面に出ても読み上げられないステータスメッセージで扱っています。フォームをライブリージョンで包んでその中で差し替えると、お礼の文は読まれますが、フォーカスはページのbodyに落ちたままです。