HOME→一歩先行くサイト作成編→スタイルシートとアクセシビリティ
HTML3.xまででは、見映えを重視するがあまりに、文書の構造を考慮しないページも多々ありました。つまり、見映えだけを変える要素で、HTML文書の記述を行っているページです。現在でも根強く残っています。
例１として、
見出しその１
をあげてみましょう。この２つはInternet ExplorerやOpera6.xでは、見た目上、全く同じように表示されます。
しかし、この２つは文書構造としては、別物です。なぜならば、ソース的には、
上は、<h1 style="text-align:center; font-size:large>見出しその１</h1> とCSSで中央揃えとフォントサイズを指定。
一方で下は、<p align="center"><b><font size="+2">見出しその１</font></b></p> と、たんなる段落。HTML上で太字にしたり、文字の大きさを変えているだけです。
HTML文書としてみた場合、下の方法では見出しとして認めてもらえないのです。
また、以下の２つも、Internet ExplorerやOpera6.x、Netscape4.xでは見た目上、同じように表示されます。
ここは重要なポイントです。
ここは重要なポイントです。
上は、より強い強調を意味するstrong要素に対して、<strong style="font-size : medium; color : red;">ここは重要なポイントです。</strong> と、CSSで文字の大きさと色を変えました。
一方で、下は、単に文章に対して、<font color="#ff0000" size="+1"><b>ここは重要なポイントです。</b></font>と見栄え上、文字色を変えて太字にしただけです。
HTML文書として見た場合、下は強調にはなっていません。
これでは、音声ブラウザを使っている訪問者には、そこが強調されているということは全く伝わりません。文字色だけ変えているともっと悲惨で、文字ブラウザやモノクロ画面を使っている訪問者にも、そこが強調されているというのが伝わらなくなります。
上記に挙げた例のように、本来ＨＴＭＬが持っていた「文書の構造を記す」という観点が失われてしまうということで、W3Cが1997年に勧告したのが、HTML4.0でした。HTML3.xまでとは異なり、
「今後は、HTMLから表示方法やレイアウトなどの『表現』に関する部分を排除していく」という方針を打ち出したことです。
このW3Cの方針は、文書にきちんと構造を持たせて、どのような環境であっても、同じ情報が伝わるようにしましょうという考えです。
具体的に言えば、HTML4.0からは、見出しはH1などの要素で、強調はstrong要素やem要素を使うことで、文書としての構造的な意味をきちんと持たせ、見かけに関する部分については、各要素に対して表示様式を別指定することにしましょうということです。
スタイルシートは上手に使えば、より見栄えの良いWebページの作成に役立ちますし、アクセシビリティの向上にも大いに貢献します。
スタイルシートを使う大きなメリットは、
という点です。
これらが何を意味するかと言えば、より見映えのよいページを軽く作ることができるということです。このサイトでもずいぶんとお世話になっています。
しかし、メリットばかりではないんです。
特に２番目のデメリットは、なまじ対応しているが故の問題点も引き起こす結果となりました。
例えば、行間を変更するCSSのline-heightプロパティ。このサイトでも使っていますが……画像を途中に入れた場合、画像の大きさによっては、前の行の文字と重なり合ってしまうのです。
今日は、
で一日中
をいじってました。
これは、「今日はおうちで一日中パソコンをいじってました。」と読ませたいのですが、Netscape4.xでこの部分を読むと非常に読みづらいのです。
対応していないのなら、はっきりしないとアナウンスされていた方が、よっぽどましだったと思います。特にNetscape
Communicator 4.xの対応はあまりにもひどすぎます。
Netscape4.xについては、別文書で記述をしたいと思います。
全く対応していないのであれば、表示様式の情報が失われますから、ブラウザとしては、ソースの上から書いてあることを順番に読んできて表示します。このサイトの場合だと、デフォルト色の背景（Internet
Explorerは白、Netscape Communicatorは灰色）に真っ黒なテキスト。文字の大きさはもちろんブラウザ任せ。でも、文書としての構造はしっかり保たれています。
スタイルシートが使えない状態で文書としての構造が崩れてしまうのであれば、HTML文書としては失格です。
スタイルシートを使った、見映えのよいWebサイトも増えてきました。が、見映えにこだわりすぎるがあまりに、以下のような落とし穴にはまってしまっているサイトも目立ちます。
自由なデザインをするためのスタイルシートという側面だけにとらわれすぎて、アクセシビリティという概念を考えていない結果、このようなサイト作りになってしまっているかと思います。「文字サイズの固定はしない」や「見苦しいテキスト配置」でこれらの落とし穴について解説していますので、参照して下さい。
HTML4では、テーブルを使ったレイアウトというのは間違った使い方だとやり玉に挙げられています。テーブルを使用したレイアウトの場合、スタイルシートでレイアウトをすべきだという考えです。理想を言えば、CSSのpositionプロパティ、floatプロパティ、marginプロパティでと言うことでしょう。
しかし、CSSに対応していなかったり、中途半端にしか対応できていないブラウザで閲覧する訪問者のことを考えると、何でもかんでもスタイルシートというのはあまりにも危険です。かえってアクセシビリティの低下を招きかねません。
これらのブラウザのことまで考えるのあれば、テーブルを使ったレイアウトを否定できません。特に見映えを重視するのであればなおさらです。
W3Cの勧告だからと、安易にスタイルシートを使うのではなく、使うのであれば、アクセシビリティの向上というのをまず第一に考えて欲しいということです。
スタイルシートを使うことで、かえってアクセシビリティを下げるのであれば、使う必要なんてないと考えます。
リンクに関してはご自由にどうぞ。