適合レベル
AA
※各レベルについては適合レベルとはをご覧ください
概要
お客さまが設定した文字や行の間隔を広げても、表示が崩れたり情報が隠れたりしないようにする。
具体的な実装方法
1.4.12 AA
1. ⭕️良い例
テキストを含むコンテナのサイズを、テキストのサイズに応じて柔軟に変化するようにCSSを記述します。
ポイント:
- テキストコンテナの高さは固定せず、
min-heightを使用するか、高さを指定しないようにします。 - コンテナのサイズ指定には、
em,rem,%などの相対単位を使用します。 - CSSでテキストの間隔を指定する際に、
!importantを使用しないようにします。これにより、利用者が自身のスタイルで上書きしやすくなります。
実装例 (CSS)
/* 良い例: 高さを固定せず、コンテンツに応じて高さが変わる */
.text-container {
padding: 1em;
border: 1px solid #ccc;
}
/* 良い例: やむを得ず高さを指定する場合は min-height を使用 */
.card {
min-height: 15em;
background-color: #f0f0f0;
}2. ❌悪い例
コンテナの高さを固定
heightプロパティでテキストコンテナの高さをピクセル値などで固定している。利用者が行間を広げると、テキストがコンテナの下からはみ出してしまいます。
overflow: hidden の使用
- 高さが固定されたコンテナに
overflow: hiddenが指定されていると、はみ出したテキストが隠されてしまい、利用者はその存在に気づくことさえできません。
!important の使用
p { line-height: 1.4 !important; }のように、!importantを使ってテキストの間隔を強制している。
なぜ問題なのか
これらの実装は、利用者が自身の環境でテキストの間隔を調整する権利を奪い、結果としてコンテンツを読めなくしてしまう直接的な原因となります。
改善策
heightプロパティの代わりにmin-heightを使用するか、高さの指定自体を見直します。!importantの使用は避け、詳細度（Specificity）を意識したCSS設計を行います。
3. プラットフォーム別の実装
主にCSSの実装方法に関するガイドラインです。コンテンツの量に応じてレイアウトが柔軟に変化する、リキッドレイアウトやレスポンシブデザインの原則に従うことが重要です。
4. 特殊なケースへの対応
テキストの画像
- 画像化されたテキストには、この達成基準は適用されません。
PDF文書
- テキストの間隔を調整できない固定レイアウトのPDF文書は、この達成基準の対象外です。
確認観点
1.4.12 AA
1. 定量的な基準の担保
ブラウザの開発者ツールやブックマークレットによる確認
以下のCSSをページに適用し、コンテンツの損失（テキストの重なり、はみ出し、非表示）が起きないことを確認します。
- 行の高さ (
line-height): フォントサイズの 1.5倍 以上に設定 - 文字の間隔 (
letter-spacing): フォントサイズの 0.12倍 以上に設定 - 単語の間隔 (
word-spacing): フォントサイズの 0.16倍 以上に設定 - 段落の間隔 (
marginなど): フォントサイズの 2倍 以上に設定
確認には、TPGiが提供する「Text Spacing Bookmarklet」などのツールを利用すると便利です。
2. 定性的な基準の担保
レビュー
- コードレビューにおいて、テキストを含む要素に
heightが固定値で指定されていないか、また!importantが不適切に使用されていないかを確認します。
専門家による監査
- アクセシビリティ専門家が、実際にテキストの間隔を上記の基準値に変更し、ページ全体のレイアウトが崩れたり、情報が失われたりしないかを視覚的にテストします。