アクセシビリティ資料 検査項目事例集 WCAG 1.4.10

WCAG 1.4.10: リフロー

ブラウザを400%に拡大した状態や、画面幅320px(CSSピクセル)相当の狭い表示領域でも、情報や機能を損なわず、縦スクロール(または横スクロール)の一方向だけでコンテンツ全体を閲覧・操作できるようにします(地図やデータ表など二次元レイアウトが不可欠なコンテンツを除く)。

Level AA 確認方法: 手動確認

意図的な失敗例: 320px幅で横スクロールが発生する

固定幅テーブルによりリフローできません。

番号長い説明操作
1320px幅では横スクロールが必要です

確認観点

  • ブラウザの表示幅を320px相当に縮小するか、1280pxの画面で400%ズームを適用する
  • 縦スクロールだけで全コンテンツが閲覧でき、横スクロールバーが発生していないか確認する(横書き文書の場合)
  • メニュー、ボタン、フォームなどの操作部品が画面外にはみ出して操作不能になっていないか確認する
  • データテーブルや地図など、二次元的な配置が本質的に必要なコンテンツは例外として扱う

人の判断が必要な例

  • 文字サイズや行間が極端に崩れたり、文字がコンテナからあふれて重なっていないか確認する
  • 固定ヘッダーやフッターが画面の大部分を占有し、コンテンツの閲覧を妨げていないか確認する

補助ツール候補

  • reflow-320
  • responsive-width
  • fixed-header-overlap

生成メモ

  • デバイス・環境検証が必要