フォーカス中のリンクを隠す固定ヘッダーとバナー

ページは両方のバーの下をスクロールしますが、画面の上4remと下5remが覆われていることをブラウザーに伝えていません。フォーカスでスクロールしたリンクは、どちらかのバーの下で止まります。

scroll-padding は、画面のどこが実際に見えているかをブラウザーに伝えます。フォーカスによるスクロール、ページ内リンク、scrollIntoView が、バーの手前で止まります。バーの高さと余白は同じトークンから取るため、ずれません。ただし、バーがその高さを保っている間だけ有効です。狭い幅や文字の拡大でヘッダーの文字が折り返して高くなる場合は、余白も合わせて広げる必要があります。文字と一緒に拡大される rem で高さを決めるか、ResizeObserver で変数を更新してください。また、scroll-padding は実際にスクロールする要素に指定します。本文がコンテナー内でスクロールする場合は、html ではなくそのコンテナーに指定します。

どちらも基準を満たします。scroll-padding は変更が小さく、スクロールに合わせてモバイルのアドレスバーが隠れる動きを含め、通常のページスクロールを保てます。ただし、確保する余白がバーの高さと一致している必要があります。グリッドのレイアウトは高さの計測が不要ですが、スクロールがページから main に移るため、引っ張って更新する操作、スクロール位置の復元、一部の解析スクリプトの動きが変わります。バーの高さが決まっている既存のサイトには scroll-padding を、ページの骨組みを作るときや、バーの高さが内容で変わる場合はレイアウトの変更を選んでください。

ページに重なる要素をすべて数えてください。ヘッダー、Cookieやキャンペーンのバナー、チャットの起動ボタン、「ページ上部へ」ボタンなどです。それぞれに余白を確保するか、スクロール領域の外に置きます。バーに対処しても、隅に浮いたボタンが小さな操作要素を完全に隠すことがあります。

閉じられるバナーでも、表示中は基準を満たしません。消えるまでは余白を確保してください。拡大表示では、高いバーが本文の場所をほとんど残さないことがあります。画面の高さが低いときは、@media (max-height: 30rem) などで position: sticky を外し、ヘッダーが一緒にスクロールするようにすることも検討します。一部だけ隠れたフォーカスはAAの2.4.11を満たしますが、AAAの2.4.12は一切隠れないことを求めます。一部が隠れたフォーカスは読み取りにくいため、要素全体が見えることを目指してください。