1.4.10 リフローできる
適合レベル
AA
※各レベルについては適合レベルとはをご覧ください
概要
コンテンツを拡大して閲覧している場合、内容を読み込むためには左右にスクロールしなければならず、理解の妨げとなる。 そのため拡大（400%）しても適切にリフローされることが望ましい。
ただし以下のようなコンテンツは、2次元レイアウトが情報を伝える上で重要なため例外とする。
- ビデオ
- 画像
- 地図
- データテーブル
- コンテンツを編集するツールバーを提供するインターフェース
実装方法
- メディアクエリやCSSグリッドレイアウトを使用してレスポンシブウェブデザイン対応する
- コンテンツ内にレイアウトを切り替えるオプションを提供する
- ナビゲーションメニューは、拡大するとハンバーガーアイコンにかわる
悪い実装例
- CSSを固定サイズで指定する
- コンテンツを
position: absoluteなどで固定する - 拡大・縮小を不可能にする指定をする
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
良い実装例
メディアクエリやCSSグリッドレイアウトを使用してレスポンシブに対応する。
テスト・チェック方法
画面を400%まで拡大した時、適切にリフローされているか以下の項目を確認する。
- 左右にスクロールせず閲覧できるか
- 覆い隠されてしまうコンテンツはないか