紹介ページ2枚だけ、main もスキップリンクも無かった

サイトの下層ページには共通の器があり、そこが <main> とスキップリンクを供給していました。ところが紹介ページはサイトのヘッダーを持たない1枚もので、その器を通っていません。<section> から直接始まっていました。

目で見るぶんには何も問題がありません。壊れているのは、目で見ていない人にとってだけです。

ページ側で気をつける、にはしませんでした。紹介ページ全体を包む器を1つ作り、そこが <main> とスキップリンクを供給する形にしています。次にページを増やしても、その器で包むかぎり付いてきます。

ページの末尾に置くフッターは、children ではなく別のプロパティで受けています。<main> の外に出すためです。

ここが2つめの落とし穴でした。飛び先に tabIndex の指定が無いと、押してもスクロールが動くだけで、フォーカスは本文へ移りません。

<main id="main" tabIndex={-1}>

見た目には「効いている」ように見えます。画面はちゃんと本文へ動くからです。でもキーボードの位置は元のまま、つまりもう一度そこから装飾をたどることになります。 スキップリンクは飛ぶことではなく、フォーカスが移ることに意味があります。

ページ内アンカーを受けている部分でも、飛び先が tabindex を持つときだけ focus({ preventScroll: true }) を呼ぶようにしました。スクロールは別で行うので、フォーカス移動でもう一度動かさないためです。

同じときに見つけたのがこれです。共通の器が持つ見出しは既定が h3 で、法務ページでは上に h2 があるので成立していました。サポートページはその h2 を持たないので、h1 の次が h3 になっていました。段が1つ飛んでいます。

器に段を渡せるようにして、包まないページでは h2 を指定するようにしています。

• よくある質問の質問文も、段落ではなく見出しにした
• 見出しでないと、スクリーンリーダーで質問の間を移動できない

太字にすれば見出しに見えます。見えるだけでは、移動できません。

3つとも、画面を見ているかぎり永久に気づけない類でした。ビルドも通りますし、警告も出ません。

いまは新しい器を作ったときに、<main>・スキップリンクの飛び先・見出しの段の3つを確認するようにしています。器を増やすほど取りこぼす、というのが結論でした。