拡大した文字が切れる、高さ固定のボックス

200%ではリンクに2〜3行が必要ですが、ヘッダーは80ピクセルのままで、残りを隠します。リンクはページ内にあり、Tabの順序にも含まれているため、誰にも見えない文字にフォーカスが移動します。

標準の文字サイズでは80ピクセルのままで、文字に必要なときだけ高くなります。200%ではリンクが複数の行に折り返し、ヘッダーもそれに合わせて広がるため、すべてのリンクが見え、フォーカス中のリンクも確認できます。HTMLは変わりません。背景の模様を切り取る必要がある場合は、専用の要素で切り取ります（実装の判断を参照）。

どちらの方法でも、200%ですべてのリンクを読めて操作でき、1.4.4を満たします。ヘッダーを広げる方法はCSS2行で済み、保守も必要ないため、まずこちらから始めてください。ただし固定表示のヘッダーでは、大きな文字で2〜3行になると、ノートパソコンの画面の3分の1ほどを占めたまま、スクロールしても残ります。リンクをまとめる方法は、どの文字サイズでもヘッダーを低く保てるため、固定表示のヘッダーや、1行を保つ必要があるデザインに向いています。その代わり、スクリプトと、動作を保ち続けるべきメニューが増えます。テーマに小さな画面用のメニューボタンがすでにある場合は、画面幅ではなく「収まるかどうか」で切り替えるだけで済むことがほとんどです。

ほかの固定の高さも探す。 高さが固定されているのは、ヘッダーだけとは限りません。お知らせバー、ボタン、バッジ、カードの見出し、タブの並びなど、文字を含む要素で、ピクセル指定の height、max-height、line-height を探します。リンクを縦方向の中央に置くための line-height: 80px は、折り返した行をすべて80ピクセルの高さにします。代わりに align-items と余白で中央に置きます。

単位を変えるだけでは直らない。 rem や em で指定した高さ（テクニックC28）は文字と一緒に大きくなりますが、比例して大きくなるだけです。ズームでページの幅が狭くなったり、翻訳が長くなったりして、想定より多くの行に折り返すと、増えた行はやはり切れます。相対単位が役立つのは、行数が変わらない場合だけです。

切り取るのは装飾だけにする。 何かを切り取る必要がある場合は、疑似要素や背景用のラッパーなど、文字を含まない要素で切り取ります。overflow-x: clip は横方向だけを切り取り、高さは広がります。overflow-x: hidden では、もう一方の方向がスクロール領域になるため、同じ効果は得られません。

以前の高さを前提にした値。 position: fixed のヘッダーには、body { padding-top: 80px } や、scroll-padding-top: 80px、top: 80px のサブメニューが組み合わされていることがよくあります。ヘッダーが広がるようになると、これらの値ではコンテンツがヘッダーの下に隠れます。通常の配置の中に場所を保つ position: sticky を使うか、ヘッダーの実際の高さを測って値を決めます。

まとめるときのフォーカス。 リンクのどれかにフォーカスがある状態でまとめると、フォーカスが失われます。メニューを閉じてメニューボタンにフォーカスを移してください。Escapeキーでもメニューを閉じ、フォーカスをボタンに戻します。テーマの小さな画面用のドロワーは、たいていこの動作をすでに備えています。

行数の制限。 全文にすぐ移動できる抜粋を数行で切るのはデザインの判断ですが、価格、ラベル、メニュー項目を切ると、コンテンツが失われます。

拡大を禁止しない。 viewport の meta 要素に user-scalable=no や2未満の maximum-scale を指定すると、スマートフォンでピンチ操作による拡大ができなくなり、それだけで1.4.4を満たせません。<meta name="viewport" content="width=device-width, initial-scale=1"> だけを指定します。