Webアクセシビリティ達成基準「1.4.4 テキストのサイズ変更の達成基準」の話

前回はWebアクセシビリティ達成基準「1.4.3 コントラスト（最低限レベル）」について解説しました。続けて今回は「1.4.4 テキストのサイズ変更の達成基準」への対応について解説します。

テキストのサイズ変更は、視覚的なサポートを必要とするユーザーにとって非常に重要な要素です。近年は行政サイトや中小企業サイトでも、アクセシビリティ対応への意識が高まっています。とはいえ、「フォントサイズを大きくするだけなら簡単でしょ？」と思われがちですが、実際には細かい配慮が必要です。

達成基準 1.4.4 「テキストのサイズ変更」とは

最大200%まで拡大しても読める・崩れないこと

達成基準 1.4.4 の大きなポイントは、「ユーザーが文字サイズを200%まで拡大してもコンテンツが正常に閲覧できる」ことです。
ここで重要なのは、「拡大してもレイアウトが破綻しない」 という点。単に文字が大きくなればよいわけではありません。

この達成基準は、ブラウザの「ページ拡大（ズーム）」ではなく、「文字サイズのみの変更」でもコンテンツが壊れないことが求められています。つまり、Chrome や Edge の「文字サイズの変更」機能を使った場合でも問題なく読める必要があります。

文字が読めても操作できなければNG

よくある落とし穴が以下のようなケースです。

• メニューの文字が大きくなり、ボタンが重なって押せなくなる
• フォーム項目のラベルが枠からはみ出す
• カード型レイアウトで文字が2行になり、デザインが崩壊する

アクセシビリティでは、「読めればOK」ではなく、読めて、操作ができて、情報が失われないこと が条件になります。

なぜ文字サイズ変更への対応が重要なのか？

視覚に不安を抱えるユーザーは想像以上に多い

視力の弱い方や老眼の方はもちろん、一時的に目が疲れている人、屋外でスマホを見ている人なども含めると、「文字を大きくしたい」と感じるシーンは多く存在します。

特に行政サイトや企業の情報提供サイトでは、誰でも確実に情報にアクセスできることが求められます。問い合わせフォームや申請ページが読みづらいだけで、離脱につながることも珍しくありません。

モバイル環境は文字サイズの影響が大きい

スマホの場合、ブラウザの文字サイズ設定を「大きい」にして閲覧しているユーザーも多くいます。この時、固定された高さや幅を持つデザインは非常に脆弱です。

実際、制作現場では
「スマホで文字サイズを変えたら、ボタンが圧迫されて押せなくなった」
といったトラブルはよく起こります。

制作側が気を付けるべきポイント

（1）px ではなく、相対単位（rem / em）を使う

固定値である px を使うと、ブラウザの文字サイズ変更の影響を受けません。
そのため、基本的には rem や em を使用するのがベストです。

• rem：ルートのフォントサイズを基準に変更される
• em：親要素のフォントサイズを基準に変更される

特にボタンやナビゲーションは rem の方が扱いやすいケースが多いです。

（2）コンポーネントの「高さ固定」を避ける

デザイン上の見た目を整えるため、高さを固定したカードやボタンを作るケースがあります。しかし文字サイズが変更されると一瞬で崩れます。

以下のようにするのが安全です。

• 高さ固定（height） → 使わない
• 代わりに、padding を使って余白を調整
• 複数行になることも前提にする
• flexbox の align-items: start を使い、崩れない構造にする

（3）行間（line-height）をゆとりある値に

文字サイズを200%にしたとき、行間が詰まりすぎて読みづらくなることがあります。

推奨は以下の通り：

• 通常テキスト：1.6〜1.8
• 見出し：1.2〜1.4

行間に余裕があると、レイアウト崩れも起こりにくくなります。

（4）フォームは特に注意

フォーム要素は、文字サイズ変更の影響がもっとも顕著に現れる部分です。

チェックするべき項目は以下：

• ラベルと入力欄が重なっていないか
• プレースホルダーが切れないか
• 入力欄の高さが文字サイズに対応して広がるか
• ボタンのテキストが2行になっても押しやすいか

（5）縦並びのレイアウトを採用する

文字サイズ変更にもっとも強いレイアウトは「縦並び」です。

• カード型
• ナビゲーション
• フッターのリンク集

これらを初めから縦並び前提の設計にすることで、崩壊リスクが大幅に減ります。

よくある失敗例と改善例

失敗例 1：横幅固定のボタン

問題点
文字が200%になると、2行になり高さが足りず、押しづらい。

改善

• width: auto
• padding を調整
• テキスト量に応じて自然に大きくなるよう調整

失敗例 2：ナビの文字が重なる

問題点
グローバルナビを横一列にしていると、文字サイズアップ時に重なりやすい。

改善

• ブレイクポイントを早めに設定して縦並びへ
• remベースで余白を設定
• ボタン内の文字数を最適化

失敗例 3：フォームのラベルがはみ出す

問題点
ラベル幅が固定なので、2行になった瞬間に崩壊。

改善

• label を block 要素にする
• 幅は可変（auto）
• line-height を1.6以上に確保

実際の制作フローでのチェック方法

（1）Chromeの文字サイズ変更でテスト

Chrome の「設定 → 外観 → フォントサイズ」を以下のように変更してチェックします：

• 非常に大きい
• 大きい
• 中

特に「非常に大きい」は200%相当の動きになるため、ここで崩れなければかなり安心です。

（2）Mac / Windows の OS 字幕・アクセシビリティ設定も確認

OSレベルで文字が大きくなる場合もあるため、

• Mac：アクセシビリティ → 画面 → メニューサイズ
• Windows：テキストサイズ

これらの環境でも崩れないか確認します。

（3）スマホ実機での確認は必須

スマホは以下のような環境で確認します：

• iPhone：設定 → 画面表示と明るさ → 文字サイズ
• Android：設定 → アクセシビリティ → フォントサイズ

特にiPhoneはフォントサイズ拡大時の挙動がシビアです。

まとめ —— テキストサイズ変更への対応は「誰も取り残さない」デザインの第一歩

達成基準 1.4.4 は地味に見えますが、実際にはユーザー体験に直結する重要な項目です。
特に行政サイトや中小企業サイトでは、文字を読みやすくすることが情報の正しい伝達につながり、ひいては問い合わせ増加や信頼性向上にも直結します。
アクセシビリティ対応は一度整えれば長く使える資産になりますので、「これから対応を進めたい」という企業様は、ぜひご相談ください。