日経インターネットテクノロジー 1998年9月号（1998年8月22日発行）より転載
技術 ＴＥＣＨＩＮＳＩＤＥ
ＷＷＷのアクセス性向上(KEYWORD･HTML4.0･WAI･CSS)
ＨＴＭＬ見直しでだれでもアクセスしやすく
ＷＷＷのアクセス性の低下が問題となっている。ＨＴＭＬの機能不足から見栄えと構造を混同したＨＴＭＬ文書が数多く作成されたためである。ＨＴＭＬ4.0が登場した今もＨＴＭＬをめぐる｢誤解｣は解消されていない。だれからも見ることのできるＷＷＷについて再考する。
(末安 泰三＝sueyasu@nikkeibp.co.jp)
インターネットの利用法が広がるなかで、可能性も増大しつつあり、在宅勤務や在宅学習への道も開けた(図１)。先日もスタンフォード大学の電気工学修士コースを完全にオンラインで取得できるようになったことが話題を呼んだ(http://scpd.stanford.edu/cee/telecom/onlinedegree.html)。ハンディキャップのためにこれまで自宅に引きこもりがちであった人々も、インターネットを情報収集やコミュニケーションにと積極的に活用し始めている。｢チャレンジド(障害者)にとってコンピュータやＩＴ技術は、人類が火を見つけたのと同じくらいの意味を持っている｣(プロップ･ステーション代表 竹中ナミ氏)という声も上がるほどだ。
バリアフリー社会へ向けた社会資本整備が問題となっているが、ネットワーク上ではいち早くバリアフリー社会が実現されているという見方もできる。異なる環境下での文書共有の必要性から生まれたＷＷＷではとくにそうだ。
ところが最近、見栄え重視のＨＴＭＬ文書の増加で、｢だれからもアクセスできる｣というＷＷＷの理念が脅かされている。視覚効果を優先させ文書構造を崩したＨＴＭＬ文書が増え、とくに視覚障害を持つ人々のアクセス性が低下しているのである。
画像の無配慮な乱用も問題だ。代替文字列をつけるちょっとした配慮を怠り、音声ブラウザやテキスト･ブラウザでの閲覧を不可能にしているＷｅｂページがあまりにも多い(写真１)。これらのＷｅｂページがどれほど不便なものであるか、日本ＩＢＭの「こころＷｅｂ」(写真２)にある「ネットワーカー実例集」の体験談を読んで考えてみたい。
特定の人のためではない
ＷＷＷのアクセス性を向上させるというとどうしても障害者に意識が向きがちであるが、決してそれだけにとどまるだけではない。最近ではＰＤＡ(Personal Digital Assistant)でＷＷＷを利用する人々も増えている。テキストしか表示できないＰＤＡも多いし、通話料金の増加を嫌って画像の読みこみを避けるユーザーもいる。
ユーザーの環境に関係なく情報にアクセスできる。これが「アクセス性向上」の本質だ。インターネットの利用形態が多様化するなか、ユーザーの環境も多様化している。「福祉」的発想ではなく、純粋に広告の費用対効果増大という観点からアクセス性について考えることが必要である。
また、アクセス性の高い文書を作成することは文書管理にかかるコスト削減につながる。なぜならアクセス性の高い文書とは、再利用性の高い文書のことを意味するからである(図２)。ＨＴＭＬは文書構造を記述するだけに利用し、見栄え部分はＣＣＳ(Cascading Style Sheets)などのスタイルシートで制御するようにすれば、ＨＴＭＬ文書を業務システムなどで利用することが容易になる。
バリアフリーなＨＴＭＬとは
それでは、アクセス性の高いＨＴＭＬ文書とはどのようなものなのであろうか。
１９９８年４月１４日にＷＷＷの標準化団体Ｗ３Ｃ(World Wide Web Consortium)内に設けられたＷＡＩ(Web Accessibility Initiative)という機関が、｢WAI Accessibility Guidelines: Page Authoring｣の最新ワーキングドラフトを公開した。ガイドラインでは、大きく３つのことを提唱している。
- ＨＴＭＬは文書構造記述に使用
- ナビゲーションや操作性をよくする
- 情報を得るための複数の方法を用意
これらを実現する具体的な記述方法については後述することにして、まずは日本ＩＢＭの「バリアフリーの扉」(写真３)にある「ｉ―Ｃｈｅｃｋｅｒ」(http://www.ibm.co.jp/accessibvility/i-checker/)というＨＴＭＬチェッカで、自分の書いたＨＴＭＬ文書をチェックしてみることにしよう。ｉ―Ｃｈｅｃｋｅｒでは以下の４点をチェックする。
- 画像リンクにコメント(ＡＬＴ属性)が書いてあるかどうか。
- タイトル文書が書いてあるか。
- クライアントサイド･イメージ･マップのＡＲＥＡ要素にコメント(ＡＬＴ属性)が書いてあるかどうか。
- サーバーサイド･イメージ･マップを使用している場合、警告を出す。
サーバーサイド･イメージ･マップは、リンクの個所などをクライアント側で判断するのが難しいため使用しないことが望ましい。使用していると即、警告を出るようになっている。
本誌のＷｅｂページをｉ―Ｃｈｅｃｋｅｒでチェックしてみた結果が写真４である。「１個の画像リンクにコメントがありません」と警告されたが、そのほかは問題ないようであった。「バリアフリーの扉」サイトを担当する日本ＩＢＭ東京基礎研究所主任研究員の浅川 智恵子氏にホームページリーダーというＷｅｂページの読み上げソフトを使って、本誌Ｗｅｂページを読んでもらったところ、｢なかなか良かった｣との評価を得た(写真５)。
各フレームに内容が把握できるタイトルを付けていた点は、とくに評価された。オーサリング･ツールによってはフレームに適切なタイトルを付けるのは難しいらしく、フレームにタイトルがないＷｅｂページが増えているという。視覚障害者は音声ブラウザで各フレームを読み上げて、読みたいフレームを判断しているため、困ることが多いのである。
なお浅川氏などは、パソコン上で動作可能なｉ―Ｃｈｅｃｋｅｒを９月１６日から千葉･幕張メッセで開催される「ＩＢＭ総合フェア'９８」(http://www.ibm.co.jp/event/sougou98/)で配布する。その後Ｗｅｂページからもダウンロードできるようにするという。
ｉ―Ｃｈｅｃｋｅｒでエラーを指摘されなくても万全とは限らない。ｉ―Ｃｈｅｃｋｅｒは「Ｗｅｂアクセシビリティを考える第一歩。チェック項目も変更が容易で、かつ重要なものに絞ってある」(浅川氏)。よりチェックの厳しいチェッカとしては石野 恵一郎氏作の「ＡｎｏｔｈｅｒＨＴＭＬ−ｌｉｎｔ」(http://ring.aist.go.jp/openlab/k16/htmllint//htmllint.html)などがある。ＡｎｏｔｈｅｒＨＴＭＬ-ｌｉｎｔはＨＴＭＬ文書中のＤＯＣＴＹＰＥ宣言に従って、ＨＴＭＬのバージョンに沿った文法チェックをし、採点してくれる。
さっそく本誌のＷｅｂページをチェックしたところ、なんと１３２個のエラーで点数は「−４５点」という悲惨な結果となった。まだまだ課題は多い。
結果表示には詳しい解説が付くので、非常に勉強になる。ひとつひとつクリアして、エラー･ゼロを目指したい。
ＨＴＭＬ4.0でアクセス性を向上
現在有効なＨＴＭＬのバージョンについて整理しておこう。
使用できるＨＴＭＬのバージョンは、「ＨＴＭＬ2.0」、「ＨＴＭＬ3.2」、「ＨＴＭＬ4.0」の３つである。１９９５年２月にＲＦＣ１８６６となったバージョン2.0はすでに古く、実際にはこの範囲で書かれたＨＴＭＬ文書はほとんどない。現在おもに使われているのは、１９９７年１月にＷ３Ｃ勧告となったバージョン3.2相当のものである。各社が独自拡張したタグを追認した規格だ。
そして１９９７年１２月にＨＴＭＬ4.0がＷ３Ｃ勧告となった。ＨＴＭＬ4.0は国際化、スタイルシートの使用、マルチメディア、スクリプト、フレームそしてアクセス性向上にかかわる大幅な機能拡張がなされたバージョンである。「Ｓｔｒｉｃｔ」、「Ｔｒａｎｓｉｔｉｏｎａｌ」、「Ｆｒａｍｅｓｅｔ」のサブ･バージョンがあり、もっとも厳格なＨＴＭＬ4.0−Ｓｔｒｉｃｔでは、見栄えに関する要素や属性、たとえばＦＯＮＴ要素などが破棄されている。
見栄えに関してはスタイルシートを使用することになっており、スタイルシートを使用するためのＳＴＹＬＥ要素などが初めて導入された。
したがって、本記事でこれまで述べたことを実践するにはＨＴＭＬ4.0への移行が欠かせない。しかし、ＨＴＭＬ4.0−Ｓｔｒｉｃｔと、現在までに蓄積されたＨＴＭＬ文書との文法的なギャップは大きい。しばらくは両者の橋渡し役として用意された「ＨＴＭＬ4.0−Ｔｒａｎｓｉｔｉｏｎａｌ」を使用して、徐々に移行作業を行うのが良いだろう。ＨＴＭＬ4.0を使用する際に用いるＤＯＣＴＹＰＥ宣言は、表１のようになる。
［アクセス性の高い文書のためのＷＡＩのガイドライン］
ＷＡＩの「ページ作成に関するガイドライン」の柱は、前述した３つである。以下、ＷＡＩガイドラインの章立てに従い、不可欠な項目に限って詳しく見てみる。このガイドラインについては、本誌pp.１４４−１４９の「連載講座●Ｗｅｂを基礎から理解する」で詳しく解説してある。
スタイルと構造
まず、ＨＴＭＬ4.0とＣＣＳ１に従った要素や属性を使うことを不可欠な条件として挙げている。移行期間ということでＨＴＭＬ4.0−Ｓｔｒｉｃｔについてはまだ推奨にとどまっている。スタイルシートを使えない環境でもページが読めるようにすることも必要だ。スタイルシートに未対応のブラウザもまだ多い。
Ｈ１の次にＨ３が来るような不適切なヘディングをしないようにする。Ｈｘはあくまで見出しレベルを設定するものである。上のような使い方は、文字の大きさを変更するためといった、スタイル目的の使い方である場合が多い。
リスト要素(ＤＬ,ＵＬ,ＯＬ,ＬＩ)をリスト作成以外には使用しない。インデントにはスタイルシートを使うべきである。
文字をブリンクさせたり電光掲示板のようなマーキー表示をさせないことも不可欠な項目である。ＨＴＭＬ4.0にそのためのタグや属性がないこと(ＣＳＳにはブリンク表示のための属性はある)、次にブリンクやマーキーをスクーリン･リーダーが正しく読めないことが理由とされている。
画像とイメージ･マップ
すべての画像とイメージ･マップには代替テキストを用意することが必要である。ＩＭＧ要素やＡＲＥＡ要素にはＡＬＴ属性で短い説明をつけられる。ＯＢＪＥＣＴ要素を使用した場合は、要素本体に説明文を記述できる。
グラフやテーブルなど、重要な情報を持つ画像には詳細な説明をつけるべきである。詳細情報の付加方法としては次の４つの方法が紹介されている。
(1) 画像のそばに詳細情報を記述した文書へのリンク(Ｄ−ｌｉｎｋ)を用意する。
(2) ＨＴＭＬ4.0で新たに用意されたＩＭＧ要素のＬＯＮＧＤＥＳＣ属性で記述する。
(3) ＯＢＪＥＣＴ要素の本体に記述する。
(4) 画像の中にテキストを埋め込む(ＰＮＧ画像の場合)。
クライアントサイド･イメージ･マップを使用する場合、ＡＲＥＡ要素のＡＬＴ属性やＴＩＴＬＥ属性を使って代替文字列をつけるべきである(図３)。また、リンク部分にはＡＣＣＥＳＳＫＥＹ属性を利用してキーボード･ショートカットを設定して、操作性を向上させておく必要がある。
サーバーサイド･イメージ･マップは使用するべきではない。どうしても使用する必要がある場合は、イメージ･マップに続いて、リンク･リストを別途準備しておこう。
アプレットとスクリプト
各アプレットやスクリプトが伝えるのと同等の情報を、別の表現方法で用意しておく必要がある(図４)。説明文の付け方には以下の４つがある。(1) ＮＯＳＣＲＩＰＴ要素を使って、ＳＣＲＩＰＴに対応していない環境で出力される文章を記述する。(2) ＡＰＰＬＥＴ要素の内容として、代替文字列を記述する(ただし、ＡＰＰＬＥＴ要素はＨＴＭＬ4.0−Ｓｔｒｉｃｔでは使用できない)。(3) ＯＢＪＥＣＴ要素として説明文を記述する。
アプレットやスクリプトで提供する機能でも代替手段を用意すべきである。たとえば顧客情報を入力するアプレットを使用している場合は、フォームを利用した別の入力手段も用意しておくといったことである。
また、アプレットそのもののアクセス性、操作性を高めておくことも重要だ。「Java Accessibility Program」
(http://trace.wisc,edu/world/java/jave.htm)を参照しておこう。
オブジェクトが移動したり点滅するようなアプレットやスクリプトを作成する場合は、それらを停止できるような機構を準備しておく。とくに文字情報を含む場合にはそれが要求される。
音声と動画
音声や動画の内容をすべて文字に起こして用意しておく。音声には副音声で動画の情報を説明する。
字幕や、画面に同期したファイル形式で文字説明を付加することも重要である。ＱｕｉｃｋＴｉｍｅ３.０など一部のファイル形式では、マルチメディア･クリップにキャプションや解説を付け加えることができる。また、将来的にはＳＭＩＬ技術(http://www.w3.org/TR/WD-smil/)を使って同様のことが可能となる。
テーブル
テーブルのセルにＨＥＡＤＥＲＳ属性やＳＣＯＰＥ属性を設定し、テーブルの行と列の関係を明示しておく。将来的にはテーブルを自動的に平文に変換するなどの技術が確立するものと思われる。また、テーブルを段組みに使用しない。
フレーム
フレーム機能をオフにしてもページが読めるかどうかを確認する。
フレームのひとつとして直接画像ファイルを指定しないようにする。この場合、画像を説明する文書はＦＲＡＭＥ要素のＴＩＴＬＥ属性しかないが、画像ファイルを別なものに変更した際にこちらも変更する必要が生じる。画像の代わりにＨＴＭＬ文書を指定することで、ＩＭＧ要素やＯＢＪＥＣＴ要素のＴＩＴＬＥ属性を使用することができる。
各フレームには、ＴＩＴＬＥ属性で必ず内容を示すタイトルをつける(図５)。
ユーザー入力フォーム
グラフィカルな実行ボタンを作成するためにイメージ･マップを使用しないにする。説明つきのＢＵＴＴＯＮ要素か、ＩＮＰＵＴ要素を使用する。
ラベルがどの入力に対してのものであるかを明示する。このためにはＬＡＢＥＬ要素のＦＯＲ属性を使用する(図６)。
実行ボタンに画像を使用する場合は、ＡＬＴ属性で説明を付けておく。
色づかいにも注意
ＷＷＷのアクセス性に関して忘れてはならない人々がいる。色覚異常を持つ人々である。色覚異常は網膜にある錐体の働きに問題がある場合に発生し、全色盲、赤緑色覚異常、青緑色覚異常に分けられる。なかでも多いのが赤緑色覚異常である。日本人の場合、実に男性の２０人に１人、女性の５００人に１人が赤緑色覚異常といわれる(男女の比率に大きな差が生じるのは伴性劣性遺伝という形式で遺伝するため)。
英国のAndrew Oakley氏のＷｅｂページ(写真７)などにあるように、色覚異常があると一般的に「赤、緑、茶、灰、紫」といった色の組み合わせが見づらくなる。たとえば緑の背景に赤の文字などがあると文字が読めない場合がある(写真８)。
できるだけこのような色の組み合わせは避けるようにしよう。使用する場合は高いコントラストをつけるか、文字を大きくする。画像の場合は文字による説明をつけるようにする。
チャレンジドという言葉を知っていますか？
大阪にプロップ･ステーションという非営利団体がある。コンピュータを活用して、チャレンジド(Ｃｈａｌｌｅｎｇｅｄ)の自立と社会参加、とりわけ就労の促進や雇用の創出を目的に活動する団体である。「チャレンジドを納税者にできる日本」をキャッチ･フレーズに、代表の竹中ナミ氏を中心に精力的な活動を続けている。
チャレンジドとは「チャレンジする運命を神から与えられた人」つまり障害者を表す。最近アメリカで使われ始めた言葉で、出来ないことよりも出来ることに注目し、物事に積極的に取り組んでいこうという意識が込められている。
全国のチャレンジドへのアンケート結果、コンピュータやパソコン通信に関心があり、自分たちの社会参加にとって有効な手段になると思う、という回答が多かったことからプロップ･ステーションでは活動の柱を「コンピュータを活用した支援」においている。「働きたいのはだれでもなくチャレンジド本人だ。コンピュータに関しては現在、日本人全体がチャレンジド状態といえる。スタートラインは同じで、そこにチャンスがある」(竹中代表)と、自立の大きな機会だととらえる。
プロップ･ステーションは、自立と就労に関するチャレンジドからの相談に応じるほか、機関誌「Ｆｌａｎｋｅｒ」の定期発行、パソコン通信プロップ･ネットの運営、Ｗｅｂページの運営(写真Ａ、http://www.prop.or.jp/)、職業訓練としてのコンピュータ･セミナーの開催(写真Ｂ)など多彩な活動を行っている。
８月５日には『プロップ･ステーションの挑戦―チャレンジドが社会を変える』(竹中 ナミ著、筑摩書房)が出版された。プロップ発足の経緯から今日までの活動をまとめたもので、米Ｍｉｃｒｏｓｏｆｔ社会長Ｂｉｌｌ Ｇａｔｅｓ氏のコメントなどもある。
ええ仕事しまっせ！
実務･営業部門である「プロップ･ウイング」(所長:鈴木重昭氏)が、企業と密接な連携をとりながら、コンピュータ･ネットワークを活用した在宅ワークの拠点として活動している。働くのは、プロップのコンピュータ･セミナーでデータベースやグラフィックを学んだチャレンジドの人々だ。トヨタ自動車から大量のデータ入力を依頼されたりと、徐々にはではあるが仕事も増えてきている。
グラフィックに関しては昨年「バーチャル工房」というグループが発足し、ＷＷＷブームのなか、コンテンツ作成業務などで、こちらも着実に実績を上げている。本記事に使用したイラスト(図１)も、このバーチャル工房に作成してもらったものである。
まだまだ仕事の依頼が少ないということなので、興味を持たれた方は鈴木氏に連絡を取ってみてほしい。電話番号は(０６)８８１−００４１、ＦＡＸが(０６)８８１−３８６６である。