適合レベル
AA
※各レベルについては適合レベルとはをご覧ください
概要
ブラウザの拡大機能を使っても、文字が重なったりせず、200%まで問題なく拡大表示できるようにする。
具体的な実装方法
1.4.4 AA
1. ⭕️良い例
相対単位を使用する
- フォントサイズやレイアウトの指定に、
rem、em、パーセント（%）などの相対単位を使用します。これにより、ユーザーが基本の文字サイズを変更した際に、ページ全体の要素が追従して拡大・縮小します。
実装例 (CSS)
html {
font-size: 100%; /* 基本のフォントサイズ */
}
h1 {
font-size: 2.5rem; /* 基本の16pxの2.5倍 = 40px */
}
.container {
width: 80%; /* ビューポートの80%の幅 */
}リキッドレイアウトを採用する
- コンテナの幅をパーセント（
%）で指定し、メディアクエリと組み合わせることで、画面サイズやテキストサイズに応じてレイアウトが柔軟に変化するように設計します。
2. ❌悪い例
フォントサイズをpxで指定する:
なぜ問題なのか
- ピクセル（
px）は絶対単位のため、ユーザーがブラウザのデフォルト文字サイズを変更しても、その設定が反映されません。テキストの拡大機能を使った際に、テキストがコンテナからはみ出す原因となります。
改善策
remやemなどの相対単位を使用します。
テキストを画像として埋め込む:
なぜ問題なのか
- テキストを画像（JPEG, PNGなど）にしてしまうと、拡大した際に画質が劣化してギザギザになり、読みにくくなります。また、テキストではないため、拡大機能が適用されません。
改善策
- テキストはHTMLテキストとして記述します。装飾目的で画像化が必要な場合は、SVG（ベクター画像）を使用することを検討します。
3. プラットフォーム別の実装
CSS
rem,em,%,vw,vhといった相対単位を主に使用してスタイリングします。
メディアクエリ
- 画面幅に応じてスタイルを切り替えるメディアクエリを使い、テキストが大きくなっても適切に表示されるようにレイアウトを調整します。
4. 特殊なケースへの対応
例外
- この達成基準は、テキストの拡大によって意味や操作性が損なわれる特定のケースを許容します。例えば、キャプションや画像化された文字は例外です。ただし、これらは必要不可欠な場合に限定されるべきです。
確認観点
1.4.4 AA
1. 定量的な基準の担保
自動チェックツールでの合格
- ツールでレイアウト崩れを完全に検出することは困難です。手動でのブラウザテストが必須です。
チェックリストの達成度:
2. 定性的な基準の担保
レビュー
- CSSのコードレビュー時に、
pxなどの絶対単位がフォントサイズやコンテナの幅・高さに使われていないか、相対単位が意図通りに使われているかを確認します。
専門家による監査
- 専門家が、様々なブラウザ（Chrome, Firefox, Safariなど）とそのズーム機能（ページ全体のズームとテキストのみのズームの両方）を使い、200%まで拡大した際の表示と操作性をテストします。特に、動的なコンテンツや複雑なレイアウトを持つページで問題が発生しないかを重点的に評価します。