古いブラウザを使用しています。 より速く、より安全なブラウジング体験をお求めなら、今すぐ無料でアップグレードしてください。

Loading...

Webアクセシビリティとフォントサイズ固定について

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