読み上げられないSPAの画面遷移

タブのタイトルは正しくなりますが、スクリーンリーダーはタイトルの変更を読み上げません。フォーカスは押したリンクに残るか、そのリンクが古い画面と一緒に消えた場合は文書に落ちます。

見出しにフォーカスを移すと、二つの役目を一度に果たせます。スクリーンリーダーはフォーカスを受けた見出しを読み上げ（「茶器、見出しレベル1」）、次のTabは新しい画面の最初のリンクやボタンへ進みます。tabindex="-1" があれば、Tabの順序には加えずに、スクリプトから見出しにフォーカスを移せます。最初の読み込みでは、ブラウザーがすでにフォーカスをページの先頭に置いているため、ルーターは何もしません。

どちらも2.4.3と4.1.3を満たします。一つ目は新しい画面の名前を持つ要素へフォーカスを移すことで、二つ目はフォーカスを戻して名前をステータスメッセージで伝えることで満たします。見出しへの移動は利用者を新しい内容へ直接連れていき、Gatsbyのユーザーテストではスクリーンリーダーの利用者に最も分かりやすい方法でした。先頭へ戻す方法は、大きなアプリでは通り抜ける量が多く感じられたと報告されています。一方で先頭へ戻す方法は、普通のページ読み込みと同じ感覚で使え、すべての画面に見出しがなくても動きます。フレームワークがすでに行っている場合もあります。SvelteKitはフォーカスを body に移し、自前のステータス領域で新しいタイトルを読み上げます。フレームワークが先頭へ戻すなら、それを活かし、各タイトルが画面を表しているかを確認してください。ルーティングを自分で書くなら、見出しへの移動のほうが小さな変更で済みます。

URLが変わっても、新しい画面とは限りません。 絞り込み、並べ替え、検索結果のページ送り、タブも、アドレスを書き換えることがよくあります。そこでフォーカスを動かすと、操作中の部品から利用者を引き離してしまいます。フォーカスはそのままにして、件数が読み上げられない検索・絞り込み結果のように結果を伝えます。フォーカスを移すのは、メインの内容が入れ替わったときだけです。

囲みではなく見出しにフォーカスを移します。 main や画面の囲みにフォーカスを移すアプリもあります。その場合、スクリーンリーダーによって「メイン」とだけ読んだり、画面全体を一度に読んだりします。h1 なら、短く決まった読み上げになります。この修正にはすべての画面に見出しが必要ですが、もともとあるべきものです。

フォーカスリングは残します。 フォーカスを受けた見出しには、ブラウザーのフォーカスリングが出ることがあります。消さないでください。画面拡大ソフトの利用者は、それを頼りに移動先を見つけます。見出し用に控えめなリングにするのは構いません。フォーカスした要素は画面内にスクロールし、戻るの操作では、ルーターが保存したスクロール位置を復元します。

戻る・進む。 リンクと同じように扱います。画面を離れたときのリンクにフォーカスを戻すアプリもあり、良い追加ですが、代わりにはなりません。

後から届くデータ。 画面が先に読み込み中の表示を出す場合は、見出しが表示されてからフォーカスを移すか、読み上げます。待つ間は、読み上げられない読み込み中の表示のように、読み込み中であることをステータス領域で伝えます。

それだけでは修正にならないもの。

• document.title の変更：タブは正しくなりますが、何も読み上げられません。すべてのページで同じページタイトルを防ぐために、必要ではあります。
• 画面全体への aria-live：すべてを読むスクリーンリーダーもあれば、何も読まないものもあり、変わるたびに全体が繰り返されます。
• フォーカスを残したままのステータス領域：名前は読み上げられ、ナビゲーションのリンクにフォーカスが残るのも不自然ではありません。しかし押したリンクが古い画面の一部だった場合、フォーカスはリンクと一緒に失われます。
• 見出しへの autofocus：ブラウザーが適用するのは文書ごとに一度だけで、画面遷移のたびではありません。