要約

フォントサイズを変更しても、ユーザーがリフロー可能なテキストを読めるようにします。

テクニック

• 相対的なサイズ単位を使用する [[WCAG-1.4.4]]

• コンテナ要素のサイズを変更可能にする [[WCAG-1.4.4]]

例

h1 {
   font-size: 1.3750em;
}

html {
   font-size: 62.5%;
}

h1 {
   font-size: 2.2rem;
}

よくある質問

EPUBリーディングシステムは拡大縮小やフォントサイズの変更をサポートしていますか？

リーディングシステムは通常、リフロー型の出版物ではフォントサイズの変更を、固定レイアウトでは拡大縮小をサポートしています。

したがって、コンテンツ製作者は、リフロー型の出版物のテキストコンテンツのサイズが変更されても問題が発生しないようにする必要があります（例：フォントサイズを大きくするとボタンが判読できなくなるなど）。

固定レイアウトは拡大縮小できるため、通常はこの達成基準を満たしますが、拡大縮小するとリフローの要件は満たせなくなります（達成基準 1.4.10）。

解説

ユーザーがテキストサイズを変更できるようにする要件は、WCAGの達成基準 1.4.4で定義されています。この達成基準では、ユーザーエージェントのズーム機能を用いてこの機能を提供することを認めていますが、リフロー型のコンテンツの場合、ほとんどのリーディングシステムのズーム機能は頼れるような機能ではありません。

むしろ、ほとんどのリーディングシステムでは、ユーザーが自分のニーズに合わせてデフォルトのフォントサイズを拡大または縮小できるようにしており、通常はデフォルトの半分から二倍まで選択できます。

CSSと明示的な寸法宣言（例：高さと幅の属性）がない場合、リフロー型のコンテンツでは通常、テキストサイズの変更によって問題が発生することはありません。ただし、コンテンツ製作者が要素の寸法を固定すると、テキストが拡大された時に要素内に収まらない部分がはみ出して見切れてしまい、ユーザーがコンテンツを読み取れなくなる可能性があります。

このような問題はボタンでよく発生します。CSSによって高さと幅がピクセル単位で指定された次のボタンの例を考えてみましょう。

ユーザーがフォントサイズを二倍にすると、ボタンの固定された寸法からはみ出した部分は切れてしまいます。

フォントサイズの変更に適応できない寸法を持つコンテナー要素でも同じ問題が発生します。

この問題を回避するには、フォントと要素のサイズを指定するときに、em、rem、%（パーセント）などの柔軟な寸法単位を使用してください。これにより、サイズを変更すると、フォントと要素の両方が適応できるようになります。ピクセルなどの柔軟性のない単位を使用すると、テキストがはみ出して見切れてしまったり、他のコンテンツに被さってしまうでしょう。

関連リンク

• CSS —長さ
• CSS —フォントサイズ：'font-size'プロパティ