A11yDocs 検査項目エラー集 WCAG 1.4.10

WCAG 1.4.10: 320px 相当幅でリフローしても利用できるか確認する

400%拡大や320 CSS px相当の狭い表示でも、情報や機能を失わず一方向のスクロールで利用できるか確認します。

Level AA 確認方法: 手動確認

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

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

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

確認観点

  • ブラウザを400%まで拡大する、または320 CSS px相当の幅で表示して確認する
  • 本文、ナビゲーション、フォーム、モーダル、メニューが横方向と縦方向の両方のスクロールを求めすぎていないか確認する
  • 画像、動画、埋め込みコンテンツがビューポート幅に収まり、必要な操作が隠れないか確認する
  • データ表、地図、図版、ゲームなど二方向スクロールが必要な例外に該当するか確認する

人の判断が必要な例

  • 横スクロールがページ全体に発生していないか確認する
  • 固定ヘッダー、固定フッター、チャットボタンなどが本文や操作対象を覆っていないか確認する
  • 画像やメディアの縮小で重要な文字・操作ボタン・字幕が読めなくなっていないか確認する

補助ツール候補

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

生成メモ

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