miChecker:『フォントサイズは相対的な大きさで指定してください。』
検出理由
「問題あり」として検出される項目です。
フォントサイズの指定に px および pt を使用している場合に検出されます。miCheckerの場合、検出対象は style要素あるいはstyle属性でページ内で指定されているフォントサイズ、及びlink要素で外部リソースとしてリンクされている外部スタイルシートにおける指定が対象になります。
根拠
pt と px はフォントサイズの指定でもっともよく用いられる単位です。pt は1/72インチ(0.352mm)相当であり、px は画面上のピクセル数を示す絶対単位です。この pt あるいは px を用いて作成されたページでは、期待するようにテキストは拡大されない可能性があります。その為、相対単位でありテキストの拡大が有効に働く em や rem を使うことが求めらてれいます。
また、ディスプレイの解像度にも影響を受けますので、環境によっては文字が小さくなりすぎることもあります。
修正方針
相対的にサイズを指定する em や rem を単位として使用します。値の変換が必要になりますが、"pt px em 変換“として検索エンジンで探せば、いくらでも変換表や変換サービスを提供するサイトを見つけることができます。
補足
本問題が指摘されていてもズーム拡大(文字も画像も同一尺度で拡大する)で問題がなければ不適合とはなりません。しかしながら、タブレットやスマートフォンで閲覧される可能性を考えた時、テキストに絶対値指定のフォントを用いると極端に文字が小さくなったり、重なってしまって読めなくなる可能性もありますので、rem等の相対単位を使ってサイズを指定すべきです。
最近の主要ブラウザのテキスト拡大のあり方も変わりつつあります。FireFoxでは絶対値指定であっても相対値指定と同様に拡大縮小をしますので、上述の根拠は薄いように思われるかもしれません。一方、Chromeのテキスト拡大ではpxとpxで指定された文字の大きさは変化しません。(設定は面倒になりました)
ところで、検査をしていると、ズーム拡大での不具合によく遭遇します。ただ全体的に拡大しているだけだから、何の問題もないだろうと高を括るととても危険です。例えば、200%くらいに拡大してから、はみ出た部分をスクロールして表示しようとすると、テキストや画像の一部が欠けてしまっていることがあります。かならず、ズーム拡大でも正しくすべてのエリアが表示されているかどうか確認することが必要です。
レスポンシブデザインで作られたページも要注意です。レイアウトを大きく変えるような場合、その寸前あたりで表示の問題に遭遇することが多いように感じます。
関連する達成基準、達成方法
- 達成基準 1.4.4: 情報及び関係性
- 達成方法 C12: フォントサイズにパーセントを使用する
- 達成方法 C13: 名前付きフォントサイズを使用する
- 達成方法 C14: フォントサイズに em 単位を使用する
(他のテクニックは「miChecker対策テクニック集」に整理されています。)