障害者・高齢者に配慮したウェブ制作とは

2006年01月30日 更新 | タグ: アクセシビリティ

障害者・高齢者に配慮したウェブ制作については、多くの文献やインターネット情報の情報があります。それらの資料へのリンクも紹介していますが、ここではテーマごとに箇条書きして、柴田なりの表現で代表的な対応を書いていきます（あくまで箇条書きですので、それぞれの理由などは、のちのち詳述していきたいと思います）。

• 多くの閲覧環境を想定する
• 閲覧者に文字サイズ変更の自由を残す
• 閲覧者が期待する以外の挙動をみだりにしない
• 画像には適切な alt 属性を入れる
• できるだけ画像でなく文字をつかう
• 使いにくいハイパーリンクの作り方をしない
• サイト内に於いて各ページに固有の title をきちんとつける
• フレームを使わない
• コントラストを確保する
• Javascript やプラグインに依存した情報提供をしない
• 色や形に依存した情報伝達をしない
• なるべくわかりやすい言葉で文章を書くようにする
• 最後の最後に：おそれずに情報開示に努めることが重要

多くの閲覧環境を想定する

ウェブ制作をする際、さまざまな閲覧環境を相手にするということを念頭に置く。とても古いコンピュータを使っているひともいるし、世間で利用されているブラウザも数多くある。なるべく多くの環境で閲覧テストをするように心がけ、情報がきちんと伝わるかどうかに腐心する。
制作者・クライアントともに、自分たちにとって気持ちのよい見た目や挙動を追求せず、閲覧者がなにを必要としているかを重要視して制作するように心がける。

閲覧者に文字サイズ変更の自由を残す

一部のブラウザで文字サイズを変更できなくなるので、CSS の技術を使って文字サイズをピクセル固定したり、なんでもかんでも画像データにしないようにする。また、そもそも読んで欲しい文章であるのであるなら、みだりに小さくするのもあまり得策とは言えない。

閲覧者が期待する以外の挙動をみだりにしない

リンク先を新しいウィンドウで開くことや、所与のページに来たときに、問答無用で音を出したり、Flash ページを見せたり、こまかいウィンドウを開いたり……というのは、健常者にとっても邪魔であるが、視覚障害者や慣れていない人にとっては、邪魔なだけでなく大きなマイナスとして働くことが多い。

画像には適切な alt 属性を入れる

とくに全盲視覚障害者にとっては、画像の適切な alt 属性というのは、情報取得の生命線の一つになる。制作者側にとってもたいへんな労力を必要とする部分であるが、しかしまたその苦労に見合うだけの意味は十分にある。単純な alt（ただ文字列を画像にしただけというようなもの）だけでも、丁寧に入れていくだけで視覚障害者に対するアクセシビリティは格段に上昇する。複雑なグラフなどは、別に表を置くであるとか、longdsec 属性を使う^*1、などさまざまなインターネット特有の対応をする必要があるので、行き渡った対応というのは難しいがぜひ気をつけてゆきたい。

できるだけ画像でなく文字をつかう

画像というのは、情報提供のために、たいへん重要な仕事をするが、デジタルデータとしての汎用性は文字に比べるときわめて低い。たしかに地図やグラフは基本的に文字で表現することは難しく、画像を使うべき箇所である。が、見だし文言などを画像にしようとするときには、すこし立ち止まった方がよい。画像にしてしまうことで、多くのブラウザでは「サイズ変更」の恩恵にあずかることができなくなるのだ。

使いにくいハイパーリンクの作り方をしない

とても短い文字列や、ちいさい画像をハイパーリンクにしてしまうと、マウスでの選択が困難になるので気をつける。複数のハイパーリンクを隣接させるのも誤選択のもとになり易いので避けるようにする。

また、よくあるハイパーリンクのつくりかたで、「アクセシビリティに関する詳しい情報はこちら」というときに「こちら」の部分をリンクにしてしまうやり方がある。しかし、読み上げブラウザを使って、TABキーでハイパーリンクのみを順次選択していくときなどに、そのリンクが何処に向かっているのかをわからなくしてしまうので、この場合であれば「アクセシビリティに関する詳しい情報はこちら」の全文をハイパーリンク文字列にするくらいしてもいい。

また「青地かつ下線」という、よくあるリンクの見栄えを変えるときには、細心の注意を払って行なうべきである。

サイト内に於いて各ページに固有の title をきちんとつける

固有の title をつけるというのは、けっこう難しい。実際のサイトでもひとつのサイトを通して、すべておなじ title という場合はとても多い。が、これをきちんと固有にするだけで、音声ブラウザの利用者にとっては、使い勝手が格段に上がるのである。title は、音声ブラウザが、所与のページに来たときに最初に読み上げるものなので、ハイパーリンクを選んで、リンク先に来たとき、ただしいページに来ているかどうかの最初のフィードバックになるからである。また「お気に入り」や「ブックマーク」に URL を登録する際の名前にもなるので、できるだけ的確にページ内容をつけるようにしたい。

フレームを使わない

フレームという技術は、よく分かっているひとが特定の環境で使えばそれなりに役に立つ技術であるが、インターネット上では基本的に「御法度」であると考えた方が良さそうである。「特定ページにリンクがはりにくい」というネットの利点をつぶしてしまうような、性質を持っているのも問題だが、視覚障害者にとっては、ただ使いにくいだけのサイトになっていることが多い。現状、フレームでサイト構築をしている場合でも、せめてフレームを構成している各ファイルに title を忘れずにつけるようにした方がよい。

コントラストを確保する

青いバックに水色の文字などというのは、極端な例であるが、弱視者や色弱の方々の利用を考えるのであれば、しっかりとしたコントラストを保った状態での情報提供を心がけた方がよい。しかし色に於ける「背景と本文」の関係というのは、およそ定型としてよいものがあるのではないかと柴田は考える。

Javascript やプラグインに依存した情報提供をしない

具体的には Flash によるナビゲーションバーや、Javascript 制御によるプルダウンメニューのことである。これらは音声ブラウザなどが正しく対処できないことが多いからである。また、ブラウザのステータスバー（画面下のダウンロード状況を表示したりする部分）への情報表示も、気づかれないことが多いので、極力やめた方がよい。

色や形に依存した情報伝達をしない

たとえば、複数の日付を並べて、「赤字は定休日です」というような情報提供をすると、白黒のプリンタでプリントアウトしたときにはその情報は失われてしまう。そして視覚障害者にとっても情報把握はきわめてむつかしくなる。すっきりとした見栄えを保つために色で情報分けをするというのは、たしかに大切であるが、インターネットを介して情報を提供しようというときには、たとえ冗長になるとしても、なるべく「10日、17日、24日は定休日です。」というような併記をするなどして、色（場合によっては「形」も）だけで、情報の性質分けをしないようにした方がよい。

なるべくわかりやすい言葉で文章を書くようにする

最後に自戒を込めて。アクセシビリティというのは、かならずしも技術だけの問題でなく「ひとに伝えよう」とか、「わかってもらおう」という意志がなければ、なりたたない。そもそもの文章に気をつけるのも大事なことである。

ツイートする