アクセシブルなフォントサイズ設定：なぜremがWCAG準拠に重要なのか

remとWebアクセシビリティ（WCAG）

フォントサイズにpxではなくremを使用することは、単なるベストプラクティスではなく、WCAG準拠と障害を持つユーザーのコンテンツ読み取り能力に直接影響します。

WCAG 1.4.4 — テキストのリサイズ（レベルAA）

この達成基準は以下を要求します：

「支援技術なしで、コンテンツや機能の損失なくテキストを200%までリサイズできること。」

フォントサイズにpxを使用した場合、ブラウザのデフォルトフォントサイズを変更したユーザーはサイト上で変化を確認できません。テキストは指定されたピクセル値のまま留まります。これは実質的にテキストリサイズ能力を破壊します。

remを使用すると、ユーザーが選択したデフォルトフォントサイズに比例してテキストがスケーリングされます。ブラウザデフォルトを20pxに設定したユーザーは、remベースのサイトで25%大きなテキストを得られます。

ユーザーがフォントサイズを調整する方法

一般的な方法は2つあります：

1. ブラウザズーム（Ctrl/Cmd + プラス） — すべて（テキスト、画像、レイアウト）をスケーリング。pxとremの両方で機能。
2. ブラウザフォントサイズ設定 — テキスト関連の値のみに影響。相対単位（rem、em、%）でのみ機能。

方法2は多くの低視力ユーザーに好まれます。レイアウトを変更したり水平スクロールを要求することなくテキストを拡大するためです。この方法はremでのみ機能します。

CSSの監査

サイトがアクセシブルなフォントサイズを使用しているか確認するには：

1. DevToolsを開く
2. CSSでfont-size:.*px（正規表現）を検索
3. 各一致を評価 — スケーリングすべきフォントサイズか？
4. 固定pxフォントサイズをremに変換

よくある落とし穴

アンチパターン	問題	修正
html { font-size: 10px }	ユーザー設定を上書き	html { font-size: 62.5% }を使用
body { font-size: 14px }	テキストがスケーリングされない	body { font-size: 0.875rem }を使用
input { font-size: 12px }	小さく、スケーリングされない入力欄	input { font-size: 0.75rem }を使用
font-sizeの!important	ユーザーの上書きを妨げる	!importantを削除

完全なアクセシビリティチェーン

完全にアクセシブルなフォントサイズ設定のために：

1. ルートを%で設定（例：100%や62.5%） — ユーザーデフォルトを尊重
2. すべてのフォントサイズにremを使用 — ルートに合わせてスケーリング
3. スペーシングとレイアウトにremを使用 — コンテンツがオーバーフローしない
4. ブラウザフォントサイズ16px、20px、24px、32pxでテスト
5. 各サイズでコンテンツが切り取られたり重なったりしないことを確認

影響の数字

WebAIM Millionレポートによると、テキスト関連のアクセシビリティ問題はWebサイトの80%以上に影響しています。pxからremへの切り替えは、アクセシビリティのために行える最も高インパクトで低労力な変更の一つです。