可変フォントサイズとレイアウト

実践アクセシブルHTML 第二回

フォントサイズ固定に残念な思い

6月20日に、Macromedia Flash Conferenceへ行ってきました。その一番最後の時間枠は、FlashのコンクールというかコンテストというかでFlashの作品をいろいろ募集している、さまざまなサイトの紹介をするスペシャルセッションでした。こういった場では、かなり大きいスクリーンに画面を表示させて、たくさんの受講者みんなで見るというスタイルが採られるわけですが、いくら大きなスクリーンであっても小さな文字なんかを判読するのは困難です。

そのスペシャルセッションのスピーカーの方が、サイトの内容の一部を読み上げたりしながら、「あ、これはちょっと見づらいですね」などといいながら、フォントサイズを大きくしようとブラウザを操作したのですが、そのサイトは文字の大きさを固定しているようで、大きくできませんでした。ちょっと、その中のどのサイトだったかは定かではないのですが、というよりも、むしろ全部が全部そうなのではないかとも思われるわけでもありますが。

さて、僕はここで残念な思いをしました。せっかくカンファレンスのスペシャルセッションという、ここぞといえる場でサイトが紹介されているにも関わらず、それを見ている受講者の多くには、その表示されている内容が把握できなかったりもしたわけです。まあ僕自身はFlashムービーを応募できるような輩ではないので、紹介されたサイトの雰囲気やFlashムービー自体の按配などが見られさえすれば概ね満足ではあったのですが、具体的な募集内容や応募作品の詳細情報を、その場で知りたいと思った人にとっては、きっと残念な印象を与えたことでしょう。もちろん、おうちに帰ってから改めてじっくり見ようという気になった人も多いのでしょうが、正直いって僕にはそこが何処のサイトなのかも覚えられませんでした。

今やウェブサイトは、どのような場で閲覧されるか予測がつきません。必ずパソコンで見るというわけではないものになりました。ここで紹介したように、大きな会場でスクリーンに投影してみたりもするだろうし、ふつうに会議室くらいの部屋でプロジェクターを使って見ることもあるでしょうし、そしてPDAなどの携帯端末などからも表示させることもあるわけです。常に顔の30センチなり50センチなり前にモニタがあるというような状況でしか、ちょうど良いサイズで見られないような前提での実装は、ちょっとどうかなというか、あるいはもったいないなとも思います。

なぜフォントサイズを固定するのか

というよりも、なぜフォントサイズを固定しないようにと呼びかけるのかといいますと、拠りどころであるWAIのアクセシビリティガイドラインにそういう項目があるからです。優先度が2であるチェックポイント3.4には「Use relative rather than absolute units in markup language attribute values and style sheet property values.」と書かれています。ざっくり意訳すると「HTMLやCSSでサイズなどの値を指定する場合には、絶対的な単位でなく相対的な単位を使うべき!」とかいう感じです。

アクセシビリティガイドラインの目指すところとして、さまざまな環境や状況での閲覧ができるようにする、特定の環境や状況に依存した閲覧を期待しないようにつくる、といったものがあるわけですので、閲覧者がフォントサイズを、閲覧者自身の環境や状況に合わせて最適なサイズに変更できるように配慮する必要があるわけです。ですから、相対的な単位といっていますが、まあ要するに「em」とか「%」といった単位を使いましょうということであると思えば良いでしょう。「px」は相対的な単位に分類されていますが、視覚装置の解像度に対して相対的なので、表示したとある環境からすれば絶対的な単位のような振る舞いになってしまいます。たとえばInternet Explorer(以下IE)などのブラウザでは、メニューからフォントサイズを変更しようとしても、「em」や「%」の単位でないと大きさを変えることができなかったりします(もちろんそれらの単位で指定してあっても、親要素が絶対的な単位になっていたりしたら変更できませんが……)。

Webサイトのアクセシビリティ改善をはかろうとする際、前回話題にしたalt属性の次点として挙げられるであろうネタは、「フォントサイズを可変にする」というものです。アクセシビリティガイドラインにフォントサイズは固定にならないようにといった内容が含まれているだけでなく、なんというか一般的にもよく「フォントサイズ固定はアクセシビリティ的にアレだ」とかいうような話は聞くのではないかと思うのですが、それでもアクセシビリティ改善のネタとして頻繁に登場するのは「フォントサイズを可変にする」です。結局のところ、フォントサイズが固定されているサイトというのがかなり多いので、これがネタになりやすいというわけでもあります。

フォントサイズを固定にする、実装上の最たる要因は、やはりデザインというかレイアウト的な辺りになります。ページの横幅をたとえば600ピクセルに固定したようなレイアウトのページでは、フォントサイズをかなり大きくした状態で表示されてしまったりすると、一行あたりの文字数が想像以上に減ってしまってだらだらと縦に延々と続く間延びしたコンテンツに見えてしまうかもしれません。また反対にフォントサイズをかなり小さくした状態で表示されたら、今度は一行あたりの文字数が増えてしまい、挿絵として置いた写真画像に回り込むようにテキストが流れるはずだったのが、写真画像の縦サイズにも満たないテキストボリュームに見えてしまうかもしれません。

最適な表示としてこういうレイアウトを想定しているのに

フォントサイズを大きくするとコンテンツが縦に長くなってしまったり

フォントサイズを小さくするとコンテンツが詰まってしまう。

ページの単に文書情報だけでなく、外観情報(見栄え)やそのページを表示することで得られる経験価値なども、等しく伝達したいと考慮された構成になっているページというものは、そのレイアウトが崩されてしまうことを嫌うわけです。レイアウトが崩れることで、外観情報や経験価値が低減するかもしれず、また、それによって閲覧者は文書情報を得ることを途中でやめてしまったり、理解を深めづらくなってしまったりするとしたらどうでしょう。それでは本末転倒だともいえますから、そうなってくると、フォントサイズを固定することで一定の品質を保とうとする動きも、あながちナシだとは言い切れないようにも思われなくもないのですが、……ちょっと待ってください。それ以前に、フォントサイズが小さすぎることによってそもそも読むことができないだとか、フォントサイズが大きすぎることによってそもそも画面に表示し切れないだとかいうことを考えてみてください。その閲覧者は視力が悪かったので、あるいはその閲覧者は遠くから画面を見ていたので、あるいはその閲覧者は暗い部屋にいたので、それで文字が判読できなかったとします。それがフォントサイズを大きくしたりすることで判読できるようになるのであれば、フォントサイズを可変にしておくべきであるといえます。アクセシビリティ改善とは、閲覧者の環境や状況に依存しないつくりにすることで、広くたくさんの人たちにとって近づきやすいWebサイトにすることなのです。フォントサイズを固定することでレイアウトも固定されるようなつくりは、それが想定している特定の環境や状況からの閲覧者にとってはとても近づきやすい表示にはなりますが、そうでない環境や状況からの閲覧者にとっては近づきがたいものになることでしょう。それではアクセシビリティは改善されないのです。

いくら可変がアクセシブルだからって

昨今の弊社――ビジネス・アーキテクツ社ですが――の成果物では、フォントサイズを可変にして制作することが多いのですが、さらに歳月をさかのぼった過去の成果物ではフォントサイズを固定にしているもののほうが多数を占めていました。どうして近頃は可変にしているのかといえば、クライアントの意識が変わってきたということもあるでしょう。ターゲットにしているブラウザ間でレイアウトが崩れないように、ということに重きを置くのではなく、閲覧環境に合わせてある程度のアクセス性を確保したいということに配慮する姿勢が重要になってきたとでもいいますか。

最初、フォントサイズ可変なデザインで作ろうといったときに、画像化文字(テキストを画像で表したもの)についての議論がありました。強調したい見出し文字を新ゴなどで書いて画像にするというときに、それは本文の文字サイズよりも大きな文字になるように設定していたりするわけなのですが、テキストのフォントサイズが可変だということは、ある程度フォントサイズを大きくすると、強調したいから大きな文字で表示されるはずだった画像化文字の見出しよりも本文のほうが大きな文字になってしまうという可能性が出てきてしまったのです。

たとえば本文が、IEのフォントサイズ中で見ているときに12ポイント相当のサイズで表示されるものとします。そして画像化文字の見出しを16ポイント相当のサイズになるように作ったとしましょう。CSS2の仕様ではabsolute-sizeキーワードの隣接するインデクス間におけるスケール倍率は1.2が推奨されています。そのため、本文のフォントサイズは大だと14.4ポイント相当、最大だと17.28ポイント相当ということになります(まだWorking DraftであるCSS2.1での計算式だと、最大時は18ポイントです)。つまり、フォントサイズを最大にすると、画像化文字の見出しよりも本文のほうが大きくなってしまうということです。これでは、コンテンツ内容の節の区切りを明確にするなどの意図で、見出しを画像化文字にしたのが裏目に出てしまったりもするわけです。もちろん逆の場合もあって、本文を補足するような注釈文などを、本文のサイズよりも小さく表示されるように画像化文字とすることがあります(単純に、本文に対して80%の大きさなどとすると文字が潰れたりするので、画像化文字にすることで可読性を確保するためです)。しかし今度は、フォントサイズを最小にしたときに、その小さな画像化文字のほうが本文よりも大きくなってしまったりもするのです。

また、Mozillaなど他のブラウザでは任意の倍率を設定することもできますから、たとえば見出しの画像化文字を24ポイント相当にしておいたとしても、250%の倍率などを設定した時点で本文のフォントサイズが画像化文字のサイズを超えてしまいますから困ったものですというか、まあぶっちゃけお手上げです。

この議論の結論ですが、理想的にいえば画像化文字を使わないというところに落ち着かざるを得ません。しかし現状のCSS2の仕様とブラウザの実装状況は、文字に関する表現力が貧弱で、デザイン的にどうなのよという辺りでは非力すぎます。たとえば文字詰めのひとつをとっても、うまくはいかないわけですし。また、可読性の高いフォントとして新ゴを取り上げてみても、このフォントをfont-familyプロパティに指定したときに、本当に新ゴで表示できる閲覧者というのは実際問題としてほとんどいないと考えられます。こういった状況を鑑みると、画像化文字を使わないというわけにはいかないというのもまた、ひとつの結論なのです。

というわけで、これぞというような、うまい結論にはなかなか至らないというのが実情なのですが、画像化文字を使うけれども、少なくとも5段階の可変度には耐えられるようなフォントサイズを想定してつくるという辺りが、現状としては妥当な線ではないかという結論にいたっています(CSSのabsolute-sizeキーワードは7段階なので、7段階の可変に耐えうる想定ができればそのほうが良いことはいうまでもありません)。

基準となるフォントサイズ

さてHTML/CSS的にいうと、まずサイト全体に渡って基準となるフォントサイズを決めなければなりません。その基準となるサイズは本文において設定されて、大きく強調したい見出しなどは本文に対して1.2倍のサイズにするだとか、小さく表示させることで補足を意図したいところは0.8倍くらいにするだとかということになります。

基準となるフォントサイズは、具体的にはBODY要素に設定したfont-sizeプロパティの値となります。したがって、以下いずれかのスタイル指定が、フォントサイズ可変での制作において、基準となるフォントサイズの書き方になるといえます。

body { font-size: meduim; }
body { font-size: 100%; }

font-sizeが100%であるというのはどういうことかというと、親要素のフォントサイズに対して100%であるということになります。font-sizeのデフォルトはmediumサイズなので、mediumの100%ということになり、どちらも同じ大きさになるはずですが、困ったことに実はそうなりません。

font-size: mediumとfont-size: 100%でそれぞれ表示したときの結果を見比べてみてください。

【キャプチャ】WinIE6標準モード

【キャプチャ】WinIE6互換モード

【キャプチャ】MacIE5.1標準モード

【キャプチャ】MacIE5.1互換モード

【キャプチャ】Mozilla1.4

【キャプチャ】Opera7.11

【キャプチャ】Netscape4.8

結局のところはIEのCSS解釈におけるバグなのですが、Win/MacともにIEは互換モードにおいてfont-size: mediumとfont-size: 100%のサイズが等しくなりません。font-size: 100%はfont-size: mediumと同じ大きさにならなければならないのに、font-size: smallの大きさになってしまうのです。IE6やMacIE5には標準モードと互換モードというふたつのモードがあって、DOCTYPE宣言によって振る舞いを変えるのですが、IE5.5までのバージョンが常にこの部分を誤って解釈する実装だったために、IE6やMacIE5の互換モードでは誤った解釈を受け継いでいます。

制作するサイトのHTMLのバージョンが、HTML4に準拠してさえいれば、IE6やMacIE5.1は標準モードで動作してくれるでしょう。font-size: 100%は常にfont-size: mediumのサイズとして、仕様どおりに正しく表示されるので問題ないということになるのですが、なんだかんだで現実的にはDOCTYPE宣言できないのが実情ではないかと思います。DOCTYPE宣言の無い文書は、有無を言わさず互換モードで扱われます。

よく、ページの上部――ヘッダ部分に相当するエリアにサイト内検索のためのフォームコントロールが配置されていたりしますが、この時のsubmitボタンがINPUT type=image要素だったりする場合、Netscape4.xではborder=0としないと線が表示されてしまいます。そのため、border属性などという存在しない属性を追加せざるを得なかったりすることが多々あるのです(Netscape 4.xでもIEなどと同等の表示を、という要望は未だに往々にしてあるものですから)。となるともう、それだけでDOCTYPE宣言をすることが出来ず、謎のバージョンのHTMLになってしまったりします。Netscape4.xは、CSSの解釈がおかしいというかバグっているだけにとどまらず、HTML仕様に準拠した文書作成時においても足かせになるという困ったチャンなわけですが、それはまあ本題ではないので捨て置くとして。また、そもそもWinIEも、バージョン5.0や5.5では標準モードというものが無く、常に誤ったCSS解釈しかしてくれませんから、実際のところは、その誤った解釈を前提に実装する必要があったりするのです。

先ほど見比べてもらったとおりで、font-size: mediumという指定だと、IEの互換モードではやや大きいかなといった印象のサイズとなってしまいます。それもそのはずで、font-size: 100%ではだいたい12ポイント相当の文字になるのですが、それはfont-size: smallのサイズとして扱われてしまっているために、IEの互換モードではfont-size: mediumは仕様で定めるところのfont-size: largeに相当する大きさになってしまうのです。つまり、14.4ポイントに相当しています。基準となるサイズが14.4ポイントとなると、フォントサイズを2段階上げて最大にすると20.736ポイントにもなってしまいます。PowerPointでプレゼンデータを作っているんじゃないんだから、本文が20.736ポイントになるなんてことは想定範囲外と考えて良いのではないでしょうか(もちろん、そういうサイズで表示されることがあるという事実は心に留めておく必要がありますけれども)。

ちなみに、どうして14.4ポイントだと「ちょっと大きい」のかといえば、横幅が固定のデザイン/レイアウトであることが、通常はなにげに前提だったりするからです。横幅が20emなどとなっており、一行につき20文字くらい表示という状態がどのフォントサイズにも当てはまる、とかいうのであればまた話は変わってくるでしょうが、それでも画像化文字を含むイメージの縦横サイズはピクセルで指定されているわけでもありますので、その辺はどうにもならないことでもあるのです。

そんなわけもあり、基準となるフォントサイズは「body { font-size: 100%; }」とすることが多くなります。ここでは、基本的にはこれで設定することを暗黙の了解と考えるものとして、話を進めていくことにします。

どうにかして最適な表示にする

同じfont-size:100%でも、ブラウザによってその大きさは違います。IE6やMozilla1.4、Opera7.11ではfont-size:100%とした場合、それは12ポイント相当のサイズとして表示されますが、MacIE5.1では10ポイント相当、Netscape4.8ではさらに文字が詰まった印象までもが与えられるといった具合です。文字の詰まり具合は、まあ適用されるフォントセットにも依存するので一概にはいえないのですが、基準となるフォントサイズ自体、すでに大きさに差異が出てしまっていることは、ちょっとフォントサイズの可変化を見越したデザインをする際には差し障りがあるともいえます。

フォントサイズを固定するという前提であれば、「body { font-size:10pt; }」などという指定になりますから、それはどのブラウザでもCSSを正しく解釈さえしてくれれば、常に10ポイントのサイズとなります。したがって、基準となるサイズに差異は出て来ないため、レイアウトが考えやすくなるわけです。

本記事ではフォントサイズが可変でもうまいこと表示させようという目論見がありますから、ここで諦めることはしません。どうにかして最適な表示を生み出す実装を提示するという使命があります。標準的な表示時において、制作側が意図した通りの最適なデザイン/レイアウトを実現し、あとはそれでももう少しフォントサイズを大きくしたかったり小さくしたかったりしたら、閲覧者の都合によってどうぞご随意に、というのが、フォントサイズ可変なデザインの狙いです。ですから、標準的な表示環境では、制作側の意図したデザイン/レイアウトである必要があります。

しかし前述のとおり、この時点で既に10ポイントだったり12ポイントだったりしているのが、ちょこっと厄介なわけです。そこで、これを強引に、どちらかに統一してしまうことに挑戦してみましょう。

基本的な姿勢としては、10ポイントであっても12ポイントであっても特にさしたる問題ではないデザイン/レイアウトをするのですが、できれば10ポイントで見てもらえるともっとも最適であるというつくりにしたいと思います(逆に12ポイントが最適であっても、もちろん構いません)。

どちらかに統一するように仕組むためには、手っ取り早いところではJavaScriptを使うことが考えられます。JavaScriptの有効/無効にこだわらずに、基準となるフォントサイズは「body { font-size:100%; }」であるとして、JavaScriptが有効な環境であったら、本文が10ポイント相当になるような相対的なサイズをJavaScriptで書き出すのです。本文は常にP要素で意味づけされているとしたら、IE6の場合は基準のfont-size:100%は12ポイントに相当しているので、「p { font-size:80%; }」とすることで、本文は10ポイント相当として表示される、というような仕組みです。くどいようですが、JavaScriptが無効であれば、P要素は親要素のフォントサイズを継承して、そのまま12ポイント相当で表示されるでしょうが、基本姿勢として12ポイントでも問題ないように多少の余裕を見たデザイン/レイアウトにしておくため、大きな問題にはならないという前提のもとでの話です。

「body { font-size: 100%; }」とした場合に、10ポイント相当などの表示をさせるためには、P要素のfont-sizeプロパティに何%を指定すれば良いか、各ブラウザの挙動をこちらで調べてみたところ、だいたいの具合でこのような内訳になりました。

ブラウザ\フォントサイズ 8pt相当 9pt相当 10pt相当 12pt相当 14pt相当 16pt相当
Win IE6/5.5/5.0 70% 75% 80% 100% 120% 140%
Win Opera7
Win Netscape4.7以降 90%100%110%130%140%160%
Win Gecko系 70% 75% 80% 100% 120% 130%
Mac IE5.1/5.0
Mac Safari
Mac Gecko系 80%90%100%120%130%150%
Win Opera6 80%85%90%120%130%150%
Mac Netscape4.7以降 70%80%90%110%120%140%
Win/Mac Netscape 4.x(4.7未満) 70%80%90%100%120%140%
Mac IE5.2 90% 100% 110% 140% 150% 160%
Mac iCab2.9.1

デザインの設計時において、本文なり各レベルの見出しなりのフォントサイズというのは決めているはずですから、本文つまりP要素のfont-sizeプロパティ、H1要素やH2要素などのfont-sizeプロパティというものは設定可能です。これらのプロパティの値が、この表のような内訳で設定してあげれば良いということで、しかるべき数のCSSファイルを用意しておき、ブラウザに応じて必要なfont-sizeプロパティが設定されたCSSファイルを読み込ませてあげるわけです。

h1 {
    font-size: 140%;
}
h2 {
    font-size: 120%;
}
h3 {
    font-size: 100%;
}
p {
    font-size:80%;
}
p.note {
    font-size:75%;
}
p.supplement {
    font-size:70%;
}

たとえばIE5以降(IE6は互換モード)用にと、こういったCSSファイルを作成し、またNetscape用には……といった具合にそれぞれを用意します。

また、何にしてもベースとなるデフォルトのスタイルのCSSも作っておきます。こちらにはBODY要素のフォントサイズも設定しておくのと、JavaScriptが無効な場合でも大丈夫なように、必要な要素のフォントサイズも設定しておきます(JavaScriptが有効な場合は、選別されたCSSファイルによってフォントサイズが上書きされるわけです)。ここでの各要素のフォントサイズは、ターゲットとなるブラウザのうちで最も母数が大きいことが予想されるブラウザに合わせるなどすると良いでしょう。

適用される側のHTMLは、こんな感じになります。

<link rel="stylesheet" href="default.css" type="text/css"><!--デフォルトスタイル-->
<script type="text/javascript" src="setFontSize.js"></script>

ファイル名は何でも良いですが、たとえばsetFontSize.jsとして、このJavaScriptファイルの中身は、閲覧者のブラウザを判別して、それに合わせたCSSファイルを適用する構文をつらつらと書いておけばOKです。注意点としては、ふつうはLINK rel=stylesheet要素をdocument.writeさえすれば済みそうなのですが、ブラウザによってはDOMをいじってあげないと適用されないものもありますので、そこは注意して振り分けてあげる必要があります。

function setFontSize(src) {
  if (document.getElementsByTagName && document.createElement) {
/* DOMが使えるブラウザの場合 */
    var newLINK = document.createElement('link');
    var head = document.getElementsByTagName('head').item(0);
    newLINK.rel = "stylesheet";
    newLINK.type = "text/css";
    newLINK.href = src;
    head.appendChild(newLINK);
  } else {
/* DOMが使えないブラウザの場合 */
    document.open();
    document.write('<link rel="stylesheet" href="' + src + '" type="text\/css">\n');
    document.close();
  }
}

とりあえずこんな感じの関数を作ることになるかと思います。引数のsrcには、配列か何かに突っ込んでおいた各CSSファイルのファイル名が渡されるでしょう。ちなみにDOM対応ブラウザであっても、document.writeで書き出してあげないとうまく適用されない事例が見受けられました。ですのでこの仕組みを実際に利用するときは、その辺に要注意というか、いろんな環境での動作確認をしっかりして、それらに対応する処理を加えたうえで組み込む必要があることを、念のため断っておきます。

また、手っ取り早くない方法というのもあって、それはJavaScriptを使用せずに、各ブラウザのバグを逆手にとって、こういうCSSの書き方をすればこのブラウザにしか読み込まれない、といったようなことを駆使して、ターゲットとなるブラウザの数だけトラップを仕組んでどうにかするというワザです。これはこれで、JavaScriptが無効の環境でも利用できるというメリットがあるので、有用な場面もあるでしょう。こちらの方法については、皆さん自身で考えてみてください。いや理論的には可能っぽいのですが、実際にやるとなると、かなり面倒くさそうなのでといいますか……。

なお、前者のJavaScriptを使ってどうにかする方法ですが、弊社の制作サイトでもそこそこ使われており、一定の有用性が認められていますので、わりとオススメできる感じです。

なんならFONT要素を使っても

最後に付け加えるとすれば、FONT要素を使うという手もまだまだ捨て難いのではないかということです。CSSでうまいことやるにしても、フォントサイズが可変という前提がある場合は、やはりそれなりに難しさもあり、自然なデザイン/レイアウトを実現するためには人知れぬ苦労をしなければならなかったりもします。

Netscapeでいえばバージョン3.xだったくらいの頃、つまりフォントまわりにすらもCSSを使わなかった頃を思い出してみましょう。あの頃はFONT要素を使ってたとえば「<font size="3">」などという指定をしていたことと思いますが、CSSでフォントサイズを固定するくらいだったら、たとえ今後淘汰されていくべき要素として名高かろうともFONT要素のほうがアクセシブルであるといえます。それに枯れた表示技術でもあるため、どのようなサイズで表示されるかの想定も比較的しやすいのではないでしょうか。CSSやJavaScriptなどのように、ブラウザごとに隠れ潜むワケのわからないバグに悩まされることもありませんし。とはいえ、意味づけでない要素が混入することで、文書構造がゴチャゴチャしてしまうというデメリットも、もちろん存在するのではありますが。

まとめ的なモノ

アクセシビリティを改善すると一口にいっても、そこにかかる、またはかけなければいけない労力は計り知れない場合があります。フォントサイズが可変であることでそのウェブサイトへの近づきやすさが高まることは間違いありませんが、単純に「body { font-size:10pt; }」としていた部分を「body { font-size:100%; }」に置き換えれば済むという話ではありません。

CSSでうまく可変化に成功できるのならそのほうが良いでしょう。ただ、うまくいかないからといって「固定にしよう」とあっさりと諦めてしまうのではなく、その時はFONT要素やBASEFONT要素を利用する手段もひとつの手だと考えてみてはどうかなと、そんなことも思ってしまう今日この頃なのでした。

見る側にとってだけでなく、作る側にとっても幸せになれるアクセシビリティ改善が実現できるように考えていきたいものです。