移行中の知識
リフロー
Reflow
定義
リフロー（reflow）とは、viewportやzoom条件が変わった時に、contentが読み取り・操作できる形へ再配置され、不要な二方向scrollへ依存しないように適応することです。WCAG 2.2 Success Criterion 1.4.10（Level AA）は、縦方向にscrollして読むcontentでは320 CSS px相当の幅、横方向にscrollして読むcontentでは256 CSS px相当の高さで、情報や機能を失わず二方向scrollを避けて提示できることを求めます。二次元layoutを本質的に必要とするcontentには例外があります。単にdesktop layoutを縮小することとは異なります。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
desktopと狭いviewportをまたぐWeb form
2column formを1columnへ組み替える
見るポイント
field幅だけを縮めず、label・input・help textの関係を保ちながらcolumnを再構成する。読み順とfocus orderが視覚順序から外れないかも確認する。
多列の業務table
data tableの狭幅対応
見るポイント
tableが二次元関係を本質的に必要とするかを見極め、必要ならhorizontal scrollを限定して許容する。すべての表をcardへ崩せばよいという一般則にはしない。
注意
誤解しやすい点
- responsive designを「画面に収まるまで全体を縮小すること」と考える。
- 320 CSS pxというWCAG条件を、すべてのdesign breakpointを320pxにする推奨値だと読み替える。
- 横書き・縦書きなどcontentのscroll方向を区別せず、320 CSS px幅と256 CSS px高さを同じ条件として扱う。
- 例外のある二次元contentまで無理に一列化し、比較・理解に必要な空間関係を壊す。
関連
関連する概念
出典