これは何
ルート要素にfont-size: 62.5%;を指定しつつ、それぞれの要素にfont-size: ○○rem;と指定するやり方はアクセシビリティを損なうという意見をたまに見るので、それを検証した記事です
結論
ここでいう「アクセシビリティ」が「ブラウザのfont-size変更機能が正しく機能する」を意味するなら損ねません。
事の発端
「font-size指定をするにはpxが良いかremが良いか」の話題、時折盛り上がりますよね。
いつだったか「font-size: 62.5%;はアクセシビリティを損ねる」とツイートされているのを見つけました。
なんでも、ブラウザが持っているfont-size変更機能が上手く働かなくとのことです。
書かれていたのは記憶が正しければ1以下のような内容。
- デフォルトのfont-sizeは16px
- 設定変更で32pxにしたとする（2倍に拡大している）
- CSSでの
font-size: 62.5%;のせいで、200 * 0.625 = 125、つまり125%の拡大率にしかならない - アクセシビリティの観点でremを使っているとしたら、結局拡大を阻害するので良くない
最初に見た際は「ふーんそうなんだ」くらいで流してしまいましたが、仕事でしっかりと確認したい場面に遭遇し、改めて検証するに至りました。
ブラウザのfont-size変更機能とは
CSSで何も指定していない状態のfont-sizeはブラウザによって16pxに指定されています。2
しかし人によっては16pxでは小さすぎるor大きすぎる場合もあるため、ブラウザ側でデフォルトのサイズを変えられるようになっています。
以下は実際に変更する方法の一例。
- Chrome
- chrome://settings/fonts
-
Appearance->Customize fonts->Font size
- Firefox
- about:preferences
-
Language and Appearance->Fonts and Colors->Size
検証
以下の3つのパターンのページを作って検証してみました。
- ルート要素にfont-size指定無し、個別要素にpx指定
- ルート要素にfont-size指定無し、個別要素にrem指定
- ルート要素にfont-size: 62.5%、個別要素にrem指定
GitHub Pagesで公開しているので、こちらにアクセスしつつブラウザの設定を変更してもらえれば実際に確かめられます。
ついでに、リポジトリも公開しているのでもし興味があればどうぞ。
ブラウザのfont-sizeを変えていない場合
| ルート要素にfont-size指定無し、個別要素にpx指定 | ルート要素にfont-size指定無し、個別要素にrem指定 | ルート要素にfont-size: 62.5%、個別要素にrem指定 |
|---|---|---|
 |
 |
 |
まずはこの状態で、どの指定でも見た目が変わっていないのを確認します。
ブラウザのfont-sizeを変えた場合
| ルート要素にfont-size指定無し、個別要素にpx指定 | ルート要素にfont-size指定無し、個別要素にrem指定 | ルート要素にfont-size: 62.5%、個別要素にrem指定 |
|---|---|---|
 |
 |
 |
16pxから20pxへ変更してみました。
pxで指定したものの表示が変わらないのは想定通りの挙動です。
そして本題、2つのrem指定の違いを見てみましょう。
何も差は無く「font-size: 62.5%;のせいでユーザーが想定した通りの拡大ができなくなる」事象は観測されません。
まとめ
font-size: 62.5%;指定によってブラウザのfont-size変更が正しく機能しなくなりアクセシビリティを損ねる……という事象は起きない。