Webアクセシビリティとフォントサイズ固定について
初めまして。
おもに制作を担当しております、maruと申します。
今後、こちらに記事を書いていくことになりました。
技術的な覚書として、皆様に有益な情報をお届けできるよう
努力いたしますので、どうぞよろしくお願いします。
今回は、Webアクセシビリティとフォントサイズの固定に関する問題について
お話しようと思います。
障害者や高齢者などを含めて、誰でもが利用できるかどうかというのは
弊社で重要視する大きな基準の一つです。
そして、そんな時に問題になるのが、JIS規格にもございます、
「文字の大きさは可変であるべき」との条件です。
FireFoxやSafariをお使いの方は気づかれないと思うのですが、
実は、cssでfont-sizeをpx指定して固定してしまうと、
WinIEやChromeなどでは、文字サイズの変更が効かなくなってしまうという
問題が生じてしまうのです。
これは、Webアクセシビリティ面から見て、非常に良くないのですが、
かといって、本文以外のデザイン要素のあるパーツ(メニュー)などに
テキストを使用していますと、どうしてもpx指定しておかないと難しい、
なんてことがよくあると思います。
そんな時は、デフォルトでかかっているスタイルを一度リセットし、
bodyに一括してfont-size:81.25%;をかけてしまいます。
IEにはハックでsmallを指定しましょう。
そうすると、font-sizeが13pxの時とほぼ同じ挙動になりますので、
あとは全体に対して、%指定でレイアウトバランスを整えてあげれば
キレイに、テキストサイズが可変するサイトが出来ると思います。
以上、本日の覚書でした。