Accessibility
文字間隔変更でも読めるUIにする
文字間隔の変更は、読みやすさを確保するためのユーザー調整です。固定高さや小さなボタンに文字を閉じ込めていると、拡大や間隔変更で破綻します。
ui.design: text-spacing
まず確認する症状
- テキスト間隔を広げると、ボタン内の文言が欠ける。
- カードやナビの高さが固定で、行が重なる。
- 自動検査で同じ種類の所見が複数箇所に出ているのに、原因がコンポーネント単位で整理されていない。
- 見える状態だけ整っており、名前、役割、順序、代替テキスト、拡大時の状態が検証されていない。
なぜ問題か
- 読字に困難があるユーザーは、文字間隔や行間を調整して読むことがあります。
- 長い日本語・英語・多言語文言にも同じ問題が再発します。
- アクセシビリティ修正は個別箇所の穴埋めではなく、再利用コンポーネントと入力・ナビゲーションの契約を直す作業です。
- WCAGの達成基準に対応する根拠を残すと、人間レビュー、AI修正、再スキャンの判断が揃いやすくなります。
診断で見る指標
line-height
固定height
overflow hidden
折り返し
text-spacing検査
該当WCAG達成基準
再利用コンポーネントでの再発有無
キーボードだけでの完了可否
スクリーンリーダーが読む名前と状態
ボタン内2行表示
長い日本語/英語
overflow指定
修正方法
最小修正
固定高さを外す
ボタン、カード、タブは内容に応じて高さが伸びるようにします。
推奨修正
折り返しと余白を許可する
長い語や2行文言を想定し、paddingとmin-heightで安定させます。
さらに改善
UI文言の長さをテストする
日本語、英語、長い商品名、エラー文で崩れないか確認します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04該当所見が単発修正か共通コンポーネント由来かを分け、再発しやすい原因を修正している。
- 05自動検査だけでなく、キーボード操作、拡大表示、読み上げ名、スマホ操作のうち該当する観点を確認している。
- 06文字間隔や行間が広がっても、ボタン、タブ、カード、ナビの文字が欠けたり重なったりしない。
- 07長い文言は、折り返し、省略、レイアウト変更のどれで扱うかコンポーネントごとに決まっている。
コーディングエージェント向け修正指示
目的: 文字間隔変更時にテキストが欠けたり重なったりしないよう、固定高さ、overflow、折り返し、余白を修正してください。ボタンやカードのレイアウトシフトも確認してください。 追加確認: 固定heightとoverflow hiddenを優先的に確認し、内容に応じて伸びるUIへ直してください。
参考資料
よくある失敗
- overflow hiddenで欠けた文字を隠す。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- ariaを追加して見た目と機械可読名を矛盾させる。
- 自動検査の消滅だけを完了条件にし、実際に操作できるかを確認しない。