画像の代わりとなるテキストが用意されていないため、画像が表示できない場合に、画像が表現している内容が伝わらない可能性があります。
具体的には、以下のような環境が想定されます。
画像には、表示することができない場合でも内容が伝わるように、内容を説明するテキストを準備して下さい。
これは<img>タグの属性として、alt="〜"の形式で画像の内容説明をする代替テキストを記述することで実現されます。
例えば以下の例では、家族の写真を画像として掲載している場合を想定しており、代替テキストとして「私の家族」というテキストを記述しています。
<img
src="family.jpg"
alt="私の家族"
>
ホームページの読み上げツールなどでは、このテキストが読み上げられます。
また一般的なブラウザで画像を表示させない設定にしている場合は、このテキストが表示されます。
なお画像の代わりとなるテキストは、なるべく簡潔で分かりやすい表現が望まれます。
ウェブヘルパーでは、全角で７５文字を超えるテキストがaltに記述されていた場合、点検結果として×を表示します。
もし長い説明が必要な場合には、<img>タグの属性として、longdesc="〜"の形式で、説明文へのURLを指定するようにしてください。
またテキストは、画像が持っている役割や機能を伝えるものにしてください。
画像のファイル名やファイルサイズをaltに記述することは、音声で読み上げられた場合に、画像の役割や機能が伝わらないことが予想されるので、使用しないようにしてください。
なお画像に意味がない場合（スペーサに用いる場合など）は、alt=" "のように半角のスペースを記述して下さい。
画像の代わりとなる詳しい説明文のリンクが正しく指定されていないいため、画像が表示できない場合に、
画像が表現している内容が伝わらない可能性があります。
具体的には、以下のような環境が想定されます。
画像には、表示することができない場合でも内容が伝わるように、内容を説明するテキストを準備して下さい。
これは<img>タグの属性として、alt="〜"
の形式で画像の内容説明をする代替テキストを記述することで実現されますが、
画像が複雑な内容を表している場合、
longdesc="〜"
の形で、詳細な内容を記載した別のページを準備することが望まれます。
点検対象のページではこのlongdescで指定されたページのURLが正しくないために、
ウェブヘルパーでは×を表示しています。
正しいURLをlongdescに指定して下さい。
「リセット」や「送信」などのボタンが画像で準備されているために、
画像が表示できない環境ではボタンの機能が伝わらない可能性があります。
画像が表示できない環境とは、以下のような環境が想定されます。
<input>
タグの中でボタンを画像で表示する場合は、
音声で読み上げられた場合などでもボタンの役割や機能が伝わるように、
ボタンの内容を説明する代替テキストを準備して下さい。
これは<input>タグの属性として、alt="〜"の形式で、
画像の内容を説明をするテキストを記述することで実現されます。
以下の例は送信ボタンとして画像を使用している場合を表しており、
代替テキストとして「送信」というテキストを記述しています。
<
input
type="image"
name="control"
src="send.gif"
alt="送信"
>
ホームページの読み上げツールなどでは、このテキストが読み上げられます。
また一般的なブラウザで画像を表示させない設定にしている場合は、このテキストが表示されます。
なおテキストは、画像が持っている役割や機能を伝えるものにしてください。
画像のファイル名やファイルサイズをaltに記述することは、音声で読み上げられた場合に、画像の役割や機能が
伝わらないことが予想されるので、使用しないようにしてください。
アプレットの代わりとなるテキストが用意されていないため、アプレットが使用できない環境で、
<applet>要素内に代わりの処理が記述されていない場合、情報が伝わらない可能性があります。
具体的には、以下のような環境が想定されます。
<applet>要素では、要素内に記載された<param>タグ以外の内容が、
アプレットが使用できない環境で表示されます。
しかし<applet>要素内に記述がない場合には、何も情報が伝わらなくなってしまいます。
<applet>タグでは、属性として、alt="〜"の形式で、
アプレットの内容を説明をする代替テキストを記述することができるので、
ウェブヘルパーでは<applet>要素内に記述がない場合、
このalt属性による代替テキストの記述が存在するかどうかを点検し、ない場合×と判定しています。
<applet>タグにおけるaltの記述例．
<applet
code="webhelper.class"
width="150"
height="150"
alt="Java appletによる商品カタログです。Javaが使用できるブラウザでご覧下さい。"
>
なおアプレットのファイル名やファイルサイズをaltに記述することは、音声で読み上げられた場合に、
情報が十分に伝わらないことが予想されるので、使用しないようにしてください。
オブジェクト（プログラムや画像）の代わりとなるテキストが用意されていないため、
オブジェクトが使用できない環境で、
情報が伝わらない可能性があります。
具体的には、以下のような環境が想定されます。
読み上げツールを使用している場合。
点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
テキストしか表示できないブラウザを使用している場合。
古いブラウザで<object>に対応していない場合。
一般的なブラウザで、オブジェクトを機能させない設定にしている場合。
<object>要素では、要素内に記載された内容が、オブジェクト（プログラムや画像）が使用できない環境で表示されます。
<object>要素内に、オブジェクトが使用できない環境で代わりに表示されるべきテキストや処理の内容を記述するようにして下さい。
音声の代わりとなるテキストが用意されていないため、音声を聞くことができない場合に、
情報が伝わらない可能性があります。
具体的には、以下のような環境が想定されます。
音声を用いる場合は、音声を聞くことができない場合にも内容が伝わるように、
内容を補足するような文書を別に記述するか、
音声の説明を記述した別のファイルへのリンクを設けてください。
例：
音声ファイルとして、「主要なニュース（news01.wav）」というWaV形式のファイルを参照している場合に、
内容を補足するために、音声ファイルの内容をテキストとして記述する。
<a href="news01.wav">
主要なニュース
</a>
リンク先の音声ファイル「news01.wav」の内容は、以下のとおりです。
本日の主要なニュースを．．．
例：
音声ファイルとして、「主要なニュース（news01.wav）」というWaV形式のファイルを参照している場合に、
内容を補足するために、別のファイルを準備してそれを参照する。
<a href="news01.wav">
主要なニュース（WaV形式）
</a>
リンク先の音声ファイル「news01.wav」の内容を、テキストで説明したファイルへのリンクです。
<a href="news01.html">
主要なニュース（テキスト形式）
</a>
動画や音声の代わりとなるテキストが用意されていないため、映像を見ることができない場合や音声を聞くことができない場合に、
内容が伝わらない可能性があります。
具体的には、以下のような環境が想定されます。
・視覚障害者や聴覚障害者など、音声のみ又は画像のみで情報を理解している場合。
・テキストしか表示できないブラウザを使用している場合。
・古いブラウザで、動画や音声を再生できない場合。
動画や音声を用いる場合は、映像を見ることができない場合や音声を聞くことができない場合にも内容が伝わるように、
映像や音声で表される内容の代わりとなる役割を果たすテキストをつけるか、
代わりとなる役割を果たすテキストを入れたファイルを用意し、そこへのリンクを設けてください。
テキストしか表示できないブラウザや、音声が再生できない古いブラウザでは、このテキストやリンク情報が表示されます。
※音声のついた動画の場合は、音声と動画の両方を説明するテキストをつけてください。
例：
野球中継のムービーの代わりとして、テキストの説明を設ける場合
<object
data="baseball.mpeg"
type="application/mpeg"
title="ホームランを打ったときの動画"
>
<p>
大歓声の中、ホームランを打った田中選手が、ガッツボーズをしながらホームベースを踏みました．．．．
</p>
</object>
例：
野球中継のムービーの代わりとして、説明へのリンクを設ける場合
<object
data="baseball.mpeg"
type="application/mpeg"
title="ホームランを打ったときの動画"
>
<p>
<a href="baseball.html">
ホームランを打ったときの説明
</a>
</p>
</object>
各フレームの内容やフレーム間の関連が正しく説明されていないため、
複数のフレームを同時に扱えないブラウザを使用している場合に、
どのフレームの内容を参照すると、どのような情報を得ることができるのか（
例えば、３つのフレームがそれぞれ「記事の一覧」「記事の本文」
「関連記事へのリンク」を表しているなど）が伝わらない可能性があります。
複数のフレームを同時に扱えない例：
・例えば視覚障害者などが、読み上げツール（スピーチ・シンセサイザ、スクリーン・リーダなど）を使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・古いブラウザでフレームに対応していない場合。
フレームには、音声で読み上げられた場合などでも内容が伝わるように、
各フレームの内容やフレーム間の関連について説明を記述した別のファイルへのリンクを設けてください。
読み上げツールでは、このリンク情報が読み上げられます。
説明のファイルへのリンクは、<frame>タグの中に「longdesc="〜"」
の形式で記述してください。
例：
フレームの説明をexplain.htmlに記述している場合
<frameset cols="20%,*,20%">
<frame src="menu.html" title="メインメニュー"
longdesc="explain.html#mainmenu"
>
<frame
src="default.html" title="コンテンツ表示"
longdesc="explain.html#contents">
<
frame src="ad.html" title="広告"
longdesc="explain.html#ad">
<noframes>
<body>
<a
href="noframes.html"
title="フレームを使わない人向けのページ">
メニューはこちらです。
</a>
</body>
</noframes>
</frameset>
フレームの説明をする役割のexplain.htmlの内容
#mainmenu
このフレームはこのサイトのメインメニューとなっています。
メニューの内容は更新記録、日記、趣味の釣り、リンク集となっています。
サイト全体の検索用フォームもあります。
#contents
このフレームではメインメニューより選んだ内容が表示されます。
#ad
このフレームには広告が表示されています。
※フレームを使用する際には、フレーム内に表示される内容がわかるように「title="〜"」
の形式を用いてフレームのタイトルを記述してください。
タイトルには、短く簡潔にフレームの内容を表す言葉を使用してください。
例：「コンテンツフレーム」「ヘッダフレーム」「ナビゲーションフレーム」
title=""（NULL）、title=" "（空白）は使用してはいけません。
※フレームを使用する際は、フレームに対応しないブラウザのことも考慮してください。
<frameset>〜</frameset>の中に
<noframes>〜</noframes>の形式を用いて、
フレームの内容に代わるテキストや、内容に代わるテキストを入れたファイルへのリンクを記述することができます。
フレームに対応しないブラウザを使用している場合は、
<noframes>〜</noframes>間に記述された内容が表示されます。
イメージマップで示されるリンクに、リンク先の内容を表現する代わりとなるテキストが用意されていないため、
イメージマップを見ることができない場合にリンク情報が伝わらない可能性があります。
イメージマップを見ることができない例：
・例えば視覚障害者などが、読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・テキストしか表示できないブラウザを使用している場合。
イメージマップで示されるリンクには、音声で読み上げられた場合などでも内容が伝わるように、
リンク部分の代わりとしてその情報を伝える役割を果たすテキストをつけてください。
読み上げツールでは、このテキストが読み上げられます。
<area>タグの中に「alt="〜"」の形式で、テキストを記述してください。
例：
図書館を紹介するイメージマップの場合
<img
src="welcome.gif"
alt="図書館を紹介するイメージマップ。"
usemap="#librarymap">
<map
name="librarymap">
<area
shape="rect"
coords="0,0,30,30"
href="new.html"
alt="新着情報">
<area
shape="rect"
coords="34,34,100,100"
href="media.html"
alt="視聴覚ルーム">
</map>
※イメージマップで示されるリンクの代わりとなるテキストは、なるべく簡潔に分かりやすい表現が望まれます
（目安としては、全角75文字程度まで）。
※テキストは、画像の内容を伝える役割を果たすものにしてください。読み手に内容が伝わらない「ファイル名」や
「ファイルサイズ」などは、使用しないようにしてください。
スクリプトの代わりとなるテキストが用意されていないため、
古いブラウザなどスクリプトに対応していない場合に、
内容が伝わらない可能性があります。
例えば、1分毎に画像が変わるスクリプトを使用している場合、
スクリプトに対応していないブラウザではその画像の内容が全く伝わりません。
スクリプトで表現される内容が伝わらない例：
・スクリプトに対応していない読み上げツールを使用している場合。
・スクリプトに対応していない点字ディスプレイなどを使用している場合。
・古いブラウザでスクリプトに対応していない場合。
・一般的なブラウザで、スクリプトを機能させない設定にしている場合。
スクリプトを用いる場合は、スクリプトを使用できない場合を考慮して、
<noscript>〜</noscript> 間に、
スクリプトで表現している内容を説明するテキストを記述するか、
代わりとなる役割を果たすファイルを用意し、そこへのリンクを設けてください。
<noscript>の記述例：
<script type="text/javascript">
<!--
document.write("現在時刻：");
document.write(Date());
//-->
</script>
<noscript>
<p>
このページでは、JavaScriptを使って時刻を表示しています。<br>
JavaScriptをご使用いただけない環境の方は、
<a href="no_script.html">
通常のページ
</a>
をご覧下さい。</p>
</noscript>
サーバサイドイメージマップのリンク情報に代わる、テキストで記述されたリンクが用意されていないため、
イメージマップを見ることができない場合にリンク情報が伝わらない可能性があります。
イメージマップを見ることができない例：
・例えば視覚障害者などが、読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・テキストしか表示できないブラウザを使用している場合。
・一般的なブラウザで、画像を表示させない設定にしている場合。
イメージマップには、音声で読み上げられた場合などでも内容が伝わるように、
イメージマップの代わりとしてその役割を果たすような内容のリンクテキストをつけてください。
読み上げツールでは、このリンク情報が読み上げられます。
一般的なブラウザで、画像を表示させない設定にしている場合は、このリンク情報が表示されます。
イメージマップとして使用している<img>タグの中に「alt="〜"」の形式で、
イメージマップの代わりとなるリンクの存在を記述してください。
例：
イメージマップの代わりとなるリンクテキストを[新着情報][視聴覚ルーム]として設けた場合
<a href="http://www.test.../cgi-bin/imagemap/test-map">
<img src="welcome.gif"
alt="図書館を紹介するイメージマップです。下に代替のリンクがあります。
" ismap>
</a>
<br>
[<a href="new.html">新着情報</a>]
[<a href="media.html">視聴覚ルーム</a>]
※イメージマップの代わりとなる、「alt="〜"」の形式で記述するテキストは、
なるべく簡潔で分かりやすい表現が望まれます（目安としては、全角75文字程度まで）。
ムービーやアニメーションなどのマルチメディア情報では、その展開に合わせて、
映像に対する音声説明や字幕が表示されていないと、映像を見ることができない場合や、
音声を聞くことができない場合に内容が伝わらない可能性があります。
マルチメディア情報には、映像のみ、音声のみで内容を理解する利用者にも内容が伝わるように、
映像に対する音声説明や、字幕を同期させるようにしてください。
これは、SMILやSaMIといったシンクロナイズド・コンテンツを作成する手段を用いることで、実現する
ことができます。
ムービーやアニメーションなどのマルチメディア情報では、その展開に合わせて、
映像に対する音声説明や音声に対するテキスト表示がされていないと、
映像を見ることができない場合や音声を聞くことができない場合に内容が伝わらない可能性があります。
1.4.1を参照。
イメージマップに、その代わりとなる、テキストで記述されたリンク（リンクテキスト）を用意しておくことにより、
イメージマップが使用できない場合でもリンク先へアクセスすることが可能となります。
イメージマップが使用できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・一般的なブラウザで、画像を表示させない設定にしている場合。
イメージマップに、音声で読み上げられた場合などでも内容が伝わるように、その代わりとなる役割を果たす、
テキストで記述されたリンク（リンクテキスト）を用意してください。
例：
図書館を紹介するためのイメージマップに、代わりとなるリンクテキストとして、
[新着情報][視聴覚ルーム]を用意している場合。
<img src="welcome.gif" alt="
図書館を紹介するイメージマップです。下に代替のリンクがあります。
" usemap="#librarymap">
<map
name="librarymap">
<area shape="rect"
coords="0,0,30,30" href="new.html"
alt="新着情報">
<area shape="rect"
coords="34,34,100,100" href="media.html"
alt="視聴覚ルーム">
</map>
<p>
[<a href="new.html">新着情報</a>]
[<a href="media.html">視聴覚ルーム</a>]
</p>
※リンクテキストは、簡潔でリンク先の内容が伝わる表現にしてください。
意味の違いが色の違いだけで区別されていると、
特定の色の識別が困難な人やモノクロのディスプレイを使用している人などには、
その意味が伝わらなくなります。
例えば強調したい文字を赤色にした場合、色の違いが識別できなければ、
その部分が強調されていることが分かりません。
色に意味の違いがある例：
・「新しく追加した項目」を赤字にして追加の意味を示している場合。
・「表示されている複数の項目から１つ選択」の際、選択可能な項目を緑色にして他と区別している場合。
・「強調」のために色をつける場合。
色の情報を利用できない例：
・色覚障害者の方など、特定の色を識別するのが困難な方の場合。
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・モノクロの画面を使用している場合。
意味の違いを区別するために色を用いる際には、色以外の方法でもその区別ができるようにしてください。
例えば、ある言葉を目立たせるために赤色の文字にする際には、同時に強調を示す<em>タグや
<strong>タグを用いるようにしてください。
例：
「総務省」を赤色の文字にして目立たせたい場合
平成13年1月6日より、郵政省は<strong>総務省</strong>に再編され、・・・
HTMLで上記のように記述し、以下のようなスタイルシートを定義しておくことで、
<strong>タグを用いて強調した内容が赤い文字で表示されるようになります。
strong { color: #ff0000; background-color: #ffffff }
※色の指定には、W3Cで非推奨とされている<font>タグは使用せず、
スタイルシートを用いてください。
※作成したウェブページを、モノクロの画面や、色が表示されない状態のブラウザで表示させてみると、
色の違いだけに頼らずに情報を伝えているかどうかを確かめることができます。
※太字やイタリック、文字のサイズ、色などの視覚的な情報により意味（強調など）を伝える場合には、
読み上げツールなどを使ってアクセスする場合を考慮し、文の前後関係などからもその意味（強調など）
が伝わるように工夫してください。
文字色と背景色の組み合わせが、識別しやすい組み合わせになっていない場合、
色の識別が困難な人やモノクロ画面を使用している人には読みにくい可能性があります。
識別が難しい組み合わせ例：
・テキスト色と背景色の色相が非常に近い場合。
・テキスト色と背景色に十分なコントラストがない場合。
・緑と赤の組み合わせ。
文字色と背景色は十分なコントラストのある組み合わせにし、識別しやすくしてください。
※特に緑と赤の組み合わせは識別することが難しい人がいますので、使用しないでください。
識別しやすい、テキスト色と背景色の組み合わせ例：
・背景色が白の場合
テキスト：黒、未訪問リンク：青、訪問済みリンク：紫
・背景色が黄の場合
テキスト：黒、未訪問リンク：青、訪問済みリンク：紫
・背景色がピンクの場合
テキスト：黒、未訪問リンク：青、訪問済みリンク：うす緑
各色のRGB値（16進値）は次の通りです。
・黒：00、00、00
・白：FF、FF、FF
・黄：FF、FF、00
・うす緑：00、80、00
・青：00、00、FF
・紫：80、00、80
・ピンク：FF、D6、D6
※作成したページを白黒のプリンタで印刷し、その印刷したものをコピー、
そのコピーをさらにコピーと２〜３回繰り返してから、
劣化した状態のものでもはっきり見えるかどうかを確認してみてください。
※利用者がスタイルシートやブラウザの設定などにより、独自に文字色（または背景色）を指定している場合、
その色との組み合わせにより文字の判別が難しくなることがあります。
スタイルシートを用いて文字色（または背景色）を指定する際には、
同時に背景色（または文字色）を指定するようにしてください。
マークアップ言語によって記述できる情報を適切なマークアップ言語を用いずに記述すると、
内容が正しく伝わらない可能性があります。
例えば、数式がMathMLを用いずに画像で表されている場合、画像を見ることができない場合に内容が伝わりません。
画像を見ることができない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・テキストしか表示できないブラウザを使用している場合。
・一般的なブラウザで、画像を表示させない設定にしている場合。
伝えたい情報を表すために適切なマークアップ言語がある場合は、そのマークアップ言語を使用するようにしてください。
例えば、数式を表すにはMathMLを使用してください。
文書型宣言（DOCTYPE）がつけられていれば、その文書に使用されているDTD（文書型定義）が分かります。
例えば、読み上げツール（スピーチシンセサイザ、スクリーン・リーダなど）の中には、文書型宣言（DOCTYPE）から、
使用されているDTD（文書型定義）を判断するものがあり、それに合わせて内容を読み上げます。
HTML4.01には以下のような3種類のDTDがあります。
Strict DTD
厳密に仕様に従いコンテンツを作成する場合に使用します。
非推奨のタグ、フレームは使用することができません。
Transitional DTD
非推奨のタグを使用することができます。フレームは使用することができません。
Frameset DTD
Transitional DTDとほぼ同じですが、フレーム関連のタグを使う場合に使用します。
文書の先頭に適切な文書型宣言をつけてください。
HTMLにはバージョンごとにDTD（文書型定義）というものがあります。
実際には例で示すような文書型宣言を文書の先頭に入れます。
例：
HTML4.01 Strict DTDを使用している場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML4.01 Transitional DTD を使用している場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML4.01 Frameset DTD を使用している場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
※DTD（文書型定義）の詳細については、W3Cのホームページを参照してください。
スタイルシートが使用されていることにより、スタイルシートに対応するブラウザを使用する利用者は、
スタイルシートを外したり異なるスタイルシートを指定して、
レイアウトや表示を自分にとって見やすいように変更することが可能になります。
※ただし、ウィンドウを分割するためのframeset要素を含む定義用のHTMLなどのように、レイアウトや体裁を
整えることを意図していないHTMLについては、本問題点の対象外となります。
スタイルシートによる、レイアウトや体裁の変更例：
・文字色と背景色のコントラストを識別しやすく調整する。
・文字の表示サイズが小さすぎる場合などに拡大して表示する。
・フォントを変更する。
・インデントなどの文字の書き出し位置を変更する。
・見出しの文字サイズや位置を変更する。
レイアウトや体裁（文字色や背景色など）をコントロールするには、スタイルシートを使用してください。
※別のファイルに記述したスタイルシート（外部スタイルシート）を複数用意しておき、利用者がスタイルシートを選択して、
自分にとってわかりやすいように表示や読み上げ内容を変更することがブラウザによっては可能となります。
※ただし、ウィンドウを分割するためのframeset要素を含む定義用のHTMLなどのように、レイアウトや体裁を
整えることを意図していないHTMLについては、本問題点の対象外となります。
※スタイルシートに対応していないブラウザがあるため、
スタイルシートを外しても内容が理解できるように構造的に記述するようにしてください。
文や引用部分を強調するなど、体裁の目的で見出しタグが使用されていると、
ブラウザによってはその部分を見出しと判断するため、内容が正しく伝わらない場合があります。
内容が正しく伝わらない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
見出しタグが正しく使用されていれば、ページの構成や概要についての情報を提供することができ、
内容の理解やページ内の移動に役立ちます。
また見出しが長すぎると、視覚的に確認できない利用者などには見出しと本文との区別がつかない場合があり、
混乱する可能性があります。
この問題はです。以下の修正方法に従って、必ず修正するようにしてください。
太字にしたり文字のサイズを変更するなど、体裁を整えるために見出しタグ
（<h1>〜<h6>）を使用しないでください。
また見出しはできるだけ簡潔にまとめ、内容を的確に表すようにしてください。
（全角50文字未満を目安に記述するようにしてください。）
そうすることにより、読み上げツールなど一度に多くの情報を得ることができないタイプのブラウザを使用している場合や、
見出しを拾い読みして必要な情報を見つけようとしている場合に、
見出しだけで本文のおおよその流れと内容を把握することができます。
※太字にしたり文字のサイズを変更するには、スタイルシートを使用してください。
例：
スタイルシートを用いて「テスト」を太字にする場合
<span class="bold">テスト</span>
HTMLで上記のように記述し、以下のようなスタイルシートを定義しておくことで、
<span class="bold">で指定した内容が太字で表示されるようになります。
span.bold { font-weight: bold }
※スタイルシートを使用する場合は、meta要素を用いてデフォルトのスタイルシート言語を指定するようにしてください。
引用タグが使用されていないため、視覚的に確認できない場合にその部分が引用であることが伝わらない可能性があります。
引用タグを用いずに引用を示している例：
・カッコ記号などを用いて視覚的に示している場合。
・文字の強調などによって視覚的に示している場合。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
引用タグを使用することにより、読み上げツールがその個所を引用である旨アナウンスして読み上げるなど、
様々なユーザエージェントでその部分が引用であることの判別が可能になり、それに合わせた表現することが
可能になります。
引用部分には、引用を示す<q>タグや<blockquote>タグを使用してください。
文中（インライン）で引用を示す場合は<q>タグを、
ブロックレベルで引用を示す場合は<blockquote>タグを使用してください。
また引用元のページ（URI）を「cite="〜"」の形式でつけることもできます。
例：
文中（インライン）で引用を示す場合
市が、昨年末市内の成人1000人を対象に行った調査によると、”老後もこの市で暮らしたいと回答した人の割合が、
70％にのぼる”ということです。
<p>
市が、昨年末市内の成人1000人を対象に行った調査によると、<q
cite="http://www.survey....">
老後もこの市で暮らしたいと回答した人の割合が、70％にのぼる</q>ということです。
</p>
例：
ブロックレベルで引用を示す場合
接戦の末の優勝から一夜明けて、監督は記者団のインタビューに答え、次のように今の心境を語りました。
”今回の試合では、最後まで本当に気が抜けませんでしたが、ファンの皆様の暖かいご声援のおかげで・・・”
<p>
接戦の末の優勝から一夜明けて、監督は記者団のインタビューに答え、次のように今の心境を語りました。
</p>
<blockquote cite="http://www.interview.....">
<p>
今回の試合では、最後まで本当に気が抜けませんでしたが、ファンの皆様の暖かいご声援のおかげで・・・
</p>
</blockquote>
※一般的なブラウザでは<blockquote>タグを適用した内容はインデントされて表示されますが、
引用でない内容にインデントさせる目的で<blockquote>タグを使用してはいけません。
引用タグが正しく使用されていないと、視覚的に確認できない場合などに、
内容が正しく伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
引用には、単語や短い文が本文中で引用されているものと、まとまった長さの文章が本文と切り離されて
（行を変えるなど）引用されているものがあります。
引用タグを正しく使用することにより、様々なユーザエージェントでその部分が引用であることを、
分かりやすく表現することが可能になります。
また、引用の長短を区別しておくことで、情報をより正確に伝えることができます。
文中（インライン）で引用を示す場合は<q>タグを、
ブロックレベルで引用を示す場合は<blockquote>タグを使用してください。
また引用元のページ（URI）を「cite="〜"」の形式でつけることもできます。
例：
文中（インライン）で引用を示す場合
市が、昨年末市内の成人1000人を対象に行った調査によると、
”老後もこの市で暮らしたいと回答した人の割合が、70％にのぼる”ということです。
<p>
市が、昨年末市内の成人1000人を対象に行った調査によると、
<q cite="http://www.survey....">
老後もこの市で暮らしたいと回答した人の割合が、70％にのぼる</q>ということです。
</p>
例：
ブロックレベルで引用を示す場合
接戦の末の優勝から一夜明けて、監督は記者団のインタビューに答え、次のように今の心境を語りました。
”今回の試合では、最後まで本当に気が抜けませんでしたが、ファンの皆様の暖かいご声援のおかげで・・・”
<p>
接戦の末の優勝から一夜明けて、監督は記者団のインタビューに答え、
次のように今の心境を語りました。
</p>
<blockquote cite="http://www.interview.....">
<p>
今回の試合では、最後まで本当に気が抜けませんでしたが、ファンの皆様の暖かいご声援のおかげで・・・
</p>
</blockquote>
※一般的なブラウザでは<blockquote>タグを適用した内容はインデントされて表示されますが、
引用でない内容にインデントさせる目的で<blockquote>タグを使用してはいけません。
引用を示す<blockquote>タグが正しく使用されていないため、
視覚的に確認できない場合に情報が正しく伝わらない可能性があります。
例えば、引用タグがインデントなどの体裁を整える目的で使用されている場合、
読み上げツールはそれがインデントであると識別できないため、
引用でない箇所が引用として読み上げられることになり、利用者を混乱させる可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
<blockquote>
タグは引用を示す場合にのみ使用してください。
インデントを行いたい場合には、スタイルシートを使用してください。
例：
「注意」をインデントする場合
<p class="margin">
注意 </p>
HTMLで上記のように記述し、以下のようなスタイルシートを定義しておくことで、
<p class="margin">
で指定した内容がインデントされて表示されるようになります。
p.margin { margin-left: 2em }
※スタイルシートを使用する場合は、meta要素を用いてデフォルトのスタイルシート言語を指定するようにしてください。
略語や、頭文字による省略表現に正式名称が用意されていない場合、その言葉に馴染みのない人や、
音声で情報を得ている人には、意味が伝わりにくい可能性があります。
音声で情報を得ている例：
・読み上げツールを使用している場合。
文章中で略語や、頭文字による省略表現を使う際には、
その言葉に馴染みがない場合や音声で読み上げられた場合でも意味が通じるように、
その言葉が最初に出てくるところで正式名称を示すようにしてください。
正式名称は、<abbr>タグや
<acronym>
タグに
「title="〜"」
の形式で記述することができます。
<abbr>
タグは、略語や、頭文字による省略表現で頭文字を一つずつ読むものに用います。
<acronym>
タグは、頭文字による省略表現で、頭文字の組み合わせを一つの単語として読むものに用います。
例：
WWW（World Wide Web）の場合
<abbr title="
World Wide Web
">
WWW
</abbr>
NaTO（North atlantic Treaty Organization）の場合
<acronym
title="North atlantic Treaty Organization
">
NaTO
</acronym>
また、正式名称を本文中に組み込むと、その意味が伝わりやすくなります。
例：
「FP」を文章中で説明する場合
各個人のライフプランに合わせた財務プランを立てる、
FP（ファイナンシャル・プランナー）の資格取得を目指す人が増えています。FPになるためには．．．
文書内で基本として使用される言語（日本語や英語など）が指定されていないため、
ブラウザによっては使用されている言語を識別することができず、
内容を正しく伝えることができない場合があります。
内容を正しく伝えることができない例：
・読み上げツールを使用している場合。
文書内で基本として使用される言語（日本語や英語など）を指定するには、
<html>タグに「lang="〜"」の形式で基本となる言語コードを記述してください。
複数の言語に対応している読み上げツールは、使用されている言語に合わせて読み上げます。
また、使っている言語を明示しておくことは、サーチエンジンがキーワード検索をするときなどにも役に立ちます。
※lang属性の値にはISO639の言語コードを使用してください。
例：
日本語の場合
<html lang="ja">
ISO639の言語コード例
ja（日本語）、en（英語）、en-US（アメリカ英語）、fr（フランス語）、de（ドイツ語）、zh（中国語）
テーブルは本来、データを表形式であらわすために使用するものです。
読み上げツール（スピーチ・シンセサイザ、スクリーン・リーダなど）の中には、
テーブルが持っているセルについての情報を識別できるものがあります。
このようなブラウザでは、正しいタグ付けが行われていれば見出しと各データが関連づけて読み上げられるため、表の情報を正しく伝えることができます。
テーブルを、ページレイアウトなど本来の目的以外のために使用することは避けるようにしてください。
ブラウザによっては正しい情報を伝えられなくなります。
データテーブル例：
<table border="" summary=" この表は商品と金額の関係を示しています。"> <caption>商品に対する金額</caption> <tr> <th>商品</th> <th>金額</th> </tr> <tr> <td>鉛筆</td> <td>100円</td> </tr> <tr> <td>消しゴム</td> <td>50円</td> </tr> </table>
レイアウトテーブル例：
<table summary="ナビゲーション・バー"> <tr> <td><u>新着情報</u></td> <td></td> <td><u>掲示板</u></td> </tr> <tr> <td></td> <td><u>アクアテラリュウム</u></td> <td></td> </tr> <tr> <td><u>チャット</u></td> <td></td> <td><u>リンク集</u></td> </tr> </table>
表に見出しが用意されていないため、表の内容が視覚的に確認できない場合に、
内容が正しく伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
読み上げツールの中には、表の各セルのデータを読み上げる際に、
まずそのセルに関連する見出しのセルを読んでからデータのセルを読むものがあります。
このような、表の見出しのセルとデータのセルを識別するブラウザでは、
表の行または列に対して見出しのセルが用意されていないと、表の内容が正しく伝わらない場合があります。
テーブルを用いて表を作成する場合は、行または列に必ず見出しをつけてください。
見出しのセルには
<th>
タグを、データのセルには
<td>
タグを使用してください。
例：
商品と金額を表で示す場合
<table border="1"
summary="
この表は商品と金額の関係を示しています。
">
<caption>
商品に対する金額
</caption>
<tr>
<th>
商品</th>
<th>
金額</th>
</tr>
<tr>
<td>
鉛筆</td>
<td>
100円</td>
</tr>
<tr>
<td>
消しゴム</td>
<td>
50円</td>
</tr>
</table>
1行目に見出しを指定することにより、見出しタグを識別できる読み上げツールは、この表を次のように読み上げます。
商品 鉛筆、金額 100円、 商品 消しゴム、金額 50円
上記例の実際の表示は以下のようになります。
| 商品 | 金額 |
|---|---|
| 鉛筆 | 100円 |
| 消しゴム | 50円 |
表に、見出しタグが正しく使用されていないため、表の内容を視覚的に確認できない場合に、
内容が正しく伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
読み上げツールの中には、表の各セルのデータを読み上げる際に、
まずそのセルに関連する見出しのセルを読んでからデータのセルを読むものがあります。
このように、表の見出しのセルとデータのセルを識別するブラウザでは、表の行または列に対して
見出しのセルが設定されていれば、見出しが複雑な場合でも表の内容を正しく伝えることができます。
複雑なデータ表に対しても、scope、headers、axis属性を使ってラベルをつけることで、
データと見出しに関連を持たせることができます。
こうすることで、読み上げツール等のユーザエージェントは、
テーブルからデータを種類別に取り出すことが可能になります。
<TaBLE border="1"
summary="社員の氏名、年齢、住所を記録した表です。">
<CaPTION>社員名簿</CaPTION>
<TR>
<TH id="header1">名前</TH>
<TH id="header2">年齢</TH>
<TH id="header3">所属部署</TH>
<TR>
<TD headers="header1">鈴木</TD>
<TD headers="header2">28</TD>
<TD headers="header3">開発部</TD>
<TR>
<TD headers="header1">佐藤</TD>
<TD headers="header2">30</TD>
<TD headers="header3">営業部</TD>
</TaBLE>
| 名前 | 年齢 | 所属部署 |
|---|---|---|
| 鈴木 | 28歳 | 開発部 |
| 佐藤 | 30歳 | 営業部 |
<TaBLE border="1"
summary="社員の氏名、年齢、住所を記録した表です。">
<CaPTION>社員名簿</CaPTION>
<TR>
<TH scope="col">名前</TH>
<TH scope="col">年齢</TH>
<TH scope="col">所属部署</TH>
<TR>
<TD>鈴木</TD>
<TD>28</TD>
<TD>開発部</TD>
<TR>
<TD>佐藤</TD>
<TD>30</TD>
<TD>営業部</TD>
</TaBLE>
| 名前 | 年齢 | 所属部署 |
|---|---|---|
| 鈴木 | 28歳 | 開発部 |
| 佐藤 | 30歳 | 営業部 |
<TaBLE border="1"
summary="社員の氏名、年齢、住所を記録した表です。">
<CaPTION>社員名簿</CaPTION>
<TR>
<TH scope="row">名前</TH>
<TD>鈴木</TD>
<TD>佐藤</TD>
</TR>
<TR>
<TH scope="row">年齢</TH>
<TD>28歳</TD>
<TD>30歳</TD>
</TR>
<TR>
<TH scope="col">所属部署</TH>
<TD>開発部</TD>
<TD>営業部</TD>
</TR>
</TaBLE>
| 名前 | 鈴木 | 佐藤 |
|---|---|---|
| 年齢 | 28歳 | 30歳 |
| 所属部署 | 開発部 | 営業部 |
<TaBLE border="1"
summary="社員の氏名、年齢、住所を記録した表です。">
<CaPTION>社員名簿</CaPTION>
<TR>
<TH></TH>
<TH id="header1" axis="list">名前</TH>
<TH id="header2" axis="list">年齢</TH>
<TH id="header3" axis="list">所属部署</TH>
</TR>
<TR>
<TH id="header4" axis="place">説明会Ａ対応日</TH>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD id="header5" axis="date">2002/01/22</TH>
<TD headers="header4 header5 header1">鈴木</TD>
<TD headers="header4 header5 header2">28歳</TD>
<TD headers="header4 header5 header3">開発部</TD>
</TR>
<TR>
<TD id="header6" axis="date">2002/02/04</TH>
<TD headers="header4 header6 header1">佐藤</TD>
<TD headers="header4 header6 header2">30歳</TD>
<TD headers="header4 header6 header2">営業部</TD>
</TR>
</TaBLE>
| 名前 | 年齢 | 所属部署 | |
|---|---|---|---|
| 説明会Ａ対応日 | |||
| 2002/01/22 | 鈴木 | 28歳 | 開発部 |
| 2002/02/04 | 佐藤 | 30歳 | 営業部 |
axisは、ヘッダセルに対して、分類名を付けるのに使用します。
体裁のために表形式が用いられていると、視覚的に確認できない場合や、
テーブルに対応していないブラウザを使用している場合に内容が正しく伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
※テーブルは本来、データを表形式であらわすために使用するものです。読み上げツールの中には、
テーブルが持っているセルについての情報を識別できるものがあります。
テーブルをページレイアウトなど本来の目的以外のために使用すると、このようなブラウザでは
正しく情報を伝えることができません。
本来の目的以外ではできるだけ使用しないでください。
レイアウトの目的でテーブルを使用する場合には、テーブル関連のタグをなくした状態で
（日本語、英語で横書きの場合は、上から下、左から右に）ページを読み上げても、
内容が伝わるように各セルを配置してください。
※正しく伝わらない場合には、同じ内容をレイアウトテーブルを使用せずに表現したものを用意してください。
※レイアウトや体裁を整えるためには、スタイルシートを使用してください。
※スタイルシートの詳細については、関連リンクを参照してください。
テキストの体裁を整える目的で、テーブルの見出しを指定するタグを使用すると、
視覚的に確認できない場合に内容が正しく伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
テーブルは本来、データを表形式であらわすために使用するものです。読み上げツールの中には、
テーブルが持っているセルについての情報を識別できるものがあります。
テーブルをページレイアウトなど本来の目的以外のために使用すると、
このようなブラウザでは正しく情報を伝えることができません。できるだけ本来の目的以外では使用しないでください。
テーブルで見出しを指定するために使用する
<th>
タグを、センタリングや太字での表示など、体裁を整える目的で使用しないでください。
※レイアウトや体裁を整えるためには、スタイルシートを使用してください。
複雑な構造の表は、表の内容が視覚的に確認できない場合などに、内容が正しく伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
表に対する要約をつけるようにすることで、視覚的な表現ができない場合（読み上げツールや点字ディスプレイなど）
でも内容を正しく伝えることができます。
複雑な構造の表には、音声で読み上げられた場合などでも内容が伝わるように、
表の構造や意味などをあらわす要約をつけるようにしてください。
<table>
タグに「summary="〜"」の形式で要約を記述してください。
読み上げツールでは、この要約が読み上げられます。
例：
要約として「この表は商品と金額の関係を示しています。」をつける場合
<table border="1"summary="
この表は商品と金額の関係を示しています。
">
<caption>
商品に対する金額 </caption>
<tr>
<th>
商品
</th>
<th>
金額</th>
</tr>
<tr>
<td>
鉛筆
</td>
<td>
100円
</td>
</tr>
<tr>
<td>
消しゴム
</td>
<td>
50円
</td>
</tr>
</table>
表に表題が用意されていないと、表の内容が視覚的に確認できない場合などに、
内容が正しく伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
表には表題をつけるようにすることで、視覚的な表現ができない場合（読み上げツールや点字ディスプレイなど）でも内容を正しく伝えることができます。
表には、音声で読み上げられた場合などでも内容が伝わるように、表題をつけるようにしてください。
<table>タグに<caption>
タグを使用して表題をつけてください。
読み上げツールでは、この表題が読み上げられます。
例：
表題として「商品に対する金額」をつける場合
<table border="1"
summary="
この表は商品と金額の関係を示しています。
">
<caption>
商品に対する金額 </caption>
<tr>
<th>
商品
</th>
<th>
金額
</th>
</tr>
<tr>
<td>
鉛筆
</td>
<td>
100円 </td>
</tr>
<tr>
<td>
消しゴム
</td>
<td>
50円
</td>
</tr>
</table>
※<caption>タグを用いない場合には、
<table>タグの中に「title="〜"」
の形式で表の内容を説明する短い言葉を入れてください。
読み上げツール（スピーチ・シンセサイザ、スクリーン・リーダなど）の中には、表の各セルのデータを読み上げる際に、
まずそのセルに関連する見出しのセルを読んでからデータのセルを読むものがあります。
見出しが長い場合、セル毎にこの長い見出しを聞くことになるため、利用者が混乱する可能性があります。
長い見出しに省略語を用意することで、長い見出しを繰り返して聞く必要がなくなります。
見出しが長い場合は、読み上げツールなどが繰り返して読み上げた場合でも利用者が混乱しないよう、
見出しに対する省略語を用意してください。
見出しの省略語は、「abbr="〜"」の形式で記述することができます。
読み上げツールでは、見出しの代わりにこの省略語が読み上げられ、長い見出しを繰り返し聞く必要が
なくなります。
※省略語は全角7文字以内を目安に記述してください。
例：
「各上院議員が飲んだコーヒーの量」を示す表について、
見出しの「コーヒーの種類」の省略語として「種類」を指定する場合
<table border="1" summary="
この表は・・・">
<caption>
各上院議員が飲んだコーヒーの量(単位：杯)
</caption>
<tr>
<th scope="col">
名前
</th>
<th scope="col">
杯
</th>
<th scope="col" abbr="
種類
">
コーヒーの種類
</th>
<th scope="col">
砂糖
</th>
</tr>
<tr>
<td>T. Sexton</td>
<td>
10
</td>
<td>
エスプレッソ
</td>
<td>
なし
</td>
</tr>
<tr>
<td>J. Dinnen</td>
<td>
5
</td>
<td>
カフェイン抜き
</td>
<td>
入れる
</td>
</tr>
</table>
出典・参考：ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 HTML技術書 日本語訳
スタイルシートが使用されている場合、スタイルシートに対応していないブラウザや、
スタイルシートを機能させない設定にしているブラウザでは、スタイルシートで表現される内容が
伝わらない可能性があります。
スタイルシートで表される内容が伝わらない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・テキストしか表示できないブラウザを使用している場合。
・一般的なブラウザで、スタイルシートを機能させない設定にしている場合。
※新しい技術には、既存の技術的問題を解決するものもありますが、新しい技術を使用する場合には、
新しい技術に対応していない古いブラウザや、その機能をオフにしたブラウザでも同じ内容を伝える方法を
用意する必要があります。
スタイルシートがなくても内容が伝わるようにするためには、構造がしっかりとした記述を行ってくだ
さい。
以下の例では、内容に対して構造的なタグ（定義リスト）を使用することで、
スタイルシートがなくても内容が伝わるようになっています。
例：
製品として、「電話機」「コンピュータ」「MP3プレーヤー」をリスト表示し、所在地として、
「札幌」「東京」をリスト表示した場合
<head>
<
styletype="text/css">
.menu1
{ position: absolute; top: 3em; left: 0em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.menu2 { position: absolute; top: 3em; left: 10em;
margin: 0px;
font-family: sans-serif;
font-size: 120%;
color: red;
background-color: white }
.item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
.item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
.item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
.item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
.item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
#box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div
class="box">
<dl>
<dt
class="menu1">
製品
</dt>
<dd
class="item1">
電話機
</dd>
<dd
class="item2">
コンピュータ
</dd>
<dd
class="item3">
MP3プレーヤー
</dd>
<dt
class="menu2">
所在地
</dt>
<dd class="item4">
札幌 </dd>
<dd class="item5">
東京
</dd>
</dl>
</div>
</body>
以上のように記述した場合、スタイルシートの機能をオフにしても、定義リスト
（<dl>、<dt>、<dd>)
により構造的に表すことができます。
出典・参考：ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 CSS 技術書 日本語訳
フレーム内で正しいソースが使用されていないため、フレームの内容が更新される際に、フレームの内容と、
その代わりとなるテキストの内容が一致しなくなる可能性があります。
フレームの内容を視覚的に確認できない場合を考慮して、フレームにはその内容の代わりとなるテキストをつけますが、
フレームの内容が更新される際に、その内容の代わりとなるテキストも同時に更新されなければ、正しく内容が伝わりません。
フレームの内容を視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
フレームの内容を入れ替える可能性がある場合には、フレームの内容とその代わりとなる役割を果たす
テキストが常に一致するようにしてください。
フレームの内容を示すtitle属性値として指定するテキストが、
最初に表示させる内容のみを考慮している場合、
フレームの内容が入れ替わる際に内容とtitle属性値が一致しなくなる場合があるため、注意が必要です。
フレームのソースとして、テキストを含むことのできる以下のような拡張子を持つファイルを指定することにより、
フレームの内容が入れ替わる際にはこのファイルに含まれる情報が反映され、フレームで表される内容と、
内容の代わりとなる役割を果たすテキストが常に一致します。
「.htm」「.html」「.shtm」「.shtml」「.cfm」「.cfml」「.asp」「.cgi」「.pl」「.smil」
例
：
フレームの中のファイルをリンゴの画像が入っているものからオレンジの画像が入っているものに変更する場合
<html lang="ja">
<head>
<title>
正しいframeset文書 </title>
</head>
<frameset
cols="100%"
title="
変化する
frameset">
<frame name="goodframe" src="apples.html"
title="
果物紹介 ">
</frameset>
<noframes>
<body>
<p>
<a href="noframes.html">
フレームを使わないページ</a>
</p>
</body>
</noframes>
</html>
<
!-- apples.html の内容 --
>
<img src="apples.gif" alt="
リンゴ ">
goodframeのファイル「apple.html」を以下の「oranges.html」に変更した場合、htmlファイルの変更 にともない、「リンゴ画像」が「オレンジ画像」に変わり、画像の代わりとなる役割を果たすテキスト も「リンゴ」から「オレンジ」に変わります。
<
!-- oganges.html の内容 --
>
<img src="oranges.gif" alt="
オレンジ">
※フレームを用いる際には、フレームに対応していないブラウザを使用している場合でもその内容が伝 わるように、同じ内容をフレームを用いずに表現したものを用意してください。
<frameset>〜</frameset>
の中に <noframes>〜</noframes>
の形式を用いて、フレームの内容に代わるテキストや、内容に代わるテキストを入れたファイルへのリ ンクを記述することができます。
フレームに対応しないブラウザを使用している場合は、
<noframes>〜</noframes>
間に記述された内容が表示されます。
出典・参考：ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 HTML技術書 日本語訳
スクリプトやアプレット、その他のプログラムを用いて作成された内容に対しては、
これらのプログラムで表現される内容が視覚的に確認できない場合や、これらの
プログラムなどに対応しないブラウザを使用している場合でもプログラムで表現される内容が伝わるように、
内容の代わりとなる役割を果たすテキストなどを用意します。
スクリプトやアプレット、その他のプログラムを用いて作成された内容が更新（変更）される際には、
代わりとして用意された内容も同時に更新（変更）されなければ内容が正しく伝わりません。
スクリプトやアプレット、その他のプログラムで表現される内容が伝わらない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・スクリプトやアプレット、その他のプログラムに対応しないブラウザを使用している場合。
・一般的なブラウザで、スクリプトやアプレット、その他のプログラムを機能させない設定にしている場合。
スクリプトやアプレット、その他のプログラムを用いる際には、内容の更新に合わせて、
その代わりとして用意した内容も更新するようにしてください。
例：
野球の試合結果を示すスクリプトの内容が、毎日更新される場合
<script type="text/tcl">
．．．
野球の試合結果を表示するTcl script．．．
</script>
<noscript>
<h1>
8/19の試合結果
</h1>
．．．
</noscript>
スクリプトを用いて表示される 野球の試合結果が毎日更新される場合、
そのスクリプトが示す内容の代わりとして用意したものも毎日更新するようにしてください。
例えば、スクリプトで表示される試合結果を8/19から8/20のものに変更する際には、
<noscript>〜</noscript>
間で示される、代わりとなる役割を果たすテキストも「8/20の試合結果」を示すように変更します。
スクリプトやアプレット、その他のプログラムで表現される内容に対して、
その代わりとなるテキストや、代わりとなるテキストを記述したファイルへのリンクが用意されていないため、
スクリプトやアプレット、その他のプログラムを使用できない場合に内容が伝わりません。
スクリプトやアプレット、その他のプログラムで表現される内容が伝わらない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・スクリプトやアプレット、その他のプログラムに対応しないブラウザを使用している場合。
・一般的なブラウザで、スクリプトやアプレット、その他のプログラムを機能させない設定にしている場合。
スクリプトやアプレット、その他のプログラムを用いる際には、これらのプログラムに対応しないブラウザを使用している場合や、
これらのプログラムを機能させない設定にしている場合でもプログラムを用いて表現される内容が伝わるように、
内容の代わりとなる役割を果たすテキストを用意するか、
代わりとなる役割を果たすテキストが入ったファイルへのリンクを設けてください。
読み上げツールでは、このテキストが読み上げられます。
古いブラウザで、スクリプトやアプレット、その他のプログラムに対応していない場合は、このテキストが表示されます。
例：
朝顔の成長を表すJavaアプレットの代わりとして、アプレットの代わりとなる内容をテキストで記述する場合
<object classid="java:morning.class"
width="500" height="500" title="
朝顔の成長
">
<p>
朝顔の成長は気温と．．．．
</p>
</object>
例：
朝顔の成長を表すJavaアプレットの代わりとして、アプレットの代わりとなる内容をテキストで記述したファイルを用意し、
そのファイルへのリンクを設ける場合
<object
classid="java:morning.class" width="500"
height="500" title="
朝顔の成長
">
<p>
<a
href="morning.html">
朝顔の成長について
</a>
</p>
</object>
例
：
昼顔の成長を表すJavaアプレットの代わりとして、アプレットの代わりとなる内容をテキストで記述する場合
<applet code="convolvulus.class"
width="500" height="500" alt="
Javaアプレット：昼顔の成長
">
<p>
昼顔の成長は気温と．．．．
</p>
</applet>
例：
昼顔の成長を表すJavaアプレットの代わりとして、
アプレットの代わりとなる内容をテキストで記述したファイルを用意し、そのファイルへのリンクを設ける場合
<applet
code="convolvulus.class" width="500"
height="500" alt="
Javaアプレット：昼顔の成長
">
<p>
<a
href="convolvulus.html">
昼顔の成長について
</a>
</p>
</applet>
※補足的な情報（タイトルやファイル名、ファイルサイズなど）は、
「title="〜"」の形式で記述することができます。
フレームが使用されていると、複数のフレームを同時に確認することができない場合に内容が伝わらなかったり、
伝わりにくいことがあります。
フレームで表現される内容が伝わらない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・フレームに対応していない古いブラウザを使用している場合。
※フレームを使用する際には、フレームに対応していないブラウザを使用している場合でもその内容が伝わるように、
同じ内容をフレームを使用せずに表現したものを用意する必要があります。
フレームを使用する際には、フレームに対応しないブラウザを使用する利用者にもフレームで表現される内容が伝わるように、
フレームで表現される内容の代わりとなる役割を果たすテキストや、
代わりとなる役割を果たすテキストを入れたファイルへのリンクを用意します。
<frameset>〜</frameset>
の中に<noframes>〜</noframes>の形式を用いて、フレームの内容に代わるテキストや、
内容に代わるテキストを入れたファイルへのリンクを記述してください。
フレームに対応しないブラウザを使用している場合は、
<noframes>〜</noframes>
間に記述された内容が表示されます。
例：
フレームの内容と同じ内容を持つ別ページ（noframes.html）を用意している場合
<frameset cols="20%,*,20%">
<frame src="menu.html" title="
メインメニュー"
longdesc="explain.html#mainmenu">
<frame
src="default.html" title="
コンテンツ表示"
longdesc="explain.html#contents">
<frame
src="ad.html" title="
サブメニュー"
longdesc="explain.html#ad">
<noframes>
<body>
<p>
<a href="noframes.html"
title="
フレームを使わない人向けのページ
">
メニューはこちらです。
</a>
</p>
</body>
</noframes>
</frameset>
光過敏性てんかんのある人は、画面の明滅や、明暗の急激な切り替わりをきっかけに発作を起こす場合があります。
※現在のブラウザでは、利用者側で画面の明滅を止めるなどの調整ができないため、制作者側での配慮が必要となります。
画面の明滅は、てんかんの発作を引き起こす原因になるため、ブラウザの設定などにより、
画面の明滅を止めることができるようになるまでは、明滅（フリッカー）の機能は使用しないでください。
特に以下のものは使用してはいけません。
・１秒間に4〜59回(Hz)の点滅
・ストロボ光のような、暗いものから明るいものへの急な切り替わり
画面上に文字が点滅するなどの動きがあると、認識や視覚に障害がある場合に、うまくその動きに対応できない可能性があります。
例えば点滅する文字は、人により素早く読み取ることが困難な場合があります。
また、画面上に点滅する文字があると、人により気が散って集中できなくなる場合があります。
※現在のブラウザでは、利用者側で画面の点滅を止めるなどの調整ができないため、制作者側での配慮が必要となります。
画面上の動きにうまく対応できない利用者を考慮して、画面上の動きは、
利用者が必要に応じて一時的にまたは完全に停止できるようにする必要があります。
ブラウザの設定などにより、画面の点滅を止めることができるようになるまでは、
<blink>タグなどを用いて画面を点滅させないでください。
※その部分を強調したい場合は、<strong>タグや<em>
タグを使用するようにしてください。
例：
「速報」を強調する場合
<strong>
速報
</strong>
画面上に、文字がスクロールするなどの動きがあると、認識や視覚に障害がある場合に、
うまくその動きに対応できない可能性があります。
例えばスクロールする文字は、人により素早く読み取ることが困難な場合があります。
また、画面上に動く文字があると、人により気が散って集中できなくなる場合があります。
読み上げツール（スピーチ・シンセサイザ、スクリーン・リーダなど）は、
動いている文字を読み上げることができない場合があります。
※現在のブラウザでは、利用者側で画面上の動きを止めるなどの調整ができないため、
制作者側での配慮が必要となります。
画面上の動きにうまく対応できない利用者を考慮して、画面上の動きは、
利用者が必要に応じて一時的にまたは完全に停止できるようにする必要があります。
ブラウザの設定などにより、文字の動きを止めることができるようになるまでは、
<marquee>
タグなどを用いて文字を動かさないでください。
※その部分を強調したい場合は、
<strong>タグや<em>タグを使用するようにしてください。
例：
「速報」を強調する場合
<strong>
速報
</strong>
画面上に動きがあると、認識や視覚に障害がある場合に、うまくその動きに対応できない可能性があります。
例えば画面上に動くものがあると、人により素早く視線を動かすことが困難な場合があります。
また、人により気が散って集中できなくなる場合があります。
※現在のブラウザでは、利用者側で画面上の動きを止めるなどの調整ができないため、制作者側での配慮が必要となります。
スクリプトやアプレット、その他のプログラムを用いて動くコンテンツを作成する場合は、利用者が必要に応じて、
その動きを止める操作ができるようにしてください。
利用者が必要に応じて、動くコンテンツを止めることができない場合は、スクリプトやアプレット、
その他のプログラムを用いて、画面上にあるコンテンツを動かさないでください。
画面に動きをもたせたい場合は、スタイルシートを使用するようにしてください。
スタイルシートを用いると、利用者がスタイルシートの機能をオフにすることにより、
画面の動きを止めることができます。
※スタイルシートの詳細については、関連リンクを参照してください。
ページが自動的に更新すると、利用者が混乱する場合があります。
例えば、閲覧しているページが自動的に更新する場合、
利用者が閲覧を終える前にそのページが更新される可能性があります。
また、視覚的に確認できない場合には、内容の更新が伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
ブラウザの設定などにより、ページを自動的に更新させないようにできるまでは、
ページを自動的に更新させないでください。
以下のようにメタタグを用いて、ページを自動的に更新させないでください。
<meta http-equiv="refresh"
content="5">
ページを更新させる場合は、自動的に更新させるのではなく、
リンクを設けるなど、利用者が必要に応じて操作できるようにしてください。
ページを自動的に他のページへ移動させると、利用者が混乱する場合があります。
例えば、閲覧しているページが自動的に他のページへ移動する場合、
利用者がそのページの閲覧を終える前に移動してしまう可能性があります。
また、視覚的に確認できない場合には、他のページへの移動が伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
ブラウザの設定などにより、ページを自動的に移動させないようにできるまでは、
ページを自動的に移動させないでください。
以下のようにメタタグを用いて、ページを自動的に移動させないでください。
<meta http-equiv="refresh" content="5; http://www....">
ページを移動させる場合は、自動的に移動させるのではなく、
リンクを設けるなど、利用者が必要に応じて操作できるようにしてください。
スクリプトやアプレット、その他のプログラムで作成されたコンテンツの操作手段が限定されていると、
その操作手段を用いることができない場合に、これらプログラムで作成されたコンテンツが操作できません。
例えば、アプレットで作られたコンテンツ内の特定の場所をクリックしないと次のページへ移動できない場合、
マウスを使用していない人はその場所をクリックすることができず、次のページへ移動することができません。
操作手段の例：
・マウス
・キーボード
・音声
またスクリプトやアプレット、その他のプログラムを使用できない場合は、これらプログラム類で作成された内容が伝わりません。
例えば、アプレットで商品紹介を行っている場合、
アプレットに対応していないブラウザを使用している人には、その紹介内容は伝わりません。
スクリプトやアプレット、その他のプログラムで作成された内容が伝わらない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・一般的なブラウザで、プログラム類を機能させない設定にしている場合。
※スクリプトやアプレット、その他のプログラムで作成された内容が重要であり、
同じ役割を果たす内容が他の部分で表現されていない場合は優先度１、
作成された内容が使用できなくても内容の理解に困らない場合や、
同じ役割を果たす内容が他の部分でも表現されている場合は優先度２となります。
スクリプトやアプレット、その他のプログラムで作成したコンテンツには、
操作手段が限定されている様々な利用者（例えばキーボードしか利用できない利用者）のことを考慮して、
可能な限り多くの操作手段を用意してください。
例えば、マウスをクリックすると実行するプログラムの場合は、マウスだけではなく、
キーボードなどでも実行できるようにしてください。
※キーボードによる操作に対応させると、音声による操作も可能になる場合があります。
Javascriptを実行させるためのイベントとしてonmouseoverやonclickといった、
操作手段がマウスに限定されるものを使用する場合は、
キーボードによる操作を可能にするonkeydownなども併用するようにしてください。
操作手段がマウスに限定されるイベント例：
・onclick
・ondblclick
・onmousedown
・onmouseup
・onmouseover
・onmouseout
・onmouseover
また、スクリプトやアプレット、その他のプログラムで作成されたコンテンツには、
これらプログラム類を使用できない場合でも内容が伝わるように、
コンテンツの代わりとなる役割を果たすもの（テキストによる説明など）を用意してください。
サーバ側のイメージマップ（サーバサイドイメージマップ）は、
各リンク領域に対応するリンク先の情報がサーバ側にありマウスで操作する必要があるため、
マウス以外の手段で操作している場合に利用することができません。
マウス以外による操作の例：
・キーボードによる操作
・音声による操作
またイメージマップで表現された内容は、視覚的に確認できない場合に、
意味が伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
イメージマップを使用する際は、クライアント側のイメージマップを使用してください。
クライアント側のイメージマップを使用すると、
リンク情報に代わる役割を果たすテキストをつけることができます。
これにより、マウス以外の操作が可能となり、また、視覚的に確認できない場合にも、
イメージマップの内容を伝えることができます。
例：
イメージマップの代わりとなるリンクを[新着情報][視聴覚ルーム]として設けた場合
<img src="welcome.gif" alt="
図書館を紹介するイメージマップ。下に代替のリンクがあります。
" usemap="#librarymap">
<map name="librarymap">
<area shape="rect" coords="0,0,30,30" href="new.html" alt="
新着情報 ">
<area shape="rect" coords="34,34,100,100" href="media.html" alt="
視聴覚ルーム ">
</map>
<p>
[<a href="new.html">
新着情報
</a>]
[<a href="media.html">
視聴覚ルーム </a>]
</p>
コンテンツの操作手段が限定されている場合、使用している操作手段によっては、
そのコンテンツを利用できない可能性があります。
例えば、ムービーを再生するためにマウスをクリックする必要がある場合、
マウスを使用していない人にはムービーを再生することができません。
またリンク先への移動にマウスが必要なイメージマップ（特にサーバサイドイメージマップ）は、
マウスがなければリンク先へ移動することができません。
操作手段の例：
・マウス
・キーボード
・音声
操作手段が限定されている様々な利用者（例えばキーボードしか利用できない利用者）
のことを考慮して、コンテンツの操作手段は可能な限り多く用意してください。
マウスによる操作以外にキーボードによる操作にも対応させることで、
複数の手段による操作が可能となります。
※キーボードによる操作に対応させると、音声による操作も可能になる場合があります。
Javascriptを実行させるためのイベントとしてonmouseoverやonclickといった、
操作手段がマウスに限定されるものを使用する場合は、
キーボードによる操作を可能にするonkeydownなども併用するようにしてください。
操作手段がマウスに限定されるイベント例：
・onclick
・ondblclick
・onmousedown
・onmouseup
・onmouseover
・onmouseout
・onmouseover
スクリプトを操作するための手段が限定されていると、
使用している操作手段によってはそのスクリプトを操作できない場合があります。
例えば、ムービーを再生するためにマウスをクリックする必要がある場合、
マウスを使用していない人にはムービーを再生することができません。
操作手段の例：
・マウス
・キーボード
・音声"
スクリプトで作成したコンテンツには、
操作手段が限定されている様々な利用者（例えばキーボードしか利用できない利用者）のことを考慮して、
可能な限り多くの操作手段を用意してください。
例えば、マウスをクリックすると実行するスクリプトの場合は、マウスだけではなく、
キーボードなどでも実行できるようにしてください。
※キーボードによる操作に対応させると、音声による操作も可能になる場合があります。
Javascriptを実行させるためのイベントとして、onmouseoverやonclickといった操作手段がマウスに限定されるものを使用する場合は、
キーボードによる操作を可能にするonkeydownなども併用するようにしてください。
操作手段がマウスに限定されるイベント例：
・onclick
・ondblclick
・onmousedown
・onmouseup
・onmouseover
・onmouseout
・onmouseover
一般的なブラウザはマウスの使用を前提に作られているため、マウスを使用せずに、
キーボードによる操作や音声による操作を行っている場合、目的の情報にたどり着くことが
容易でない場合があります。
ショートカットキーを用意することにより、キーによる項目選択が可能となり、
より操作しやすいコンテンツとなります。
例えば、トップページに目次があるなど、頻繁にトップページへ戻る必要がある場合、
トップページへのリンクにショートカットキーが用意されていると、サイト内の、
どのページからも容易にトップページに戻れるようになり、ページの行き来が容易になります。
キーボードによる操作や音声による操作などマウス以外の操作手段を用いている利用者にとっても利用しやすいコンテンツになるよう、ショートカットキーを用意してください。
ショートカットキーを指定するには、「accesskey="〜"」の形式で、
指定するキーを記述してください。
例：
「新着情報」に0キーを、「製品情報」に1キーを、「お店紹介」に2キーを、
それぞれショートカットキーとして指定する場合
[<a href="new.html" tabindex="0" accesskey="0">
０ 新着情報 </a>]
[<a href="product.html" tabindex="1" accesskey="1">
１ 製品情報 </a>]
[<a href="shop.html" tabindex="2" accesskey="2">
２ お店紹介 </a>]
上記のように指定した場合、Windowsでは、「alt」キーと「2」キーを同時に押すと「お店紹介」へ移動します。
Macintoshでは、「control」キーと「2」キーを同時に押すと「お店紹介」へ移動します。
※Macintoshの「iCab」など、指定したキーを押すだけで移動できるブラウザもあります。
表示されているウィンドウの内容が自動的に変わったり、新しいウィンドウが開いたりすると、
その変化を視覚的に確認できない場合に、内容が伝わらない可能性があります。
画面上のウィンドウの変更が伝わらない例：
・古いブラウザで、一つのウィンドウしか表示できない場合。
・例えば視覚障害者などが、読み上げツール（スピーチ・シンセサイザ、スクリーン・リーダなど）を使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・テキストしか表示できないブラウザを使用している場合。
※古いブラウザや、読み上げツールを使用する利用者でも混乱することがないように、配慮する必要があります。
ブラウザの設定などにより新しいウィンドウが自動的に開かないようにできるまでは、
画面上の変化を視覚的に確認することが難しい利用者を考慮して、
利用者自身の操作によりウィンドウが開くようにするか、
新しいウィンドウが自動的に開くことを利用者に知らせるようにしてください。
HTMLの場合、ターゲットとして新しいウィンドウを指定しないようにしてください。
<a>
タグや<area>
タグ内に、
target="_blank"
を指定しないでください。
またtarget属性値に指定した表示先が存在しないときは、
新しいウィンドウが開くことがありますので、
target属性値を指定する際はスペルミスなどにも気をつけるようにしてください。
表示されているウィンドウの内容が自動的に変わったり、新しいウィンドウが開いたりすると、
その変化を視覚的に確認できない場合に、内容が伝わらない可能性があります。
ウィンドウの変更による画面の変化が伝わらない例：
・古いブラウザで、一つのウィンドウしか表示できない場合。
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
・テキストしか表示できないブラウザを使用している場合。
※古いブラウザや、読み上げツールを使用する利用者でも混乱することがないように、
配慮する必要があります。
ブラウザの設定などにより新しいウィンドウが自動的に開かないようにできるまでは、
画面上の変化を視覚的に確認することが難しい利用者を考慮して、
利用者自身の操作によりウィンドウが開くようにするか、
新しいウィンドウが自動的に開くことを利用者に知らせるようにしてください。
※アプレットやスクリプトで新しいウィンドウを開かないでください。
ラベルタグが正しく指定されていないため、構成部品が多数あるフォームを視覚的に確認できない場合に、
内容が正しく伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツール使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
ラベルタグを正しく指定することにより、フォームの構成部品とラベルの関係が明確になります。
構成部品が多数あるフォームを作成する場合は、
読み上げツールがそのフォームを読み上げた場合などでも内容が正しく伝わるように、
フォームの構成部品とそれぞれのラベルとを正しく関連づけてください。
フォームの構成部品とラベルを関連づけるには、以下の２通りの方法があります。
・フォームの構成部品とラベルを<label>〜</label>間に含むようにする。
・フォームの構成部品に「id="〜"」の形式で名前をつけ、その構成部品のラベルを
<label>タグで指定する。
この<label>タグに「for="〜"」の形式で、
フォームの構成部品につけた名前を記述する。
ラベルタグが正しく指定されていれば、読み上げツールは、
ラベルタグで指定されたラベルと関連するフォームの構成部品を正しく関連づけて読み上げることができます。
例：
「アンケート」フォームの構成部品とラベルを関連づける場合
<label>
ニックネーム：
<input type="text" size="20"
name="nickname" value="
おおさかたろう">
</lable>
<br>
性別：
<label>
<input type="radio"
name="sex" value="man" checked>
男
</label>
<label>
<input
type="radio" name="sex" value="woman">
女
</label>
<br>
好みの食事
<label>
<input type="checkbox"
name="japansefood" value="yes">
和食
</label>
<label>
<input
type="checkbox" name="europeanfood" value="yes">
洋食
</label>
<label>
<input
type="checkbox" name="chinesefood" value="yes">
中華
</label>
また、以下のように記述することもできます。
<label for="nn">
ニックネーム：
</lable>
<input type="text"
size="20" name="nickname" value="
おおさかたろう
" id="nn">
<br>
性別：
<input type="radio"
name="sex" value="man"
id="l_man" checked>
<label for="l_man">
男
</label>
<input
type="radio" name="sex"
value="woman" id="l_woman">
<label
for="l_woman">
女
</label>
<br>
好みの食事
<input type="checkbox"
name="japansefood" value="yes"
id="l_japansefood">
<label
for="l_japansefood">
和食
</label>
<input type="checkbox"
name="europeanfood" value="yes"
id="l_europeanfood">
<label for="l_europeanfood">
洋食
</label>
<input type="checkbox"
name="chinesefood" value="yes"
id="l_chinesefood">
<label for="l_chinesefood">
中華
</label>
隣り合うリンクが分離されていないと、
リンクの区別が難しくなり内容が正しく伝わらない可能性があります。
古い読み上げツール（スクリーン・リーダなど）の中には、
隣り合う複数のリンクを一つのリンクとして読み上げてしまうものがあります。
複数のリンクを並べるときには、隣り合うリンクの間にリンクしていない文字（記号など）を入れて、はっきり分離してください。
以下の例では、隣り合うリンクの間にリンクしていない文字（記号）を半角スペースで区切って入れています。
このような方法で明確に分離することが、様々な環境から利用するユーザへの配慮となります。
例：
" | "
を用いて、２つのリンクを分離させる場合
<a href="hakone.html">
箱根
</a> | <a
href="onsen.html">
温泉
</a>
選択項目が多いと、視覚的に確認できない場合などに、選択することが難しい可能性があります。
項目を選択しやすくするためには、関連する項目をグループにまとめる必要があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
例えば100項目の電気製品の中から1項目を選ぶ場合、100項目が羅列されているよりも、
「オーディオ関連」「映像関連」「PC関連」等のように関連する項目がグループにまとめられている方が
選択しやすくなります。
選択項目が8つ以上あるような場合は、音声で読み上げられた場合などでも混乱することがないように、
関連する項目をグループにまとめて7つ以下にし、タイトルをつけてください。
選択項目をグループにまとめるには、グループにまとめる項目を
<optgroup>〜</optgroup>
間に含めるようにし、
<optgroup>
タグに「title="〜"」の形式でタイトルをつけてください。
例：
選択項目を「家電製品」と「aV機器」に分ける場合
<select
name="product">
<optgroup label="
家電製品
">
<option label="
冷蔵庫
" value="item1" selected>
冷蔵庫
</option>
<option label="
衣類乾燥機
" value="item2">
衣類乾燥機
</option>
<option label="
炊飯器
" value="item3">
炊飯器
</option>
<option label="
食器洗い機
" value="item4">
食器洗い機
</option>
<option label="
食器乾燥機
" value="item5">
食器乾燥機
</option>
</optgroup>
<optgroup
label="
aV機器
">
<option label="テレビ"
value="item6">
テレビ
</option>
<option label="
ラジオ
" value="item7">
ラジオ
</option>
<option label="
ビデオデッキ
" value="item8">
ビデオデッキ
</option>
</optgroup>
</select>
フォームの構成部品が多いと、視覚的に確認できない場合などに、内容を把握することが難しい可能性があります。
内容を把握しやすくするためには、関連する項目をグループにまとめる必要があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
例えば会員登録をする際の入力フォームであれば、ただ部品が羅列されているよりも「サービス内容の選択」
「個人情報」「アンケート」等のように関連する部品がグループにまとめられている方が内容を把握しやすくなります。
フォームの構成部品が8つ以上あるような場合は、
音声で読み上げられた場合などでも混乱することがないように、
関連する部品をグループにまとめて7つ以下にし、タイトルをつけてください。
フォームの構成部品をグループにまとめるには、グループにまとめる部品の先頭に <legend>〜 </legend>
の形式でタイトルをつけ、部品とタイトルが
<fieldset>〜 </fieldset>間に含まれるようにしてください。
例：
「アンケート」への回答を入力するフォームで、
「アンケート」回答部分と「個人情報」入力部分をグループに分ける場合
<fieldset>
<legend>
商品についての感想
</legend>
<br>
どこが気に入っていますか？
<input type="text" name="reason" value="
ご記入ください
">
<br>
改良して欲しいところがありますか？
<input type="text" name="improve" value="
ご記入ください
">
<br>
ご感想をお聞かせください。
<input type="text" size="30" name="impression" value="
ご記入ください
">
<br>
・・・・・
</fieldset>
<fieldset>
<legend>
個人情報
</legend>
<br>
名前
<input type="text" name="name" value="
山本 太郎
">
<br>
よみがな
<input type="text" name="yomigana" value="
やまもと たろう
">
<br>
住所
<input type="text" size="30" name="address" value="
〒
">
<br>
・・・・・
</fieldset>
リスト項目が多いと、視覚的に確認できない場合などに、内容を把握することが難しい可能性があります。
内容を把握しやすくするためには、関連する項目をグループにまとめる必要があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
例えば100項目の電気製品が紹介されている場合、100項目が羅列されているよりも、
「オーディオ関連」「映像関連」「PC関連」
等のように関連する項目がグループにまとめられている方が内容を把握しやすくなります。
リスト項目が8つ以上あるような場合は、
音声で読み上げられた場合などでも混乱することがないように、
関連する項目をグループにまとめてください。
リスト項目をグループにまとめるには、グループにまとめるリスト項目を
<ul>〜</ul>
間、または
<ol>〜</ol>
間に含まれるようにし、その<ul>タグまたは<ol>
タグに「title="〜"」の形式でタイトルを記述してください。
<ul>
タグ、<ol>タグは、必要に応じて入れ子にすることが可能です。
例：
「製品リスト」の中に「家電製品」と「aV機器」のリストを含む場合
<ol title="
製品リスト
">
<ol title="
家電製品
">
<li>
冷蔵庫
</li>
<li>
洗濯機
</li>
<li>
食器乾燥機
</li>
<li>
炊飯器
</li>
<li>
衣類乾燥機
</li>
</ol>
<ol titile="
aV機器
">
<li>
テレビ
</li>
<li>
ビデオデッキ
</li>
<li>
ラジオ </li>
</ol>
</ol>
ラベルタグが正しく指定されていないため、
構成部品が多数あるフォームを視覚的に確認できない場合に、
内容が正しく伝わらない可能性があります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
ラベルタグを正しく指定することにより、フォームの構成部品とラベルの関係が明確になります。
構成部品が多数あるフォームを作成する場合は、
読み上げツールがそのフォームを読み上げた場合などでも内容が正しく伝わるように、
フォームの構成部品とそれぞれのラベルとを正しく関連づけてください。
フォームの構成部品とラベルを関連づけるには、以下の２通りの方法があります。
・フォームの構成部品とラベルを
<label>〜</label>
間に含むようにする。
・フォームの構成部品に「id="〜"」の形式で名前をつけ、
その構成部品のラベルを<label>タグで指定する。
この<label>タグに「for="〜"」の形式で、
フォームの構成部品につけた名前を記述する。
ラベルタグが正しく指定されていれば、読み上げツールは、
ラベルタグで指定されたラベルと関連するフォームの構成部品を正しく関連づけて読み上げることができます。
例：
「アンケート」フォームの構成部品とラベルを関連づける場合
<label>
ニックネーム：
<input type="text" size="20" name="nickname" value="
おおさかたろう ">
</lable>
<br>
性別
：
<label>
<input type="radio" name="sex" value="man" checked>
男
</label>
<label>
<input type="radio" name="sex"value="woman">
女
</label>
<br>
好みの食事
<label>
<input type="checkbox" name="japansefood" value="yes">
和食
</label>
<label>
<input type="checkbox" name="europeanfood" value="yes">
洋食
</label>
<label>
<input type="checkbox" name="chinesefood" value="yes">
中華
</label>
また、以下のように記述することもできます。
<label for="nn">
ニックネーム
：</lable>
<input type="text" size="20" name="nickname" value="
おおさかたろう
" id="nn">
<br>
性別
：
<input type="radio" name="sex" value="man" id="l_man" checked>
<label for="l_man">
男
</label>
<input type="radio" name="sex" value="woman" id="l_woman">
<label for="l_woman">
女
</label>
<br>
好みの食事
<input type="checkbox" name="japansefood" value="yes" id="l_japansefood">
<label for="l_japansefood">
和食
</label>
<input type="checkbox" name="europeanfood" value="yes" id="l_europeanfood">
<label for="l_europeanfood">
洋食
</label>
<input type="checkbox" name="chinesefood" value="yes" id="l_chinesefood">
<label for="l_chinesefood">
中華</label>
リンクを示すテキスト（リンクテキスト名）が明確に分かるようになっていないため、
内容が正しく伝わらない場合があります。
例えば同じページ内に、異なるリンク先を持つ、テキストで記述されたリンクが複数ある場合、
テキストで記述されたリンクに用いられる言葉がそれぞれの違いを明確に表していなければ、
必要なリンク先を見つけ出すために内容を一つ一つ確かめなくてはなりません。
また、読み上げツール（スピーチ・シンセサイザ、スクリーン・リーダなど）を使用している場合に、
必要なリンク先が見つけられず混乱する可能性があります。
複数のリンクがある場合、それぞれのリンク先が異なっているのであれば、
リンクを示すテキスト（リンクテキスト名）に用いる言葉は重複しないようにしてください。
※リンクを示すテキスト（リンクテキスト名）は、
全角30文字以内を目安に記述するようにしてください。
※リンクを示すテキスト（リンクテキスト名）は、
その部分を読むだけでリンクの行き先が分かるようにしてください。
例：
「ここをクリック」ではなく、「バージョン4.3について」のようにします。
<a href="version43.html"
title="
バージョン4.3の仕様書
">
バージョン4.3について
</a>
※「title="〜"」の形式を使えば、より明確にリンク先を示すことができます。
コンテンツやサイト全体についての情報を提供することにより、
制作者や概要について伝えることができます。
例えば、コンテンツのタイトルやサイト内容に関するキーワードが提供されていれば、
サーチエンジンが検索を行う際に役立ちます。
また、制作者の連絡先が示されていれば、
利用者がサイトについて質問がある場合などに役立ちます。
コンテンツやサイト全体についての情報を、メタデータとして提供してください。
<meta>
タグは制作者やキーワードなど様々な情報を提供することができます。
メタデータは
<meta>
タグ、
<address>
タグ、
<title>
タグ、
<link>
タグを用いて指定することができます。
例：
メタデータとして、コンテンツのタイトルや制作者の名前やページの概要、
キーワードなどを記述する場合
<head>
<title>
会社紹介 </title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="author" content="
山田 太郎
">
<meta name="description" content="
メディア、インタフェース、インフォメーションのデザインを通し、人と機械、
さらには人と人の新しい関係を築くことを目指します。
">
<meta name="keywords" content="
インタラクション,インタフェース,ユーザビリティ,アクセシビリティ ">
<link rel="Index" href="index.html">
<link rel="Next" href="contents1.html">
<link rel="Prev" href="contents9.html">
</head>
<body>
・・・
<address>
制作：山田 太郎
<br>
E-mail:<a href="mailto:yamada@...">yamada@....</a>
</address>
・・・
※コンテンツには必ず、
<title>
タグでタイトルをつけてください。
※ <meta>
タグの詳細については関連リンクを参照してください。
正確で分かりやすい見出しがつけられていないため、利用者は本文を詳しく読まないと、
内容を把握することができません。
見出しが本文の内容を的確に表していれば、利用者は見出しを読むだけで、
本文のおおよその流れと内容を把握することができます。
利用者が数多くのサイトの中から必要な情報を見つけ出そうとしている場合、
内容の把握に手間のかかるサイトは読まれない可能性があります。
また、読み上げツール（スピーチ・シンセサイザ、スクリーン・リーダなど）
を使用していて一度に多くの情報を得ることができない場合、見出しがなければ、
本文全体を読むまでそれが必要な情報であるかどうかが判断できません。
見出しは、本文の内容を正しく伝えるものにしてください。
本文の内容を簡潔に表す見出しがあれば、その見出しを読むだけで、その情報が必要なものかどうか、
ある程度の判断が可能となります。
分かりやすい見出しと分かりにくい見出しの例：
「子供と食生活」について書かれた内容につけられた見出し
分かりやすい見出し
1.はじめに
2.小学生の食生活の現状
2-1朝ごはんの重要性
2-2好き嫌いの原因
2-3おやつの役割
3.子供の食事と健康
3-1身体の基礎をつくる食事
3-2バランスの取れた食生活とは
4.豊かな食生活のために
4-1子供時代の食生活が将来に与える影響
4-2食は文化
分かりにくい見出し
1.はじめに
2.現状の問題点
3.対策
4.まとめ
※見出しは
<h1>〜 <h6>
タグで指定してください。読み上げツールは、見出し項目を識別して読み上げます。
※見出しは全角75文字以内を目安に記述してください。
同音異義語が使用されているため、内容が正しく伝わらない可能性があります。
同音異義語の例：
・形勢と形成
・焦心と傷心
・性格と正確
・還元と換言
など発音が同じで表記が異なるもの。
同音異義語を視覚的に確認できない場合、同音異義語の意味の違いを識別することが難しくなります。
視覚的に確認できない例：
・読み上げツールを使用している場合。
・点字ディスプレイなど、内容を点字で表現する装置を使用している場合。
他の言葉を使用して同じ意味を表すことができる場合は、
できるだけ同音異義語を使わないようにしてください。
例：
「形勢が不利になっても．．．」を変える場合
立場が不利になっても．．．
難しい漢字を使うと、利用者によっては読めなかったり意味が伝わらない場合があります。
また、外字として登録している漢字を使用すると、機種により正しく表示されない場合があります。
ウェブページを制作する際には、
そのサイトの対象となる利用者を配慮した内容（言葉の用い方や文章の書き方など）
にする必要があります。
サイトの対象者を考慮して、難しい漢字の使用はできるだけ避けるようにしてください。
※漢字の使用については、常用漢字の範囲で使用するなど自分なりの基準を設けるようにすると、
チェックしやすくなります。
また、読みの難しい漢字には（）などを用いて読み方を示してください。
例：
鮫（サメ）
向日葵（ひまわり）
※同じサイト内では、漢字の使用方法を統一するようにしてください。
各種用語辞典に準拠するなど決めておくことにより、
サイト内での漢字の使用方法を統一することができます。
難しい外来語（カタカナ語）が使用されているため、
利用者によっては内容が正しく伝わらない場合があります。
例えば、「エンプロイアビリティー」「ダウンサイジング」など、一般に馴染みのない外来語や新しい外来語を使うと、
意味が正しく伝わらない可能性があります。
ウェブページを制作する際には、
そのサイトの対象となる利用者を配慮した内容（言葉の用い方や文章の書き方など）
にする必要があります。
外来語（カタカナ語）を使う場合は、
その言葉が一般に馴染みのある言葉であるかどうかを確かめてください。
同じ内容を示す日本語がある場合は、そちらを使うようにします。
ない場合には、言葉の意味が伝わるように説明を加えてください。
日本語に置きかえられる 例：
・コンシューマ→消費者
・サプリメント→栄養補助食品
・コミッション→手数料
※難しい外来語（カタカナ語）を使用していても、自分では気付かないことがあります。
作成したコンテンツは、
できるだけ多くの人（可能であれば、サイトが対象とする利用者層の人）に目を通してもらうようにしてください。
そうすることにより、
そのサイトにふさわしい言葉を用いているかどうかをチェックすることができます。