WCAG 2.2 ガイドライン「1.4.4 テキストのリサイズ」Level AA について
はじめに
WCAG 2.2の「1.4.4 テキストのリサイズ」では、補助技術を使用しなくても、テキストを200％まで拡大してもコンテンツや機能が失われないことを求めています。これにより、視覚的な制約を持つユーザーがコンテンツを快適に閲覧できるようになります。
この記事では、HTML、CSS、JavaScriptを使ってこの基準を満たす具体的な方法を初心者向けに解説します。
1. テキストのリサイズが必要な理由
- 視覚障害や高齢者：小さい文字が読みづらい場合があります。
- デバイスの違い：小型デバイスでは、文字が拡大されることが一般的です。
- ユーザーがブラウザのズーム機能やOSの設定を利用して文字を拡大した場合でも、ページが正しく機能する必要があります。
2. 基準を満たす実装方法
a. 相対的な単位を使用
テキストサイズを指定する際、絶対値（px）ではなく、相対的な単位（%やem、rem）を使用することで、拡大に柔軟に対応できます。
CSSの例
body {
font-size: 100%; /* ユーザーが設定したブラウザの基本フォントサイズに基づく */
}
h1 {
font-size: 2em; /* 基本フォントサイズの2倍 */
}
p {
font-size: 1em; /* 基本フォントサイズと同じ */
}
em：親要素のフォントサイズを基準に計算。rem：ルート要素（html）のフォントサイズを基準に計算。
b. テキストコンテナを拡大に対応させる
テキストが拡大した際、内容がクリップされたり、他の要素と重なったりしないようにします。
CSSの例
.container {
width: 90%; /* 固定幅ではなく相対的な幅を使用 */
max-width: 800px;
padding: 1em;
border: 1px solid #ccc;
}
%やmax-widthを使用してコンテナをリキッドレイアウト（可変幅レイアウト）にします。
c. レスポンシブデザインを採用
メディアクエリを使用して、画面サイズや解像度に応じたテキストサイズを設定します。
CSSの例
@media (max-width: 600px) {
body {
font-size: 120%;
}
}
@media (min-width: 601px) {
body {
font-size: 100%;
}
}
d. ブラウザのズーム機能を活用
テキストの拡大は多くの場合、ブラウザのズーム機能を通じて行われます。これに対応するため、コンテンツがズーム時にも正しく表示されるように設計します。
Viewportの設定
<meta name="viewport" content="width=device-width, initial-scale=1">
3. 追加のサポートを提供
a. テキストサイズ変更コントロール
ユーザーがページ内でテキストサイズを手動で変更できる機能を提供します。
HTMLとJavaScriptの例
<button id="increaseFont">文字を大きく</button>
<button id="decreaseFont">文字を小さく</button>
<div id="content" style="font-size: 1em;">
<p>これはサンプルテキストです。</p>
</div>
<script>
const content = document.getElementById("content");
const increaseFont = document.getElementById("increaseFont");
const decreaseFont = document.getElementById("decreaseFont");
let fontSize = 1;
increaseFont.addEventListener("click", () => {
fontSize += 0.1;
content.style.fontSize = fontSize + "em";
});
decreaseFont.addEventListener("click", () => {
fontSize = Math.max(0.5, fontSize - 0.1); // フォントサイズを0.5em以上に制限
content.style.fontSize = fontSize + "em";
});
</script>
4. よくある失敗例とその対策
a. 固定単位でテキストサイズを設定
失敗例
p {
font-size: 16px; /* 固定サイズ */
}
- 絶対値を使用すると、ズーム時にレイアウトが崩れる可能性があります。
改善策
p {
font-size: 1em; /* 相対単位 */
}
b. テキストが拡大すると要素が重なる
失敗例
<div style="font-size: 1em; width: 200px; height: 50px; overflow: hidden;">
<p>テキストがクリップされます。</p>
</div>
改善策
<div style="font-size: 1em; width: auto; height: auto;">
<p>テキストが正しく表示されます。</p>
</div>
5. アクセシビリティのメリット
a. 視覚障害や高齢者に配慮
文字を拡大できることで、視覚障害や老眼のあるユーザーでもコンテンツを快適に閲覧可能になります。
b. デバイス間の互換性向上
レスポンシブデザインを採用することで、異なるデバイスでも正しく表示されます。
まとめ
WCAG 2.2の「1.4.4 テキストのリサイズ」は、補助技術を使わずにテキストを200％まで拡大しても内容や機能が損なわれないことを求めています。
実装ポイント
- 相対単位（%やem、rem）を使用して柔軟性を確保。
- リキッドレイアウトを採用し、拡大時のレイアウト崩れを防止。
- ユーザーが直接テキストサイズを調整できるコントロールを提供。
これらを実践することで、視認性が向上し、より多くのユーザーに対応したウェブコンテンツを提供できます！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。