WCAG 2.2の達成基準1.4.12「テキスト間隔」は、利用者が行間や文字間隔などを変更しても、文章や操作機能が失われないことを求めるLevel AAの基準です。
サイトの初期表示を指定値にそろえる基準ではなく、利用者による表示の上書きに耐えられる設計かどうかを確認します。
WCAG全体の位置づけから確認したい場合は、WCAG 2.2の基本とWebアクセシビリティに取り組む理由も参考になります。
「テキスト間隔」が求める四つの設定値
テストでは、ほかのスタイルプロパティを変えず、次の四つを同時に設定しても内容と機能が保たれるかを確認します。
| 確認する項目 | 設定値 | 意味 |
|---|---|---|
| 行の高さ | フォントサイズの1.5倍以上 | 行と行の間隔を広げる |
| 段落後の間隔 | フォントサイズの2倍以上 | 段落の後ろに空きを設ける |
| 文字間隔 | フォントサイズの0.12倍以上 | 文字と文字の間隔を広げる |
| 単語間隔 | フォントサイズの0.16倍以上 | 単語と単語の間隔を広げる |
「以上」とあるのは、各値がテスト時の基準になるためです。
段落後の間隔は「現在の行間の2倍」ではなく、「フォントサイズの2倍」を基準にします。
適合のためにサイト側が守ること
制作者が四つの値を初期スタイルとして指定する必要はありません。
利用者がブラウザ拡張機能やユーザースタイルなどで間隔を上書きしたときに、文字が隠れず、リンクやボタンなどの機能も使える状態を保つことが求められます。
サイト内に「間隔を広げる」ボタンを設置する方法もありますが、その機能自体が達成基準の必須要件ではありません。
高さを固定したテキスト領域を避ける
テキストを含む領域に固定の高さとoverflow: hiddenを組み合わせると、間隔を広げた際に後半の文字が切れることがあります。
内容に応じて領域が伸びる設計にすると、文字量が増えたときも表示を保ちやすくなります。
.container {
max-width: 100%;
height: auto;
overflow: visible;
}通常の文書の流れを保つ
段落を絶対配置すると、テキストの高さが変わっても後続要素の位置が動かず、文字や操作部品が重なる原因になります。
本文は通常の文書の流れに置き、要素間の余白で配置を整えます。
.content p {
position: static;
margin-bottom: 1em;
}一行固定を必要な場面だけに限る
white-space: nowrapで長い文章を一行に固定すると、文字間隔を広げた際にコンテナからはみ出しやすくなります。
折り返してよい本文では、通常の折り返しを許可します。
.content p {
white-space: normal;
overflow-wrap: break-word;
}ブラウザでの手動テスト手順
見た目と操作の変化を確認するには、対象ページに四つの値を適用してから、表示と機能を一つずつ点検します。
- 本文、カード、ナビゲーション、フォームなど、テキストを含む代表的な画面を開きます。
- 開発者ツールやテスト用のユーザースタイルで、四つの設定値を同時に適用します。
- 文字の欠け、切り取り、重なり、意図しない横スクロールがないかを確認します。
- リンク、ボタン、入力欄などが見えたままで、操作できるかを確認します。
- 画面幅によってレイアウトが変わるサイトでは、主要な表示幅ごとに同じ確認を行います。
検証用CSSの例は次のとおりです。
* {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
p {
margin-bottom: 2em !important;
}このCSSは完成デザインとして常時適用するものではなく、上書き後の状態を再現するための例です。
自動チェックツールの結果だけでは、表示された文章が実際に欠けていないか、操作が妨げられていないかまで判断しきれないため、最後は画面を見ながら操作して確認します。
公開後の試験と改善を継続する方法は、公開後のWebアクセシビリティ運用で整理しています。
よくある誤解
| 誤解 | 確認すべき内容 |
|---|---|
| 指定値を初期デザインに使えば適合する | 指定値への上書き後も、内容と機能が失われないことを確認する |
| 間隔を変更するボタンが必須である | サイト独自の変更機能ではなく、利用者によるスタイルの上書きを妨げないことが基準になる |
| 文字が切れなければ十分である | 重なりや横スクロールに加え、リンクやボタンなどの機能も確認する |
| デスクトップ表示だけを調べればよい | レイアウトが切り替わる主要な画面幅でも確認する |
実装とテストの確認項目
- 本文やラベルを固定の高さに閉じ込めていないか。
- テキスト領域に不要な
overflow: hiddenを指定していないか。 - 絶対配置したテキストが、間隔の変更後にほかの要素と重ならないか。
- 折り返せる文章を
white-space: nowrapで固定していないか。 - 四つの設定値を同時に適用しても、文章と操作機能を利用できるか。
- 主要な画面幅とコンテンツ量の違いを含めて確認したか。
日本語本文の文字サイズや行間を設計する際は、日本語のタイポグラフィと可読性もあわせて確認できます。
Webアクセシビリティ対応を継続するために
テキスト間隔への対応は、CSSを一度直して終える作業ではなく、画面やコンテンツの追加後も崩れがないかを確かめる必要があります。
当社では、Webアクセシビリティの導入と改善を支援するUUU ウェブアクセシビリティを提供しています。
自社サイトの確認方法や継続的な改善に関心がある方は、サービスの詳細をご覧ください。