WCAG 2.2 ガイドライン「1.4.12 テキスト間隔」Level AA について
はじめに
WCAG 2.2の「1.4.12 テキスト間隔」では、テキストのスタイルプロパティ（行間、文字間隔、単語間隔、段落間隔）を調整しても、コンテンツや機能が損なわれないことを求めています。この基準は、視覚的な制約を持つユーザーや読みやすさを向上させたいユーザーに対応するために設けられています。
1. 必須の調整基準
以下のプロパティを調整しても、コンテンツや機能が失われないことが求められます：
- 行間（Line Height）
- テキストサイズの少なくとも1.5倍以上。
- 文字間隔（Letter Spacing）
- 0.12em以上の間隔。
- 単語間隔（Word Spacing）
- 0.16em以上の間隔。
- 段落間隔（Paragraph Spacing）
- 現在の行間の2倍以上。
2. 実装方法
a. CSSを使ったテキスト間隔の設定
基本スタイル
body {
line-height: 1.5; /* 行間 */
letter-spacing: 0.12em; /* 文字間隔 */
word-spacing: 0.16em; /* 単語間隔 */
margin-bottom: 2em; /* 段落間隔 */
}
HTML例
<div>
<p>これはテキストのサンプルです。</p>
<p>行間、文字間隔、単語間隔、段落間隔が調整されています。</p>
</div>
b. ユーザーによる間隔調整のサポート
ボタンで間隔を変更する
HTML
<button id="increaseSpacing">間隔を広げる</button>
<button id="resetSpacing">間隔をリセット</button>
<div id="content">
<p>これはテキストのサンプルです。行間や文字間隔を調整して読みやすくできます。</p>
</div>
JavaScript
const content = document.getElementById('content');
const increaseSpacingButton = document.getElementById('increaseSpacing');
const resetSpacingButton = document.getElementById('resetSpacing');
increaseSpacingButton.addEventListener('click', () => {
content.style.lineHeight = '2';
content.style.letterSpacing = '0.2em';
content.style.wordSpacing = '0.3em';
content.style.marginBottom = '2.5em';
});
resetSpacingButton.addEventListener('click', () => {
content.style.lineHeight = '';
content.style.letterSpacing = '';
content.style.wordSpacing = '';
content.style.marginBottom = '';
});
c. リキッドレイアウトでの対応
リキッドレイアウトを使用することで、間隔を調整してもテキストが途切れたり重なったりしないようにします。
CSS例
.container {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
p {
line-height: 1.5;
letter-spacing: 0.12em;
word-spacing: 0.16em;
margin-bottom: 2em;
overflow-wrap: break-word; /* テキスト折り返し */
}
3. よくある失敗例とその改善策
a. テキストが切れる
失敗例
p {
white-space: nowrap;
}
- 長いテキストが切れてしまい、読めなくなる。
改善策
p {
white-space: normal;
overflow-wrap: break-word;
}
b. 調整時にコンテンツが重なる
失敗例
p {
position: absolute;
top: 50px;
}
- 固定配置のため、間隔調整時に他の要素と重なります。
改善策
p {
position: relative;
margin-bottom: 2em;
}
c. 固定サイズのコンテナ
失敗例
.container {
width: 400px;
height: 200px;
overflow: hidden;
}
- コンテナサイズが固定されているため、内容が切れてしまいます。
改善策
.container {
max-width: 100%;
height: auto;
overflow: visible;
}
4. アクセシビリティのメリット
a. 視覚的な快適性の向上
- 行間や文字間隔が広がることで、視覚的に読みやすくなります。
b. 読解力の向上
- 認知障害を持つユーザーがより容易に内容を理解できます。
c. フレキシブルなレイアウト
- すべてのユーザーが個々のニーズに合わせて間隔を調整可能。
5. テスト方法
a. 手動テスト
ブラウザの開発者ツールを使い、以下の設定でテキスト間隔を調整し、内容が失われていないことを確認します：
- 行間：1.5倍
- 文字間隔：0.12em
- 単語間隔：0.16em
- 段落間隔：行間の2倍
b. 自動テストツール
- AxeやWAVEなどのツールでテキスト間隔を含むアクセシビリティをチェック。
まとめ
WCAG 2.2の「1.4.12 テキスト間隔」は、テキストスタイルの調整が可能で、コンテンツや機能が失われないことを求めています。
実装のポイント
- CSSで間隔を適切に設定し、調整をサポートする。
- ユーザーが行間や文字間隔を変更できる仕組みを提供する。
- レイアウトをリキッドデザインにして、間隔調整時にも要素が切れたり重なったりしないようにする。
これらを実践することで、すべてのユーザーにとって読みやすく、柔軟性のあるウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。