1.4.4 テキストサイズを拡大縮小できる

適合レベル

※各レベルについては適合レベルとはをご覧ください

概要

ロービジョンのユーザーは、コンテンツ内の小さなテキストを読むことが困難である。そのため、テキストは画像拡大ソフトなどの支援技術を使用せずに、200％までサイズ変更できるようにする必要がある。またサイズ変更時に、コンテンツまたは機能を損なわず適切に表示されてなければならない。

テキストのサイズが200％を越えると、テキストとコンテンツが重なるなど、かえって読みづらいレイアウトになってしまうことがある。そのため、それ以上の拡大が必要なユーザーは、拡大鏡などの支援技術を用いる方がより良い閲覧体験につながることが多い。

また画像文字については、テキストと同じように拡大縮小できないため、可能な限りテキストにすることを推奨する。

テスト・チェック方法

デザイン確認時、デザイナー・エンジニアがテキストを200％拡大時の挙動を確認する
コードレビュー時、フォントサイズが相対指定になっていることを確認する
実装後、テキストサイズを拡大してコンテンツが適切に表示されているか確認する

具体例

入力要素のフォントサイズが16px未満のとき、ズームされる

入力時に画面を拡大して入力するユーザーもいるが、ブラウザ側が強制的に拡大表示することもある。

iOSのブラウザでは、input要素のフォントサイズが16px未満の場合、input要素の入力時に入力欄がズームインされる。これはUX向上を目的としたブラウザの挙動のため、ハックを利用した実装などで防いではならない。

参考：Quick Fix: Increase font-size to 16px to Prevent Input Zoom - UXcellence

悪い例

ズームされないようにmetaタグに user-scalable=no を設定する。入力要素だけでなく、画面全体を拡大できなくなる（詳細はこちら）。

良い例

入力要素のフォントサイズは16px以上とする
拡大した時もコンテンツが適切に理解できるように作る

実装方法

フォントサイズの指定について

悪い実装例

フォントサイズをpxで絶対指定している。

<style>
h1 {
  font-size: 32px;
}
</style>
<html>
...
  <body>
    ...
    <h1>見出しテキスト</h1>
  </body>
</html>

フォントサイズを絶対指定したとしてもWCAG 2.0（2.1）1.4.4に不適合となるわけではない点に注意すること。 フォントサイズの相対指定はあくまでも達成方法の1つであり、他の方法でも達成可能である。WCAGにおける達成方法の詳細は十分な達成方法 - 達成基準 1.4.4: テキストのサイズ変更を理解するを参照のこと。

良い実装例

フォントサイズをem、またはremなどで相対指定している。

<style>
h1 {
  font-size: 2rem;
}
</style>
<html>
...
  <body>
    ...
    <h1>見出しテキスト</h1>
  </body>
</html>

スマホでの拡大許可について

悪い実装例

maximum-scale=1.0、user-scalable=noが設定されているため、ダブルタップやピンチインなどの操作で拡大できない。また、近年のブラウザはこの設定を無視するものもある。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

良い実装例

maximum-scale=1.0、user-scalable=noが設定されていない。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">