Accessibility
Guidelines

1.4.10 リフローできる

詳細

コンテンツを拡大して閲覧している場合、内容を読み込むためには左右にスクロールしなければならず、理解の妨げとなる。 そのため拡大(400%)しても適切にリフローされることが望ましい。

ただし次のようなコンテンツは、2次元レイアウトが情報を伝える上で重要なため例外とする。

  • ビデオ
  • 画像
  • 地図
  • データテーブル
  • コンテンツを編集するツールバーを提供するインターフェース

具体例

  • メディアクエリやCSSグリッドレイアウトを使用してレスポンシブウェブデザイン対応する
  • コンテンツ内にレイアウトを切り替えるオプションを提供する
  • ナビゲーションメニューは、拡大するとハンバーガーアイコンにかわる

良い実装例

メディアクエリや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">

テスト・チェック方法

画面を400%まで拡大した時、適切にリフローされているか次の項目を確認する。

  • 左右にスクロールせず閲覧できるか
  • 覆い隠されてしまうコンテンツはないか

参考文献