Webページにおける文字の拡大/縮小機能
（2009年10月30日追記）
諸事情により、このコラム記事で扱っている文字拡大/縮小機能は、当サイトから外すことにしました。詳しくは「文字拡大/縮小機能の実装を外しました」をご参照ください。
アクセシビリティ対策の一環として、Webページの文字サイズを可変にしておく（ユーザーが自由に文字を拡大/縮小できる）ことは、大切なことです。特に高齢者や弱視の方は大きな文字でないと判読できない、ということを充分留意する必要があるでしょう。
具体的には、（CSSコーディングにおいて）文字サイズをpx単位などで固定しない、ということになります。そうすることでユーザーは、ブラウザの文字拡大機能（たとえばInternet ExplorerやFirefoxの場合、[表示]メニューの[文字サイズ]、Mac OS Safariの場合、[表示]メニューの[文字を拡大]）を使って、文字サイズを自分好みに設定できるからです。
ただ、ユーザビリティテストを観察していると、ブラウザの文字拡大機能が意外と知られていないというのも、残念ながら事実です（特にインターネット初心者やご高齢の方に多いように思います）。こうした背景から、自治体サイトをはじめ公共性の高いサイトでは、文字サイズの拡大/縮小ボタンをWebページ上に用意しているケースもあります。
個人的には、文字の拡大/縮小機能はWebページの「コンテンツ（内容）」ではないことから、基本的にはWebページ側ではなく、あくまでもブラウザ側で持つべきものと考えています（ブラウザのユーザーインターフェースが、もっとわかりやすくなってくれれば根本的に解決すると思います）。中途半端な文字拡大機能をページ側に実装して、それでも「うちのサイトはアクセシビリティをちゃんとやっています」と変にアピールできてしまう風潮も、あまり好きではありませんし。（「中途半端な文字拡大機能」とはたとえば、[大][中][小]ボタンを搭載しているページで[大]ボタンをクリックしても（高齢者や弱視の方にとって本当に使えるほどの）適切なサイズにならなかったり、文字サイズを拡大できても元の標準サイズに戻るすべが無かったり（縮小ボタンを何度もクリックしなければならない）、などです。）
とはいえ、上記のようにユーザビリティテストで観察された事実もあるものですから、現時点の落としどころとしては、ページ側で文字拡大/縮小機能を持つのもやむなしかな、とは思います。ただし、やるからには、以下の3つの要素は押さえておきたいところです。
- 文字サイズは（[大][中][小]といった3段階程度ではなく）際限なく拡大でき、適宜縮小できること。
- 標準サイズに1アクションで戻ることができること。
- （言わずもがなですが）文字の拡大/縮小によってWebページのレイアウトが崩れないこと。
というわけで、このサイトでも文字拡大機能を実装してみました。ぜひ触っていただき、使用感などお聞かせいただけると嬉しいです。
（公開日：2007年1月 9日 ｜最終更新日：2009年10月30日 ）
いただいたコメント（9通）
コメントを投稿する
（投稿いただいたコメントは、当サイト管理者による承認後、公開させていただきます。なお、コメントの記入は、日本語でお願い致します。）
トラックバック
この記事に対するトラックバックURL: http://website-usability.info/cgi/mt/mt-tb.cgi/68
Good!だと思います、機能的には。
実際に配置するときは、もう少し目立つ色にしないとシニアは気が付かない危険性アリ。
titleがきちんと付けてあるのが、（チップで表示されるので）細かな配慮ですね！！
暫くさん、コメントありがとうございます！
配色については、もう少しコントラストを高めたほうが良いだろうな、とは思います。こっそり直すかもしれません。ご了承ください。（笑）
img要素には、altだけでなく、title属性も付けるよう習慣づけています。altはあくまでも、画像が表示できない場合などの「代替テキスト」であって、IEがaltの内容をツールチップで表示するのは「たまたま」なんですよね。Firefoxで画像のツールチップを出そうとする場合は、img要素にtitle属性を付ける必要がありますが、HTMLタグの本来の意味に忠実に従うと、そのほうが正しいと言えます。
突き詰めてゆくと、altとtitleは異なる記述にすべきでは？という議論も出てきそうですが。
こちらのエントリーに刺激を受けて、「a 要素の title 属性」について書いてみました。かみ合いますかどうか？（苦笑）
暫くさん、コメントありがとうございます。
a要素のtitle属性、興味深く拝見しました。ツールチップのテキスト（title属性）とアンカーテキスト（リンクラベル）を安易に同一にしてはいけないというご意見、なるほどそのとおりだなと思いました。Webのプロとして、タグ（要素）や属性の意味をよく考慮して、「基本に忠実な」マークアップをすることが大事ですよね。
またいつでもお気軽にコメント/フィードバックください。
はじめまして。Webアクセシビリティ向上のためのモニターテストを、障害者の就業施策として自治体にアピールしているNPOです。
kazさん同様、私も最近の自治体の「拡大・縮小」ボタンには、何かアクセシビリティの免罪符的に使われているように思えてなりません。「暫くさん」もおっしゃっているように色もそうなのですが、周辺の色とのコントラストが悪くて弱視者が気づかなかったり、設置場所が悪くてシニアが気づかない場合もあります。
そもそもjavascriptがどうなのでしょう？セキュリティレベルをあげているとjavascriptが機能せずに拡大・縮小ボタンが機能しない場合もありますよね。
kazさんがおっしゃるように、拡大・縮小のバリエーションからも、まだ「ブラウザの「文字サイズ」で換えてください」と言っている自治体のほうがいいように思うのですがいかがでしょうか？
javascriptを使わないでこの「拡大・縮小」を解決できないでしょうか。
弱視の方は画面解像度やwindowsの拡大鏡で文字を大きくしているので問題ないのですが、シニアの方はIBMの「らくらく散策」以外に、自治体がお金をかけないで実現できる方法がないかなぁ、といつも思っています。勉強不足ですみません。
javascriptは素人レベルなので、的外れでしたらごめんなさい。
みかんさん、はじめまして。コメント、ありがとうございます。
みかんさんのご意見、まったく同感です。文字の拡大/縮小は本来はブラウザ側で持つべき機能だと思うので、ブラウザのユーザビリティが向上しないと根本的な解決にはならないと思います（原則論として）。
>「ブラウザの「文字サイズ」で換えてください」
> と言っている自治体のほうがいいように思う
> のですがいかがでしょうか？
原則論としては正しいと思いますし、この手のヘルプページも、無いよりはある方がベターでしょう。ただ残念なことに（私の知見の範囲内ですが）Webユーザーの多くは、わざわざヘルプページを開いてくれません。もちろん、ブラウザに文字の拡大機能がある（[表示]メニューから呼び出せる）ことすら知らない方が大半です。
そういった人を多少なりとも救済する意味では、ページ内のわかりやすい位置に文字拡大機能を設けておくことは（原則論と照らし合わせると決してスマートではないにせよ）仕方なしかなあ...と思います。
で、JavaScriptについてですが、みかんさんのおっしゃることはよくわかります（アクセシビリティを厳密に突き詰めてゆくと、JavaScriptが使えなくても利用可能であるべきですもんね）。ただこれについては「バランスの問題かな」とも思います。つまり、「JavaScriptが使えない状態では、絶対に文字拡大ができない、というわけではない（ユーザーが学習さえすれば、ブラウザ側で文字拡大ができる）」ことと、「Webユーザーの大半はJavaScriptを有効にしている（アクセスログ解析ツールなどで調べると、まあ当たらずとも遠からずと言えます）」ことを踏まえれば、「完全でないにせよ多少なりとも救済できる人がいるのであれば、やってしまったほうがベター」という考え方もアリだと思っています。なお、JavaScript以外の有効な手法については、私も勉強不足でよくわかりません（ごめんなさい）。お互い、よい手法がわかりましたら、情報交換させていただけると幸いです。
Kazさん、みかんです。ご回答ありがとうございました。
Kazさんのおっしゃる「救済手段としてのjavascript」はよく理解できました。ありがとうございました。
バランス、というお話もよく理解できたので、拡大・縮小ボタンを置きつつも、ブラウザでの拡大の仕方もお知らせするのが、今出来る最大公約数的な使い方ですよね。そして拡大・縮小ボタンの可変数を増やすとか、標準にすぐ戻れるようにする、などのKazさん的手法を広めていくことですよね。
>お互い、よい手法がわかりましたら、情報交換させていただけると幸いです。
こちらこそ宜しくお願いします。まずはKazさんの全ページを理解できるように精進しますっ！
拡大縮小サイト付ける予定はまったくなったんですが、上司からお客さんからよく聞かれるから調べてみて！いうことでこちらのサイトに行き着きました。
僕もご意見に賛成です。まぁ〜付けてって言われれば付けないといけないかなぁ〜と思いますが、大中小よりも拡大縮小標準の方が親切ですね。たいへん参考になりました。ありがとうございました。
sozoさん、コメントありがとうございます。
sozoさんのお客様から「よく聞かれる」とのことですが、それだけ文字の拡大（ひいてはアクセシビリティそのもの）に大して、関心が高いということなのでしょうか（すばらしいことですね）。少しでも参考になれば、とても嬉しいです。