初心者のためのホームページ作り 第95号

初心者のためのホームページ作り

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

<第95号> 今週のおさらい
             毎週金曜日配信 What's New 2004年6月11日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
   ■ 特集 Webデザイン --- 情報バリアフリー
Webデザイン --- 情報バリアフリー
高齢化が続いています。2003年10月現在では全人口の19%が高齢者であるという報告 (内閣府:高齢社会白書) があり、このまま推移すると2015年には26%、2050年では35.7%に膨れ上がります。
また、障害者数もおよそ656万人 (厚生労働省:2001年 障害者実態調査) が報告されています。
こうした背景の中で、行政や公的機関では高齢者や障害者の活動を支援する様々な取り組みが行われています。彼らの活動を妨げるバリア (障壁) を取り去る (フリー化) 施策は年を追うごとに加速しています。
一方でインターネット人口も2003年末には7700万人となり、そのうち15%が65歳以上の高齢者であることが発表 (総務省:2003年通信利用動向調査) されています。この比率は高齢化に伴い、今後ますます増える傾向になります。
情報のバリアフリー
先ごろ国会にて成立した「改正障害者法」では、自治体や企業に障害者施策の基本計画を策定するよう義務づけることなどを盛り込みました。あわせて、バリアフリー推進関係閣僚会議を発足し、政府は今後10年をメドにした重点指針を以下のようにまとめ、これまで以上にバリアフリー化を推進することが必要としました。
そうした中でとりわけ遅れているのが 「情報のバリアフリー」 です。ハードウェアの進歩が著しい中で、それを運用するソフトが遅れていることは紛れもない事実です。
デジタルデバイドが解消されつつある今、少なくとも私たちが Webサイトを構築し運用するに当たって、情報バリアフリー化は差し迫った急務と言えるでしょう。
情報におけるバリアフリーとは、誰もがいつでも自由にどのような方法でも情報を取得できることにあります。この講座で何度となく説明してきました「アクセシビリティ」は、バリアフリーなページを作成するための一翼を担っています。
SGMLを受け継ぐ HTML4.01の理念
HTMLは、初めてのマークアップ言語である SGML (一般化標準マークアップ言語) を分かりやすく発展させたものです。本来、マークアップ言語は
  • 物理的なレイアウトではなく、文書の構造を反映したものでなければならない
  • コンピューターと人間の両方が理解可能な形式でなければならない
という理念を基礎としています。
HTML4.01では、それまでの誤った解釈に基づいて作られたマークアップを SGMLの精神に回帰する画期的なバージョンです。
元々のマークアップは、文書構造が論理的に示されるべきであり、視覚的な効果を狙った物理的なレイアウトを校正するものではありません。HTML4.01は、さらにアクセシビリティを忠実なものにするため、そうしたタグは 「非推奨:Deprecated」 としました。
つまり、HTMLのタグを使って表示方法を指定しないということは、何よりも閲覧環境に依存しないということにほかなりません。音声や点字、テキストといった非視覚系ブラウザでも環境に拘わらず適切なレンダリングと情報伝達が可能になります。これこそがマークアップの理念ということになります。
Webデザイン --- 情報バリアフリー実現のために
ここでは Webページをどのようにしてバリアフリー化を目指すのか、そのアーキテクチャーについて解説します。
もう一度自分のページを見直し、あるいはブチ壊し、根本から再構築する気概があるのならば、バリアフリー化を実現する道はそう遠くないことでしょう。
文字 (テキスト)
情報を伝える手段として、文字 (テキスト) ほど有効で利用度の高いものはないでしょう。それだけに文字におけるバリアフリー化は重要です。
文字情報には、半角カタカナや機種依存文字、特殊な記号などの使用を控えます。こうした文字は、環境によっては表示エラーが発生する可能性があります。
以下は、Windowsで利用される機種依存文字の一部を画像で表したものです。

Windows専用機種依存文字一覧

また単語にスペースを入れた場合、音声読み上げソフトでは正しく発音することができません。例えば、 「北海道」と不用意なスペースを挿入した場合、「きた、うみ、みち」と発声して意味が通じません。どうしても語句にスペースを入れたい場合は、スタイルシートの letter-spacing属性を使いましょう。
文脈途中で不用意な強制改行を入れると、音声ブラウザでは文章が正しく読み取れません。また、自動改行に任せる場合でも、変に文章をセンタリングするとおかしな表示になったりします。
文字の大きさを指定する場合には、閲覧者が自由に大きさを変えられるよう 「相対値」 で指定するようにしましょう。特に高齢者は小さい文字が読みづらい傾向にあります。
フォント
デザイナーにとってフォントは厄介な対象かもしれません。指定したフォントが閲覧環境で実装されている保証はないわけですから、その扱いに苦労されている方もあるでしょう。
その意味ではフォント種の指定はあまり効果がないのかもしれません。
ただし、明朝体やゴシック体、固定ピッチフォントの指定はある程度実現可能です。スタイルシートの font-family属性を使って、汎用的に利用できるフォント種を指定します。
詳しくは、当サイト内にある基礎講座の フォント の項をお読みください。
いわゆる色弱障害者にとってある特定の配色を理解できない場合があります。例えば、赤と緑という組み合わせはその違いをまったく認識することができません。無闇に色に頼る手法を考えなくてはなりません。
また、背景色と文字色の配色が悪く、通常の人にも見えにくい現象を呈することがあります。双方の配色は、捕色の関係を考慮するようにしましょう。詳しくは 色の基礎知識を参照してください。
各OSで定義されている色名 (ColorName) は、同じ環境であれば再現することができますが、閲覧者の環境は千差万別です。darkgreen とか hotopink で指定すると、必ずしも正しい色で再現できるわけではありません。色の指定はできる限り数値 (16進数) で行うよう心がけましょう。
画像
画像を表示できない閲覧環境があります。音声や点字、テキストブラウザや通信速度が遅いダイヤルアップ環境では閲覧者により初期値として画像を「オフ」に設定している場合があります。こうした環境に配慮して代替のテキストを用意するのはもちろんですが、画像に頼らないコンテンツのあり方にも工夫をしてください。コンテンツに直接関係ない写真の掲載は控えましょう。
一般的に画像の容量は大きいものです。1ページ全体の容量を考慮し、ナローバンドでも比較的少ない時間で受信できるように意識することはとても大切なことです。
デジタルカメラなどで取り込んだ写真などは、そのままでは非常に大きな容量となりますので、必ず編集してからアップするようにしましょう。
動画・プラグイン
ブロードバンド化 (高速常時接続回線) が進む中で、リッチ・コンテンツの整備も進んでいます。その多くで動画映像を提供している場合が少なくありません。
ご存知のように動画ファイルは様々な形態のプラグインツールを利用することが一般的です。その中でも代表的なのが アップル社の QuickTime、マイクロソフト社の WindowsMedia、及び Real社の RealMedia でしょう。
プラグインツールは、閲覧者が簡単に取得でき、かつ容易にインストールできるよう詳しい解説などを用意するようにしましょう。
閲覧者の環境を考慮した場合、それぞれのプラグインに対応する複数の動画ファイルを用意する必要があります。
同時に、耳に障害を持つ閲覧者のために、動画に字幕を提供する必要もあります。また、動画を見られない閲覧者のためには、代替のコンテンツの提供も用意することになります。(現実にはほとんどの場合で無視されているようです)
動画にはマクロメディア社が提供している FLASHもあります。アニメーションやスクリプトを自在に扱うことができ、インタラクティブなコンテンツを作成できるソフトウェアですが、やはりプラグインが必要となります。
FLASHは動画上でナビゲーションリンクを設定することができますが、FLASHファイルを閲覧できない人のために、別途テキストベースでもナビゲーションを用意する必要があります。FLASHにはアクセシビリティに関する機能もありますので、制作側で併用することを強くお勧めします。
各種プラグインを利用するコンテンツを作成する場合、あくまでも閲覧者の操作によって始めて動作できるように心がけましょう。勝手に音楽を鳴らしたり、重いファイルをダウンロードさせるようなことは避けるべきです。
表 (テーブル)
テーブルには各種のブロックレベル要素を画位置することができる大変便利な機能が備わっています。そのためページのレイアウトにテーブルを利用するサイトが多いのも実情ではないでしょうか。
しかしながら、第85号で説明したとおり非視覚系ブラウザでは表組 (テーブル) のレンダリングが大変苦手です。また、視覚系ブラウザの中には、表中のデータすべてを受信しないと描画できないこともあります。それ故、テーブルをレイアウトに利用することは、決して好ましいことではありません。別の方法がありますのでそれを利用しましょう。
表として利用する場合、非視覚系ブラウザのために、テーブル全体の要約を提供する summary属性を、表題を提供する caption要素を利用するなど、初歩的な作法を忘れないように心がけましょう。
視覚系ブラウザでは、表中のデータを直感的に捉えることができますが、非視覚系ブラウザでは表中のデータが多くなると、各セル内のデータが何を意味しているのか掴み取ることができません。
そうした問題を回避するために、見出しセルを設けデータを構造化する必要があります。詳細は、第85号、及び 第86号を参照してください。
フォーム
アンケートや通販などにおける注文受付のフォームでは、キーボードだけでも入力コントロールを移動できるように accesskey属性や、tabindex属性を設定するようにします。
また、非視覚系ブラウザでも入力コントロールに label要素を使って 「ラベル」 を設定しておくと、入力する内容の意味が理解できるようになります。
アクセシブルなフォームを作成するための詳細は、第82号を参照してください。
スクリプト
閲覧者の操作に反応して動作するようなインタラクティブなコンテンツを作るうえでは重宝なスクリプトですが、すべての環境で同じ動作を得られるわけではありません。スクリプトに対応していない環境や、近年のセキュリティにおける関心の高さから、スクリプトを 「オフ」 にしている閲覧者も少なくありません。
重要な情報を提示する手段としてスクリプトを使う場合には、スクリプトに対応していない閲覧者のために、代替のコンテンツを用意してください。代替コンテンツは noscript要素を使って作成します。
スクリプトには様々な種類があります。代表的なのが JavaScriptや、VBScriptでしょう。JavaScriptではバージョンの違いにより閲覧環境では微妙に動作が異なります。VBScriptも、環境によっては実装されていない場合もあります。
そうしたことを考慮すると、できることならスクリプトに頼ったページ作りは避けたいところです。


This page is Valid HTML 4.01! 初版公開日 2004年6月15日
Copyright(C) 2002-2004 banban@scollabo.com