新しいコンテンツがページに追加されたときは、必ずユーザーのフォーカスがそのコンテンツに転送されるようにして、ユーザーがアクションを実行できるようにします。
手動でのテスト方法
シングルページ アプリはテストが重要です。特に、ユーザーが新しいコンテンツに集中できるようにする場合はテストが重要です。
通常、シングルページ アプリでは、リンクをクリックしてもハード更新は発生しません。代わりに、ルートの変更により、<main> コンテンツ領域の新しいデータが取得されます。
目の見えるユーザーにとっては、これは問題ありません。しかし、スクリーン リーダーなどの支援技術を使用して移動しているユーザーは、新しいコンテンツがページに追加されたことに気づかない場合があります。<main> 領域に戻る必要があることを示すものではありません。
そのような場合は、ユーザーのフォーカスを管理して、ユーザーが認識するコンテキストとサイトのビジュアル コンテンツの同期を維持する必要があります。
修正方法
ページ上の新しいコンテンツに対するユーザーのフォーカスを管理するには、新しく読み込まれたコンテンツで適切な見出しを見つけて、その見出しにフォーカスします。これを実現する最も簡単な方法は、見出しに -1 の tabindex を設定し、その focus() メソッドを呼び出すことです。
<main>
<h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
// Assuming this gets called every time new content loads...
function onNewPage() {
var heading = document.querySelector('h2');
heading.focus();
// You can also update the page title :)
document.title = heading.textContent;
}
</script>
支援技術は新しい見出しと それに含まれる主要なランドマーク エリアをアナウンスします
ユーザー補助機能のフォーカスの管理もご覧ください。