AA WCAG2.1 NEW

1.4.10 リフロー

WCAG 2.2 における 達成基準 1.4.10「リフロー」 は、等級 AA の要件であり、主にズーム表示やモバイル画面など、異なる表示環境でも情報が欠けたり操作が困難にならないように設計されているかを評価するものです。

[参照] https://waic.jp/translations/WCAG22/#reflow
目次

要件

  • 1.4.10「リフロー」は、ズーム拡大やモバイル環境での表示崩れを防ぐための重要な基準です。
  • 技術的にはレスポンシブWebデザインの徹底と可変レイアウトの設計が鍵となります。
  • 特に製品情報や長文記事、フォームなどが含まれるBtoBサイトではこの対応がUXとアクセシビリティの両面で大きな差を生みます。
要素内容
表示幅横幅 320 CSS ピクセル（＝スマホ縦画面相当）に対応
ズーム倍率最大400%に拡大しても閲覧可能
スクロール方向水平方向のスクロールを必要としない（縦スクロールのみで情報が閲覧できる）
例外地図・グラフ・画像ギャラリーなど、構造上どうしても横スクロールが必要なものは除外

対象コンテンツの例

  • テキスト本文
  • ナビゲーションメニュー
  • フォーム（ラベル・入力欄）
  • 表、リスト、カード
  • ボタンやチェックボックスなどの操作要素

不適切な例

ケース問題点
文字を 400% に拡大すると横スクロールが必要になるレイアウトが崩れており視認性が低い
モバイル幅ではナビゲーションメニューがはみ出るスクロールでの操作が困難
入力フォームが縮小表示され、ラベルが隠れてしまう入力補助が失われる

適切な実装例

ケース問題点
テキストが400%拡大しても折り返して表示flex-wrap や word-break を利用
レスポンシブレイアウトでモバイル幅に対応スクCSS Media Queries を活用
入力フォームのラベルがズーム時も正しく表示されるラベルと入力欄の間隔を調整、縦積み表示など

実装ポイント

  • レスポンシブWebデザイン（RWD）を採用する
  • viewport メタタグを正しく設定
  • max-width, flex-wrap, overflow-wrap などCSSプロパティで可変幅に対応
  • 絶対配置や固定幅 (width: 1000px;) で要素を制限しない

テスト環境

  • スクリーンサイズ：320×256 CSSピクセル
  • ズーム倍率：400%
  • テストブラウザ：Chrome、Firefox、Edge、Safari

利点

  • モバイルユーザーにも情報を提供可能
  • 高齢者・弱視ユーザーが拡大表示でも利用できる
  • レイアウトが柔軟になり、デバイス対応力が向上
  • ユーザー体験の一貫性を保てる

一覧に戻る
お問い合わせ

当社では、ウェブサイトの診断や改善方法のご提案を通じて、
すべてのユーザーにとって使いやすいウェブづくりをサポートしています。
ご相談・ご依頼は、こちらからお気軽にお問い合わせください。

お問い合わせフォームへ