２００４年３月１５日
本ウェブアクセシビリティ・ガイドは、静岡県立大学の石川准教授の監修を得て、より多くの方々にとってアクセスしやすいウェブサイトを構築するためのヒントとして株式会社アメディアより提供させて頂くものです。
ページ内目次｜HTML全般 ｜フレーム ｜本文へのナビゲーション｜リンク先のわかりやすさ｜サイト構造のわかりやすさ｜ページの変化｜画像や動画、フラッシュへの対応 ｜ページ内容の見やすさ｜ページ内容の聞き取りやすさ | 聴覚障害者への配慮｜入力場面の配慮｜デバイスへの配慮｜提供するデーターのアクセシビリティ｜問い合わせ先の設置｜ウェブアクセシビリティ関連リンク一覧 |
HTML全般
正しいHTMLを書くことでホームページのアクセシビリティはかなり向上します。作成した HTML文書が正しく書かれているかどうかを可能ならばチェックしてみましょう。
ページタイトルをつけましょう
適切なページタイトル付けは、より多くの利用者にとってのアクセシビリティを向上させます。
ページタイトルには、そのページの概要がわかるタイトルをつけてください。
多くの音声ブラウザでは、最初にページタイトルを読み上げます。
また、お気に入りやブックマークに登録した時なども、一般的にそのページタイトルがそのページ名として採用されます。
これらのことから、ページタイトルは、単に画面上端に表示されるタイトルバー以上の役割を果たしています。
適切な要素を使用する
文書の内容に最もふさわしい要素を使用してタグ付けを行いましょう。
見出し・段落・箇条書き・表などの要素が適切に使用されていれば、効率良くページを聞き取る手助けとなります。
特定の環境を想定せずにページを作りましょう
特定のブラウザだけで使用できる要素、特定のアプリケーションだけがサポートしているような機能をできるかぎり使わないようにしましょう。
JavaScriptやFlashを使うときは、それらをサポートしていない環境でも同等の情報が取得できるように配慮することが大切です。
代替情報を提供しましょう
多くの人に内容を理解してもらうために、特定の感覚でしか認識できないコンテンツには代替テキストを用意しましょう。
画像や動画は視覚でしか認識できませんし、音声は聴覚でしか認識できません。
これらに代替テキストを付加することにより、それらの感覚に障害のある人にもアクセス可能なページを作成することができます。
フレーム
フレームの使用
音声ブラウザの中には、フレームを別々のページとして認識して動作しているものがあります。よって、フレームの利用は必要最小限にしてください。
例えば、フレーム１を読んでいる状態からフレーム２の内容を見たいときには、読み上げ対象のフレームを意図的に切り替えるという操作を行います。
この特性から、特に、左のフレームと右のフレームの内容が対応関係になっていて、左を読んでその次に右の対応する箇所を読むといったような作りは、視覚障害者にとってはアクセス困難なページになります。
視覚障害者へのホームページアクセシビリティに配慮するならば、フレームを使用する場合には、一つのフレームの中で内容が簡潔するような構造にすべきです。
フレームタイトル
フレームタイトルを適切につけてください。
フレームの場合、画面上ではそれぞれのタイトルが見えないため、名称をつけるのを忘れやすくなりますが、音声ブラウザにとっては、このタイトルも大きな意味を持ちますので、忘れないようにお願いします。
本文へのナビゲーション
音声ブラウザでホームページを聞くということは、ホームページの内容を先頭から順番に音声で読み上げるということです。
本文がページの先頭から遠いと、本文に辿りつくまでに時間がかかってしまいます。
以下のようにしてページの本文に速くたどり着くことができる配慮を行ってください。
本文をページの最初に記載
一番手っ取り早い方法は、ページの先頭から本文を書き始めることです。
サイト共通のリンク項目等を後ろに配置しても構わない場合には、この方法で対応できます。
また、スタイルシートを使用することで、画面の上部（あるいは左側）に共通項目を配置することも可能でしょう。
ナビゲーション・スキップ
サイト共通のリンク項目や、バナー広告などをページの先頭部分に配置する必要がある場合には、そのリンク集が現れる前に、本文にジャンプできるページ内リンクを付けてください。
このようなホームページの本文にジャンプするリンクを「ナビゲーション・スキップ」と呼びます。
なお、本文がフレーム分けされた別のフレームに配置されている場合には、ナビゲーション・スキップを付けてもリンク集をスキップするだけで本文の先頭に移動できるわけではないので、意味がありません。
この場合には、次の項の方法をお勧めします。
フレーム分けの場合
事情により、本文をフレーム分けした中のフレーム２やフレーム３に設置する場合には、本文を含まないフレームの先頭部分で「本文はフレーム何々に記載」と書くことをお勧めします。
音声ブラウザの利用者は、自分の意思でフレームを切り替えることにより、本文に容易にアクセスできます。
検索結果ページ
検索結果を示すページでは、上記の手法により検索結果にすぐにたどり着けるようにするとともに、結果が複数ページになっている場合には、全ページと現在位置を表示して、現在の位置がわかるようにしてください。
リンク先のわかりやすさ
リンクがあっても、そのリンク先の内容がどんなものなのかが判らなくては意味がありません。
リンク画像
画像に対してリンクをつけた時には、必ず ALT 属性によりリンク先の内容が推測できる簡潔な説明を付加してください。
音声ブラウザは、この ALT テキストを読み上げます。視覚障害者は、その内容で、リンク先のページの内容を推測します。
マップ
画像の一部にリンクをつける形のマップの場合には、さらに深い配慮が必要となります。
クライアントサイド・イメージマップには、画像と各マップのAREA要素の両方にALT属性をつけてください。
サーバサイド・イメージマップはあまり使用しないことをお勧めしますが、やむを得ず使用する場合には、HTML内にリンク情報がないため、同じリンク先に接続するリンクテキストを併記してください。
わかりやすいリンク表現
リンク先がより明確に推測できるよう、リンクテキストやリンク画像に付加する ALT 属性で指定するテキストには一貫性を持たせることが望まれます。「ここをクリック」などはあまり勧められません。
また、一つのページ内に同じリンクテキストを置かないように心がけましょう。
リンク画像に対する ALT テキストは、画像の説明ではなく、リンク先の内容がわかるものにすべきです。
よって、一般的には、リンクテキストや ALT テキストは、リンク先のページ・タイトルを利用するのが妥当です。
画像の内容も説明したい場合には、リンクとは別に「上の写真は何々です。」といったような説明文を別途加筆することをお勧めします。
また、同一ページで同じリンク先へのリンクが存在する場合には、同じ表現を用いることが望まれます。
逆に、リンク先が異なるのに同じ表現が用いられている部分があるとすれば、利用者を惑わす要因となります。
サイト構造のわかりやすさ
サイトの構造がわかりやすいということは、障害者に対してのアクセシビリティの観点のみならず、誰にとっても大切な配慮です。
トップページへの戻りやすさ
トップページに戻るためのリンクは、ページの一番最初あるいはサイト内共通リンク項目の先頭または最後に配置することをお勧めします。
共通リンク項目の最後にあって、その次に本文が始まる場合、その共通リンク項目の前にナビゲーション・スキップがあれば、ナビゲーション・スキップで本文にジャンプしてから１ステップ戻ればトップページへのリンクにたどり着くことができます。
基点となるページへの戻りやすさ
サイトのトップページ以外に、現在のページの基点となるページがある場合には、トップページに戻るリンクの直後に基点ページに戻るリンクを設置することをお勧めします。
戻るリンクの表現のわかりやすさ
しばしば「戻る」とだけ記載されていることがありますが、これはどこに戻るのかがわかりにくく、好ましくありません。
トップページに戻る場合には、「トップページに戻る」又は単に「トップページ」とだけ記載すれば状況がよく理解できます。
トップページ以外の起点ページの場合でも、ページ構成上「戻る」という意味あいが強い場合には「どこそこに戻る」と記載すればよくわかりますし、「戻る」という意味あいが強くない場合には、単に基点ページのタイトルをリンク名にすればよいでしょう。
なお、内容的に次に進むための「次へ」と前に戻るための「前へ」は十分に理解できます。
現在位置の提示
サイト内の深い階層は、現在の画面がサイト構造のどこに位置しているか把握できるように、階層などの構造を示した情報を提供する事が望まれます。
例えば、ページの先頭またはナビゲーション・リンクの後に、「トップ＞Ａページ＞Ｂページ＞Ｃページ」などと記載すれば、現在見ているＣページがサイト構造上どこに位置し、どのような内容の枠組みで提供されているページなのかが容易に理解できます。
ページの変化
音声ブラウザ利用者にとっては、自分の意思以外でページの内容が勝手に書き換わったり、別のページに移動させられるのは大変迷惑です。
リフレッシュ
ページ内容を一定の時間おきに書き換えるリフレッシュは、避けてください。
音声ブラウザで読み上げている利用者にとっては、リフレッシュが起きた時点で内容の読み上げは有無を言わさず中断され、再びリフレッシュ後のページの先頭から読まされることになります。
そのため、ページ分量が大きいページにおいてリフレッシュが行われると、永久にそのページ全体を読むことはできないという結果になります。
ページの移動
都合上、移動するためだけに用意されたページから別のページに移動することについては、自動的な移動に対応していないブラウザを考慮して移動先のＵＲＬへのリンクを配置しておけば、特に問題はありません。
ただ、そのページ自体にも内容が書かれているにも関わらず、一定時間経過後別のページに自動的に移動するような作りは、上記と同じ問題を生じさせます。
画像や動画、フラッシュへの対応
視覚障害者に対して、画像や映像の情報をどのように提示するかということは、アクセシビリティを考える上で大きなテーマの一つです。
画像に対する説明
画像に対しては ALT 属性によって代替テキストを提供しなければなりません。
とくに画像にリンクがつけられている場合には、そのリンク先の内容を伝えるという意味で代替テキストが必須となります。
しかし、全ての画像に対して代替テキストを書きこむと、読み上げが冗長になることもありえます。
アメディアでは、以下の考え方を推奨します。
内容理解の上で必須となる画像
ページの内容を理解する上で、その画像の存在と意味を理解しておくことが必須な場合には、代替テキストによる説明を付けなければなりません。
ページ作者が伝えたい場合
内容理解の上では特に必要ない場合でも、ページ作者が画像の様子や意味を視覚障害者に伝えたい場合には、作者の意思に基づいて自由に説明を付けてください。
この場合には、 ALT 属性による説明のほか、画像の前後に自由に説明文を加えて構いません。
なお、視覚障害者といってもいろいろな考え方の人がおり、ページの内容に直接関係のない画像でも、どんなものが表示されているのかを知りたいという人がいる一方で、内容に関係のない情報は内容の流れを断ち切ってしまうので、そのような画像への説明はむしろつけないで欲しいという人もいることを付記しておきます。
その他の画像
ALTが設定されていない画像は、音声ブラウザによっては、ユーザに少しでもヒントになる情報を提供しようとして、画像のファイル名を読み上げることがあります。
この場合は裏目に出るので、ALTに半角スペースを設定してください。
また、IMG要素ではなく、スタイルシートによって画像を配置する方法も検討してください。
動画に対する説明
動画情報には、その動画に差し支えない範囲で字幕や状況説明などの手段によって、同期した代替情報を提供してください。
同期した代替情報を提供することが困難または不適切な場合には、別のページを作成するなどして、動画ページの説明を行ってください。
［ウェブアクセシビリティ提案手法］
同期した代替情報の提供として、人の声で状況説明（副音声）を入れるのもよいでしょう。
フラッシュ
メニューなどの重要な情報をFlashで提供する場合には、その代わりとなるリンクテキストを用意してください。
なお最近のFlashには、ある程度のアクセシビリティ機能があります。またスクリーンリーダーによってはFlashアクセシビリティに対応しているものもあります。
Flashを使う場合にもできるだけアクセシブルなFlashコンテンツの作成を心がけてください。
Flashアクセシビリティについてはマクロメディア社のサイトなどに解説がありますので参考にしてください。
JavaScriptやVBScript
スクリプトを使用するときは、その変わりになるような内容をHTMLだけで提供してください。
これらのスクリプトに対応していないブラウザを使っている場合、スクリプトによって実現されている機能にアクセスすることができません。
フォームの入力はできても、提出ができないといったトラブルがよくあります。
かならずNOSCRIPT要素などを使って、対応していない環境にも配慮するようにしましょう。
なお音声ブラウザやスクリーンリーダーによってはスクリプトにある程度対応しているものもあります。
それでも、オンマウスオーバーを用いたポップアップメニューなど、マウス操作を前提とするスクリプトにはどれも対応できていません。
ページ内容の見やすさ
利用者の中には、いろいろな見え方のかたがおります。そのため、見栄えに関しては、できる限り利用者側で自分の好みに合わせて変更できる状態にしておくというのが基本的な考え方です。
［ウェブアクセシビリティ提案手法］
スタイルシートで書体、サイズ、色、行間、背景色などの指定を記述します。
色による表現
色により状況や意味の違いを表現した場合には、同等の情報をテキストでも記述してください。
視覚障害者や色覚障害のある方の場合、色による区別は理解できません。
形による表現
形により状況や意味の違いを表現した場合には、同等の情報をテキストでも記述してください。
視覚障害者には、形による区別は理解できません。
コントラスト
背景色と前景色とには十分なコントラストを取ってください。
弱視者、高齢者及び色覚障害のある方にとっては、背景色と前景色の間のコントラストがはっきりしていないと、その区別がしにくくなります。
文字フォント
文字フォントは必要に応じて利用者が変更できるようにしておいてください。
ＯＳの設定やブラウザの設定によって、文字の表示サイズを変更できる機能があります。
この機能に対応することにより、利用者が読みやすいフォントサイズに調節することができます。
［ウェブアクセシビリティ提案手法］
ウェブブラウザで変更できる「em」、「%」を使用してスタイルシートで指定します。
操作しやすい大きさ
操作するボタンやリンクテキストは、視力の弱い方や手の不自由な方でも操作しやすい大きさにしてください。
操作しやすい間隔
操作するボタンやリンクテキストは、誤操作しないように隣り合うものとの間隔をとってください。
変化速度
変化したり移動したりする画像やテキストは、その速度に注意して作成してください。
速度が速すぎると、認知や記憶に障害がある方や高齢者などが認識できない可能性があります。
また、光の明滅により光感受性発作（光源性てんかん）を誘発することがあるので、早い周期での画面の点滅は避けてください。
特に、赤と青を交互に点滅すると、発作を誘発しやすいと言われています。
ページ内容の聞き取りやすさ
見せ方のみに依拠した作り方をせず、論理構造に従って作成するのが基本です。
音声ブラウザでは、HTMLなどの論理構造を手がかりにより聞きやすい読み上げを試みています。
見出し
見出しはフォントサイズや色などの違いで表現せず、見出し要素を用いて表現してください。
色や大きさはスタイルシートを使いましょう。
テーブル要素
HTMLのTABLE要素をレイアウトを整えるために用いないでください。
HTMLのTABLE要素をレイアウトに使用すると、ソースをその記述順に読み上げる音声ブラウザでは、正しい順番で読み上げないことがよくあります。
また、本来の表を記述するときには、わかりやすい構造で記述してください。
［ウェブアクセシビリティ提案手法］
HTMLの表題のCAPTION要素を付けて表であることを明示してください。
HTMLのth要素を使い項目の見出しであることを明示してください。
文字列間のスペース
意味のまとまりの文字列の間には、全角または半角のスペースをはさまないでください。
音声ブラウザを利用する場合、単語の間にスペースが入ると一つの単語として認識できず、読み方を間違えてしまう場合がよくあります。
例えば、「経済」は「ケーザイ」と読みますが、「経 済」は「ヘスミ」などと読んでしまうでしょう。
［ウェブアクセシビリティ提案手法］
スタイルシートを使って、文字の感覚を自由に調整することができます。
聴覚障害者への配慮
音声情報への代替
ページの内容を理解・操作するのに必要な音声情報には、聴覚を用いなくても理解できるテキストなどの代替情報を提供してください。
聴覚障害がある場合、音のみで情報が提供されていると、それがあること自体気がつきません。
［ウェブアクセシビリティ提案手法］
警告音などの場合、警告を表すテキスト情報などをあわせて表示します。
動画情報への対応
動画情報に対しては、可能な範囲で、字幕や状況説明などの手段で、同期した代替情報を提供してください。
期した代替情報を提供することが困難または不適切な場合には、別のページを作成するなどして、動画ページの説明を行ってください。
［ウェブアクセシビリティ提案手法］
ＳＭＩＬを用いて同期した字幕をつけることができます。
入力場面への配慮
フォームのわかりやすさ
フォームにおいては、何を入力すれば良いかをLABEL要素を使って分かりやすく示してください。
例えば、ふりがなの入力の場合、ひらがなかカタカナかを入力欄の前に明示します。
また、電話番号や郵便番号などのように、１つの欄で一気に入力するのか、あるいは２つまたは３つの欄に分けて入力するのかがわかりにくい場合には、入力例を明示してください。
選択項目
多くの選択肢の中から一つを選ぶ場面では、選択肢に入る前に、キー入力でも選択肢を指定できるようにしてください。
例えば、47都道府県の中から一つを選択する場合、音声ブラウザではこれを順番に聞きながら選ぶ必要があります。
この場合、多くの視覚障害者にとってはキー入力で都道府県名を直接入力した方が速いので、選択メニューの直前で都道府県名を入力できるようにしておき、「下に選択項目があります」と付記していただくと便利です。
時間制限 入力に時間制限を設けないでください。
障害者は手の不自由さや音声を聞いてから操作するあるいは画面をじっくりと見てから操作するという特性などにより、一般の人よりも操作速度が遅い場合があります。
デバイスへの配慮
特定のデバイスだけでしか操作できなかったり情報を取得できないようなページは好ましくありません。
マウスが使えなくても、あるいはスイッチだけで操作しなければならないような状況でも、スクリーンキーボードのようなデバイスでも操作できるように作成してください。
キー操作の確保
マウスなどの単一のデバイスに依存せず、少なくともキーボードによってすべての操作が可能なように作成してください。
肢体に障害があり、マウスの操作が困難な場合でも、キーボードであれば操作が可能な場合がよくあります。
視覚に障害があり、マウスポインターが見えずマウス操作が困難な場合でも、キーボードであれば操作できます。
意図的なデバイスへの割当に対するガイド
あるキーが押されたら何かが起こるとか、マウスがあるポインタにきたら何かが起こるというような特別なしかけをした場合には、そのページにおけるしかけをページの先頭で簡潔に説明してください。
利用者が意図せずに何かのキーを押したりマウスを動かしたりしたときに、上記の説明がないと、状況がわからなくなってしまいます。
提供するデータのアクセシビリティ
ダウンロードデータやマルチメディアのデータなどが、障害者や高齢者にとってアクセシブルであるかどうかについても配慮する必要があります。
ダウンロード・データ
ダウンロードできるデータには、その内容とデータ・サイズをわかりやすく記述してください。
また、特定のアプリケーションをインストールしなければ扱えないようなデータは、可能な限り汎用的なデータ（テキストデーターHTMLデータ）を用意してください。
ストリーミング・データ
Media Player などで再生するストリーミング・データには、内容とデータのサイズや仕様をわかりやすく記述してください。
ダウンロードしながら再生するタイプのデータは、利用者の回線環境やパソコン環境によって対応できるかどうかが決まってきます。
それら、実際に利用者自身の環境で対応できるかどうかを判断するための情報を提供する必要があります。
PDFデータを提供するときは、代替となるデータもあわせて提供してください。
視覚障害者にとっては、ある一定以上のパソコン環境と一定以上のスキルを持った人以外はPDFファイルの内容を読むことができません。
さらに、印刷物をスキャンして得ただけの画像データから構成されるPDFデータには全くアクセスできません。
［ウェブアクセシビリティ提案手法］
もっとも優れた代替情報は、同じ内容のHTMLページを設置することです。
（参考例）
内閣府−障害者施策ホームページ: http://www8.cao.go.jp/shougai/index.html
（上記サイトでは、白書の内容自体がHTMLページで提供されています。）そのほか、同じ内容のテキストファイル、ワードファイルなどを提供することをお勧めします。
問い合わせ先の設置
サイトについての提案や要望を受け付けるための問い合わせメール・アドレスをわかりやすい個所に設置してください。
また、可能であれば、電話番号、ＦＡＸ番号、住所など、利用者のニーズに応じた問い合わせ方法で問い合わせすることができるよう、複数の問い合わせ手段を提供することをお勧めします。
本ウェブアクセシビリティ・ガイドに関するお問い合わせは、 までお願いします。
ウェブアクセシビリティ関連リンク一覧
