1.4.12 テキストの間隔

要件

ユーザーが以下の間隔スタイルを適用した場合でも、コンテンツが損なわれず、機能・意味が保持された状態で表示されること。

指定されるスタイルの条件（CSS）

スタイル	値（最低限）
行の高さ（line-height）	少なくともフォントサイズの 1.5倍
段落の間隔（paragraph spacing）	少なくとも フォントサイズの2倍
文字間（letter-spacing）	少なくとも 0.12em
単語間（word-spacing）	少なくとも 0.16em

内容と意図

• 視認性や可読性を向上させるために、利用者が自分にとって読みやすいようCSSカスタマイズすることがあります。
• その際に、テキストが重なったり切れたりしないように、開発者は柔軟なレイアウト設計をしておく必要があります。

達成している状態の例

• テキストコンテンツにユーザーCSSを適用しても、はみ出しやレイアウト崩れが起きない
• 行間や文字間を広げても、リンクやボタンの文字が切れない・重ならない
• 文章構造（段落・リスト・見出し）が維持されて表示される

達成していない例

• 行間を1.5にするとテキストがボックスからはみ出す
• 文字間を広げたことで単語の折り返しが不自然になる
• テキスト同士が重なって読めない状態になる

利点

利点	内容
読みやすさ向上	視覚・認知障害のある方も快適に読める
個別調整が可能	自分のスタイルシートで文字間を広げられる
柔軟なレイアウト設計の推進	コンテンツの柔軟性が増し、他の基準達成にも貢献

開発者向けアドバイス

• emやrem単位でレイアウトを設計し、固定pxによる制約を避けるのが望ましい。
• overflow: hidden;などでテキストの表示を制限するCSSを避ける。
• 検証には、Text Spacing Bookmarklet などを活用。

一覧に戻る