文字サイズのpx指定はアクセシビリティ違反なのか？達成基準の解釈を整理する

次のように文字サイズをpxの固定値で指定することは、アクセシビリティ上問題があるのでしょうか。

1
.text {
2
  font-size: 16px;
3
}

結論から言うと、px指定を理由に直ちにアクセシビリティの達成基準違反となる可能性は低いと考えます。ただし、よりアクセシブルにするためには別の方法を検討する必要があるでしょう。

この記事では、文字サイズに関する達成基準の解釈を整理しながら、それぞれの指定方法の違いを解説します。

文字サイズに関するアクセシビリティの達成基準

文字サイズに関係する達成基準は、WCAG 2.1の1.4.4「テキストのサイズ変更」（レベルAA）です。

キャプション及び文字画像を除き、テキストは、コンテンツ又は機能を損なうことなく、支援技術なしで 200% までサイズ変更できる。

達成基準 1.4.4 テキストのサイズ変更 - WCAG 2.1（WAIC日本語訳）

達成基準の趣旨

この達成基準には、画面拡大ソフトなどの支援技術を使わなくても、軽度の視覚障害のある人がテキストを読めるようにするという意図があります。

小さい文字は読めなくても、大きい文字なら読める人は大勢います。テキストを200%までサイズ変更できることで、そのような人たちがコンテンツを問題なく読み、理解できるようになるという趣旨です。

「支援技術なしで」の意味

「支援技術なしで」とは、画面拡大ソフトのような支援技術に頼らず、ブラウザなどの標準機能だけでテキストを200%まで拡大できることを求めています。

WCAG 2.1の解説書では次のように説明されています。

コンテンツを拡大縮小することは、第一にユーザエージェントが果たすべき役割である。…コンテンツ制作者は、コンテンツがテキストベースのコントロールを含むテキストのサイズ変更のためのユーザエージェントのサポートを妨げていないことを確認すること、又はテキストのサイズ変更もしくはレイアウトの変更を直接サポートすることによって、この達成基準を満たすことができる。

達成基準 1.4.4: テキストのサイズ変更を理解する - WCAG 2.1解説書（WAIC日本語訳）

整理すると、役割分担は次のとおりです。

• ブラウザ（ユーザエージェント）：コンテンツの拡大縮小を第一に担う
• サイト制作者：上記のブラウザの機能を妨げないこと、あるいはサイト上で文字サイズ変更を直接提供することで、この達成基準を満たす

サイト制作者が日常チェックする際の中心となるのは、前者の「ブラウザの機能を妨げていないか」です。ブラウザでテキストを拡大するには、次の2つの方法があります。

ブラウザのページズーム機能

ページ全体を拡大・縮小する機能です。テキストだけでなく、画像やレイアウトを含むすべての要素が均一に拡大されます（Chromeでは25% ~ 500%の間で調整可能）。

• Macの場合：command + + / command + -
• Windowsの場合：Ctrl + + / Ctrl + -

ブラウザのメニューからも操作でき、Chromeであれば右上のメニューの「ズーム」から変更できます。

ただし、サイト側でズームを妨げる実装がされていれば、ユーザーは拡大できません。たとえば次のようにmetaタグのviewportにuser-scalable=noやmaximum-scale=1を指定すると、モバイルブラウザでピンチズームが無効化されます。

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

このような設定は達成基準1.4.4の違反となり得るため、避ける必要があります。

ブラウザの文字サイズ変更機能

ページ全体ではなく、文字サイズだけを変更する機能です。Chromeであれば「設定 > デザイン > フォントサイズ」から、「極小」〜「極大」の5段階で変更できます。

「レイアウトはそのままで、文字だけ大きくして読みたい」というユーザーのニーズに応える機能です。

なお、多くのブラウザでは文字サイズ変更機能は「極大」でもデフォルト比で約150%程度が上限のため、200%には届きません。そのため達成基準1.4.4に適合しているかの主な確認方法は、「ページズーム機能」を利用することになるでしょう。

文字サイズのpx指定は達成基準違反か？

先述のとおり、文字サイズのpx指定は、そのことだけで直ちに達成基準1.4.4の違反とはならないと考えます。

理由は、px指定されたテキストであっても、ブラウザのズーム機能を使えば200%まで拡大できるからです。達成基準が求めているのは「支援技術なしで200%までサイズ変更できること」であり、ブラウザのズームという内蔵機能でそれが実現できている以上、基準は満たせていると解釈できます。

ズームでレイアウトが崩れる場合は違反となる可能性が高い

ただし、注意点があります。200%にズームした際に、文字が重なったり、オーバーフローして見切れたりして読めなくなる場合です。

なお、これはpx指定そのものの問題ではなく、レイアウト側の指定（vh/%/overflowなど）との組み合わせで起きることが多い印象です。文字サイズをpxで指定したこと自体が、ズーム時の崩れを直接引き起こすわけではありません。

崩れが起きやすいのは、次のようなケースです。

• 文字はpxで指定しているが、コンテナの高さがvhや%で決まっている
• 固定幅のレイアウトにoverflow-x: hiddenがあり、はみ出した部分に到達できない
• position: fixedのヘッダーが、ズーム後の本文を覆い隠す

このような状態は、達成基準にある「コンテンツ又は機能を損なうことなく」の部分に抵触している可能性が高く、違反と判断され得ます。200%まで拡大できること自体に加えて、拡大した状態でもコンテンツが問題なく読める・操作できることが求められています。

px指定は文字サイズ変更機能に対応できない

また、px指定はブラウザの文字サイズ変更機能には対応できないという点に注意が必要です。

ブラウザの文字サイズ変更機能は、ユーザーの設定値を基準として、それを相対的に参照しているテキストのサイズを変更します。pxで固定されたテキストはこの基準を参照しないため、ユーザーが設定を変更しても文字サイズは変わりません。

つまり「レイアウトはそのままで、文字サイズだけ拡大したい」というユーザーの要望には応えられない状態です。px指定の対応状況をまとめると、次のようになります。

px指定はズームに対応しているため、レイアウト崩れ等がなければ達成基準1.4.4の違反とはなりません。一方で、文字サイズ変更機能に対応できていない分、アクセシビリティとしては改善の余地がある、という状態と言えるでしょう。

よりアクセシブルにするならremでの相対指定

よりアクセシブルにするのであれば、remなどの相対値で指定し、文字サイズ変更機能にも対応させる方が良いでしょう。例えば次のような指定です。

1
html {
2
  font-size: 100%;
3
}
4

5
.text {
6
  font-size: 1rem;
7
}

remはルート要素（html）のフォントサイズを基準とする単位です。htmlにfont-size: 100%を指定する（あるいはhtmlには何も指定しない）ことで、ルートのフォントサイズがブラウザのデフォルトフォントサイズ（ユーザーの設定値）を参照するようになり、文字サイズ変更機能が機能します。

「px指定はダメ」と言われた時代があった

かつては「文字サイズのpx指定はダメ」と、今よりも強く言われていた時代があったようです。

この経緯についてあまり詳しくはないのですが、仮説として、古いInternet Explorerの仕様が理由の1つではないかと考えられます。かつてのIEの文字サイズ変更機能（表示メニューの「文字のサイズ」）は、pxで指定されたテキストを拡大できませんでした。さらに当時のIEには現在のようなページズーム機能もなかったため、px指定は「ユーザーがテキストを拡大する手段が一切ない」状態を生んでいたのです。

現在では主要なブラウザすべてがズーム機能を備えているため、px指定でも200%までの拡大は可能になり、「px指定は直ちに違反ではない」という状況に変わった、と捉えられます。

文字サイズをvwで指定した場合はどうか？

では、次のようにビューポート単位（vw）で文字サイズを指定した場合はどうでしょうか。

1
.text {
2
  font-size: 2.5vw;
3
}

あるいは、ルートのフォントサイズにvwを指定して、サイト全体の文字サイズを流動的にするパターンもよく見かけます。

1
html {
2
  font-size: 1.25vw;
3
}
4

5
.text {
6
  font-size: 1rem;
7
}

結論として、上記のようなvw指定はページのズームも文字サイズ変更機能も効かないため原則NGです。「支援技術なしで200%までサイズ変更」の要件を満たせないため、達成基準1.4.4の違反となる可能性が高いです（サイト上ですべてのテキストを200%まで変更できる独自コントロールを用意すれば、充足の余地はある）。

実際に、WCAGの公式文書でも失敗例として明記されています。

この達成方法の目的は、テキストにビューポート単位が使用されている場合、テキストのサイズ変更ができないという失敗を記すことである。これらの単位はビューポートに対して相対的なものであるため、画面を拡大したりテキストサイズを調整しても、サイズを変更することができない。

F94: 達成基準 1.4.4 の失敗例 - テキストのサイズ変更のためのビューポート単位を誤って使用している（WAIC日本語訳）

vwでページズームが機能しない理由

一見すると、vwでもページズームが効きそうに思えますが、実際には機能しません。理由は次のとおりです。

ブラウザのズーム機能を使うと、CSS上のビューポートサイズそのものが縮小します。そのため、ビューポートに依存しているvw指定のテキストには、次の2つの作用が同時に働きます。

1. ビューポートの縮小に伴い、文字が小さくなる
2. ズームの機能によって、文字が大きくなる

この両者が相殺されて、見た目上の文字サイズはほとんど変わらないまま描画されるためです。ズームしてもテキストが拡大されないので、「200%までサイズ変更できる」を満たせません。

ビューポートに応じて文字サイズを可変にしたい場合

ビューポートに沿ってフォントサイズを可変にしたい場合は、clamp()を使ってremとvwを組み合わせる方法が良いでしょう。

1
.text {
2
  font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
3
}

remの単位が含まれていることで、ズームや文字サイズ変更によるテキストの拡大が効くようになります。このような値はMin-Max-Value Interpolationのようなツールで簡単に計算できます。

まとめ

文字サイズのpx指定とアクセシビリティの関係を整理しました。

• px指定は、ブラウザのズームで200%まで拡大できるため、直ちに達成基準1.4.4の違反とはならない。
• ただし、200%ズーム時にレイアウトの組み合わせによって文字が見切れたり読めなくなったりする場合は、違反となる可能性が高い。
• px指定はブラウザの文字サイズ変更機能には対応できないため、よりアクセシブルにするならremでの相対指定が望ましい（ルートは100%または未指定にする）。
• vw単体での指定はズームも文字サイズ変更も効かないため、違反となる可能性が高い。可変にしたい場合はclamp()でremと組み合わせる方が良い。

達成基準1.4.4の違反という意味ではpx指定でも問題にはなりませんが、達成基準はあくまで最低ラインです。ユーザーが自分に合った文字サイズで読める状態を目指すなら、remでの相対指定がベストプラクティスと言えるでしょう。

参考サイト

• 達成基準 1.4.4 テキストのサイズ変更 - WCAG 2.1（WAIC日本語訳）
• 達成基準 1.4.4: テキストのサイズ変更を理解する - WCAG 2.1解説書（WAIC日本語訳）
• F94: 達成基準 1.4.4 の失敗例 - テキストのサイズ変更のためのビューポート単位を誤って使用している（WAIC日本語訳）
• WCAG迷いポイント① フォントサイズのpx指定っていいんだっけ？