サイトを拡大すると相談ボタンが隠れる？表示条件と直し方の確認

拡大方法と元の表示条件をそろえる

最初に、どのページの、どの説明と相談先を使うかを決めます。同じ原稿とブラウザーで通常表示を読み、その後、ページ全体を大きくする条件と、文字だけを大きくする条件を分けて確かめます。

対象は、設備点検のサービス条件を読んで相談先を探すページです。会社のWeb兼任担当は読む内容と進みたい場所を決め、制作担当は再現する環境と部品を調べます。表示が変わったという連絡だけで、本文を短くしたり、拡大を禁止したりする修正へ進みません。

ページ全体の拡大と、文字だけの拡大は別の設定

ページのズームでは、文字だけでなく画像なども大きくなります。文字だけの拡大では、画像の大きさを変えずに文字を大きくする設定を使います。両者は同じ結果になるとは限らず、狭いウィンドウへ変えるだけの確認や、OSの画面拡大とも区別します。

パソコン版Chromeでは、メニューのズームにある＋・－でページを拡大・縮小できます。Firefoxにもページのズームがあり、「表示」→「ズーム」→「文字サイズのみ変更」を選ぶと、ズーム操作の対象を文字だけにできます。名称や表示場所はOSと版で確認してください。Chromeの設定にあるフォントサイズの変更を、Firefoxの文字のみのズームと同じ倍率の機能だと扱わないでください。

確認用環境では、変更前のズームと文字設定を記録し、終えたら元へ戻します。サイト別の拡大率が保存される場合があるため、再訪したページを無条件に通常表示と思い込まないようにします。Chromeのパソコン向け案内とFirefoxの拡大方法で、使う機能を確認できます。

再現に必要な情報を、変更前に残す

• 対象URL、原稿・修正の版、確認する見出しと相談案内。
• 端末・OS、ブラウザー名と版、ページが表示される領域の元の幅と高さ。
• 拡大方法と倍率、文字設定、起きるまでの操作。ウィンドウ外寸や画面解像度を表示領域と混同しない。
• どの文が欠け、何と重なり、どこへ進めないか。未実施の操作は未確認と分ける。

最終の倍率だけでなく、そこへ上げる途中にも内容が欠ける条件がないかを見ます。画面幅だけの比較を整理する場合は、同じページの幅と操作の確認を併せて使えます。

同じ説明と相談案内を、二つの設定で読む

本文を読めるか、相談案内が見つかるか、キーで到達できるか、操作後にどこへ進むかを分けて見ます。案内が見えていても、到達や操作の結果まで確認できたことにはなりません。

次は架空の設備点検会社の原稿と、別々の拡大設定を使った模式例です。実サイトで見切れを観測した記録ではありません。固定高さや重なりは調べる場所の説明で、実際に適用されたCSSや原因を特定していません。

同じサービス説明を大きくしたとき、本文と相談案内はどこに残るでしょうか。

原寸画像を開く

図の関係を実測結果とせず、本文・案内・到達のどこを次に調べるかを、設定ごとに分けてください。

ページ全体の拡大を試す例は200%、文字だけを拡大する別の例も200%です。片方で使わない倍率は未確認として残しています。通常表示の100%を実測した記録ではなく、二例目を一例目の修正後にもしていません。

見る順序は、本文、案内、到達、操作

1. 本文を追う。見出しから最後の条件文まで読み、箱の端で切れる、別の部品に隠れる、左右へ追う必要がある箇所を分けます。
2. 案内を探す。相談案内の全文と、説明からのつながりを読みます。画面外へ続くだけなのか、通常のスクロールでも読めないのかを区別します。
3. キーで進む。通常のTab順で相談先へ進み、選択位置が分かるかを確認します。見えることと、キーで到達することは別です。
4. 行き先を確認する。許可された確認環境で通常リンクを開き、意図した相談画面へ進むかを見ます。画面への到達を送信・受付の完了として扱いません。

スクリーンショットには状態を残せますが、本文の全範囲、スクロール後、キーの移動やリンク先まで一枚で証明できません。この架空例では、実際の表示・キー到達・操作結果はどちらも未確認です。

見切れた要素と、実際に適用されているCSSを調べる

制作担当は、再現した箇所の要素を選び、その要素と親の箱に効いている指定を確認します。画面の形が似ているだけで「固定高さが原因」と決めず、文字量と配置の関係を追います。

Chrome DevToolsでは、対象を右クリックして検証し、Elementsで要素を選べます。Stylesには上書きされた指定も含む規則が表示され、Computedでは実際に適用される値を確認できます。CSSファイルに書いてある値だけを読んで、現在の表示に効いていると判断しないでください。調べ方はChromeのCSS参照で確認できます。

切れている文字から、囲っている箱へ追う

まず、欠けた文章の要素を選び、外側の案内枠も確認します。高さ・最大高さ、はみ出しの扱い、余白、折り返し、位置指定と、どの画面条件で切り替わった規則かを読みます。文章の箱が伸びても、親が一定の高さで内容を隠していれば、子の文字サイズだけを変更しても解消しない場合があります。

次に、相談案内が本文の流れに続いているか、別の位置へ固定されているかを見ます。絶対位置や固定表示そのものを禁止とせず、拡大時に本文や案内と同じ領域を占めていないかを確かめます。重なった相手と、親子どちらの指定が関係するかを記録します。

調査用環境で一つの指定を一時的に変えて表示が変わるか見ることは、原因候補を絞る助けになります。ただし開発者ツールの一時変更は、ソースへの保存や公開への反映ではありません。採用する変更は実ファイルへ戻して管理し、読み込み直した同じ版でも確かめます。

原因候補と、実証できたことを別に書く

「拡大すると本文の末尾が隠れた」は状態の記録です。「親の高さと内容を隠す指定を変えたときに再現が変わる」は調査結果です。「その指定が個別原因で、変更後に解消した」とするには、対象版へ反映して再確認する必要があります。原稿量や別のメディアクエリーなど、まだ見ていない条件は残します。

模式図の箱や切れた表現は、実要素を選んだ証拠になりません。本稿の二例の適用CSS、原因、修正内容は、図を読んだ後も未確認です。

確認できた条件に合わせて、該当部品だけを直す

調査した結果に合わせ、箱の寸法、折り返し、並べ方、固定表示との位置関係を必要な範囲で見直します。文字を小さく戻すことや拡大機能の無効化を、解消の代わりにしません。

固定高さと、隠す指定が関係していた場合

案内枠の高さを内容に応じて伸ばせるか、最低限の高さだけを残せるかを検討します。高さを変えると周囲の並びも変わるため、次の相談案内との余白まで確認します。はみ出しを見せる設定へ変えるだけでは、隣の部品へ重なる場合があります。独立したスクロール領域を採用するなら、その中の内容と操作先へキーでも進めるかまで確認します。

幅や折り返しが、説明と相談案内を押し合っていた場合

本文と案内を横並びにしている部品では、狭くなったときに縦へ続けるか、内容を折り返せるかを見直します。改行しない指定、長い名称、子の幅を縮められない指定が関係していないかを調べ、該当する箇所を直します。ボタンを読めないほど縮めたり、本文を画像化して形を固定したりしません。

固定された上部や案内に隠れていた場合

拡大後に固定部分が使う高さと、本文を読める残りの領域を見ます。固定表示を続ける必要性、表示条件、通常の流れへ戻す案、目次やキー移動後の停止位置を検討します。重なり順だけを上げると、別の内容を隠すこともあるため、その部品だけを前面へ出して終えないでください。

W3CのF69は、拡大時に文字が切れる・隠れる例を扱っています。ただし同文書には、ほかの十分な方法で基準を満たす場合への注意もあります。固定値を見つけただけで直ちに失敗とは判定しません。

C28には文字の大きさに応じた箱の寸法を使う手法がありますが、ほかの方法と組み合わせる例です。emやremへ変えるだけで全内容・全操作が保たれると決めず、実際の原稿と案内で確認します。サイト全体のpx指定を一括で消す作業へ広げないでください。

文字の200%拡大と、狭い表示領域への折り返しを分ける

文字を大きくして内容と機能を失わないことと、狭い表示領域へ内容を組み替えることは、関連していても別の基準です。倍率だけを並べた確認欄にせず、何を確かめる条件かを残します。

WCAGの1.4.4「テキストのサイズ変更」の解説は、キャプションと文字画像を除く文字を、支援技術なしで200%まで拡大しても内容と機能を失わない条件を説明しています。対応する拡大方法が少なくとも一つあることを扱い、あらゆる方法を必ず全部試すという一律の義務に置き換えません。業務の確認では、使うブラウザーと対応する方法を明記し、途中の倍率も含めて対象を確認します。

1.4.10「リフロー」の解説は、縦方向へ読む内容を幅320 CSS px相当で読む場合などを扱います。幅1280 CSS pxからページを400%に拡大するのは、その等価な確認条件の例です。実画面の解像度やウィンドウ外寸をその幅とせず、すべてのスマホへ同じ倍率を重ねる手順にもしません。

意味や利用に二次元の配置が必要な部分には例外がありますが、普通のサービス説明や相談先まで一括で除外するものではありません。表全体に必要な横方向の配置があっても、その各セルの文章まで無条件に折り返し不要とは扱いません。

スマホのピンチ拡大、OSの画面拡大、ページのズーム、文字のみの拡大は同じ条件ではありません。例えばFirefoxの公式案内は、ピンチ拡大ではページのレイアウトを変えないことを説明しています。どの操作を行ったかを書かずに、拡大した画面をすべて同じ試験結果へまとめないでください。

ここで参照するUnderstandingとTechniquesは解説や手法の資料です。本稿の模式例、個別の部品確認や一回の表示確認から、サイト全体のWCAG適合や実機対応を認定することはできません。

まとめ：同じ条件で再現し、部品を直して公開先まで確かめる

拡大表示で説明や相談先が隠れたら、方法と表示条件をそろえ、欠けた部品と適用CSSを調べます。確認できた関係に合わせて限定的に直し、元と同じ条件へ戻して本文・到達・操作を再確認します。

1. 再現する。ページと原稿の版、ブラウザー、元の表示領域、拡大方法と倍率、欠けた文と操作を残します。
2. 調べて直す。対象と親の要素に効く指定を確かめ、寸法・折り返し・配置の関係を限定して変更します。調査中の候補を原因確定にしません。
3. 変更版を確かめる。読み込み直した同じ条件に加え、通常表示、周辺の幅、長い原稿、近くの操作にも影響がないかを見ます。
4. 公開先でも確かめる。反映した版とURLを確認し、同じ拡大方法で本文、相談先、キーの到達、通常の行き先を読み直します。送信・受付の確認は別です。

修正した箇所の画面だけでなく、本文の先頭から末尾、案内との境界、移動後の停止位置まで読んでください。実機や別ブラウザーで未確認の条件は、そのまま残します。問題が見つからなかった一条件を、全端末や将来の原稿でも問題がないという保証へ広げません。

最初の一歩：自社のサービスページを一つ選び、読む条件文と相談案内を制作担当とそろえてください。「どの拡大操作で、どの文や案内が欠けたか」を再現し、実際に効いているCSSと修正後の同条件確認を一緒に戻してもらいます。

総合的な点検範囲は企業サイトのアクセシビリティ確認へ、書体・行高・一行の長さを選ぶ作業は文字を読みやすく組む方法へつなげて整理できます。必要ならWebサイトの支援相談から、対象ページと確認した条件を伝えられます。この案内自体は入力や送信の結果を示しません。