Accessibility
320px幅とテキスト拡大で崩れない画面にする
リフローは小さい画面だけの話ではありません。ズーム、文字間隔、ユーザー設定で表示条件が変わっても、内容と操作が失われないことを確認します。
ui.design: reflow-320ui.design: text-spacing
まず確認する症状
- 320px幅で横スクロールが出る。
- テキスト間隔を変えるとボタンやカードから文字がはみ出す。
- 自動検査で同じ種類の所見が複数箇所に出ているのに、原因がコンポーネント単位で整理されていない。
- 見える状態だけ整っており、名前、役割、順序、代替テキスト、拡大時の状態が検証されていない。
なぜ問題か
- 拡大表示を使うユーザーにとって、横スクロールや重なりは大きな操作負荷です。
- 固定幅や長い単語は、スマホ表示や多言語展開でも再発します。
- アクセシビリティ修正は個別箇所の穴埋めではなく、再利用コンポーネントと入力・ナビゲーションの契約を直す作業です。
- WCAGの達成基準に対応する根拠を残すと、人間レビュー、AI修正、再スキャンの判断が揃いやすくなります。
診断で見る指標
320px幅の横スクロール
text-spacing適用後の重なり
固定width/min-width
長い文言の折り返し
該当WCAG達成基準
再利用コンポーネントでの再発有無
キーボードだけでの完了可否
スクリーンリーダーが読む名前と状態
テーブルやコードの扱い
長いURL/単語
ズーム時の固定要素
修正方法
最小修正
固定幅をmax-widthへ置き換える
画面幅を超えるwidthやmin-widthを見直し、折り返し可能にします。
推奨修正
グリッドの最小幅を調整する
カードや表はauto-fit、minmax、横スクロール許容範囲を明確にします。
さらに改善
長い文言に耐える
ボタン、タブ、バッジは長い語でも破綻しない折り返し/省略ルールを持ちます。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04該当所見が単発修正か共通コンポーネント由来かを分け、再発しやすい原因を修正している。
- 05自動検査だけでなく、キーボード操作、拡大表示、読み上げ名、スマホ操作のうち該当する観点を確認している。
- 06320px幅、200%ズーム相当、長い文言でも、本文や操作が横スクロールなしに利用できる。
- 07横スクロールを許容する要素は、表やコードなど必要な箇所に限定され、周囲の説明が欠けない。
コーディングエージェント向け修正指示
目的: 320px幅とテキスト間隔変更時に、横スクロール、文字の重なり、CTAのはみ出しが起きないようCSSを修正してください。固定寸法はresponsiveな制約へ置き換えてください。 追加確認: overflow hiddenで隠す前に、max-width、minmax、折り返し、縦積み、テーブルの代替表示を検討してください。
参考資料
よくある失敗
- overflow hiddenで問題を隠し、読めない文字を残す。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- ariaを追加して見た目と機械可読名を矛盾させる。
- 自動検査の消滅だけを完了条件にし、実際に操作できるかを確認しない。