表を拡大しても読めるようにするには、本文とセル内の文章を折り返し、比較に必要な横移動を表の部分へ収めます。文字を小さくして全列を押し込む方法では、拡大して読みたい人の負担を減らせません。
制作担当へは、通常のスマホ表示に加え、ブラウザを拡大した状態の確認を頼んでください。表を読む前の見出し、表の中の値、下の出典、次の操作まで続けて使えるかを見ます。
HTMLでの表の見出しや読み上げの基本は比較表の作り方にまとめています。ここでは、拡大したときの折り返しと、横スクロールの範囲に絞ります。
リフローは何を求める？
リフローとは、画面の幅や拡大率に合わせて、内容を折り返して配置し直すことです。達成基準1.4.10はレベルAAの基準で、WCAG 2.2の基準の原文に載っています。
縦にスクロールして読む内容では、幅320 CSS px相当で、情報や機能を失わずに表示できることを求めています。意味や利用のために二次元の配置が必要な部分を除き、縦と横の両方向へスクロールする必要がない状態です。
原文の注記は、幅1280 CSS pxの表示領域を400％へ拡大した状態が、幅320 CSS pxに相当するとしています。W3Cのリフローの解説は、400％は面積ではなく縦と横それぞれの倍率だと補足しています。
これは端末の物理的な画素数の指定ではなく、CSS上の幅です。同じPCの画面でも、拡大すると一度に読める領域は狭くなります。スマホだけを対象にした基準として扱わないでください。
長い一行を読むために左右へ動かし、次の行では左へ戻る操作が続くと、読んでいた場所を見失います。本文が画面内で折り返せれば、上から下へ読み進められます。表の前後の説明にも、この読み方を保ちます。
表なら例外になる？
原文の注記は、二次元配置が必要な内容の例としてデータ表を挙げています。その箇所には “data tables (not individual cells)” とあります。表全体の行と列の関係に対する例外と、セル内の文章の折り返しを区別した説明です。
行と列を同時に見比べる表では、横へ動かせることが必要な場合があります。だからといって、表の長い説明文も、その前後の見出しも、折り返さなくてよいとはなりません。
| ページの部分 |
拡大時に確認すること |
| 見出しと導入文 |
表の幅に引っ張られず折り返す |
| 表全体 |
必要な行と列へ移動できる |
| 個々のセル |
長文を読める幅で折り返す |
| 出典と注記 |
表の外でも画面内に収まる |
| 検索や次のページ |
拡大後も操作できる |
解説は、表の前の見出しや検索欄、続きのページへの操作も例外に含まれないとしています。表を専用の枠に入れて、その中だけを横に動かす作りは表の横スクロールに書きました。ここでは、その枠の外とセルの中を見ます。
セルの長文を見直す
製造業の製品表で、仕様の一セルに材質、使用条件、設置の注意、保証の説明を全部入れた例を考えます。拡大時にそのセルが長い一行のままだと、値を読むだけでも横移動が続きます。
比較する短い条件を表へ残し、長い施工条件は製品の詳細へ移します。ただし、比較の結論を左右する制限を、詳細ページだけに隠してはいけません。条件があることは表にも短く示します。
会社名や資料名には折り返しを許し、数値と単位は読み違えないまとまりにします。すべてのセルへ一括で改行禁止を指定すると、短い数値を守るために長文まで横へ伸びます。
資料へのリンクも短い言葉にします。正式な資料名を省略したくなければ、名前は通常の本文へ置き、リンクは資料を開くための短い文字に分けます。説明そのものを削らず、改行できる場所を確保する作業です。
横移動をどこに残す？
表を枠に入れて横へ動かす形にしたら、拡大した状態で見出し、導入文、注記、相談ボタンまで、表と一緒に画面外へ流れないか確認してください。
列を固定する場合は、拡大後の幅も見ます。左の会社名を固定しても、その列がほとんどの幅を占めれば、値を読む場所が残りません。固定が役立つかは、通常表示と拡大表示で判断します。
横へ動かせることは、短い案内でも伝えます。スクロールバーが見えにくい環境でも、右側に列があると分かるようにします。キーボードを使う人が表の領域へ入り、必要な列へ移動し、次の内容へ抜けられるかも試してください。
はみ出しを隠して終わらせない
横にはみ出す部分を単に非表示にすると、右端の値やリンクへ届かなくなることがあります。スクロールバーが消えたことと、内容を失わずに読めることは別です。
情報を減らさず整理する
狭い幅で補助列を畳む設計なら、開く操作と項目名を残します。PCで読めた仕様がスマホや拡大時には取得できない、という作りにはしません。
値の詳しい条件を別ページへ移すなら、どの値の説明へ進むのかが分かるリンクにします。表の行名や条件名を保ち、リンク先で探し直さずに済む構成にします。
私たちはメーカー図鑑で、製品・メーカー、コスト、製品の強み、仕様、公式ページを共通の列にしています。同じ列を使う表は、一つの表示方法の判断が多くの比較ページへ及びます。この運営の事実は、拡大時の基準を達成済みという意味ではありません。共通の型を点検する必要がある例です。
固定表示が邪魔にならない？
表の列名を上へ固定すると、縦に長い表では参照しやすくなります。ただし、拡大後は列名も複数行になり、固定部分が大きくなることがあります。サイトの固定ヘッダーと重なり、読んでいる行を隠さないか確認してください。W3Cの解説も、固定表示が拡大時の読みを妨げる例を挙げ、狭い表示では固定をやめるか、利用者が表示を切り替えられるようにすることを強く勧めています。
会社名を左へ、列名を上へ固定する表では、二つの固定部分が交わる場所も見ます。交差部分に会社名や操作が隠れたり、横へ動かした後にどの列か分からなくなったりするなら、固定する範囲を減らします。
拡大時だけ固定を外す方法を選ぶなら、外した後も行と列を追えるかを確かめます。固定するという仕様を守ることより、読むための場所を残すことを優先します。実際に長文のある行を読んで判断してください。
注記と操作も一緒に見る
表の下の注記が小さいままだと、値を拡大しても意味を確認できません。注記だけ別の固定サイズにしていないか、リンクを押して戻った後も元の行へたどれるかを見ます。
並べ替えや絞り込みがある表では、操作後の件数と対象条件を、拡大した状態でも読める場所へ出します。表だけが横へ動き、選んだ条件まで画面外へ出てしまうと、何を比べているのか確認できません。
相談へのボタンが画面下へ固定されている場合も、表の最後の行や横スクロールの操作を覆わないかを確認します。隠れた部分を読むために拡大率を戻す必要があるなら、表示を直します。
これらは、表の例外を使えるかとは別の使いやすさの確認です。表そのものが横へ動くことを認めても、注記を読めなくしたり、操作へ届かなくしたりしてよい理由にはなりません。
拡大して確認する手順
確認用のページは、長い会社名や説明、注記がある表を選びます。短い値だけの表で確認を終えると、折り返しの問題を見落とします。
- 通常表示で表の見出しと値、出典を読む
- ブラウザの表示領域を幅1280 CSS pxにして、400％へ拡大する
- 本文が320 CSS px相当の幅で折り返すか見る
- 表の全列と、セル内の長文が読めるか確かめる
- 検索、並べ替え、次のページ、相談への操作を試す
- 拡大前後で情報や機能が失われていないか比べる
幅1280 CSS pxを400％へ拡大する確認と、幅320 CSS pxの画面での確認を組み合わせます。画面を狭くするだけでは分かりにくい、固定表示の重なりや拡大時の操作も見てください。
表が画像やPDFだけになっているときは、形式から見直します。形式の使い分けは統計表の公開形式へ、通常の端末幅の確認はスマホ表示の点検へ進めます。
使いやすさの点検と併せて、制作担当には、見えなくなった値、戻りにくい操作、読めない注記の場所を具体的に渡します。データ型サイトの表は、全列を置けた段階で完成とせず、拡大して最後まで読めるところまで確かめます。
仕様・出典の確認日：2026年10月27日。
