中村広幸・寄藤昂（1999）「ホームページにおけるバリアフリーの試み−東京都の事例をもとに−」『コミュニケーション科学』No.10，1999，pp.27-34　添付CD-ROMから

ウェブページ作成のためのガイドライン（試案）

1998年3月版

項目
  1. 肢体不自由の方のために
  2. 弱視の方のために
  3. 色覚障害の方のために
  4. 目の見えない方のために
  5. 耳の聞こえない方のために
  6. 健常者との共用
→「ホームページにおけるバリアフリーの試み」に飛ぶ
  1. 肢体不自由の方のために
    1. マウスの細かい操作が難しい人のために、ボタンとして使うような画像は、あまり小さくしない。例１
    2. 画像と画像の間隔は近づけすぎない。例２
    3. アンカー付きの文字は、あまり小さくしない。例３
    4. マウスカーソルを移動させる距離を短くするため「次ページ」「戻る」などの基本操作は、ほぼ同じ位置に表示する。例４
    5. 操作するページは１画面にまとめ、スクロールを使用させない配慮を行う。例５
    6. ボタンとして使う画像には、アウトライン（枠）を表示する。例６
    7. ターゲットウィンドウを使用しない。例８
    8. 判読しづらい配色をさける。（青線等）例１２
    先頭に戻る

  2. 弱視の方のために
    1. ボタンとして使う画像は、あまり小さくしない。例１
    2. 画像と画像の間隔は近づけすぎない。例２
      アンカー付きの文字は、あまり小さくしない。例３
    3. マウスカーソルを移動させる距離を短くするため「次ページ」「戻る」などの基本操作は、ほぼ同じ位置に表示する。例４
    4. 操作するページは１画面にまとめ、スクロールを使用させない配慮を行う。例５
    5. ボタンとして使う画像には、アウトライン（枠）を表示する。例６
    6. 画面上の文字については、「影をつける」・「文字をぼかす」等を行わない。例７
    7. ターゲットウィンドウを使用しない。例８
    8. 文字が入っているボタンには、バックに絵柄を入れることは避ける。例９
    9. 背景に絵柄を入れることは避ける。例９
    10. アニメーションＧＩＦ等を使用しない。例１０
    11. ボタンの中の文字を背景色と同系色で書かない。例１１
    12. 画面上の黄色い背景の上の白い文字などは、文字を黒などで浮きだたせる。例１１
    13. 判読しづらい配色をさける。（青線等）例１２
    14. 形を主体とした選択肢を作らない。例１４
    先頭に戻る
  3. 色覚障害の方のために
    1. ボタンとして使う画像には、アウトライン（枠）を表示する。例６
    2. 文字が入っているボタンには、バックに絵柄を入れることは避ける。例９
    3. ボタンの中の文字を背景色と同系色で書かない。例１１
    4. 画像上の黄色い背景の上の白い文字などは、文字を黒などで浮きだたせる。例１１
    5. 判読しづらい配色を避ける。（青線等）例１２
    6. 赤・緑・灰色、黄・青・灰色を隣接して使用しない。例１３
    7. 色を主体とした選択肢を作らない。例１４
    8. 文字色はユーザがブラウザで変更可能なようにＨＴＭＬで指定しない。例１５
    先頭に戻る
  4. 目の見えない方のために
    1. マウスカーソルを移動させる距離を短くするため「次ページ」「戻る」などの基本操作は、ほぼ同じ位置に表示する。例４
    2. テキストブラウザはＤＯＳ画面（２５行）で使用されることを考慮し、基本操作部（戻る等）は先頭２５行以内に作成する。例５
    3. ターゲットウィンドウを使用しない。例８
    4. 背景に絵柄を入れることは避ける。例９
    5. アニメーションＧＩＦ等を使用しない。例１０
    6. 色・形を主体とした選択肢を作らない。例１４
    7. 画像部分には必ず［ａｌｔ］タグで注釈を付加する。例１６
    8. 箇条書きの最初につく中点等の画像には短い注釈をつける。例１７
    9. クリッカブルマップは使用しない。または、それ以外の方法を選択できるものとする。例１８
    10. Ｔａｂｌｅ，Ｆｒａｍｅは読み上げにくく、操作性が悪くなるため控える。例１９−１　例１９−２
    11. プルダウンメニュー・チェックボックスはテキストブラウザにより内容を変更できないためデフォルト値を考慮し使用する。または使用しない。例２０
    12. ＪａｖａＳｃｒｉｐｔはコメント記述「＜！−−＞」ではさみ、未対応ブラウザではコメントとみなす。例２１
    13. テキストブラウザで付加する選択「［２］等」をページ内部で使用しない。例２２
    14. 画像主体のデータは扱わない。例２６
    15. 意味不明なタイトルは記述しない例２７
    16. ＶＲＭＬ、Ｊａｖａ，Ａｃｒｏｂａｔ等はアクセスできない場合があるため使用しない。
    17. ［ＢＬＩＮＫ］タグは点字ディスプレイで表示できないため使用しない。
    先頭に戻る
  5. 耳の聞こえない方のために
    1. オーディオクリップには文書に起こしたものを添付する。例２３
    2. 自動で音声ファイルをダウンロード・再生しない。例２５
    先頭に戻る
  6. 健常者との共用
    1. マウスカーソルを移動させる距離を短くするため「次ページ」「戻る」などの基本操作は、ほぼ同じ位置に表示する。例４
    2. ボタンとして使う画像には、アウトライン（枠）を表示する。例６
    3. 判読しづらい配色はさける。（青線等）例１２
    4. JavaScriptはコメント記述「<!-->」ではさみ、未対応ブラウザではコメントとみなす。例２１
    5. 特殊フォーマット（HTML・TEXT以外）のドキュメントを扱う場合は必ずテキスト版も添付する。例２３
    6. ダウンロード可能なファイルは、ファイル名「８バイト・３バイト」にする。例２４
    7. 晴眼者・目の見えない方用のページを別に作成する場合、可能な限り晴眼者と同じ構成でメニューを作成する。例２６
    8. 意味不明なタイトルは記述しない。例２７
    9. 特定ブラウザに限定されるタグは使用しない。
    10. 大きい画面でしか見られないレイアウトは不可。（６４０×４８０ピクセルのモニタで操作性を確認する。）
    11. フォントサイズをユーザー側で変更した場合に崩れてしまう画面デザインは行わない。
    12. 画像ファイルフォーマットはGIF８９aまたはJPEGとする。または、プログレッシプJPEGは使用しない（未対応ブラウザが多いため）
    13. ５０Kバイト以上のデータ（音声・動画・画像・表等）は以下の注記を付加する。
      • データの内容説明を記述する。
      • ファイルのサイズを記述する。
    14. インライン画像サイズは３５Kバイト以下とする。
    15. 基本的に前記の対応を行い共用可能なページを作成する。
    16. Table、Frame、JavaScript、VRML、JAVA、ACROBAT等の機能を使用する場合は、別に未使用のページを設け、テキストブラウザ等の機能未対応のブラウザからのアクセスを可能にする。
    17. ＨＴＭＬの記述は正しく行う。
      • ＨＴＭＬのタグはほとんどの場合<開始></終了>のペアで記述します。正しく記述されていない場合、ブラウザによっては正常に表示されない場合が有ります。
      • ＨＴＭＬのタグは大文字で記述するべきです。（ＵＲＬ・ファイル名以外）正しく記述されていない場合、ブラウザによっては正常に動作しない場合が有ります。
      • LINK先指定時には以下のように記述すべきです。
        リンク先がファイルの場合、http://www.metro.tokyo.jp/index.htm
        リンク先がディレクトリの場合、http://www.metro.tokyo.jp/　末尾の/に注目
    先頭に戻る
本ページについて
　本稿は、東京経済大学コミュニケーション学会の学会誌『コミュニケーション科学』No.10，1999年に掲載された「ホームページにおけるバリアフリーの試み−東京都の事例をもとに−」からの抜粋である。同誌にはCD-ROMが添付されており、本稿はこのCD-ROMに収録されているHTMLファイル「ウェブページ作成のためのガイドライン」をインターネットでアクセスできるようにしたものである。
　本稿ならびに添付のHTMLファイルの一部または全部を著者の許諾なく転載・複写することは固くお断りする。
　本ページへのリンクは自由であるが、リンク設定後に、中村広幸まで必ずご一報いただきたい。
「ホームページにおけるバリアフリーの試み」に飛ぶ／中村広幸のページに戻る