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

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

1998年3月版


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


  2. 弱視の方のために
    1. ボタンとして使う画像は、あまり小さくしない。例1
    2. 画像と画像の間隔は近づけすぎない。例2
      アンカー付きの文字は、あまり小さくしない。例3
    3. マウスカーソルを移動させる距離を短くするため「次ページ」「戻る」などの基本操作は、ほぼ同じ位置に表示する。例4
    4. 操作するページは1画面にまとめ、スクロールを使用させない配慮を行う。例5
    5. ボタンとして使う画像には、アウトライン(枠)を表示する。例6
    6. 画面上の文字については、「影をつける」・「文字をぼかす」等を行わない。例7
    7. ターゲットウィンドウを使用しない。例8
    8. 文字が入っているボタンには、バックに絵柄を入れることは避ける。例9
    9. 背景に絵柄を入れることは避ける。例9
    10. アニメーションGIF等を使用しない。例10
    11. ボタンの中の文字を背景色と同系色で書かない。例11
    12. 画面上の黄色い背景の上の白い文字などは、文字を黒などで浮きだたせる。例11
    13. 判読しづらい配色をさける。(青線等)例12
    14. 形を主体とした選択肢を作らない。例14
    先頭に戻る

  3. 色覚障害の方のために
    1. ボタンとして使う画像には、アウトライン(枠)を表示する。例6
    2. 文字が入っているボタンには、バックに絵柄を入れることは避ける。例9
    3. ボタンの中の文字を背景色と同系色で書かない。例11
    4. 画像上の黄色い背景の上の白い文字などは、文字を黒などで浮きだたせる。例11
    5. 判読しづらい配色を避ける。(青線等)例12
    6. 赤・緑・灰色、黄・青・灰色を隣接して使用しない。例13
    7. 色を主体とした選択肢を作らない。例14
    8. 文字色はユーザがブラウザで変更可能なようにHTMLで指定しない。例15
    先頭に戻る

  4. 目の見えない方のために
    1. マウスカーソルを移動させる距離を短くするため「次ページ」「戻る」などの基本操作は、ほぼ同じ位置に表示する。例4
    2. テキストブラウザはDOS画面(25行)で使用されることを考慮し、基本操作部(戻る等)は先頭25行以内に作成する。例5
    3. ターゲットウィンドウを使用しない。例8
    4. 背景に絵柄を入れることは避ける。例9
    5. アニメーションGIF等を使用しない。例10
    6. 色・形を主体とした選択肢を作らない。例14
    7. 画像部分には必ず[alt]タグで注釈を付加する。例16
    8. 箇条書きの最初につく中点等の画像には短い注釈をつける。例17
    9. クリッカブルマップは使用しない。または、それ以外の方法を選択できるものとする。例18
    10. Table,Frameは読み上げにくく、操作性が悪くなるため控える。例19−1 例19−2
    11. プルダウンメニュー・チェックボックスはテキストブラウザにより内容を変更できないためデフォルト値を考慮し使用する。または使用しない。例20
    12. JavaScriptはコメント記述「<!−−>」ではさみ、未対応ブラウザではコメントとみなす。例21
    13. テキストブラウザで付加する選択「[2]等」をページ内部で使用しない。例22
    14. 画像主体のデータは扱わない。例26
    15. 意味不明なタイトルは記述しない例27
    16. VRML、Java,Acrobat等はアクセスできない場合があるため使用しない。
    17. [BLINK]タグは点字ディスプレイで表示できないため使用しない。
    先頭に戻る

  5. 耳の聞こえない方のために
    1. オーディオクリップには文書に起こしたものを添付する。例23
    2. 自動で音声ファイルをダウンロード・再生しない。例25
    先頭に戻る

  6. 健常者との共用
    1. マウスカーソルを移動させる距離を短くするため「次ページ」「戻る」などの基本操作は、ほぼ同じ位置に表示する。例4
    2. ボタンとして使う画像には、アウトライン(枠)を表示する。例6
    3. 判読しづらい配色はさける。(青線等)例12
    4. JavaScriptはコメント記述「<!-->」ではさみ、未対応ブラウザではコメントとみなす。例21
    5. 特殊フォーマット(HTML・TEXT以外)のドキュメントを扱う場合は必ずテキスト版も添付する。例23
    6. ダウンロード可能なファイルは、ファイル名「8バイト・3バイト」にする。例24
    7. 晴眼者・目の見えない方用のページを別に作成する場合、可能な限り晴眼者と同じ構成でメニューを作成する。例26
    8. 意味不明なタイトルは記述しない。例27
    9. 特定ブラウザに限定されるタグは使用しない。
    10. 大きい画面でしか見られないレイアウトは不可。(640×480ピクセルのモニタで操作性を確認する。)
    11. フォントサイズをユーザー側で変更した場合に崩れてしまう画面デザインは行わない。
    12. 画像ファイルフォーマットはGIF89aまたはJPEGとする。または、プログレッシプJPEGは使用しない(未対応ブラウザが多いため)
    13. 50Kバイト以上のデータ(音声・動画・画像・表等)は以下の注記を付加する。
      • データの内容説明を記述する。
      • ファイルのサイズを記述する。
    14. インライン画像サイズは35Kバイト以下とする。
    15. 基本的に前記の対応を行い共用可能なページを作成する。
    16. Table、Frame、JavaScript、VRML、JAVA、ACROBAT等の機能を使用する場合は、別に未使用のページを設け、テキストブラウザ等の機能未対応のブラウザからのアクセスを可能にする。
    17. HTMLの記述は正しく行う。
      • HTMLのタグはほとんどの場合<開始></終了>のペアで記述します。正しく記述されていない場合、ブラウザによっては正常に表示されない場合が有ります。
      • HTMLのタグは大文字で記述するべきです。(URL・ファイル名以外)正しく記述されていない場合、ブラウザによっては正常に動作しない場合が有ります。
      • LINK先指定時には以下のように記述すべきです。
        リンク先がファイルの場合、http://www.metro.tokyo.jp/index.htm
        リンク先がディレクトリの場合、http://www.metro.tokyo.jp/ 末尾の/に注目
    先頭に戻る

本ページについて
 本稿は、東京経済大学コミュニケーション学会の学会誌『コミュニケーション科学』No.10,1999年に掲載された「ホームページにおけるバリアフリーの試み−東京都の事例をもとに−」からの抜粋である。同誌にはCD-ROMが添付されており、本稿はこのCD-ROMに収録されているHTMLファイル「ウェブページ作成のためのガイドライン」をインターネットでアクセスできるようにしたものである。
 本稿ならびに添付のHTMLファイルの一部または全部を著者の許諾なく転載・複写することは固くお断りする。
 本ページへのリンクは自由であるが、リンク設定後に、中村広幸まで必ずご一報いただきたい。
「ホームページにおけるバリアフリーの試み」に飛ぶ中村広幸のページに戻る