拡大するとページを覆う、浮いた購入バー

バーはフッターの後、ページの最後にあり、ウィンドウの下部に固定されています。幅320ピクセルではボタンが2行目に折り返し、バーは6remになりますが、scroll-paddingとページの終わりの余白は5remのままです。ページの最後の2remは、どこまでスクロールしてもバーの下にあります。

flex-wrap: wrap をなくすと、バーはどの幅でも1行のままになり、場所が足りない分は商品名が譲ります。幅320ピクセルでは、最初の数文字だけを残して省略されます。バーはデザインどおりの4remを保つため、確保した余白は常に一致し、「お問い合わせ」も含め、ページのどの行もバーの外へスクロールできます。商品名はページの見出しにすべて表示されているので、失われる情報はありません。スマートフォンとデスクトップでの見た目も変わりません。ウィンドウに占める割合も変わりません。400%では、高さ16remのウィンドウの5rem、3分の1近くをバーが覆い続け、利用者は残りの部分で読むことになります。バーのほかの文字やボタンのラベルも、幅320ピクセルで価格と並んで1行に収まる長さにしてください。

どちらの方法でも、どのサイズでもページの最後がバーに隠れないため、1.4.10と2.4.11を満たします。バーを1行に保つ方法は、CSSの1行の削除と4行の追加、バーの商品名の省略で済む最小の変更ですが、400%ではバーがウィンドウの3分の1近くを覆い続けます。そのため「それだけでは不十分」としています。高さがあるときだけ固定する方法をおすすめします。同じ変更にメディアクエリーを一つ足すだけで、高さの低いウィンドウでは画面全体を読むために使えるようになり、スマートフォンとデスクトップでの見た目はデザインのまま保てます。

デザイナーにとっては、デザインファイルに描く画面が二つ増えます。幅320ピクセルのバーを商品名を省略した形で描き、開発者がちょうどその分を確保できるよう、横にバーの高さを書きます。400%の拡大表示で残る320 × 256ピクセルのウィンドウを、バーがフッターの後に置かれた形で描きます。バーには短いものだけを1行に並べます。価格とボタンなら幅320ピクセルに収まりますが、写真、サイズの選択、商品名までは収まりません。

ショップのプラットフォームのアプリや外部のスクリプトが追加するバーは、スタイルを変えられないことがよくあります。小さな画面向けの設定が提供元にあるかを確認し、マークアップが安定していれば自分のスタイルシートで位置を上書きし、更新のたびに確認し直してください。

ウィンドウの下部に浮くものはすべて数えてください。確保する余白はそのすべてを覆う必要があり、どれも400%で確認する対象です。

• バーの上のチャットボタン。フォーカス中のボタンを一部隠すチャットボタンのとおり、その隅も確保が必要です。
• 「ページ上部へ」ボタン。たいていスクロールした後にだけ現れます。
• Cookieバナー。初回の訪問ではバーに重なって独自の高さを足し、フォーカスを隠し、最後にしか届かないCookieバナーのとおり、ページの最後に置かれます。
• 固定ヘッダー。フォーカス中のリンクを隠す固定ヘッダーとバナーのとおり、同じ低いウィンドウの上部を占めます。

商品名を全部表示する必要がある場合は、折り返しを残し、代わりにバーを計測します。ResizeObserver で表示中のバーの高さに画面端からの距離を足して --bar-space に設定すれば、確保する余白もバーと一緒に大きくなります。ページの最後は隠れなくなりますが、低いウィンドウではバーがさらに大きな部分を占めるので、メディアクエリーと組み合わせてください。body の最後の子要素にしたバーに position: sticky と bottom: 1rem を指定する方法でも、ページの最後は隠れません。stickyのバーはページの中に自分の場所を持ち、最後にはそこに収まるからです。ただし、ページの途中のフォーカスには、バーの高さに合わせた scroll-padding-bottom が引き続き必要です。

高さの低いウィンドウでは、ページ本来のボタンを繰り返すだけのバーを display: none で隠しても、移動するのと同じように機能します。ただし、バーの中のものがすべてページにもある場合に限ります。解説書が挙げるもう一つの方法は、バーをしまうボタンです。「非表示」のような名前を付け、バーのTab順序の最初のほうに置き、訪問の間はバーをしまったままにします。どちらの方法でも、浮いている間はバーを1行に保つ必要があります。

ブレークポイントは em で指定しています。メディアクエリーの em はブラウザーの標準の文字サイズを指すため、ページのCSSではなくその設定に従います。ブラウザーの拡大表示はCSSピクセルでのウィンドウを小さくするので、このブレークポイントに届きます。バーとページの読める部分の両方が収まる高さを選んでください。30emなら、高さ1024ピクセルのウィンドウを200%に拡大してもバーは浮いたままです。

ページに重なって開くチャットのパネルも浮いた要素の一つで、キーボードで閉じられ、メッセージを読み上げる必要もあります。メッセージを読み上げないチャットウィジェットを参照してください。また、バーをマークアップのどこに書くかで、キーボードとスクリーンリーダーの利用者がいつ届くかが決まり、バーが開くパネルはその次に来る必要があります。フォーカス順の最後に回る、フローティングボタンとパネルを参照してください。