WCAG 2.2 ガイドライン「1.4.8 ビジュアルプレゼンテーション」Level AAA について
はじめに
WCAG 2.2の「1.4.8 ビジュアルプレゼンテーション」では、テキストの視覚的な表示について、ユーザーが適切にカスタマイズできるようにするための基準を定めています。この基準は、特に視覚障害や認知障害を持つユーザーがテキストを読みやすくするために重要です。
以下の要件を満たすための仕組みを提供する必要があります：
- 前景色と背景色をユーザーが選択できる。
- 1行あたりの文字数を80文字（CJK文字の場合は40文字）以下にする。
- テキストを左揃えまたは右揃えにする（両端揃えを避ける）。
- 行間は少なくとも1.5倍、段落間隔は行間の1.5倍以上に設定する。
- テキストを200％まで拡大しても、横スクロールを必要としない。
1. 前景色と背景色をユーザーが選択できる仕組み
ユーザーがテキストの色や背景色を調整できるオプションを提供することで、色覚異常や視覚の制約を持つユーザーが快適に利用できます。
実装方法
カラーピッカーの提供
HTMLとJavaScriptの例
<label for="textColor">文字色：</label>
<input type="color" id="textColor" value="#000000">
<label for="bgColor">背景色：</label>
<input type="color" id="bgColor" value="#ffffff">
<div id="textContainer" style="padding: 20px;">
<p>このテキストの色と背景を変更できます。</p>
</div>
<script>
const textColorInput = document.getElementById('textColor');
const bgColorInput = document.getElementById('bgColor');
const textContainer = document.getElementById('textContainer');
textColorInput.addEventListener('input', () => {
textContainer.style.color = textColorInput.value;
});
bgColorInput.addEventListener('input', () => {
textContainer.style.backgroundColor = bgColorInput.value;
});
</script>
2. 1行あたりの文字数を80文字以下に制限
行の幅が広すぎると、テキストの読みやすさが低下します。CJK（中国語、日本語、韓国語）の場合は40文字以下に制限します。
実装方法
CSSで列幅を設定
.text-block {
max-width: 40em; /* 1em = 現在のフォントサイズと同じ幅 */
margin: 0 auto;
line-height: 1.5; /* 行間を設定 */
}
HTML例
<div class="text-block">
<p>この段落は、1行あたりの文字数が制限され、読みやすく設計されています。</p>
</div>
3. テキストの左揃えまたは右揃え（両端揃えを避ける）
両端揃え（左右均等に配置）は、単語間のスペースが不均一になり、視覚障害や認知障害を持つユーザーにとって読みづらくなる可能性があります。
実装方法
CSSで左揃えまたは右揃えを指定
p {
text-align: left; /* または text-align: right; */
}
4. 行間と段落間隔を調整
行間を1.5倍以上、段落間隔を行間の1.5倍以上に設定します。
実装方法
CSSで設定
p {
line-height: 1.5; /* 行間 */
margin-bottom: 2.25em; /* 段落間隔 (行間の1.5倍) */
}
ユーザーが調整できる仕組み
HTMLとJavaScriptの例
<button id="increaseSpacing">行間を広げる</button>
<button id="decreaseSpacing">行間を狭める</button>
<div id="textBlock">
<p>行間と段落間隔を調整できるテキストです。</p>
</div>
<script>
const textBlock = document.getElementById('textBlock');
let lineHeight = 1.5;
document.getElementById('increaseSpacing').addEventListener('click', () => {
lineHeight += 0.1;
textBlock.style.lineHeight = lineHeight;
});
document.getElementById('decreaseSpacing').addEventListener('click', () => {
lineHeight = Math.max(1, lineHeight - 0.1);
textBlock.style.lineHeight = lineHeight;
});
</script>
5. テキストの拡大時に横スクロールを防止
テキストが200％まで拡大しても、横スクロールが必要にならないようにレイアウトを設計します。
実装方法
リキッドレイアウトを使用
.container {
width: 90%; /* ビューポートの幅に応じてサイズ変更 */
max-width: 800px;
margin: 0 auto;
}
相対的なフォントサイズを指定
body {
font-size: 100%; /* ユーザーのデフォルト設定に依存 */
}
h1 {
font-size: 2em; /* 基本フォントサイズの2倍 */
}
6. よくある失敗例とその対策
a. 色指定が固定
失敗例
p {
color: #000;
background-color: #fff;
}
- ユーザーが色を変更できない。
改善策
p {
color: inherit;
background-color: inherit;
}
b. 両端揃えの使用
失敗例
p {
text-align: justify;
}
- 両端揃えで単語間の間隔が不均一。
改善策
p {
text-align: left;
}
7. アクセシビリティのメリット
- 視覚障害への対応：コントラストや文字サイズを調整することで、視覚障害を持つユーザーも快適に閲覧可能。
- 認知障害への配慮：行間や段落間隔の適切な設定で、内容を理解しやすくなります。
まとめ
WCAG 2.2の「1.4.8 ビジュアルプレゼンテーション」は、テキストの見た目を調整する仕組みを提供することで、すべてのユーザーが情報を理解しやすくするための基準です。
実装ポイント
- 前景色と背景色の選択肢を提供。
- 1行あたりの文字数を制限。
- 左揃えまたは右揃えにして、両端揃えを避ける。
- 行間や段落間隔を適切に設定。
- 200％の拡大時にも横スクロールを不要にする。
これらを実践することで、アクセシビリティの高いウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。