今日の問い
320 CSSピクセル相当まで狭めたとき、横へ往復せずに予約を変更できますか。
30秒でつかむ
レスポンシブデザインは、画面幅に応じて配置を変える設計手法です。WCAG 2.2のリフローでは、情報や機能を失わず、原則として二方向のスクロールを求めないことを確認します。
幅を狭めるだけでなく、文字の拡大、操作対象の大きさ、固定要素による隠れも一緒に見ます。ブレークポイントで一列になっただけでは、確認は終わりません。
30秒図解 · LESSON 27
対比図
縮小ではなく、優先度を組み替える
幅が変わっても内容、順序、操作可能性を保ちます。
- 01広い画面：横配置
- 02狭い画面：縦へ再配置
- 03マウス：精密な操作
- 04タッチ：十分な標的
CLUE · 見抜く手掛かり
拡大しても二方向スクロールしないか
TRAP · ありがちな罠
デスクトップを均等縮小する
原則
WCAG 2.2の成功基準1.4.10は、縦スクロールの内容を320 CSSピクセル相当の幅で表示したとき、情報や機能を失わず、二方向のスクロールを要求しないことを求めます。地図や大きなデータ表など、二次元配置が意味に必要な部分には例外があります。
まず、カードやフォームを一列へ積み直します。横幅を固定した子要素、長いURL、white-space: nowrap、画面からはみ出すダイアログを探します。横スクロールが必要なら、例外に当たるのか、単なる実装都合なのかを分けます。
順番も大切です。広い画面で左右に置いた「予約内容」と「確定操作」を一列にするとき、利用者の判断順に並ぶ必要があります。リフローは縮小ではなく、意味のある読み順への再配置です。
成功基準2.5.8では、ポインター操作の対象に24×24 CSSピクセル以上の大きさ、または規定の間隔を求めます。ただし、文中リンク、同等の別操作、ブラウザー既定の部品、意味上サイズを変えられない対象などには例外があります。数値だけで機械的に判定せず、基準本文の条件を確認します。
実機では、親指で押せるか、隣の操作を誤って押さないかも見ます。これはWCAGの最小条件とは別の使いやすさの確認です。基準への評価と、より使いやすくする判断を混同しないよう記録します。
成功基準1.4.10のリフロー条件と、成功基準2.5.8の操作対象サイズおよび例外を支える規範文書。
良い例と惜しい例
狭い画面での予約確認
スライダーを動かし、列数だけでなく、情報の順番と横方向のはみ出しを確認してください。
スライダーを動かし、列数だけでなく、情報の順番と横方向のはみ出しを確認してください。
一般的なモバイル幅
操作対象の大きさと、隣接する操作との間隔を実機でも確認します。
AIへの指示例
目的: 予約変更フローを320から1280 CSSピクセルで利用できるようにする
制約: 320 CSSピクセル相当で情報や機能を隠さない。二次元配置が必須でない部分に横スクロールを使わない。対象サイズの例外を無視しない
参照: screens/、primary-flow.md、tokens.json、WCAG 2.2の1.4.10と2.5.8
受入条件: 320、390、768、1280 CSSピクセルと400%拡大で主要フローを確認し、横方向のはみ出し、読み順、固定要素、操作対象の結果を記録する
確認問題
セルフチェック
1. 320 CSSピクセル相当で横スクロールが出ました。最初に行う判断はどれですか。
最終制作へ反映する
accessibility-audit.mdにリフロー確認を加える
講義内の15分で監査表を作り始め、別途約60分を確保する。主要フローを指定幅と拡大率で確認し、情報欠落、横スクロール、読み順、固定要素、操作対象の結果と例外判断を追記する。
Acceptance criteria
- 320、390、768、1280 CSSピクセルと400%拡大の確認結果が画面IDごとにある
- 横スクロールと24×24 CSSピクセル未満の対象は、該当する例外または修正方針まで記録されている
今日のまとめ
- リフローは、情報と機能を保ちながら一方向に読み進められる再配置
- 操作対象の最小条件には例外があり、基準本文に沿って判断する
- 次は、設計の仮説を利用者の行動で確かめる計画を作る