ページに新しいコンテンツが追加されるたびに、ユーザーがそのコンテンツにフォーカスして操作できるようにします。
手動テストの方法
シングルページ アプリは、特に新しいコンテンツに対するユーザーのフォーカスを管理する場合には、テストが重要です。
通常、シングルページ アプリでは、リンクをクリックしてもハード更新は行われません。
ルートが変更されると、<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>
支援技術は、新しい見出しと、その見出しが含まれるメインのランドマーク領域を読み上げます。