■表紙
みんなが使えるホームページの作り方
ウェブアクセシビリティ12のポイント
（改訂版）
（イメージイラスト）
平成18年9月
編集：独立行政法人 情報通信研究機構
監修：総務省 情報通信政策局 情報通信利用促進課
■ページ1
目次
はじめに 1.
12のポイント
ポイント1. 正しい文法で書く ページ3.
ポイント2. タグで構造や役割を示す ページ4.
ポイント3. 画像が見えない人のために ページ5.
ポイント4. 利用者が迷わないリンク ページ6.
ポイント5. テキストで注意すること ページ7.
ポイント6. テーブルに必要とされる配慮 ページ8.
ポイント7. 迷わず使える入力フォーム ページ9.
ポイント8. フレームをバリアにしない ページ10.
ポイント9. スクリプトとマルチメディア ページ11.
ポイント10. スタイルシートを有効に使う ページ12.
ポイント11. 色づかいの配慮 ページ13 .
ポイント12. その他に注意したいこと ページ14.
JISの個別要件と12のポイントの関連 ページ15.
総務省「みんなの公共サイト運用モデル」 ページ19.
はじめに
ウェブアクセシビリティの大切さ
ウェブアクセシビリティとは、「障害者や高齢者など、心身の機能に制約のある人でもウェブで提供されている情報に問題なくアクセスし利用できること」を意味する言葉です。ウェブは、障害者や高齢者にとっても重要な情報源であり、多くの利用者がいます。しかし、実際には多くのウェブページにバリアがあり、そのページに書かれている内容さえ知ることができないことも少なくありません。
では、なぜそのようなことが起きるのでしょうか？ まず知っていただきたいのは、すべての利用者が同じブラウザを使っているわけではないということです。テキストだけが表示されるブラウザを使っている人もいれば、コンピュータの音声で内容を読み上げさせて聞いている人もいます。特定の一般的なブラウザでどのように表示されるかだけを考えて作られたウェブページは、それ以外の環境では情報として正しく伝わらないことが多いのです。
また、すべての利用者が同じようなハードウェアを使っているわけではない点にも注意する必要があります。たとえば、マウスが操作できないためキーボードをはじめとする他の機器を使っている利用者は少なくありません。また、小さな画面を使っている人や、画面は大きくても表示内容を極端に拡大している人もいます。様々な理由からモノクロの画面を使っている人もいるでしょう。そのような理由から、フルカラーの大画面でマウスを使っている利用者を前提として制作されたページは、そうでない環境の人には利用できないことも多いのです。
■ページ2
このパンフレットについて
このパンフレットは、プロのウェブデザイナーはもちろんのこと、職場でウェブ制作の担当になっている人や個人でホームページを公開している人など、ホームページを作る機会のあるすべての人に向けて、知っておいてもらいたいウェブアクセシビリティのポイントをまとめたものです。パラパラとめくってみて、まずは興味のありそうな部分だけでも読んでみてください。ほんの少し知識を増やして、ほんの少し気をつけるだけで、多くの利用者がそのページを利用できるようになるのです。
パンフレットの内容は、1ページずつ大きく12種類に分かれています。そして、各ページは2つまたは3つの項目で構成されています。それぞれの項目は、一つひとつで完結していますので、はじめから順番に読み進める必要はありません。まずは、できるところから、ほんの一つでもあなたの制作するページに取り入れてみてください。
情報バリアフリーのための情報提供サイト
情報通信研究機構（NICT）では、「情報バリアフリーのための情報提供サイト」を平成14年7月に開設し、平成15年3月には同サイト内に「みんなが使えるホームページの作り方」を掲載しました。
更に平成16年及び17年にはサイトのリニューアルやコンテンツの充実化を図り、現在、8つのコーナーで、情報バリアフリーに関わる様々な情報提供を行っています。
（図版 パンフレットの構成）
「みんなが使えるホームページの作り方」は、掲載以来多くの方々にご愛読いただいてきましたが、今回、ウェブアクセシビリティJISとの対応等、内容の追加や改訂を行いました。
このサイトのそれぞれのページは、どのような環境から利用した場合でも情報の内容が伝わるように出来る限り配慮しています。
（図版 情報バリアフリーのための情報提供サイト。URL：http://www2.nict.go.jp/ts/barrierfree/ ）
（図版 みんなが使えるホームページの作り方。URL：http://www2.nict.go.jp/ts/barrierfree/accessibility/minna/）
■ページ3 正しい文法で書く ポイント1
●DOCTYPE宣言をつける
【関連するJIS X 8341-3 個別要件】5.1.a
HTMLはいくつかのバージョンと種類に分かれています。そして、それぞれで使えるタグの種類や配置場所などの決まりが異なります。
そのため、文法をチェックするには、DOCTYPE宣言をつけてバージョンと種類を明示する必要があります。また、このDOCTYPE宣言は、最近では別の役割も果たすようになっています。比較的新しいブラウザの中には、「標準モード」と「互換モード」という2つの表示モードがあるものが多いのですが、それらはDOCTYPE宣言の書き方によって自動的に切り替わる仕組みになっているのです。どう書くとどちらのモードになるかはブラウザによって異なりますが、標準的な正しい表示をさせたいのであれば、正しいDOCTYPE宣言をつけるようにしてください。
（図版 HTML4.01のDOCTYPE宣言の例。Strict、Transitional、Framesetの3種類がある。）
●使うべきでないタグ
【関連するJIS X 8341-3 個別要件】5.1.a
HTMLのタグの中には、使うことを「非推奨」とされているものがあります。それらは、主に表示方法の指定を行うタグで、現在ではHTMLではなくスタイルシートで指定することになっているものです。「非推奨」のタグを使うと、様々なアクセシビリティ上の問題を引き起こしますので注意してください。特定の企業などが独自に拡張した、表示を制御するタグについても同様です。
また、タグの中で指定する属性の中にも「非推奨」とされているものがあります。基本的には、文字色や背景色、フォントの種類、行揃えなどの表示方法を設定する属性は、非推奨です。同じ名前の属性でも、タグの種類によって「非推奨」とそうでないものがありますが、詳細は専門書などを参考にしてください。
（図版 HTML4.01で非推奨とされているタグ。）
●文法の確認
【関連するJIS X 8341-3 個別要件】5.1.a
W3C(World Wide Web Consortium)が勧告として公開しているHTMLやCSSなどの仕様は、アクセシビリティを十分に考慮して作成されています。そのため、その文法を守ることによって、アクセシビリティ上の問題の多くを取り除くことができます（ただし、文法が正しいからと言って、それがアクセシブルであるとは限りません）。W3Cには無料で利用できるHTMLとCSSの文法チェックのページ（検証サービス）がありますので、ページを作成・変更したら常にチェックするようにしてください。タグの閉じ忘れなどの単純なミスによって、自分のブラウザでは問題なくても、他のブラウザでは何も表示されない、というような事態も防ぐことができるかもしれません。
（図版 W3CのHTML検証サービス。URL：http://validator.w3.org/）
（図版 W3CのCSS検証サービス。URL：http://jigsaw.w3.org/css-validator/）
■ページ4 タグで構造や役割を示す ポイント2
●見出しを明確に示す
【関連するJIS X 8341-3 個別要件】5.2.a
見出し（h1〜h6）を正しくタグ付けし、明確に示すことは重要なことです。たとえば、ホームページの内容を音声で読み上げさせている場合、そのページの構成を把握するために、見出しだけを抜き出して読み上げる機能を利用して拾い読みをすることもあります。その場合、見出しが正しくタグ付けされていなければ、見出しとして認識されず読み上げられません。また、逆に文字を大きく表示させたいなどの理由で、見出しでない部分に見出しのタグ付けがされていると、関係ない部分が読み上げられて混乱する可能性もあります。見出しは画像になっていることが多いですが、たとえ画像であっても見出しとしてタグ付けする必要があるという点にも注意してください。
（図版 見出しの例とそのソース。適切に見出しのタグが付けられている。）
●強調したい部分のタグ付け
【関連するJIS X 8341-3 個別要件】5.2.a
文字の色を変える、太字にする、下線を引く。これらは、その部分を強調したい時の手段です。しかし、HTMLで表示方法を指定するだけだと、その通りに表示できない環境を利用している人には、強調されていることが伝わりません。HTMLで強調を示すには、emタグ(普通の強調)またはstrongタグ(普通より強い強調)を使います。そのままの状態だと、一般的にemタグの内容は斜体で、strongタグの内容は太字で表示されますが、表示方法はスタイルシートで自由に変更できます。HTMLで強調されていることを構造的に示しておくと、たとえば音声で表現される場合でも、音量や抑揚などの変化でそれを伝えることが可能になります。
（図版 em要素とstrong要素へのスタイルシートの指定例。）
●ブロックレベルとインライン
【関連するJIS X 8341-3 個別要件】5.2.a
HTMLで使うことのできるタグの中には、1つのまとまった単位として扱われるもの（ブロックレベル：見出し・段落など）と、その中の文章の一部として使われるもの（インライン：強調・リンク・画像など）があります。HTMLの基本的なルールとして、インラインのものは、ブロックレベルの中に入れることになっています。たとえば、〜の中に画像やリンクを直接入れるのではなく、まず見出しや段落などのタグを書いて、インラインのものはその中に入れるということです。このようにページの内容を構造的な単位でまとめておくと、音声などの環境では、ブロックレベルの単位で読み飛ばすなどの操作ができるようになり、内容がより扱いやすくなります。
（図版 ブロックレベル要素の例）
（図版 インライン要素の例）
■ページ5 画像が見えない人のために. ポイント3
●画像には適切な代替テキストを
【関連するJIS X 8341-3 個別要件】5.4.a、5.4.b
imgタグにつける「alt="○○○"」は、HTMLの文法上必須のものです。たとえ代替テキストが必要ないと思われる場合でも、「alt=""」のように(内容を空にして)指定しておく必要があります。
この「alt」は「alternate text」を略したもので、意味としては「代わりとして使われるテキスト」ということになります。つまり、「alt="○○○"」で指定するテキストは、テキストブラウザや音声・点字などの画像を表示できない環境で、画像の代わりとして利用されることを目的としたものなのです。代替テキストは、画像の説明をするためのものではありませんし、マウスのポインタを画像にのせた時にそれをポップアップさせるためのものでもありません（画像の説明をポップアップさせたい場合は「title="○○○"」を使用してください）。あくまで、画像が無い状態で、その代わりの役割を果たすために利用されるものなのです。そのため、同じ画像でもその役割、配置されている位置や前後関係などによって、代替テキストとしてふさわしい内容は変わってくるという点に注意してください。代替テキストが適切かどうか確認するには、音声ブラウザやテキストブラウザなどを使用するか、テキスト形式で書き出したものをテキストエディタなどで開いてチェックしてください。
また、画像が複雑なグラフである場合など「alt="○○○"」だけでは画像の意味や内容等を十分に伝えきれない場合には、「longdesc="○○○"」で詳しい説明のあるページのURLを示すこともできます。ただし、longdescに対応していないブラウザもありますので、可能であれば説明ページへのリンクもつけてください。
（図版 画像と代替テキストの例1。ロゴ画像の役割を代替テキストで表している。）
（図版 画像と代替テキストの例2。画像の説明ではなく、画像の機能を表している。）
●イメージマップ使用時の注意
【関連するJIS X 8341-3 個別要件】5.4.b
イメージマップには、画像自体の代替テキストの他に、マウスに反応する各領域に対しても代替テキストをつける必要があります。右のソース例のように、リンク先と領域を定義するareaタグの中に「alt="○○○"」の形式で記入してください。その際、代替テキストはリンク先が具体的にイメージできるようなものにしてください。また、古いブラウザの中には、各領域に対する代替テキストを利用できないものもあります。可能であれば、イメージマップとは別にテキストのリンクも用意してください。なお、アクセシビリティを考慮するのであれば、サーバー側で処理を行うイメージマップは基本的に使用しないでください。もし使う必要がある場合は、テキストによるリンクは必ず用意してください。
（図版 イメージマップに代替テキストをつけた例。）
■ページ6 利用者が迷わないリンク ポイント4
●リンク先が予測できるようにする
【関連するJIS X 8341-3 個別要件】5.3.g
リンク部分の言葉として、「ここ」や「ここをクリック」などは使わないでください。その言葉だけではリンク先がどのようなページなのかを連想することができませんし、キーボードなどマウス以外の装置を使っていて、クリックのできない利用者もいるのです。ブラウザの中には、リンク部分を抜き出して一覧にできるものや、リンク部分だけを読み上げさせて拾い読みできるようになっているものがありますが、そのような機能も無駄になってしまいます。リンク部分の言葉は、極端に漠然としたものにせずに、簡潔でリンク先の内容が連想できるようなものにしてください。リンク先に関する情報を補足して明確に示したい場合には「title=" ○○○"」の形式で入れておくこともできます。
（図版 Opera6でリンクの一覧を表示させた例。リンク部分が「ここ」や「ここをクリック」になっていると、このような機能も意味がなくなる。）
●新しいウィンドウは混乱のもと
【関連するJIS X 8341-3 個別要件】5.3.e
新しいウィンドウが開いても、それを目で確認できないため混乱する利用者がいます。また、ウィンドウを最大化している利用者の中には、新しいウィンドウが開いたことに気がつかず、ブラウザの「戻る」ボタンが突然効かなくなって戸惑う人もいます。このように、突然新しいウィンドウを開くことは、ユーザーを混乱させる原因となっているのです。多くのブラウザには「新しいウィンドウで開く」機能がついているため、利用者は新しいウィンドウに表示させたい思えば、そのようにできます。しかし、「新しいウィンドウを開かない」機能のあるブラウザは、まだ普及しているとは言えません。基本的には、新しいウィンドウは開かないようにして、もし開く必要のある場合は、あらかじめそれがわかるようにしておきましょう。
（図版 リンク先を新しいウィンドウに表示させる非推奨例。）
（図版 JavaScriptで新しいウィンドウを開く非推奨例。新しいウィンドウは基本的には開かない。開く場合はあらかじめ知らせるようにしよう。）
●連続するリンクは明確に区切る
【関連するJIS X 8341-3 個別要件】5.3.g
ブラウザの種類によっては、2つ以上のリンクが続いていると、それらの区切りが明確には分からない状態になります。そうなることを防ぐために、リンクが続く場合には、その間にリンクしていない文字（記号など）を入れるようにしてください。リンクが続くのは、テキストの場合だけではありません。リンクしている画像が続く場合には、その代替テキスト同士の区切りがわかるように配慮する必要があります。この場合は、代替テキストに句読点を含めるなどして、その前後の区切りがわかるようにしておいてください。テキストの場合と同様に、リンクしている画像の間にリンクしていない文字を入れておき、画面表示の場合にのみスタイルシートでそれを消す、という方法もあります。
（図版 連続するリンクを記号「|」で区切っている例。通常は、記号の前後に半角スペースも入れておく。）
■ページ7 テキストで注意すること ポイント5
●単語の途中に空白や改行を入れない
【関連するJIS X 8341-3 個別要件】5.9.e
案内の文書などを作る場合、「日 時」「場 所」のように文字の間に空白を入れて幅を調整することがあります。また、HTML のソースを見やすくするために、長い文章の途中に改行を入れる人もいます。このように、もし1つの単語の途中に空白や改行が入っていると、音声では正しく読み上げられなくなる確率が高くなりますので注意してください。たとえば、ある音声ブラウザでは「日 時」は「ひ・とき」、「場 所」「ば・ところ」のように読み上げます。また、ソース上の文章の途中に改行を入れると、ほとんどのブラウザでは半角スペースが入った状態で表示されますし、単語が区切られると検索もできなくなります。文字の間隔を調整する場合は、スタイルシートを利用しましょう。
（図版 スタイルシートを使った文字間隔の調整例。）
●機種依存文字と記号に注意する
【関連するJIS X 8341-3 個別要件】5.1.a
文字コードを正しく指定していても、使用しているＯＳの種類（とフォントの種類）によっては、異なる文字として表示される文字があります。最も注意しなければいけないのは、Windowsでの@ABなどの数字です。これらは、Macintoshでは、（日）（月）（火）のように表示されますので注意してください。また、年月日や電話番号などのように、数字と記号だけで構成されるテキストは、どの記号を使うかによって音声ブラウザでの読み上げ方が変わってきますので注意してください。たとえば、数字を「/」で区切ると分数として読み上げられる場合があります。年月日を正確に伝えたい場合は、それらを記号で区切るのではなく、「○年○月○日」のように漢字を使って示すと確実です。
（図版 Windows環境での表示例。）
（図版 同じページをMac環境で表示させた例。）
●文字を点滅・移動させない
【関連するJIS X 8341-3 個別要件】5.8.a、5.8.b
視覚等に障害のある人の中には、点滅したり移動する文字を読むことが非常に困難か、あるいはまったく読めない人もいます。また、環境によっては、移動しながら表示される文字を音声で読み上げさせることはできません。そのような動きを確実に止められる機能を提供できる場合を除いては、文字を点滅・移動させることは避けてください。特に、文字を点滅させるBLINKタグと文字を移動させるMARQUEEタグは、特定のブラウザの独自拡張です。HTMLでは表示方法を指定しないという意味でも、これらのタグは使わないでください。また、部分的な点滅ではなく、画面の広い範囲を明滅させると、発作の原因となる場合がありますので注意してください。
（図版 このように文字を移動させることは避けるべき。）
■ページ8 テーブルに必要とされる配慮 ポイント6
●音声環境での読み上げ順に注意する
【関連するJIS X 8341-3 個別要件】5.2.d
テーブルを使ってレイアウトをした場合、見た目には何の問題もなくても、音声ブラウザなどで読み上げさせると読み上げ順序がバラバラで意味不明になってしまうことがあります。一般的な音声ブラウザは、テーブルのセルを上の行から順に左のセルから右のセルへという順序で（ソースに書かれている通りの順番で上から下へと）読み上げます。テーブルでレイアウトをする場合には、その順序で読み上げられても意味が通るようしてください。確認にはテキストブラウザや設定でテーブルを無効にできるブラウザを使用すると便利です。また、テーブルでレイアウトをする場合でも、見出しなどの構造を示すタグはしっかりとつけてください。
（図版 テーブルのセルが読み上げられる順序。）
●表のヘッダを明確に示す
【関連するJIS X 8341-3 個別要件】5.2.c
レイアウトのために使用するテーブルではなく、表形式のデータを表すためのテーブルでは、thタグとtdタグを適切に使い分けて、そのセルがヘッダなのかデータなのかを明確に示してください。そのようにしておくことで、音声環境では各データの前に対応するヘッダを読み上げて、何に対するデータなのかをわかりやすくすることが可能になります。また、音声ブラウザの中には、データのセルからそれに対応するヘッダの情報を得られるものがありますが、これもヘッダとデータが正しくタグ付けされていることが前提となって機能します。逆に、太字でセンタリングなどの表示上の効果だけを目的として、ヘッダではない部分にthタグを使用しないでください。
（図版 そのセルがヘッダであれば| 〜 | を、データであれば〜 | を使ってタグ付けする。）
●表のヘッダとデータを関連付ける
【関連するJIS X 8341-3 個別要件】5.2.c
表形式のデータを表すためのテーブルのうち、ヘッダが2列以上あるなど複雑な形式になっているものについては、音声で読み上げるとデータとヘッダの関係が正確には把握しにくくなります。それをわかりやすくするためには、データとヘッダを関連づけるようなタグ付けをしておく必要があります。まず、thead, tbody, tfoot, colgroupなどのタグを使って、セルを適切に分類しグループ化してください。その上で、ヘッダに「scope="○○○"」を指定して対象となるデータの範囲を示したり、データに「headers="○○○"」を指定してヘッダを示すなどすると、データとヘッダの関係が明確にわかるようになります。
（図版 「scope="○○○"」の使用例。上の表のソースの一部を抜粋。）
■ページ9 迷わず使える入力フォーム ポイント7
●入力・選択項目に対するラベルの配置位置
【関連するJIS X 8341-3 個別要件】5.3.a、5.3.b
フォームで使われる入力・選択項目と、それに対して付けられるテキストのラベルの位置関係に注意してください。画面上では問題がないように見えていても、音声や点字などの環境では、どのラベルがどの項目に対応しているのかわからなくなる場合があります。特にテーブルを使って各項目やラベルの位置を揃えているような場合には、それらが読み上げられる順序に注意してください。一般的な音声ブラウザでは、テーブルの各セルはソースに書かれている順序で(左上のセルから右方向に1行ずつ)読み上げられます。その順序で読み上げられてもラベルと入力・選択項目の対応がわかる（交互に読み上げられる）ようになっていれば問題ありません。
（図版 テーブルレイアウトの悪い例。）
●入力・選択項目とラベルを関連付ける
【関連するJIS X 8341-3 個別要件】5.3.b
labelタグを使うと、フォームの入力・選択項目とラベルを内部的に関連付けることができます。それによって、音声ブラウザで入力・選択しようとしている項目のラベルを読み上げさせて確認したり、ラベル部分をクリックするだけでラジオボタンやチェックボックスのオン・オフを切り替えることなどが可能になります。labelタグを使う場合は、まず入力・選択項目側に「id="○○○"」の形式でIDを指定しておきます。そして、ラベルのテキスト(または入力・選択項目も含む全体)をで囲い、