Accessibility
Guidelines

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以上とする
  • 拡大した時もコンテンツが適切に理解できるように作る

実装方法

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

良い実装例

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

<style>
html {
  font-size: 62.5%;
}

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

悪い実装例

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

<style>

h1 {
  font-size: 20px;
}
</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が設定されているため、ダブルタップやピンチインなどの操作で拡大できない。また、近年のブラウザはこの設定を無視するものもある。

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

5. 参考文献