東京都公式ホームページ・ウェブデザインの手引き（平成１６年１２月改訂版） 第 1 策定について １ 目的 この手引きは、東京都の機関が設置・運営するホームページ（以下「公式ホームページ」という）にお いて、高齢者や障害者を含めた誰でもが必要な情報にアクセスできるよう、アクセシビリティを確保す るとともに、分かりやすさや利用しやすさなどのユーザビリティの向上を目的に、公式ホームページの 制作にあたって特に配慮すべき事項について定めたものです。 ２ 優先度の設定 この手引きの各項目には、W３C のアクセシビリティガイドライン及び JIS X ８３４１-３「高齢者・障害 者等配慮設計指針 － 情報通信における機器・ソフトウェア・サービス － 第３部：ウェブコンテンツ」 を参考に、次のとおり優先度を設定しています。 ・［優先度Ａ］： ホームページの制作にあたって、必ず実施又は満たすべき項目 ・［優先度Ｂ］： ホームページの制作の際、できる限り実施又は満たすべき項目 ・用語解説： １. W３C 第２ ページデザイン １．ユーザーの環境に左右されないデザイン 1 ウェブコンテンツは、関連する技術の規格及び仕様に則り、かつ、それらの文法に従って作 成する。[優先度 A] 2 ホームページの閲覧者（以下「ユーザー」という。）が使用している様々なサイズのディスプレ イで問題なく表示できるよう、800×600 ピクセルをレイアウトデザインの基本とするとともに、 640×480 ピクセルを最小限有効な表示領域と想定して、重要な項目はこの領域内に表示され るようレイアウトする。[優先度 B] 3 ウェブページをデザインする際には、閲覧ソフト（以下「ブラウザ」という。）であるインターネッ トエクスプローラ及びネットスケープナビゲータで表示チェックを行い、双方のブラウザで必要な 情報の表示ができるようにする。[優先度 A] 4 どちらか一方のブラウザでしか解釈されない特殊なＨＴＭＬタグは使わない。[優先度 B] 5 デザインは、できる限り Mac OS などの Windows 以外の基本ソフトによる環境でも確認する。 [優先度 B] 6 情報提供はＨＴＭＬ形式を基本とし、ユーザーが特定のアプリケーションを用意しないと見るこ とができない形式（ワード、エクセル等）のみにより、情報を提供することは行わない。 [優先度 B] 7 ウェブページのファイル容量は、アナログ通信回線を利用しているユーザーを考慮し、６５ＫＢ 以内に収めるよう工夫する。[優先度 B] 8 インターネットエクスプローラ以外のブラウザ表示に問題があるため、ワード、エクセルのＨＴ ＭＬ変換機能を利用したウェブページ作成は行わない。[優先度 B]
・用語解説： 2.ピクセル 3.ブラウザ 4.HTML 5.Windows 6.Mac OS ２．リンク設定 1 リンクテキスト（リンクを設定している言葉）やリンク画像（リンクを設定している画像）の代替 テキストの言葉は、「ここをクリック」や「戻る」といった表現ではなく、リンク先の内容をユーザー が予想できる簡潔な表現にする。[優先度 B] 2 リンク色はブラウザの初期設定（下線と青色や赤紫色）を使用し、リンク部分の位置を本文か ら離して表示する。[優先度 B] 3 各コンテンツページにおける１ページあたりのリンク数は、当該ページの内容に関連した情報 に絞り込むなどにより、多くなりすぎないようにする。[優先度 B] 4 文章中の言葉にリンクを設定する「埋め込みリンク」の使用は避け、別途、文章の最後にリン クとリンク先の説明文を記載する。[優先度 B] 5 ユーザーが誤って別のリンク先をクリックしてしまうことのないように、リンクとリンクの間は近 づきすぎないよう配慮する。[優先度 B] 6 リンクテキストやリンク画像は、ユーザーがクリックしやすいよう、文字や画像の大きさに配慮 する。[優先度 B] 7 関連した複数のリンクが並んでいる部分（ナビゲーション等）は、ユーザーがその部分を読み 飛ばすことができるように、１つのグループにして、かつ認識できるようにしておく。また、音声 変換ソフトでその部分を読み飛ばすことができるような仕組みを提供する。[優先度 B] ・参考事例： 1.音声変換ソフトで読み飛ばす仕組み ３．スタイルシート 1 カスケーディング・スタイルシート（ＣＳＳ）を使用する場合は、別ファイルにリンクさせる形式を 使う。[優先度 B] 2 スタイルシートは、ブラウザの種類やバージョンによってサポートに差があるため、基本的に 文字以外のスタイル指定は行わない。[優先度 B] 3 フォントサイズは、ユーザーが自由に変更できるよう相対的なサイズで指定し、リンクの下線 を取る設定はしない。[優先度 B] ④ スタイルシートなしでもそのページが読めることを必ず確認する。[優先度 A] ・用語解説： 7.カスケーディング・スタイルシート ４．フレーム 1 フレームは基本的に使わない。[優先度 B] 2 フレームを使用する場合は、ユーザーが「お気に入り」等に登録できるよう、各ページごとにフ レームを作成し、固有のファイル名（ＵＲＬ）を付ける。[優先度 B]
容や役割が何であるのかを判断しやすいページタイトルを付ける。[優先度 A] 4 フレームの境界線は「0」に指定し、ページ内に「戻る」ボタンの機能を付ける。[優先度 B] 5 フレーム内に、他のホームページを表示させない。[優先度 B] ・用語解説： 8.フレーム 第３ サイトデザイン １． サイト構造 1 各公式ホームページの全体構成（以下「サイト構造」という。）は、ユーザーに分かりやすい形 で情報を整理・分類化してデザインする。組織別の分類は、ユーザーにとって必ずしも分かりや すいものではないことに留意する。[優先度 B] 2 サイト構造は、ユーザーが目的とする情報にたどり着きやすいよう、階層の幅を５～９、階層の 深さを３～５以内に収めるよう工夫する。（下図参照）[優先度 B] 3 ホームページ内の同一階層のページデザインは極力統一し、ユーザーがどの場所にいるの か分かりやすいようにする。[優先度 B] ２．ナビゲーション機能 1 すべてのページで、トップページ及び１つ上の階層や前ページに移動できるようにする。この 場合、トップページへのリンクには、「ホームページ」ではなく「トップページ」の言葉を用いる。 [優先度 B] 2 同レベルの階層のページに移動できるようにする。[優先度 B] 3 トップページには、サイト ID（サイト名やロゴマーク）を大きく目立つ位置に配置する。 [優先度 B] 4 トップページには、ホームページ内のメニュー、コンテンツ一覧を分かりやすく表示する。例と して、リピーターの多いホームページでは新着情報などのコンテンツ、ターゲットとするユーザー が明確な場合にはユーザー別のコンテンツ一覧を配置する。[優先度 B] 5 各公式ホームページに、東京都ホームページ（http://www.metro.tokyo.jp/）へのリンクを設け る際は、単に東京都シンボルマークの画像にリンクを設定するだけではなく、テキスト文を付け るなど、ユーザーに分かりやすい方法で提供する。[優先度 B] 6 各ホームページ内において、グローバルナビゲーション（ホームページ全体にわたって一貫し レ ベ ル ＝ 階 層 の 深 さ カテゴリー数＝階層の幅 図．サイト構造 カテゴリー カテゴリー カテゴリー トップページ
て表示されるナビゲーション）を、同じ位置・外観・機能で提供する。ただし、トップページと入力 フォームについては、その役割が他のページと異なるためグローバルナビゲーションの例外と する。[優先度 B] 7 グローバルナビゲーションには、サイト ID、トップページ、検索、ホームページ内の各コンテン ツへのリンクを含める。[優先度 B] 8 入力フォームでは、グローバルナビゲーションの代わりに、サイト ID、トップページと前のペー ジに戻るためのリンクを提供する。[優先度 B] 9 サイト ID を配置する位置は、左上の角に統一する。[優先度 B] 10 階層が深いサイト構造の場合には、パン屑式ナビゲーションを利用する。[優先度 B] 11 イメージマップ（一つの画像に複数のリンクを設定する方法）は、クライアントサイドを使用し、 リンク先の内容が分かる適切な代替テキストを必ず付ける。[優先度 A] 12 メニューにマウスの矢印をあわせると詳細メニューが下方向に現れる、Java スクリプトを使用 したプルダウンメニューは、音声変換ソフトで読み上げることができないため使用しない。 [優先度 B] 13 ホームページの全体的な構成に関する情報（例えば、サイトマップや目次など）を提供する。 [優先度 B] 14 公式ホームページ以外へのリンクを設定する場合は、注釈を設けるなどにより、ユーザーに 公式ホームページ外へのリンクであることが分かるようにする。[優先度 B] 15 ユーザーの意思に反して、又はユーザーの認識若しくは予期することが困難な形で、ページ の全部若しくは一部を自動的に更新させたり、別のページに移動させたり、又はリンク先等を新 しいウインドウで開いたりさせない。 [優先度 A] ・参考事例： 2.グローバルナビゲーション ・用語解説： 9.パン屑式ナビゲーション 10.サイトマップ ３．検索 1 情報量の多いホームページの場合、検索機能はすべてのページで使えるようにする。 [優先度 B] 2 検索範囲が指定できる場合、はっきりと明示する。[優先度 B] 3 検索結果の精度を高めるため、メタデータ（HTML の<meta>タグ）で当該ページ又はホームペ ージ全体に関する情報を提供する。具体的にはメタデータに、当該ページ又はホームページ全 体についての説明文、キーワードなどを記述する。[優先度 B] 4 検索結果は最も確率の高いページから順に表示する。[優先度 B] 5 検索結果ページには、検索キーワードを目立つように表示する。[優先度 B] 6 検索結果の数は必ず表示する。[優先度 B] 7 ユーザーが、検索結果全体のどの部分を参照しているのかを表示する。[優先度 B] ・参考事例： 3.メタデータの HTML 記述例
第４ コンテンツデザイン １．記述 1 コンテンツには、簡潔で内容を直接説明する見出しを必ず付ける。[優先度 B] 2 文章が多い場合には、大見出し、中見出し、小見出しをつける。[優先度 B] 3 ウェブページの文章は、その内容にあわせた最も明瞭で簡潔なものにする。[優先度 B] 4 箇条書きは積極的に使い、本文から１行離して配置する。[優先度 B] 5 重要な情報はページ上部に配置する。[優先度 B] 6 画像や音声がページの内容の理解を助けると思われる部分には、それらを付けてテキストを 補足する。[優先度 B] 7 報告書など長い文章については、ユーザーが印刷して読めるよう、別途、印刷用のページや ＰＤＦ形式のファイルを用意する。[優先度 B] 8 各ページには、更新日や情報の発生日を記載するようにする。[優先度 B] 9 ウェブコンテンツは見出し、段落、リストなどの要素を用いて文書の構造を規定する。 [優先度 A] 10 日本語のページでは、想定するユーザーにとって理解しづらいと考えられる外国語は、多用 しないようにする。使用するときは、最初に用いるときに解説しておく。[優先度 B] 11 省略語、専門用語、流行語、俗語などの想定するユーザーにとって理解しにくいと考えられる 用語は、多用しないようにする。使用するときは、最初に用いるときに定義しておく。 [優先度 B] 12 想定するユーザーにとって、読みの難しいと考えられる言葉（固有名詞など）は、多用しない ようにする。使用するときは、最初に用いるときに読み（ふりがな）を明示しておく。 [優先度 B] 13 ウェブコンテンツの内容を理解・操作するのに必要な情報は、形又は位置だけに依存して提 供しない。[優先度 A] ・参考事例： 4. 形又は位置だけに依存して提供しない例 ２．ファイル名とページタイトル 1 ページタイトル（HTML の<title>タグ）は、ブラウザの左最上部や検索結果などに表示される 重要な部分であるため、PDF コンテンツも含めすべてのページに付ける。[優先度 A] 2 ページタイトルは、日本語で（外国語ページは除く。）ページ内容を的確に表す名前を付ける。 [優先度 A] 3 ファイルの名前は、半角英数文字（英文字については小文字のみとする。）で 10 文字以内と し、ページ内容を的確に表す名前を付ける。[優先度 B] 4 ファイル名にはスペースを使わない。[優先度 A] ３．外国語の使用 1 １つのページで複数の異なる言語を使用している場合には、言語が変わる部分でこれを明示 する。（HTML の<lang>タグ）[優先度 A] 2 文字化けを防ぐため、メタデータに、使用する言語の文字コードセットを指定しておく。また、 HTML ソース自体も指定した文字コードで保存しなければ、文字化けする場合があることに留
意する。[優先度 B] ・参考事例： 5. 文字コードセットの例 ４．フォントや文字の使い方 1 フォントの種類やサイズは、ブラウザの初期設定に従う。[優先度 B] 2 フォントサイズを指定するときは、ユーザーが自由に大きさを変更できるよう相対的なサイズ で指定する。[優先度 A] 3 ユーザーが戸惑わないよう、下線や青と赤紫の色はリンク以外で使用しない。[優先度 B] 4 ブリンクテキスト（点滅する文字）、スクロールテキスト（左右に流れる文字）の使用は控える。 [優先度 B] 5 レイアウト目的で一単語内にスペースや改行コードを挿入しない。[優先度 A] 6 単位や年月日などの情報は、図形文字や記号を用いないで文字で記述する。[優先度 B] 7 特定のシステム環境でのみ表示される機種依存文字は使用しない。[優先度 A] ・用語解説：11.機種依存文字 ５．色の使い方
1 使用する色は、Windows と Mac OS の双方に共通の表示色である 216 色（Web セーフカラー） を使用する。[優先度 B] 2 文字が見づらくならないよう、テキストの色と背景に明確なコントラストを出す。[優先度 A] 3 色によって表示されている重要な情報は、その色を再現できない場合でも情報が伝わるよう に配慮する。[優先度 A] 4 画像などの背景色と文字色とには、十分なコントラストを取り、識別しやすい配色にする。 [優先度Ａ] ・参考事例： 6.色によって表示されている重要な情報 ６．画像や音声の取り扱い 1 画像を使う際は、画像の内容を表した代替テキスト（HTML の<alt>タグ）を付ける。 [優先度 A] 2 高画質の画像や写真が必要な場合はサムネイル（サイズの小さい画像）を使用し、大きな画 像にリンクを貼る。この場合、サムネイル画像の近くに、大きな画像のファイル容量とその画像 の内容を的確に表現したテキストリンクを付ける。[優先度 A] 3 高画質の画像を必要とする場合以外は、画像ファイルの容量を 30KB 以下にする。 [優先度 B] 4 動画や音声を使用する場合には、テキストや字幕などを併用する。[優先度 A] 5 アニメーション GIF の使用は、ユーザーがウェブページの文章を読む際に集中力の妨げとな るため、最小限に抑える。[優先度 B] 6 ウェブコンテンツの内容を理解・操作するのに必要な音声情報には、聴覚を用いなくても理解 できるテキストなどの代替情報も提供する。[優先度 A]
同期した代替情報を提供する。同期して代替情報が提供できない場合には、内容についての 説明を何らかの形で提供するようにする。[優先度 B] 8 自動的に音を再生させることは控える。自動的に再生させる場合には、再生していることをユ ーザーに明示する。[優先度 B] 9 音は、ユーザーが出力を制御できるようにする。[優先度 B] 10 変化又は移動する画像又はテキストは、その速度、色彩、輝度の変化などに注意して作成す る。[優先度 B] 11 早い周期で、画面を点滅させることは避ける。[優先度 A] ・参考事例： 7.代替テキストの HTML 記述例 ・用語解説：12.アニメーション GIF ７．表 1 表（テーブル)には、テキストで表題（HTML の<caption>タグ）を付け、音声変換ソフトを利用し ているユーザーに、表が始まることを認識できるようにする。[優先度 A] 2 表の見出しセルには、見出し要素（HTML の<th>タグ）を使い、項目の見出しであることを明 示する。[優先度 B] 3 音声変換ソフトの読み上げ順序を考慮し、表のセル結合は極力使用しない。[優先度 B] 4 レイアウト目的で、テーブルを使用する際には、音声変換ソフトの読み上げ順序が不自然に ならないよう配慮する。[優先度 B] ・参考事例： 8.音声変換ソフトの読み上げ順序 ８．新しい技術の使用 1 Flash の使用は、最小限に抑える。[優先度 B] 2 ダイナミック HTML は、ブラウザの種類やバージョンによってサポートに差があるため使用し ない。[優先度 B] 3 Flash や Java スクリプト等のプログラムを動作しないよう設定しているか、そのプログラムを使 用できないユーザーでも、そのページが利用できるようにする。それができない場合は、テキス トによるページを別途作成し、同じ情報を提供できるようにする。[優先度 A] ・用語解説：13.Flash 14.ダイナミック HTML 15.Java スクリプト ９．ダウンロードファイル 1 申請書様式等のダウンロードファイルについては、ファイルの形式名及び容量を表示する。 特に容量の大きなファイルについては、ユーザーがダウンロードに要するおおよその時間も併 記する。[優先度 B] 2 申請書様式はＰＤＦ形式による提供を基本とする。ＰＤＦ以外の形式（ワード、エクセル、一太 郎など、ユーザーにおいて有償のアプリケーションを用意しないと利用できないもの）のみによ る提供は行わない。[優先度 B]
3 ＰＤＦ形式で提供する場合、閲覧ソフトであるアクロバットリーダーの最新のものより一つ前の バージョンで正しく表示されるかを確認する。[優先度 B] ・用語解説：16.ＰＤＦ １０．操作環境 1 ウェブコンテンツは、特定の単一のデバイスによる操作に依存せず、少なくともキーボードに よってすべての操作が可能となるようにする。[優先度 A] 2 入力フォームなどで、入力欄を使用するときは、何を入力すればよいかを理解しやすく示し、 操作しやすいように配慮する。[優先度 A] 3 入力フォームなどでは、入力に時間制限を設けないことが望ましい。制限時間があるときは 事前に知らせなければならない。[優先度 B] 4 制限時間があるときは、ユーザーによって時間制限を延長又は解除できるようにする。これ ができないときは、代替手段を用意しておく。[優先度 B] 5 ユーザーがウェブコンテンツにおいて誤った操作をしたときでも、元の状態に戻すことができ る手段を提供する。[優先度 A] ・用語解説：17.デバイス １１．問い合わせ先 1 トップページには、ホームページ全体についての問い合わせ先の部署名、電話、メールアドレ スを表記する。また、必要に応じて各ページにも、その内容についての問い合わせ先を表記す る。[優先度 A] １２．著作権 1 各ホームページ内の記事や写真などの著作権の帰属、転載等の取り扱い方針を明記する。 [優先度 B] 2 著作権が東京都以外の第三者に帰属する写真やイラストなどを使用する場合は、ホームペ ージでの使用が許諾されているかを確認する。[優先度 A] １３．個人情報の保護 1 施策に対する意見募集を行う場合など、入力フォームを使用して個人情報を収集(個人に関 する情報の入力が任意である場合を含む。)する際には、第三者による不正アクセスから情報 を保護するため、SSL 又はこれに準じる方法を使用し、安全性の確保に努める。[優先度 A] ・ 用語解説：18.ＳＳＬ
【参考事例】 1. 音声変換ソフトで読み飛ばす仕組み 読み飛ばす仕組みを提供することにより、音声変換ソフトを使用している場合に、毎回同じ 内容の部分をすべて聞かなくても済むようになる。 画面表示例 HTML記述例 2. グローバルナビゲーション グローバルナビゲーションとは、目次の内容を縮小して各ページに置いたもの。深い階層か らでも上位の階層、あるいは上位の別の階層へ直接に移動できるため、サイト全体を手早く移 動するのに便利。横型でページ上部に配置、あるいは縦型で左に配置というのが一般的。グラ フィックを使用したものもあれば、テキストのみのものもある。いずれにしてもデザインの統 一は必要である。 どのページからも主要コンテンツのトップページへ移動できる
<a href="#navskip"><img src="clear.gif" alt="ナビゲーション を読み飛ばす” width="1" height="1" border="0"></a><br> <!-- ここからナビゲーション部分 --> <a href="index.htm">トップページ</a><br> <a href="news.htm">最新情報</a><br> <a href="chijitop.htm">知事の部屋</a><br> <a href="boshu.htm">意見募集</a><br> <a href="sitemap.htm">サイトマップ</a><br> <!-- ここから本文 --> <h1><a name="navskip">本文タイトル</a></h1> 画面上部に 1X1 ピクセルサイズの透明の GIF 画像を配置し、これに本文へのアンカーを設定し た例
自治体ホームページにおいて、グローバルナビゲーションを採用している例
さいたま市公式Ｗｅｂサイト（http://www.city.saitama. jp) サイト ID コンテンツへのリンク 検索
港区ホームページ「みなと」（http://www.city.minato.tokyo.jp）
3.メタデータの HTML 記述例
<meta name="keywords" content="東京都,とうきょうと,都庁,とちょう,広報,お知らせ,福 祉,イベント,催し,音楽,スポーツ,講座,講習,募集,資格,試験,職員採用">
<meta name="description" content="東京都が毎月提供する「Ｗeb 広報東京都」のホーム ページ。東京都の重要施策や、イベント、講座、募集のお知らせなどの最新情報が盛りだ くさん！"> ※上段はキーワード、下段はホームページ全体の説明文の記述例 4. 形又は位置だけに依存して提供しない例 1 形に依存して情報を提供している例 2 形とテキストによって情報を提供している例 【非推奨例】 【推奨例】 1 のように形だけに依存して情報を提供している場合、音声読み上げソフトのユーザーは 情報を認識できません。このような場合には、それぞれの画像に対して代替となる情報を指 定して、形を認識できないユーザーでも情報を得られるようにする。
位置だけに依存して情報を提供している例 5.文字コードセットの例 欧文(Laten1) iso-8859-1 中国語(簡体字) GB2312 中国語(繁体字) BIG5 韓国語 EUC-KR 日本語(ｼﾌﾄ JIS) Shift_JIS 日本語(ISO-2022-JP) iso-2022-jp 日本語(ＥＵＣ) EUC-JP [メタデータへの記述例] <html lang=”en”> <head> <title>title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> </body> </html> このように、形や位置だけに依存 して情報を提供してしまうと、音声 読み上げソフトのユーザーはその情 報を得ることが出来なくなってしま います。 しかしながら、ユーザーによって は形や位置によって内容を理解しや すくなる場合があります。 形や位置によって情報を提供する 場合には、テキストなどの情報も合 わせて提供する。
6.色によって表示されている重要な情報 【非推奨例】 事例のように、必須項目を「赤字」で表示されても、色弱の方や全盲の方には判断できませ ん。この場合には、（必須）の文字を加えるか、太文字にすることなどにより、色による情報 が伝わらなくとも判断できるようにすべきです。 7.代替テキストの HTML 記述例 例１:画像が都庁舎の写真である場合
<img src="tochousha.jpg" alt="東京都庁舎の写真">
例２:画像が重要な情報ではない場合 <img src="button.gif" alt="">
8.音声変換ソフトの読み上げ順序 表作成のためという本来の目的とは別に、レイアウトの手段として普及したテーブル（ＨＴ ＭＬの<table>タグ）ですが、音声変換ソフトに対応したウェブページを作る場合には注意が 必要です。 以下に、音声変換ソフトのひとつである「ホームページ・リーダー」を使用した場合の例を 示します。 【非推奨例】 上記の例について、テーブル構造を分かりやすく表示すると次のようになります。 これを「ホームページ・リーダー」で読み上げると、次のようになります。 「最新ニュース」、「コラム（タイトル）」、「記事１-タイトル」、「記事２-タイトル」、「記事 １の本文」、「記事２の本文」、「コラム本文」、「※メッセージ」、「記事３-タイトル」、「記事 ４-タイトル」、「記事３の本文」、「記事４の本文」 このように、音声で聞くと非常にわかりにくいものとなります。 「デーブルの読み上げは、ＨＴＭＬソースに記述された順番に読み上げる」ということに注 意する必要があります。
【用語解説】
1. W3C (World Wide Web Consortium)
Web で用いられる技術の標準化と推進を目的とする国際学術研究機関。マサチューセッツ工科大学 計算機科学研究所、フランス国立情報処理自動化研究所、慶應義塾大学 SFC 研究所の 3 機関が中心 となって運営を行なっている。
Web のアクセシビリティについては、W3C の中の WAI(Web Accessibility Initiative)が検討を行っており、 1999 年 5 月にウェブ・コンテンツ・アクセシビリティ・ガイドライン 1.0 を公表している。 2. ピクセル 画素と同義。pix（pic＝写真の意の複数形）＋element の造語。一般にはピクセルとドットが同義に使 われているが、ドットと言った場合、本来は色や色深度の情報は含まない「点」を意味する。したがってカ ラー画像の最小単位はドットではなくピクセルと称するのが正確。ちなみにドット（dot）とは、ディスプレイ やプリンタが画像を表示／印刷する際に、画像を構成する小さな点のこと。パソコンで快適に操作をす るためには、ディスプレイの解像度が 1024×768 ドット以上の表示ができることが望ましい。ノートパソコ ンや液晶ディスプレイによっては、800×600 ドットまでしか画面表示できないものがある。 3. ブラウザ データやファイルの中身を見るためのソフトの総称。データの編集はできないが、内容を一覧して確 認できるようになっている。また「インターネットエクスプローラ」や「ネットスケープナビゲータ」といったウ ェブページ閲覧ソフトを単にブラウザと呼ぶことも多い。 4. HTML
Hyper Text Markup Language の略。ウェブページを記述する書式のこと。HTML という書式で記述さ れた文書ファイルをインターネットブラウザソフトで読むことでウェブページとして閲覧することができる。 単語、文章、画像にリンクを持たせ、クリックすることで関連項目を表示できるのが最大の特徴。最新の ワープロソフトは保存形式に HTML を選ぶだけで HTML ファイルを作ることができる。
5. Windows
Microsoft 社の GUI オペレーションシステム。開発当初は「インターフェース・マネージャー」と呼ばれて いた。1983 年に MS-DOS 上で動く GUI システムである Windows を発表。1985 年に最初のバージョンの Windows 1.0 がリリース。1987 年の Windows 2.0 からオーバーラップ・ウインドウのシステムとなり、現在 の一般的なウインドウ環境に近づいた。これらのバージョンは、まだ当時のハードウェア環境が貧弱で あったこともあり、ほとんど普及していない。1990 年 5 月（日本語版は 1991 年 1 月）に発売された Windows 3.0 は Mac OS なみの GUI インターフェースを備え、世界中で広まった。1992 年 4 月（日本語版 は 1993 年 5 月）には一部のバグを修正した Windows 3.1 がリリース。TrueType フォントや OLE をサポ ート。Mac OS との比較が頻繁にされるようになったのもこの頃で、Apple 社が Windows のルック＆フィー ルが自社 OS と酷似しているということで、Microsoft 社を訴えるという騒動もあった。Windows 3.1 までは、 MS-DOS 上で動作していたが、1995 年 8 月（日本語版は 11 月）に発売された Windows 95 からは、 MS-DOS がなくても起動するようにした。最新バージョンは 2001 年 10 月(日本語版は 11 月）に発売され た Windows XP。
6. Mac OS
Macintosh の OS（オペレーションシステム）の名前。最新バージョンは Mac OS Ⅹ。Mac OS のバージ ョン表記は、かつては英語版のシステムを「System 7.5」、日本語にローカライズされたシステムを「漢字 Talk 7.5」などと分けて表記していたが、1997 年 3 月に発売されたバージョン 7.6 以降、全世界共通で 「Mac OS 8.x」のように表記している。「漢字 Talk」という名称は、漢字 Talk 7.5.5 が最後。
7. カスケーディング・スタイルシート（Cascading Style Sheets）
カスケーディング・スタイルシートは、HTML 文書に様々なスタイル情報を設定することによって、フォ ントの装飾やページ・レイアウトを行うことができる技術。Internet Explorer3 以上、Netscape Navigator4 以上からサポートされはじめた。ブラウザの種類やバージョンによって表示の不具合やサポートされて いない機能がある。 8. フレーム ブラウザのウインドウを縦横自在に分割して、それぞれの枠フレームに HTML 文書を表示することが できる機能。制作やメンテナンスの負担が軽減されるといったメリットがある一方で、（1）コンテンツスペ ースを圧迫する、（2）ブラウザによっては「戻る」ボタンが機能しない場合がある、（3）古いブラウザでは 全体を印刷することができない、（4）ＵＲＬが機能しない、などのデメリットも多い。 9. パン屑式ナビゲーション たどってきた道筋を表示することで、現在位置を表示するとともに、後戻りするためのナビゲーション としても機能する。テキストベースであるためメンテナンスが容易であり、レイアウトにおいても場所をと らずに階層を明示できるのがメリット。すぐ上の階層だけでなく、２つ上、３つ上の階層にも直接飛ぶこと ができる。 参考例 10. サイトマップ ホームページ全体（サイト）の構成図。サイトマップは、直接目的の情報を探す手段のひとつ。巨大サ イトほどサイトマップの重要性は高いが、同時に盛り込むべき情報量も多く、整理が難しくなる。 11. 機種依存文字 コンピュータでは、文字を取り扱うためにそれぞれの文字にコードを割り振って処理している。漢字な ど日本語の文字は、使用頻度の高いものだけが JIS 漢字コードで定義されている。JIS で規定されてい パン屑式ナビゲーション
他の機種では何も表示されなかったり、他の記号が表示されたりする、ということが起こる。このように、 ある特定のコンピュータやワープロの機種だけで使われる文字を機種依存文字という。 ■機種依存文字の主な例 ・Windows 依存文字 ・左の文字を Mac OS で表示させた場合 12. アニメーション GIF グラフィックフォーマットのひとつ。連続した GIF 画像を再生することによってアニメーションを実現する。 Web ページでよく用いられている。この方式で実現したアニメーションを GIF アニメーションという。 13. Flash オリジナルフォーマットの Web 用アニメーションを作成するソフトウェア。 FLASH 形式のアニメーションは、（1）ドロー形式なので拡大・変形による画像の劣化がない、（2）ファ イルサイズが小さく表示が速い、（3）ブラウザ側にないフォントで表示できる、（4）ブラウザでの表示には プラグインが必要、などの特徴がある。モーフィングなどアニメーションの作成に必要な機能を備えてい る。 14. ダイナミック HTML(DHTML) Web ページ上でインタラクティブな表現を可能にする技術。ポインタをあてることで指定した画像を表 示させたり、イラストを回しながら弾ませたり、背景色をフェイドイン・フェイドアウトさせたり、といった動 的な Web コンテンツを実現できる。HTML4.0 と CSS のスタイルシート、スクリプト言語がコアになっており、 処理はクライアント側のブラウザで行なう。 もともと DHTML は、1997 年に Microsoft と Netscape が HTML に独自の拡張を加え、それぞれのブラ ウザに組み込んだのが始まり。両者で仕様が違うため、ブラウザごとで表示が異なってしまうという問題 がある。 15. Java スクリプト
Netscape 社のブラウザである Netscape Navigator（Communicator）で実行可能なスクリプト言語。文 法は Java 言語を参考にしているが、Java 言語との互換性はない。HTML ファイル上に<Script>タグを使 って記述することにより、ボタンが押された場合の処理や、簡単な演算処理などをブラウザ上で実現で きる。
プト言語をサポートしている。 16. PDF
Portable Document Format の略。Adobe Acrobat で用いられるファイルフォーマット。Windows、UNIX、 Mac OS などのプラットフォームに依存しないデータ形式で、現在の電子ドキュメントの標準となっている。 PDF ファイル形式の文書は、他のプラットフォームで作成した文書でも元のレイアウトを再現できるほか、 指定の書体が入っていなくても似たものが自動的に選ばれる。インターネットによる製品カタログやパン フレット類の配布などに利用されることが多い。PDF ファイルを制作するには Adobe Acrobat が必要だが、 読むことだけができる Acrobat Reader は Adobe 社のサイトから無償でダウンロードできるほか、雑誌の 付録 CD-ROM に収められていることが多い。
17. デバイス
「device」は「装置」の意味。コンピュータ関連では、独立した機能単位として、システムの一端を担う ハードウェア装置を指す。（ここでは、マウス、キーボードなどの入力装置のこと）
18. SSL (Secure Socket Layer)
Web ブラウザと Web サーバ間で安全な通信を行なうために Netscape Communications が開発した セキュリティ機能。IETF による標準化も行なわれており、TLS(Transport Layer Security)として
RFC2246 になっている。認証局の署名の入った証明書を使ったサーバの認証と Web ブラウザと Web サーバ間での通信内容の暗号化という 2 つの機能を持つ。 SSL は TCP 層とアプリケーション層間に位置するプロトコル層として位置しており、HTTP に限らず Telnet や FTP、SMTP などのさまざまなアプリケーションプロトコルを暗号化できる点が特徴。ただし、 UDP パケットの暗号化には対応していない。ネットスケープナビゲータやインターネットエクスプロラと いった Web ブラウザがすでに SSL への対応を行なっているため、ユーザーが特に意識せずに使うこと ができる点もメリット。現在では、Apache、Netscape Web Server、IIS など主要な Web サーバで利用す ることができ、E コマースやオンラインバンキングなどのサイトで一般的に用いられている。
また、最近では SSL でのデータ暗号化処理を、ハードウェアで高速に行なうアプライア
ンスや PCI カードなども登場している。
【付属資料】 東京都公式ホームページ・ウェブデザインの手引き 項目別補足説明 第２.ページデザイン １．ユーザーの環境に左右されないデザイン No 項目 優先度 説明 1 ウェブコンテンツは、関連する技術の規格 及び仕様に則り、かつ、それらの文法に 従って作成する。 A 仕様に則り、正しい文法で作成すれば、最低 限のアクセシビリティは確保することができ る。 2 ホームページの閲覧者（以下「ユーザー」 という。）が使用している様々なサイズの ディスプレイで問題なく表示できるよう、 800×600 ピクセルをレイアウトデザインの 基本とするとともに、640×480 ピクセルを 最小限有効な表示領域と想定して、重要 な項目はこの領域内に表示されるようレ イアウトする。 B ユーザーの大半は、800×600 以上のサイズ を使用しているが、いまだに 640×480 のサイ ズを使っているユーザーも存在する。なお、デ ザインする際には、ブラウザ自体の枠やスク ロールバー、ボタンなどの要素を差し引いて デザインする。具体的には、800×600 のディ スプレイサイズの場合は横幅を 750 ピクセル 程度、640×480 のディスプレイサイズでの表 示や、ページを印刷する場合に A4 サイズで 収まるようにするには横幅を 600 ピクセル程 度にする。 3 ウェブページをデザインする際には、閲覧 ソフト（以下「ブラウザ」という。）であるイン ターネットエクスプローラ及びネットスケー プナビゲータで表示チェックを行い、双方 のブラウザで必要な情報の表示ができる ようにする。 A ブラウザの種類によって、表示のされ方に違 いや独自の機能などがあるため、シェアの 9 割以上を占めるこの二つのブラウザでチェッ クする。 4 どちらか一方のブラウザでしか解釈され ない特殊なＨＴＭＬタグは使わない。 B 5 デザインは、できる限り Mac OS などの Windows 以外の基本ソフトによる環境でも 確認する。 B Windows や Mac OS で標準フォントやその大 きさが異なるなど、基本ソフトの違いによって も表現に差がでる場合があり、可能であれば 双方の環境で確認する。 6 情報提供はＨＴＭＬ形式を基本とし、ユー ザーが特定のアプリケーションを用意しな いと見ることができない形式（ワード、エク セル等）のみにより、情報を提供すること は行わない。 B 統計資料などをエクセルで提供する場合は、 CSV などのテキスト形式でも提供する。 7 ウェブページのファイル容量は、アナログ 通信回線を利用しているユーザーを考慮 し、６５ＫＢ以内に収めるよう工夫する。 B 現在でも回線速度の遅いアナログ回線でイン ターネットを利用している人もいるので、この ような環境でも短い時間で表示される 8 インターネットエクスプローラ以外のブラウ ザ表示に問題があるため、ワード、エクセ ルのＨＴＭＬ変換機能を利用したウェブペ ージ作成は行わない。 B ワード、エクセルの変換機能は、ネットスケー プナビゲータで正しく表示されない、不要にフ ァイル容量が大きくなるという問題がある。な お、エクセルのデータについては、ほとんどの ホームページ作成用ソフトに、コピーや読み 込みができる機能がある。 ２．リンク設定 No 項目 優先度 説明 1 リンクテキスト（リンクを設定している言 葉）やリンク画像（リンクを設定している画 像）の代替テキストの言葉は、「ここをクリ ック」や「戻る」といった表現ではなく、リン ク先の内容をユーザーが予想できる簡潔 な表現にする。 B 音声ブラウザにはリンク部分だけをピックアッ プして読み上げる機能があるものが多い。
2 リンク色はブラウザの初期設定（下線と青 色や赤紫色）を使用し、リンク部分の位置 を本文から離して表示する。 B ユーザーはブラウザを初期設定のまま使うこ とが多く、青に下線のテキストは「リンク」、赤 紫は「訪問済みリンク」という配色に慣れてい る。標準以外の色を使用した場合、間違って 何度も同じリンク先を選んでしまったり、目的 のリンク先を見逃す確率が高くなる。 3 各コンテンツページにおける１ページあた りのリンク数は、当該ページの内容に関 連した情報に絞り込むなどにより、多くな りすぎないようにする。 B リンクは、コンテンツの内容を補強するために 使うべきであり、多すぎるリンクは、ユーザー の判断を鈍らせ、混乱させる要因となる。 4 文章中の言葉にリンクを設定する「埋め 込みリンク」の使用は避け、別途、文章の 最後にリンクとリンク先の説明文を記載す る。 B 文中の言葉だけでリンクを設定するため、説 明を付けることができないなどの制約があり、 リンク先の内容を分かりやすいものにすること が困難。また、長い文章の場合には、リンクに 気をとられ、ユーザーが文章を読む際の流れ を断ち切ってしまうおそれがある。 5 ユーザーが誤って別のリンク先をクリック してしまうことのないように、リンクとリンク の間は近づきすぎないよう配慮する。 B 6 リンクテキストやリンク画像は、ユーザー がクリックしやすいよう、文字や画像の大 きさに配慮する。 B 7 関連した複数のリンクが並んでいる部分 （ナビゲーション等）は、ユーザーがその 部分を読み飛ばすことができるように、１ つのグループにして、かつ認識できるよう にしておく。また、音声変換ソフトでその部 分を読み飛ばすことができるような仕組み を提供する。 B ３．スタイルシート No 項目 優先度 説明 1 カスケーディング・スタイルシート（ＣＳＳ） を使用する場合は、別ファイルにリンクさ せる形式を使う。 B 別ファイルとすることで、複数ページのスタイ ル変更が容易となる。 2 スタイルシートは、ブラウザの種類やバー ジョンによってサポートに差があるため、 基本的に文字以外のスタイル指定は行わ ない。 B レイアウトをスタイルシートで設定すると、そ れが正しく再現されない場合、内容が非常に 読みづらくなる場合がある。 3 フォントサイズは、ユーザーが自由に変更 できるよう相対的なサイズで指定し、リン クの下線を取る設定はしない。 B 視覚障害者など、文字を大きくしてウェブサイ トを見ているユーザーへの配慮。また、下線 のないテキストはリンクと認識しづらくなる。 4 スタイルシートなしでもそのページが読め ることを必ず確認する。 A スタイルシートをサポートしたブラウザでも正 しく表示されない場合がある。また、ユーザー がスタイルシートをサポートしていない古いブ ラウザを使用している場合もあるため。 ４．フレーム No 項目 優先度 説明 1 フレームは基本的に使わない。 B フレームは、そのメリット以上にユーザビリティ の面でのデメリット(用語解説:8)が多い。フレ ームの使用は、その欠点をよく理解した上 で、それ以上のメリットがある場合に限定す る。
2 フレームを使用する場合は、ユーザーが 「お気に入り」等に登録できるよう、各ペー ジごとにフレームを作成し、固有のファイ ル名（ＵＲＬ）を付ける。 B フレームを使用する場合には必須。各ページ に URL を付けることで、他のホームページか ら、トップ以外のページへのリンクも可能とな る。 3 フレーム内に表示される各ページには、 音声変換ソフトを利用しているユーザー が、その内容や役割が何であるのかを判 断しやすいページタイトルを付ける。 A 代表的な音声変換ソフト「ホームページ・リー ダー」は、画面に表示されている各ページを 直接読み上げるのではなく、各ページに付け られているタイトルを読み上げる。ユーザーは このタイトルを手がかりに、どのページへ進む かを判断することになる。 4 フレームの境界線は「0」に指定し、ページ 内に「戻る」ボタンの機能を付ける。 B コンテンツスペースの確保、及び「戻る」ボタン が機能しないブラウザへの対応。 5 フレーム内に、他のホームページを表示さ せない。 B フレーム内がどのサイトのページなのか分か らない、他のホームページのナビゲーション が同一画面に存在することになるなど、ユー ザーが混乱する要因となる。企業サイトなど では他のサイトからのリンク条件で禁止として いるところも 第３.サイトデザイン 1.サイト構造 No 項目 優先度 説明 1 各公式ホームページの全体構成（以下 「サイト構造」という。）は、ユーザーに分 かりやすい形で情報を整理・分類化して デザインする。組織別の分類は、ユーザ ーにとって必ずしも分かりやすいものでは ないことに留意する。 B 「○○課のページ」など、組織別の分類は、そ の事務事業の内容をよく理解しているユーザ ーでないと、そこにどの様な情報があるのか を予測できない。 2 サイト構造は、ユーザーが目的とする情 報にたどり着きやすいよう、階層の幅を５ ～９、階層の深さを３～５以内に収めるよ う工夫する。 B 階層の幅（メニューの数）がこれ以上あると、 ユーザーが把握しきれなくなる。また、階層の 深さがこれ以上あると、何回もクリックしない と目的のページにたどり着けないなど、使い 勝手が悪くなる。 3 ホームページ内の同一階層のページデザ インは極力統一し、ユーザーがどの場所 にいるのか分かりやすいようにする。 B ２．ナビゲーション機能 No 項目 優先度 説明 1 すべてのページで、トップページ及び１つ 上の階層や前ページに移動できるように する。この場合、トップページへのリンクに は、「ホームページ」ではなく「トップペー ジ」の言葉を用いる。 B 「ホームページ」は、本来トップページのことで あるが、日本ではインターネットが普及するに つれ、ウェブページすべてをホームページと 呼ぶ傾向もあるため、より分かりやすい「トッ プページ」に用語を統一する。 2 同レベルの階層のページに移動できるよ うにする。 B トップページに戻らなくとも他のコンテンツに 移動でき、目的のページに移動するまでのク リック回数を少なくすることが可能となる。 3 トップページには、サイト ID（サイト名やロ ゴマーク）を大きく目立つ位置に配置す る。 B 多くのユーザーが初めて訪れる場所がトップ ページであり、どのホームページを訪れたの か分かりやすいようにしておく。 4 トップページには、ホームページ内のメニュー、コンテ ンツ一覧を分かりやすく表示する。例として、リピータ ーの多いホームページでは新着情報などのコンテン ツ、ターゲットとするユーザーが明確な場合にはユー ザー別のコンテンツ一覧を配置する。 B
5 各公式ホームページに、東京都ホームペ ージ（http://www.metro.tokyo.jp/）へリン クを設ける際は、単に東京都シンボルマ ークの画像にリンクを設定するだけではな く、テキスト文を付けるなど、ユーザーに 分かりやすい方法で提供す B ロゴマークにリンクがあるのが常識と考えて いるユーザーも多いが、実際にはリンクを設 定していない場合もあることや、リンクに気付 かないユーザーもいることから、テキスト文も 付けた方がより親切。 6 各ホームページ内において、グローバル ナビゲーション（ホームページ全体にわた って一貫して表示されるナビゲーション） を、同じ位置・外観・機能で提供する。た だし、トップページと入力フォームについて は、その役割が他のページと異なるため グローバルナビゲーションの例外とする。 B グローバルナビゲーションは、目次の内容を 縮小して各ページに置いたようなもの。サイト 内の様々なコンテンツ間をユーザーが移動す るときの道先案内であり、自分がまだそのサ イトにいるかどうかを確認するために欠かせ ないもの。一貫したナビゲーションを用いるこ とで、ユーザーはその使い方を一度だけ覚え れば良いというメリットもある。この種のナビゲ ーションがあるとないとでは、ユーザーの負担 が違ってくる。大企業のサイトではほとんどが 採用しており、地方自のサイトでも最近増え つつある。 7 グローバルナビゲーションには、サイト ID、トップページ、検索、ホームページ内 の各コンテンツへのリンクを含める。 B 8 入力フォームでは、グローバルナビゲー ションの代わりに、サイト ID、トップページ と前のページに戻るためのリンクを提供 する。 B 入力フォームでは、グローバルナビゲーション があることで、かえって気が散って、入力作業 に集中できない場合があるため。 9 サイト ID を配置する位置は、左上の角に 統一する。 B 企業や有名サイトでも、サイト ID は左上の角 に配置している例が多い。これは左上が人間 の視線の流れの起点でもあり、見やすい位置 という理由から。 10 階層が深いサイト構造の場合には、パン 屑式ナビゲーションを利用する。 B 用語解説：9 11 イメージマップ（一つの画像に複数のリン クを設定する方法）は、クライアントサイド を使用し、リンク先の内容が分かる適切な 代替テキストを必ず付ける。 A イメージマップには、サーバーサイドとクライ アントサイドの２種類の方法がある。サーバー サイドのイメージマップは、クリックした画面の 座標をサーバに送って処理する方法のため、 キーボードなどの入力装置では利用できな い。クライアントサイドのイメージマップでは、 すべてをブラウザ側で処理できるため、キー ボードで領域を選択したり、リンク先へ移動す ることが可能。また、各領域ごとに代替テキス トを付けられるという点でもアクセシブルな方 法である。 12 メニューにマウスの矢印をあわせると詳 細メニューが下方向に現れる、Java スクリ プトを使用したプルダウンメニューは、音 声変換ソフトで読み上げることができない ため使用しない。 B 13 ホームページの全体的な構成に関する情 報（例えば、サイトマップや目次など）を提 供する。 B
14 公式ホームページ以外へのリンクを設定 する場合は、注釈を設けるなどにより、ユ ーザーに公式ホームページ外へのリンク であることが分かるようにする。 B ユーザーが、リンク先のページを都のホーム ページと勘違いしないようにするため。例とし て、「東京の芸術と文化（東京都歴史文化財 団）」というようにそのページの運営者名を入 れるなど。企業や有名サイトではリンクを設定 する際の条件としているところもある。 15 ユーザーの意思に反して、又はユーザー の認識若しくは予期することが困難な形 で、ページの全部若しくは一部を自動的 に更新させたり、別のページに移動させた り、又はリンク先を新しいウインドウで開 いたりさせない。 A ユーザーが、新しいウインドウが開かれたこと に必ずしも気づくとは限らないため、人により 混乱する場合もある。多くのブラウザでは、ユ ーザー側の操作により新しいウインドウで開 ける機能が提供されており、どちらが良いか はユーザーにまかせるのが妥当。 ３．検索 No 項目 優先度 説明 1 情報量の多いホームページの場合、検索 機能はすべてのページで使えるようにす る。 B 検索優先のユーザーは、トップページの検索 を頻繁に利用するが、それ以外の人は、サイ ト内で迷った時に初めて検索ボタンを探すた め、全ページに設けた方がよい。 2 検索範囲が指定できる場合、はっきりと明 示する。 B 3 検索結果の精度を高めるため、メタデータ （HTML の<meta>タグ）で当該ページ又は ホームページ全体に関する情報を提供す る。具体的にはメタデータに、当該ページ 又はホームページ全体についての説明 文、キーワードなどを記述 B 主要な検索エンジンの検索ロボットは自動巡 回の際、ウェブページのヘッダ情報である <title>や<meta>タグに書かれたページタイト ルや説明文の内容を読みとってデータベース を作成する。タグの指定がない場合は、ペー ジの最初の数十行のテキストを拾い出して要 約文として記録する。 4 検索結果は最も確率の高いページから順 に表示する。 B ユーザーは、検索結果を上から見ていく傾向 があるため、キーワードのヒット確率の高いも のから順に表示する。 5 検索結果ページには、検索キーワードを 目立つように表示する。 B 検索に時間がかかったり、検索結果を拾い読 みしているうちに、ユーザーがそもそも何を探 していたのか分からなくなる場合があるため。 6 検索結果の数は必ず表示する。 B ユーザーが全体のボリュームを把握でき、絞 り込み検索をすべきかどうかの判断の目安と なる。 7 ユーザーが、検索結果全体のどの部分を 参照しているのかを表示する。 B 例として、「検索結果 100 件中、51～60 件目」 と表示するなど。 第４.コンテンツデザイン １．記述 No 項目 優先度 説明 1 コンテンツには、簡潔で内容を直接説明 する見出しを必ず付ける。 B ひとつ一つのページをじっくり読むユーザー は希であり、多くのユーザーは、ざっと目をと おして、興味のあるものだけを読む傾向が強 い。また、パソコン画面の文章は印刷物に比 べて読みづらい。このような理由から、ウェブ サイトでの最適な文章は、斜め読みでもその ページの内容が把握できることが基本とな る。 2 文章が多い場合には、大見出し、中見出 し、小見出しをつける。 B
3 ウェブページの文章は、その内容にあわ せた最も明瞭で簡潔なものにする。 B 4 箇条書きは積極的に使い、本文から１行 離して配置する。 B 5 重要な情報はページ上部に配置する。 B 6 画像や音声がページの内容の理解を助 けると思われる部分には、それらを付けて テキストを補足する。 B 7 報告書など長い文章については、ユーザ ーが印刷して読めるよう、別途、印刷用の ページやＰＤＦ形式のファイルを用意す る。 B PDF は、既存のワープロ文書などから簡単に 作成でき、印刷した場合にも元のレイアウトを 再現できるといったメリットがある反面、音声 変換ソフトで読み上げることができない、通常 のウェブページにくらべて読みづらいなどの デメリットもある。したがって、PDF 形式の使 用は、報告書など、ユーザーが印刷して読む ことが多いものなど、ユーザーにメリットがあ る場合に限定する。 8 各ページには、更新日や情報の発生日を 記載するようにする。 B 各ページに記載されている内容が、新しいも のなのかどうかもユーザーが知りたい情報で あるため。 9 ウェブコンテンツは見出し、段落、リストな どの要素を用いて文書の構造を規定す る。 A 音声読み上げソフトユーザーは、レイアウトや 文字の大きさなどの視覚による情報を得るこ とができないため。 10 日本語のページでは、想定するユーザー にとって理解しづらいと考えられる外国語 は、多用しないようにする。使用するとき は、最初に用いるときに解説しておく。 B 11 省略語、専門用語、流行語、俗語などの 想定するユーザーにとって理解しにくいと 考えられる用語は、多用しないようにす る。使用するときは、最初に用いるときに 定義しておく。 B 12 想定するユーザーにとって、読みの難し いと考えられる言葉（固有名詞など）は、 多用しないようにする。使用するときは、 最初に用いるときに読み（ふりがな）を明 示しておく。 B 13 ウェブコンテンツの内容を理解・操作する のに必要な情報は、形又は位置だけに依 存して提供しない。 A ２．ファイル名とページタイトル No 項目 優先度 説明 1 ページタイトル（HTML の<title>タグ）は、 ブラウザの左最上部や検索結果などに表 示される重要な部分であるため、すべて のページに付ける。 A ページタイトルは、音声変換ソフトで最初に読み上 げられる部分であり、これから読み上げるページに 何があるのかを知る重要な手がかりとなる。また、 ユーザーがお気に入り等に登録したときの登録名 にも使われるなど、インターネット上で重要なキー ワードとして使われている。 2 ページタイトルは、日本語で（外国語ペー ジは除く。）ページ内容を的確に表す名前 を付ける。 A 複数のページに同じタイトルはつけない。
３．外国語の使用 No 項目 優先度 説明 1 １つのページで複数の異なる言語を使用 している場合には、言語が変わる部分で これを明示する。（HTML の<lang>タグ） A 複数の言語に対応した音声変換ソフトへの対 応。また、文書全体が特定の言語で書かれて いる場合でも lang タグで言語を明示するのが 望ましい。 2 文字化けを防ぐため、メタデータに、使用 する言語の文字コードセットを指定してお く。また、HTML ソース自体も指定した文 字コードで保存しなければ、文字化けする 場合があることに留意する。 B ４．フォントや文字の使い方 No 項目 優先度 説明 1 フォントの種類やサイズは、ブラウザの初 期設定に従う。 B 指定したフォントの種類によっては、ユーザー の環境にない場合があるため。 2 フォントサイズを指定するときは、ユーザ ーが自由に大きさを変更できるよう相対 的なサイズで指定する。 A 視覚障害者など、文字を大きくしてウェブサイ トを見ているユーザーに配慮する。 3 ユーザーが戸惑わないよう、下線や青と 赤紫の色はリンク以外で使用しない。 B 下線や青と赤紫の色は、一般的にリンクを示 すものと認知されているため、リンク以外に使 用した場合、ユーザーがとまどう要因となる。 4 ブリンクテキスト（点滅する文字）、スクロ ールテキスト（左右に流れる文字）の使用 は控える。 B 動くテキストは、音声変換ソフトで読めない場 合があるだけでなく、画面の一部を極端に拡 大して文字を読んでいる人や、認知障害のあ る人にとっても読むのが困難。また、ブリンク テキストはネットスケープナビゲータ、スクロ ールテキストはインターネットエクスプローラ のみの独自機能。 5 レイアウト目的で一単語内にスペースや 改行コードを挿入しない。 B 音声変換ソフトで、ひとつの単語として認識で きいため。例えば、「東 京 都」と表記した場 合、「ひがし きょう と」と読み上げるなど。 6 単位や年月日などの情報は、図形文字や 記号を用いないで文字で記述する。 B 音声変換ソフトへの対応。例として、日付を 「12/1」と表記した場合、「1 分の 12」と読み上 げてしまう。また、単位記号の中には機種依 存文字であるものがある。 7 特定のシステム環境でのみ表示される機 種依存文字は使用しない。 A ユーザーのシステム環境により、文字化けと なる場合がある。 ５．色の使い方 No 項目 優先度 説明 1 使用する色は、Windows と Mac OS の双 方に共通の表示色である 216 色（Web セ ーフカラー）を使用する。 B 2 文字が見づらくならないよう、テキストの 色と背景に明確なコントラストを出す。 A 視覚障害者が読めないだけでなく、一般ユー ザーにとっても見づらいため。 3 色によって表示されている重要な情報 は、その色を再現できない場合でも情報 が伝わるように配慮する。 A 色の識別が困難な人や白黒ディスプレイを使 用している環境でも、同じ情報を提供できるよ うにする。 4 画像などの背景色と文字色とには、十分 なコントラストを取り、識別しやすい配色に する。 A
６．画像や音声の取り扱い No 項目 優先度 説明 1 画像を使う際は、画像の内容を表した代 替テキスト（HTML の<alt>タグ）を付ける。 A 画像が正常に表記されなかった場合や、音声 変換ソフトに対応するため。代替テキストの表 現については、読み上げの途中で突然関連 性のない言葉がでてきたり、同じ言葉が繰り 返されるということのないように、前後のテキ ストの流れ( 文脈)にあったものとする必要も ある。 2 高画質の画像や写真が必要な場合はサムネ イル（サイズの小さい画像）を使用し、大きな画 像にリンクを貼る。この場合、サムネイル画像 の近くに、大きな画像のファイル容量とその画 像の内容を的確に表現したテキストリンクを付 ける。 A 容量が大きなファイルは、表示に時間がかか るため、ユーザーに、その時間をあらかじめ 予想できるようにしておく。 3 高画質の画像を必要とする場合以外は、 画像ファイルの容量を 30KB 以下にする。 B 4 動画や音声を使用する場合には、テキス トや字幕などを併用する。 A 視覚障害者、聴覚障害者にも同じ情報を提供 できるようにする。 5 アニメーション GIF の使用は、ユーザーが ウェブページの文章を読む際に集中力の 妨げとなるため、最小限に抑える。 B 6 ウェブコンテンツの内容を理解・操作する のに必要な音声情報には、聴覚を用いな くても理解できるテキストなどの代替情報 も提供する。 A 7 動画など時間によって変化する非テキス ト情報には、字幕又は状況説明などの手 段によって、同期した代替情報を提供す る。同期して代替情報が提供できない場 合には、内容についての説明を何らかの 形で提供するようにする。 B 8 自動的に音を再生させることは控える。自 動的に再生させる場合には、再生してい ることをユーザーに明示する。 B 9 音は、ユーザーが出力を制御できるよう にする。 B 10 変化又は移動する画像又はテキストは、 その速度、色彩、輝度の変化などに注意 して作成する。 B 11 早い周期で、画面を点滅させることは避 ける。 A 画面全体を点滅させるケースは実際にはほと んどないと思われるが、1 秒間に数回から数 十回の範囲で画面を点滅させることによっ て、発作を引き起こす場合があることに注意 する。 ７．表 No 項目 優先度 説明 1 表（テーブル)には、テキストで表題（HTML の<caption>タグ）を付け、音声変換ソフト を利用しているユーザーに、表が始まるこ とを認識できるようにする。 A 音声変換ソフトを利用する視覚障害者だけで なく、健常者にとっても表題があれば表の内 容を理解しやすい。
