WCAG 2.2の達成基準「1.4.4 テキストのリサイズ」は、文字を大きくしたときも、内容を読めて機能を利用できるページを求めています。
実装では相対単位を選ぶだけでなく、実際に200％まで拡大し、文字の欠落や操作不能が起きないかを確かめる必要があります。
WCAG 2.2の全体像を確認したい場合は、基準の目的と実務への取り入れ方を解説した記事もあわせてご覧ください。
達成基準1.4.4が求めること
達成基準1.4.4はLevel AAの基準です。
キャプションと画像化された文字を除き、補助技術を使わなくてもテキストを200％まで拡大でき、内容や機能が失われないことを求めています。
ここでいう「補助技術を使わない」とは、利用者に専用ソフトの用意を求めないという意味です。
ブラウザのズームなど、一般に利用できる拡大手段で文字を大きくできるようにします。
内容や機能が失われる状態とは、たとえば次のような状態です。
- 文章やボタンのラベルが途中で切れる
- 文字が別の要素に重なって読めない
- 拡大後にリンク、ボタン、フォームを操作できない
- ナビゲーションや案内文が画面外に隠れ、到達する手段がない
見た目が拡大前と完全に同じである必要はありません。
折り返しや配置の変化を許容しながら、情報と操作を保つことが判断の中心です。
200％拡大に対応しやすいCSS設計
文字サイズには相対単位を活用する
相対単位とは、別の寸法を基準に大きさが決まる単位です。
%：親要素などの基準値に対する割合em：その要素で使われる文字サイズを基準にする単位rem：ルート要素であるhtmlの文字サイズを基準にする単位
remやemを使うと、見出しと本文の比率を保ったまま文字サイズを調整しやすくなります。
html {
font-size: 100%;
}
body {
font-size: 1rem;
line-height: 1.6;
}
h2 {
font-size: 1.5rem;
}ただし、pxを使っただけで達成基準1.4.4に不適合になるわけではありません。
ブラウザのズームで適切に拡大できる場合もあるため、単位の種類だけで判定せず、200％にした結果を確認します。
文字サイズ、行間、段落幅を含む読みやすさの設計は、Webアクセシビリティに配慮したテキストサイズの最適化でも詳しく解説しています。
テキストを囲む領域に余裕を持たせる
文字だけを拡大できても、コンテナの高さが固定されていれば、増えた行が切れてしまいます。
文章を含む要素には、内容に応じて高さが伸びる設計を使います。
.container {
width: 90%;
max-width: 50rem;
min-height: 3rem;
padding: 1rem;
}heightで高さを固定する代わりに、必要な最小値だけをmin-heightで指定すると、文字が折り返したときに領域を広げられます。
overflow: hiddenであふれた文字を隠している箇所も、拡大時の欠落につながるため確認が必要です。
レスポンシブ対応と拡大対応を分けて考える
レスポンシブデザインは、表示領域の幅などに応じてレイアウトを切り替える設計です。
メディアクエリは拡大時の配置を整える助けになりますが、導入しただけで達成基準を満たすわけではありません。
@media (max-width: 600px) {
.layout {
display: block;
}
}ブラウザを拡大すると、別のブレークポイントのレイアウトへ切り替わることがあります。
切り替え後も文字が十分に大きくなり、内容と操作が保たれているかを確認します。
ページ内の文字サイズ変更機能は任意の手段
ページに「文字を大きくする」機能を設ける方法もあります。
ただし、ブラウザのズームで200％まで問題なく拡大できるページに、独自の変更機能を必ず追加する必要はありません。
独自機能を設ける場合は、一部の本文だけでなく、ナビゲーション、ボタン、入力欄のラベルを含むページ全体を対象にし、最大200％まで段階的に変更できるようにします。
変更用のボタン自体も、キーボードで操作でき、役割と状態が伝わるものにします。
よくある失敗と修正方法
| 問題 | 起きること | 修正の方向 |
|---|---|---|
固定した高さとoverflow: hidden |
折り返した文章やラベルが切れる | 高さを内容に合わせ、必要ならmin-heightを使う |
| 文字と部品の絶対配置 | 拡大した文字が隣の要素と重なる | 通常の文書フローや折り返せるレイアウトを優先する |
vwだけに依存した文字サイズ |
表示領域の変化によって、ズームしても期待どおりに文字が大きくならない | remなどを基準にし、必要なら相対的な調整を組み合わせる |
| 拡大を妨げるViewport設定 | 利用者がブラウザの拡大機能を使いにくくなる | width=device-width, initial-scale=1を基本にし、拡大を制限しない |
| 本文だけを変える独自コントロール | メニューやフォームの文字が小さいまま残る | ページ内の文字を一貫して拡大し、操作部品も確認する |
200％拡大の確認手順
- 通常の表示倍率で、ページの文章、ナビゲーション、フォーム、ボタン、モーダルなどの対象を確認します。
- ブラウザのズーム機能で表示を200％にします。
- 先頭から末尾まで読み、文字の欠落、重なり、不自然な切り取りがないかを確認します。
- リンク、ボタン、メニュー、入力欄を操作し、拡大前と同じ情報や機能に到達できるかを確かめます。
- 画面幅によってレイアウトが変わるページでは、主要なブレークポイントでも同じ確認を行います。
- 対象ブラウザに文字だけを拡大する機能がある場合は、その表示でもレイアウトを確認します。
特に、文字量が変化する部品を見落とさないようにします。
- 長い見出しやパンくずリスト
- 入力エラーのメッセージ
- ボタンとフォームラベル
- アコーディオン、タブ、モーダル内の文章
- 言語やユーザー操作によって長さが変わるテキスト
自動チェックだけでは、文字の重なりや操作のしにくさを十分に判断できません。
最後は実際に拡大し、目視と操作で確かめます。
実装と確認の要点
- 200％まで拡大しても、文章と操作機能を失わない
- 相対単位を活用しつつ、単位だけで適否を判断しない
- 固定した高さや文字の切り取りを避ける
- レスポンシブ対応後の各レイアウトでも拡大結果を確認する
- 独自の文字サイズ変更機能を設ける場合は、ページ全体を対象にする
達成基準1.4.4への対応は、文字を大きくする機能を置くだけでは終わりません。
利用者が文字を拡大した後も、読み進めて目的の操作を完了できることまで確認します。
当社では、Webアクセシビリティの導入と継続的な改善を支援するUUU ウェブアクセシビリティを提供しています。
既存サイトのアクセシビリティ改善に関心がある方は、サービスの詳細をご覧ください。