Level AAWCAG 2.2
1.4.12 テキストの間隔
行間・段落・文字・語の間隔を変更してもコンテンツや機能が損なわれない。
なぜ重要か
ディスレクシア
文字間隔や行間を広げることで読みやすさが大幅に改善。ユーザー独自のスタイルシートで対応。
ロービジョン
文字が詰まっていると判読困難。間隔を広げて一文字ずつ認識しやすくする。
認知障害
行間が狭いと行を見失いやすい。適切な間隔は集中力の維持を助ける。
カスタマイズ権
ユーザーが自分の読みやすい間隔に変更しても、コンテンツが壊れないことが重要。
ライブデモ
テキスト間隔の調整
WCAG基準のテキスト間隔（行の高さ1.5倍、文字間隔0.12em、単語間隔0.16em）を適用した際の表示を比較します。
固定高さのコンテナ（テキスト間隔変更時）
ウェブアクセシビリティとは、障害のある人々がウェブを利用できるようにすることです。これには視覚、聴覚、運動、認知の障害が含まれます。
テキストが切り取られている
固定サイズのボタン
テキストがボタンからはみ出す可能性
WCAGテキスト間隔の基準値:
- 行の高さ: フォントサイズの 1.5 倍以上
- 段落間隔: フォントサイズの 2 倍以上
- 文字間隔: フォントサイズの 0.12 倍以上
- 単語間隔: フォントサイズの 0.16 倍以上
ペルソナで理解する
高橋さん（28歳）— ディスレクシア
ブラウザ拡張機能で文字間隔と行間を広げて読んでいます。でも一部のサイトでは、間隔を変えるとテキストが重なったりボタンから溢れたりして、かえって読めなくなります。