|
レベル１（最低限の対応） 1ページ
レベル２ 37ページ
（1ページ）
レベル１（最低限の対応）
（2ページ）
1-1 規格・仕様
【対応するJIS項目 5.1.a】
規格・仕様・文法に則って正しく制作されていないウェブコンテンツは、一般のブラウザや、高齢者障害者支援技術、アクセシビリティチェッカーが、正しく認識できなかったり表示や出力がおかしくなったりする可能性があります。
【参照】→技術解説書5.1.a「背景と問題点」
■ 対応方針 （基本検討結果）
・使用するHTML／CSSのバージョンを明確にし、その仕様・文法に従ってページを作成する
・作成する文字コードを決定し、HTMLで宣言する
・機種依存文字は使わない。配慮方針についてルール化する
* 検討１→ 使用する技術について、採用する仕様を選択する
* 検討２→ 採用する文字コードを選択する
* 検討３→ 機種依存文字についての配慮の対処方法を決める
検討１ 使用する技術について、採用する仕様を選択する
ウェブコンテンツを記述するための言語には複数の選択肢があります。例えば、現時点ではHTML4.01 Transitionalが多く使われていますが、フレームを利用する場合はFramesetを使う必要があります。どの記述言語を選ぶかはアクセシビリティの確保に重大な影響を与えるわけではないので、基本的には制作業者が対応可能な技術を選択すればよいでしょう。
なお、アクセシビリティ確保の観点からは、いったん決めたウェブコンテンツ記述言語については、ウェブコンテンツのソース内で、採用した記述言語を明示するDOCTYPE宣言を行い、ソースコード内ではその記述言語を用いた記述を徹底することが重要です。
【参照】→技術解説書5.1.a「背景と問題点」「技術解説」「ソリューション」
◆基本記述言語（いずれか）
□ HTML4.01 Strict
□ HTML4.01 Transitional
□ HTML4.01 Frameset
□ XHTML1.0 Strict
□ XHTML1.0 Transitional
□ XHTML1.0 Frameset
□ XHTML1.1
□ その他（具体的に： ）
採用した理由（例：コンテンツの事情、制作事情、運用事情、古い閲覧環境への配慮など）
検討２ 採用する文字コードを選択する
ウェブコンテンツを作成する文字コードには複数の選択肢があります。例えば、マイクロソフト製品（Windows等）ではShift_JISがよく用いられますが、Linux等のUnix系ではEUC−jpがよく用いられます。どの文字コードを選択するかはアクセシビリティ対応に影響を与えませんが、ウェブコンテンツを作成する文字コードをひとつに決めて、ソース内でmeta要素を用いてその使用を明示し、その文字コードで作成することを徹底することがアクセシビリティ確保の上では重要となります。なお、ウェブサーバの送信する文字コード情報との整合性が問題になるケースもありますので、サーバ管理者と相談しながら決めるとよいでしょう。
【参照】→技術解説書5.1.a「技術解説」「ソリューション」
◆文字コード（いずれか）
□ Shift_JIS
□ UTF-8
□ EUC-jp
□ iso-2022-jp
□ その他（具体的に： ）
検討３ 機種依存文字についての配慮の対処方法を決める
コンテンツの中で使用している機種依存文字、また今後登場する可能性が高い機種依存文字について洗い出しましょう。
【参照】→技術解説書5.1.a「ソリューション」
【機種依存文字の例】
* JIS標準コードにない漢字（人名や地名など）
* アルファベットの組み合わせでできている単位記号（cm 、cc、kgなど）
* ローマ数字
* 丸数字
* 文字記号（  など）
さらに、上記の検討で上げられた機種依存文字について、現実的な対処方策を検討し、統一ルール化しておきましょう。
【対処策例】
* 機種依存文字を使わず、その読みを平仮名、カタカナなどで記述する
* 機種依存文字を使わず、類似の別の漢字や、算用数字などを代用する
* 漢字や記号を画像で作成して配置し、読みを代替テキスト（alt属性など）で記述する
* 複数のアルファベット（ など）や文字の組み合わせで出来た文字（など）は、一文字ずつ書き下す
（機種依存文字のパターン、対処策）
（5ページ）
1-2 画像
【対応するJIS項目 5.4.a】
音声ブラウザやテキストブラウザで利用する場合、利用者は代替テキストが無い場合、画像で示されている情報を理解できません。
【参照】→技術解説書5.4.a「背景と問題点」
■ 対応方針 （基本検討結果）
・画像には必ずAlt属性を指定し、画像の内容が過不足無く伝わる情報を付与する
・代表的なケースについて、代替テキストの用意の仕方の方針を決める
* 検討１→ 必須の原則を確認しましょう
* 検討２→ 個別ケースの対処法を検討しましょう
検討１ 必須の原則を確認しましょう
以下の項目は必須要件です。サイト内の全ての画像について満たすようにしてください。
【参照】→技術解説書5.4.a「技術解説」「ソリューション」
（必須） □ 全ての画像（img要素）にはalt属性を指定する（意味の無い画像も含め全て）
検討２ 個別ケースの対処法を検討しましょう
代表的なケースについて、代替テキストの用意の仕方について方針を検討しましょう。代替テキストの用意の仕方には複数の選択肢があります。その画像の果たしている役割、前後及び周囲との文脈を考えて、過不足の無く代替を行える方法を選択しましょう。
【参照】→技術解説書5.4.a「技術解説」「ソリューション」
◆代表的なケースの例
* テキストを画像化したもの（タイトル画像、見出し画像など）
* 地図や見取り図、模式図など複雑な情報を表した画像
* グラフ
* 情報として意味のある写真、イラスト
* 箇条書きの前のポイント画像
* イメージや雰囲気の表していて情報としては意味を持たない写真、イラスト
* 配置を制御するための透明な画像
◆代替テキストの用意の仕方の例
* 画像内のテキストの内容をalt属性に記述する
* alt属性の中には、「●●（マルマル）の図」「図１」など簡潔な内容を記述し、画像の周囲のテキストで説明する（本文、図のキャプションなど）
* alt属性の中には、「●●（マルマル）の図」「図１」など簡潔な内容を記述し、画像の近くに「図の説明」等の言葉を置き、説明ページへリンクを張る
* alt属性の中には、「●●（マルマル）の図」「図１」など簡潔な内容を記述し、図から説明ページへリンクを張る
* 情報として意味の無い画像のalt属性の中は空にする（alt=""）
* 箇条書きの先頭を示すなどアクセントして意味がある場合に、alt属性の中は、*（アスタリスク）などの記号を入れる
（想定されるケース、代替テキストの用意の仕方 方針）
代替の方針が充分な内容かどうか確認しましょう
◆注目ポイント例
* 画像が示している情報の内容は、画像が見えない場合でも過不足無く理解できるでしょうか？ （ブラウザの設定で画像をオフにして表示したり、音声ブラウザで聞いてみたりするなどの確認方法があります）
* レイアウトの調整のために置かれた画像や、情報として意味の無い画像などに余分な代替テキストを指定していないでしょうか？
（7ページ）
1-3リンク画像
【対応するJIS項目 5.4.b】
音声ブラウザで利用している場合、ハイパリンク画像に代替情報が無いと、利用者はハイパリンク先を識別・理解することが出来ません。
【参照】→技術解説書5.4.b「背景と問題点」
■ 対応方針 （基本検討結果）
・リンク画像には、リンク先の内容が予測できる代替情報を提供する
* 検討１→ 必須の配慮について検討しましょう
* 検討２→ （イメージマップを使用する場合）配慮の方法を検討しましょう
検討１ 必須の配慮について検討しましょう
【参照】→技術解説書5.4.b「技術解説」「ソリューション」「注意事項」
（必須） □ ハイパリンク画像のalt属性の中に代替テキストを指定する
（必須） □ フォームボタンを画像にする際は、input要素のalt属性に代替テキストを記述する
（必須） □ alt属性の内容は、その部分だけでリンク先の内容が分かるように記述する
（必須） □ 同じリンクが繰り返されることを避ける（テキストリンクとリンク画像を並べる場合など）
□ そのほかの配慮（具体的に： ）
検討２ （イメージマップを使用する場合）配慮の方法を検討しましょう
イメージマップを用いる際は、原則としてクライアントサイド・イメージマップを用います。クライアントサイド、サーバサイド、いずれの場合もイメージマップを用いる場合は配慮が必要です。
【参照】→技術解説書5.4.b「技術解説」「ソリューション」
◆クライアントサイド・イメージマップの場合
（必須） □ マップ内のリンク領域の代替テキストを、area要素のalt属性に記述する
（必須） □ イメージマップ全体の代替テキストをimg要素のalt属性に記述する
□ そのほかの配慮（具体的に： ）
◆サーバサイド・イメージマップの場合
（必須） □ イメージマップ画像のalt属性に代替テキストを記述する
（必須） □ イメージマップに設定してある全てのリンクと同じリンク先へのテキストリンクをマップ画像のすぐそばに置く
□ そのほかの配慮（具体的に： ）
（9ページ）
1-4 キーボード操作
【対応するJIS項目 5.3.a】
全盲の利用者、マウスポインタが見づらい利用者、肢体不自由者など、マウスではなくキーボードによる操作でサイトを利用している人がたくさんいます。マウスでしか利用できない設計になっているとサイトを利用できない人が出てしまいます。
【参照】→技術解説書5.3.a「背景と問題点」
■ 対応方針 （基本検討結果）
・全ての機能・サービスをキーボード操作でも利用できるようにする
* 検討１→ サイト内の操作部分を洗い出し作成方針を検討しましょう
検討１ サイト内の操作部分を洗い出し作成方針を検討しましょう
サイト内で、ナビゲーションリンク、フォームによるメニュー選択など、操作が必要となる部分を洗い出し、キーボードでも機能やサービスが利用可能なように作成方法を検討してください。
【参照】→技術解説書5.3.a「技術解説」「ソリューション」
【作成方法の例】
* a要素によるリンクテキスト
* （Flashによるリンクメニュー）a要素によるリンクテキストを代替として添える
* （プルダウンメニュー）決定ボタンを添え、そのボタンのonClick属性で変更のJavascriptを指定する
* tabindex属性でフォーカスの移動順序を理にかなった順序になるよう指定する
（操作部分、対象（複数ページ／固有ページ）、作成方法）
◆キーボードによる操作が問題なく可能かどうか方針を確認しましょう。
【参照】→技術解説書5.3.a「技術解説」「ソリューション」
【注目ポイント例】
* サイト内で提供されている全ての機能やサービスは、マウスを使わずキーボードで利用可能でしょうか？ （マウスでしか操作できないボタンなどがあっても、代わりの手段が合わせて提供されていてキーボードでサイトの機能やサービスが利用可能であれば可）
* リンク、入力項目は、キーボードで移動した時に理にかなった順序で移動するでしょうか？
* プルダウンメニューがある場合、キーボードで選択操作が可能でしょうか？ 出来ない場合、代わりの手段は用意されているでしょうか？
* FlashやPDFで操作部分が提供されている場合、キーボードで操作や選択が可能でしょうか？出来ない場合、代わりの手段は用意されているでしょうか？
（11ページ）
1-5レイアウト
【対応するJIS項目 5.2.d】
※基本検討シート中の「1-5 レイアウト」で「レイアウトのために表を用いない」を選択した場合は、この項の詳細検討は不要です。
HTMLのtable要素を使ったページレイアウトは広く利用されていますが、視覚障害者用の音声読み上げソフトでの読み上げ順序に配慮した設計にしないと、音声読み上げでは意味が通らなくなってしまうことがあります。
まず、どのような順序で読み上げが行われるかを十分に理解してください。
【参照】→技術解説書5.2.d「背景と問題点」「技術解説」「ソリューション」
■ 対応方針 （基本検討結果で以下が選択された場合）
・レイアウトのために表を用いるが、音声読み上げソフト等への配慮を行う
* 検討１→ 作成するページのレイアウト案を作り、読み上げ順序を確認しましょう
検討１ 作成するページのレイアウト案を作り、読み上げ順序を確認しましょう
検討１の理解にならって、作成するページのレイアウト図を作り、音声読み上げでの読み上げ順に番号を振ってみてください。（左上のセルから右側へ）
【参照】→技術解説書5.2.d「ソリューション」
◆テーブルレイアウト案
◆読み上げ順が、情報の意味上のつながりと違っている場合は、ページレイアウトの変更を検討してください。
（13ページ）
1-6 ページタイトル
【対応するJIS項目 5.2.e】
ページのタイトルは、そのページの概要を理解したり、目的のページかどうかを判断したりための最も重要な情報です。音声読み上げソフトでは、最初にページタイトルを読み上げてから、内容を読み上げます。
【参照】→技術解説書5.2.e「背景と問題点」「技術解説」
■ 対応方針 （基本検討結果）
・ページタイトルのつけ方にルールを設ける
* 検討１→ サイト全体でページタイトルの付け方のルールを決めましょう
検討１ サイト全体でページタイトルの付け方のルールを決めましょう
ページのタイトルは、そのページの概要を理解したり、目的のページかどうかを判断したりするための最も重要な情報です。以下の視点を取り入れながら、サイト全体で分かりやすいページタイトルの付け方のルールを決めてください。
【参照】→技術解説書5.2.e「ソリューション」
【注目ポイント例】
* ページ内容を最も端的に表す単語やフレーズを含める
* 同一のタイトルが無いようにする
* サイト名を含める
* サイト名など同じ文字列を入れる場合は、最後尾に配置したり、省略するなど長くならないようにしたりして、利用者が効率よくページ内容を把握できるようにする
◆ページタイトルの付け方の統一ルール
（14ページ）
1-7 リンク
【対応するJIS項目 5.3.g】
ウェブコンテンツを利用する際の基本機能であるリンクは、リンクであることを識別しやすく、どこにリンクするかを理解しやすく、選択の操作が容易に行えることが重要です。
【参照】→技術解説書5.3.g「背景と問題点」
■ 対応方針 （基本検討結果）
・リンクテキスト、リンク画像は、識別・操作がしやすいようにルールを定める。リンク先が明確に分かるような表記にする
* 検討１→ リンクテキストや画像の内容の分かりやすさについて検討しましょう
* 検討２→ リンクテキストや画像の識別や操作のしやすさについて検討しましょう
検討１ リンクテキストや画像の内容の分かりやすさについて検討しましょう
配慮の方針から必須の内容を確認し、そのほかの配慮の可能性についても検討してください。
【参照】→技術解説書5.3.g「技術解説」「ソリューション」
◆リンクテキストの内容の分かりやすさ
（必須） □ リンクテキストだけで、リンク先の内容を想像できるようにする
（必須） □ 指示代名詞だけでリンク先を指定しない（ここ、こちら など）
（必須） □ 「クリック！」など、リンク先の内容を推測できない表現を用いない
□ 「××（バツバツ）に関する詳しい情報」のような文字列のうち、「情報」だけをリンクとするのでなく、リンクを指定する範囲を広げてリンク先をわかりやすくする
□ そのほかの配慮（具体的に： ）
◆リンク画像の表示内容、代替テキストの内容の分かりやすさ
（必須） □ 画像に表示する文字や絵文字（アイコン）は、ボタンの機能を推測できるようにする
（必須） □ ａｌｔ属性の内容だけで、リンク先の内容を想像できるようにする
（必須） □ ａｌｔ属性の内容に指示代名詞だけでリンク先を指定しない（ここ、こちら など）
（必須） □ ａｌｔ属性の内容に「クリック！」など、リンク先の内容を推測できない表現を用いない
□ そのほかの配慮（具体的に： ）
検討２ リンク画像の配慮方針について検討しましょう
注目ポイント例を参考に、配慮の方針を検討し決めてください。
【参照】→技術解説書5.3.g「技術解説」「ソリューション」
◆リンクテキストの、見た目の分かりやすさ、操作のしやすさ
【注目ポイント例】
* 適度なリンク範囲を確保できるように文字列全体にリンクを設定する
* ブラウザのデフォルトのリンクの表示スタイル、選択済みリンクの表示スタイルは、変更しない
* 隣接するリンクの間は、適切な間隔を設ける
* テキストリンクが横に並ぶ場合、各テキストリンクの間に縦線や斜線を入れる
* 行間を設定する場合は狭くしない
◆見た目の分かりやすさ、操作のしやすさの配慮方針
◆リンク画像の、見た目の分かりやすさ、操作のしやすさ
【注目ポイント例】
* 適度なリンク範囲を確保できるように大きな画像を用いる
* リンク画像は選択できそうな形のデザインにする
◆見た目の分かりやすさ、操作のしやすさの配慮方針
（16ページ）
1-8 文字の色
【対応するJIS項目 5.6.c】
※基本検討シート中の「1-8 文字の色」で「文字色、背景色を変更せずブラウザで指定された色、背景色で表示されるようにする」を選択した場合は、この項の詳細検討は不要です。
文字の色と背景色の組み合わせによっては、文字が読み取りづらくなる可能性があります。色の識別がしにくい人は、ウェブ利用者の中でもかなりの割合を占めます。
【参照】→技術解説書5.6.c「背景と問題点」
■ 対応方針 （基本検討結果）
・文字色、背景色の指定にルールを設ける
* 検討１→ 配慮のルールについて検討しましょう
検討１ 配慮のルールについて検討しましょう
文字の色を指定する場合には、十分な配慮が必要です。
【参照】→技術解説書5.6.c「技術解説」「ソリューション」
◆配慮の方針例（出来る限り複数を組み合わせることが望ましい）
* 制作時にアクセシビリティチェッカーで、コントラストに問題が無いかどうかを確認する
* 制作時にアクセシビリティチェッカーで配色に問題が無いかどうかを確認する
* 制作時にグレースケールで印刷をしてコントラストが読み取りにくく無いかどうかを確認する
* 制作時に複数のスタッフで配色が分かりにくくないかどうかを確認する
* 制作時にスタイルシートを外した状態でも色の組み合わせ、コントラストに問題が無いことを確認する
* 文字の背景に画像を置かない
* 制作時にWindowsのOSの機能で画面を白黒反転させ、色の組み合わせ、コントラストの面で、読み取りづらくないかどうかを確認する
◆採用する配慮方針
◆設定したルールについて配慮が問題ないかどうか確認してみましょう
ルールに基づいたデモページやテンプレートを作成し、複数の人で読みにくくないかどうかを確認してみましょう。できるだけ、多くの人数、多くの年齢層から意見を求め、可能であれば、視覚に障害のある方の意見を求めましょう。
（18ページ）
1-9 文字のサイズ
【対応するJIS項目 5.6.a】
※基本検討シート中の「1-9 文字のサイズ」で「文字サイズやフォントを指定せず、ブラウザで指定されたサイズ・フォントで表示がされるようにする」を選択した場合は、この項の詳細検討は不要です。
文字の大きさが小さく感じた場合、利用者はブラウザの文字サイズ変更機能を利用して拡大することがあります。文字サイズを拡大できないように設計してしまうと、この機能が利用できないことになります。
また、画像の文字サイズを変更できないブラウザも多いので、画像内の文字サイズは読みやすさに注意して指定する必要があります。
【参照】→技術解説書5.6.a「背景と問題点」
■ 対応方針 （基本検討結果）
・文字サイズの指定方法にルールを設ける
* 検討１→ 基本的な方針を決めましょう
* 検討２→ 文字サイズ指定ルールについて検討しましょう
検討１ 基本的な方針を決めましょう
文字サイズは、これからはfont要素ではなく、CSSの中で指定する方法が推奨されています。フォントの種類を指定する場合はスタイルシートで指定しましょう。
◆文字サイズの指定方法（行う場合いずれか）
（推奨） □ CSSを使用して指定する
□ font要素を使用してHTMLで使用する
◆フォントの指定方法（行う場合）
（必須） □ CSSで指定する
検討２ 文字サイズ指定ルールについて検討しましょう
文字サイズを指定する場合の配慮ルールについて検討しましょう。HTMLのfont要素で指定する場合でも、CSSで指定する場合でも、ブラウザでの拡大縮小が可能な相対値で指定してください。
【参照】→技術解説書5.6.a「技術解説」「ソリューション」
◆その他の箇所に関する文字サイズ指定方法のルール
（例： CSSで%指定を行う）
（20ページ）
1-10 色での区別
【対応するJIS項目 5.5.a】
色の違いで表現や指示を行うことで、多くの人がわかりやすくなります。しかし、色の違いだけでは、色の区別のつかない人にはその意味が伝わりません。
◆色の違いで表現するケース
（分類、例）
複数の色で情報の違いを表現する
・天気や気温の分布を地図上の色の違いで表現
・グラフのデータの違いを色の違いで表現
・必須項目のみ赤字で示す
・鉄道の時刻表で、特急・急行・各駅停車の違いを、文字色の違いで表現
・施設や座席の空き状況案内で、「空きあり」「残りわずか」「満席」などをカレンダーの塗りつぶし色の違いで表現
色の違いで強調を表現する
・新商品のみ赤字で示す
・文章内の強調箇所を赤字で示す
その他
【参照】→技術解説書5.5.a「背景と問題点」「技術解説」
■ 対応方針 （基本検討結果）
・情報の識別や指示は、色だけでなく文字等でも分かるようにする
* 検討１→ 具体的な配慮の方法について理解しましょう
* 検討２→ サイト内でルール化すべきパターンを洗い出し、ルールを検討しましょう
検討１ 具体的な配慮の方法について理解しましょう
色で表現や指示をする場合には、色以外の方法でもその情報が伝わるようにする必要があります。
◆配慮の例
* 必須の入力項目名には、赤字にするのと同時にかっこ書きで（必須）とテキストを加える
* 強調したい単語や文章には、赤字にするだけでなく太字にし、emやstrongなどの要素を指定する
* 天気や気温の分布を地図上の色と、塗りつぶしパターンの違いで表現する
* 鉄道の時刻表で、特急・急行・各駅停車の違いを文字色の違いと◎、△等の記号で表現する
* グラフでは凡例だけでなく引込み線を用いて情報を提供する
* 施設の空き状況案内で、「空きあり」「残りわずか」「満席」などをカレンダーの色の違いと文字で表現
【参照】→技術解説書5.5.a「技術解説」「ソリューション」
検討２ サイト内でルール化すべきパターンを洗い出し、ルールを検討しましょう
制作の際に混乱を生んだり、配慮が抜けてしまったりしないように、サイト内で該当する表現のパターンを出来るだけ洗い出し、どのように配慮するかルールを決めて起きましょう。
◆サイト内での該当パターンと配慮方針
（分類、該当パターン、配慮方針）
・複数の色で情報の違いを表現する
・色の違いで強調を表現する
・その他
（22ページ）
1-11 単語内の空白等
【対応するJIS項目 5.9.e】
表示の体裁を整えるために単語の途中に空白や改行を入れることがありますが、これをしてしまうと、音声読み上げソフトは、ひとつの単語として認識が出来ず読み上げ方がおかしくなり、利用者が内容を理解できなくなります。
【参照】→技術解説書5.9.e「背景と問題点」
■ 対応方針 （基本検討結果）
・単語の文字の間にスペースや改行を入れない
* 検討１→ 配慮のルールの詳細を検討しましょう
検討１ 配慮のルールの詳細を検討しましょう
HTML化を担当する人だけでなく、CMSなどに情報を入力する場合も配慮が不可欠です。必須のルールとして徹底しましょう。
【参照】→技術解説書5.9.e「技術解説」「ソリューション」
◆配慮方針の例
（必須） □ 単語の途中に空白（スペース）を入れない（文字の間隔を調整したい場合はスタイルシートで調整する）
（必須） □ 単語の途中にbr要素を入れない（縦書きを表現したい場合はスタイルシートで調整したり、画像で表現したりする）
◆採用する配慮の方針
（23ページ）
1-12 入力や選択
【対応するJIS項目 5.3.b、5.3.c、5.3.d】
※基本検討シート中の「1-12 入力や選択」で「利用者が情報を入力・選択する機能（入力フォーム、プルダウンメニュー、ラジオボタン、チェックボックスなど）は設けない」を選択した場合は、この項の詳細検討は不要です。
入力欄では、何を入力すればよいかが分かりやすく示されること、また入力操作がしやすいことが重要です。音声ブラウザでの利用者や、弱視の利用者、マウスの操作が難しい利用者など、様々な配慮が必要です。
また、視覚障害者や肢体不自由者、パソコン操作に不慣れな人では、入力操作に多くの時間がかかることがあります。入力操作を分かりやすくする配慮や、時間制限をできるだけ設けない配慮が必要です。
【参照】→技術解説書5.3.b「背景と問題点」「技術解説」
【参照】→技術解説書5.3.c「背景と問題点」「技術解説」、5.3.d「技術解説」
■ 対応方針 （基本検討結果）
・入力する機能を設けるため、必要な配慮をルール化する
* 検討１→ 入力欄での配慮の方法について検討しましょう
* 検討２→ 入力フォーム以外でのコミュニケーションの方法を用意しましょう
* 検討３→ （時間制限を行なう場合）配慮について検討しましょう
検討１ 入力欄での配慮の方法について検討しましょう
出来る限り多くの利用者にとって、分かりやすく操作しやすい配慮の方法を検討してください。
【参照】→技術解説書5.3.b「技術解説」「ソリューション」
（必須） □ label要素を使用し、ラベルとコントロールを関連付ける
（必須） □ コントロールが多くなる場合は、グループ化する
（推奨） □ 入力する文字種など入力書式に自由度を持たせる（半角/全角など）
（必須） □ 入力すべき文字種に制約がある場合は明示する
（必須） □ 必須入力と任意入力の項目の違いを明示する
（必須） □ 入力に関する指示や説明、注意事項は、入力項目の近く（できるだけ前）に記述する
□ その他の配慮を行なう （具体的に： ）
◆分かりにくさや操作のしにくさの原因がないかどうか確認しましょう。
【参照】→技術解説書5.3.b「技術解説」「ソリューション」
【注目ポイント例】
* 何をどこにどのようなルールで入力すべきかが容易に理解できますか？
* ラベル（選択肢の文字列）をクリックすることで、コントロールが選択されますか？
* 選択肢の数はこれ以上グループ分けによる分かりやすさの向上が出来ませんか？
* 必須であることを文字色や記号だけで表現していませんか？
* テキストボックス内の文字サイズを小さくしていませんか？
検討２ 入力フォーム以外でのコミュニケーションの方法を用意しましょう
ホームページでの入力がうまくできない人のために、どのような代替手段を提供するかを検討し選択してください。
障害の種類は多様で利用しやすい手段は人によって異なるため、出来る限り複数の手段を用意することが極めて重要です。
◆可能な手段をできるだけ併用
□ 電子メールによる連絡を受け付ける
□ 電話、ファックスによる連絡を受け付ける
□ その他の受付方法を用意する （具体的に： ）
検討３ （時間制限を行なう場合）配慮について検討しましょう
出来る限り多くの利用者にとって、分かりやすく操作しやすい配慮の方法を検討してください。
【参照】→技術解説書5.3.c「技術解説」「ソリューション」、5.3.d「技術解説」「ソリューション」
（必須） □ 時間制限があることを明示する
（必須） □ 操作するために出来る限り充分な時間設定にする
（推奨） □ 経過時間、残り時間または受付終了時刻などをページ内で表示する
（推奨） □ 利用者が時間延長できる手段を用意する
（推奨） □ 利用者が時間制限を解除できる手段を用意する
□ その他の配慮を行なう （具体的に： ）
◆分かりにくさや操作のしにくさの原因がないかどうか確認しましょう。
【注目ポイント例】
* 時間制限があることが入力操作を開始する前に容易に分かりますか？
* 設定されている時間は、許容される範囲で最も長い設定になっていますか？
（26ページ）
1-13 ＰＤＦ
【対応するJIS項目 5.1.b、5.4.e】
※基本検討シート中の「1-13 PDF」で「PDFを提供しない」を選択した場合は、この項の詳細検討は不要です。
PDFはHTML化作業をすることなく簡単に作成できるほか、資料の正確な印刷イメージを提供できます。しかし、閲覧に専用ソフトが必要な上、現状では音声読み上げソフトで正しく読み上げられない等の問題が発生する場合があります。そのため、PDF以外の方法で情報や機能を利用できるようにすることが重要です。
またAcrobatのバージョン5.0以降を使用可能な場合（PDFバージョン1.4以降）は、PDFのアクセシビリティ機能があります。PDF自体の作成方法にできる限り注意して配慮のあるPDFを作成してください。
なお、Adobeでは、PDF自体をアクセシブルにするための作成方法について情報を公開しています。PDFを掲載する場合は、情報を参照しその方法について理解することが必要です。
【参照】→技術解説書5.4.e「背景と問題点」
【参照】→技術解説書Adobe PDFに関する情報
■ 対応方針 （基本検討結果）
（基本検討で選択された以下のいずれか）
□ アクセシビリティに配慮したPDF形式で制作し公開すると同時に、掲載の際には内容を説明するテキスト等を提供する。（Acrobat バージョン5.0以上）
□ PDFで公開すると同時に、掲載の際には内容を説明するテキスト等を提供する。（Acrobat バージョン4.0以下）
* 検討１→ サイト内でＰＤＦを用いて情報提供するケースを洗い出しましょう
* 検討２→ ＰＤＦを掲載する場合の配慮方法について検討しましょう
* 検討３→ PDF作成時のルールを検討しましょう
検討１ サイト内でＰＤＦを用いて情報提供するケースを洗い出しましょう
まずは、各ケースについてPDFで情報を提供するメリットについて検討しましょう。制作の簡便性だけでなく、利用者の立場にも立って考えることが重要です。
◆PDFで情報提供するケース
（情報提供箇所、PDFで提供することのメリット）
検討２ ＰＤＦを掲載する場合の配慮方法について検討しましょう
検討１で洗い出したPDF利用ケースについて、代替や配慮の方法について検討しましょう。出来るだけ不足なく情報が伝わる手段を用意することが重要です。リンクテキストに配慮したり、他のファイル形式でも合わせて提供したりするなど、複数の配慮を組み合わせることで、アクセシビリティが向上します。
【参照】→技術解説書5.4.e「技術解説」「ソリューション」
◆配慮方法の例
* PDFを掲載しているHTMLページあるいは別ページで、PDFが伝えている情報の内容を不足なく合わせて提供する
* PDF内のテキスト情報を抜き出し、HTMLやテキストファイルで提供する
* MSWord、Excel、PowerPointなどPDFの原稿となる電子ファイルを合わせて提供する
* PDFファイルへのリンクテキストやリンク画像に、リンク先がPDFであること、ファイルのデータ量を明示し、利用者に伝える
* プラグインの最新バージョンをダウンロードできるページへのリンクを提供し、プラグインを持っていない利用者が入手しやすいようにする
◆PDF利用の場合の配慮方針（サイト内共通ルール）
◆例外を設ける場合の基準と、配慮方針
検討３→ PDF作成時のルールを検討しましょう
Adobeの提供する情報に従い、対応として現実的な作成ルールを定めてください。
【参照】→技術解説書Adobe PDFに関する情報
◆配慮方法の例
* Acrobat5.0以上のバージョンでPDFを作成する
* Adobeの情報に従い、セキュリティ設定の方法にアクセシビリティが損なわれないためのルールを設け順守する
* タグ付きPDFを作成し、画像の代替テキストを指定する
* タグ付きPDFを作成し、見出しなど文書構造を指定する
* タグ付きPDFを作成し、読み上げ順序を確認し、必要に応じて順序の設定を調整する
◆採用する配慮の方針（統一の作成ルール）
（30ページ）
1-14 音声
【対応するJIS項目 5.4.c】
※基本検討シート中の「1-14 音声」で「音声情報は提供しない」を選択した場合は、この項の詳細検討は不要です。
聴覚に障害がある場合、音で提供されている情報や、サイトやシステムからのメッセージは認識できず、内容も理解できません。PCの音声出力をオフにしている場合や、周囲が騒がしいような場合も同様です。
【参照】→技術解説書5.4.c「背景と問題点」
■ 対応方針 （基本検討結果）
・音声情報を提供するので、テキスト等の代替情報を提供する
* 検討１→ 利用者にとって意味を持つ音声情報を洗い出しましょう
* 検討２→ 音声情報の代替方法を検討しましょう
検討１ 利用者にとって意味を持つ音声情報を洗い出しましょう
提供予定のある音声情報を検討し、書き出してください。その中で、利用者にとって、情報やサイトやシステムからのメッセージとして意味のあるものを選んでください。
◆利用者にとって意味のある音声の例
* 音声ファイルによる情報提供（ニュースやメッセージなど）
* 読み上げ音声で情報提供やガイダンスを行う
* エラーの表示や警告表示の際に効果音を鳴らす
* 利用者の操作時に効果音を鳴らす
◆サイトで提供する音声情報
（情報提供箇所、情報の内容）
検討２ 音声情報の代替方法を検討しましょう
検討２で洗い出した利用者にとって意味のある音声情報について、代替の方法を検討してください。
【参照】→技術解説書5.4.c「技術解説」「ソリューション」
◆代替の方法の例
* 効果音がなる場合に、アニメーションや色の変化など見た目でも変化が分かるようにする
* 音声で提供している情報をHTMLなどでテキストでも提供する
* 音声ガイダンスと同じ内容を字幕でも用意し表示する
（利用者にとって意味のある音声情報、代替の方針）
◆代替の方針が充分な内容かどうか確認しましょう
◆注目ポイント例
* 音声で提供されている効果は、音声が聞こえない場合でも認識できるでしょうか？
* 音声で提供されている情報は、音声が聞こえない場合でも不足なく理解できるでしょうか？
（32ページ）
1-15 動画
【対応するJIS項目 5.4.d】
※基本検討シート中の「1-15 動画」で「動画やアニメーションは提供しない」を選択した場合は、この項の詳細検討は不要です。
視覚に障害がある場合、画面で視覚的に伝えている情報が理解できないことがあります。また、聴覚に障害のある場合、音によって提供されている情報が理解できないことがあります。音声を含む動画で情報を提供する場合は、両者への配慮が必要です。また、認知又は記憶に障害がある場合、字幕や音声による状況説明によって内容を理解しやすくなる場合があります。
【参照】→技術解説書5.4.d「背景と問題点」
■ 対応方針 （基本検討結果）
・動画やアニメーションを提供するので、内容を説明する代替情報を提供する
* 検討１→ 利用者にとって意味を持つ動画情報を洗い出しましょう
* 検討２→ 動画情報の代替方法を検討しましょう
検討１ 利用者にとって意味を持つ動画情報を洗い出しましょう
提供予定のある動画情報を検討し、書き出してください。その中で、利用者にとって、情報やサイトやシステムからのメッセージとして意味のあるものを選んでください。
◆サイトで提供する動画情報
（情報提供箇所、情報の内容）
検討２ 動画情報の代替方法を検討しましょう
検討２で洗い出した利用者にとって意味のある動画情報について、代替の方法を検討してください。「情報が伝わらない利用者が出ないようにすること」を優先し、現実的な方法を検討してください。
【参照】→技術解説書5.4.d「技術解説」「ソリューション」
◆代替の方法の例
* 画面で視覚的に伝えている情報を同期させた副音声で提供する
* 画面で視覚的に伝えている情報を別ページなどで代替テキストとして提供する
* 音声で聴覚的に伝えている情報を同期させた字幕で提供する
* 音声で聴覚的に伝えている情報を別ページなどで代替テキストとして提供する
（利用者にとって意味のある動画情報、代替の方針（視覚／聴覚））
◆代替の方針が充分な内容かどうか確認しましょう
◆注目ポイント例
* 動画で視覚的に提供されている情報は、目が見えない、あるいは見えにくい場合でも不足なく理解できるでしょうか？
* 動画内で音声を用いて提供されている情報は、音声が聞こえない場合でも不足なく理解できるでしょうか？
* 別ページに代替テキストを用意している場合、そのページへのリンクは分かりやすい位置に分かりやすい表現で置かれているでしょうか？
（34ページ）
1-16 フラッシュ、スクリプト、アプレット等
【対応するJIS項目 5.1.b 、5.4.e】
※基本検討シート中の「1-16 フラッシュ、スクリプト、アプレット等」で「オブジェクト（WORDなどでの情報提供を含む）やプログラム（Flash、Script、Appletなど）は提供しない」を選択した場合は、この項の詳細検討は不要です。
FlashやJavaScript、a要素などによりリンクされたHTML以外のファイルなど（以下、オブジェクトなど）は、情報や機能を利用できない利用者がいる可能性を考えねばなりません。そのため、それ以外の方法（HTMLなど）で情報や機能を利用できるようにすることがまず重要です。
◆例
* Java
* JavaScript
* VBScript
* Macromedia Flash
* マイクロソフトワード、エクセル、パワーポイントなど
* PDF（1-13）
【参照】→技術解説書5.4.e「背景と問題点」（5.1.b「背景と問題点」）
以下の例のようなHTML／XHTML、スタイルシート以外のオブジェクトなどの技術を利用する場合は、そのオブジェクトなどの技術自体にアクセシビリティ確保の努力をする必要があります。
オブジェクトなどの技術とは、object、applet要素を用いてHTMLに埋め込まれるもの、アンカーによって直接リンクされ読み込まれるもの、専用プラグインを用いるもの、外部のプログラムを起動して表示されるものなどがあります。（※PDFについては1-13を参照）
【参照】→技術解説書5.1.b「背景と問題点」「技術解説」
◆例
* Macromedia FLASH
* Java
* JavaScript
* VBScript
■ 対応方針 （基本検討結果）
・オブジェクト（WORDなどでの情報提供を含む）やプログラム（Flash、Script、Appletなど）を提供するが、内容を説明するテキストや同等の操作を可能にする代わりの手段を提供する。さらに、その技術のアクセシビリティ機能を使いそれ自体をできるだけ配慮ある設計にするようルールを設ける。
* 検討１→ 当てはまるものをサイト内で提供するケースを洗い出しましょう
* 検討２→ 提供する場合の配慮方法について検討しましょう
* 検討３→ 各オブジェクト自体のアクセシビリティ確保の方法を検討しましょう
検討１ 当てはまるものをサイト内で提供するケースを洗い出しましょう
提供者側のメリットだけでなく、利用者の立場にも立って考えることが重要です。
◆提供するケース
（情報提供箇所、提供するオブジェクトとその内容）
検討２ 提供する場合の配慮方法について検討しましょう
検討１で洗い出した提供ケースについて、代替や配慮の方法について検討しましょう。出来るだけ不足なく情報が伝わる手段を用意することが重要です。リンクテキストに配慮したり、他のファイル形式でも合わせて提供したりするなど、複数の配慮を組み合わせることで、アクセシビリティが向上します。
【参照】→技術解説書5.4.e「技術解説」「ソリューション」
◆配慮方法の例
* オブジェクトなどを呼び出しているHTMLページあるいは別ページで、オブジェクトなどが伝えている情報の内容を不足なく合わせて提供する
* オブジェクトなどで提供されている情報のうちテキスト情報を抜き出し、HTMLやテキストファイルで提供する
* object要素内に代替テキストを記述する
* script要素がある場合、noscript要素を使ってscriptが使えないときにも情報や機能を利用できるようにする
* プラグインの最新バージョンをダウンロードできるページへのリンクを提供し、プラグインを持っていない利用者が入手しやすいようにする
◆配慮方針
（オブジェクトなどを提供するケース、配慮方針）
検討３→ 各オブジェクト自体のアクセシビリティ確保の方法を検討しましょう
オブジェクトの開発・提供等を行っている企業が、アクセシビリティのガイドラインを示している、あるいはアクセシビリティ確保技術を提供している場合にはそれを参照しましょう。
【参照】→技術解説書5.1.b「ソリューション」
（用いる技術、参照ドキュメント、アクセシビリティ確保方針）
（37ページ）
レベル２
（38ページ）
2-1 文書構造
【対応するJIS項目 5.2.a】
HTMLでは見出しや段落、箇条書きなどといった文書の構造を表すための要素が用意されています。これらを使うことで、見た目だけでなく、多様な利用者や、検索エンジンなどのロボットなどに対して、文書の構造を適格に伝えることが出来ます。
なお、構造を示した文書を視覚的にどのように表現するかは、スタイルシートで表現します。
【参照】→技術解説書5.2.a「背景と問題点」「技術解説」
■ 対応方針 （基本検討結果）
・ページを見出し、段落、リストなどの要素を用いて構造化する （ルールを設ける）
* 検討１→ 代表的なページ構成を例に、文書構造の指定方針を決めましょう
検討１→ 代表的なページ構成を例に、文書構造の指定方針を決めましょう
トップページ、コーナーの目次ページ、情報掲載ページなど、代表的なページ構成パターンを選び、それらを例に、文書構造をどのように指定するかを示してください。
【参照】→技術解説書5.2.a「ソリューション」
【記述例】
（画面キャプチャ）
【注目ポイント例】
* 文書内の大見出し、中見出し、小見出しに相当する部分には、h要素が指定されていますか？
* 見出し要素の階層（h1、h2、h3・・・）は、文書の階層構造を正しく表現していますか？
* 箇条書きに相当する部分は、ol、ul、dlといった箇条書きの要素を用途に合った形で使用していますか？
* 段落に相当する部分にはp要素が使われていますか？
◆文書構造の指定方針
（40ページ）
2-2 スタイルシート
【対応するJIS項目 5.2.b】
ウェブコンテンツの表示スタイルは、全てスタイルシートを用いて記述することが推奨されています。
【参照】→技術解説書5.2.b「背景と問題点」
■ 対応方針 （基本検討結果）
・スタイルシートを用いて表示スタイルを記述する。スタイルシートが利用できない環境に配慮する
* 検討１→ スタイルシートの適用範囲を決めましょう
* 検討２→ スタイルシートが適用されない環境での読み取りに配慮しましょう
検討1 スタイルシートの適用範囲を決めましょう
制作技術、コンテンツの性質などを勘案し、現実的なスタイルシート適用範囲を選択してください。
【参照】→技術解説書5.2.b「背景と問題点」
（どちらか）
□ 全ての表示スタイルはスタイルシートで指定する（table要素や、font要素などで配置や見映えを表現しない）
□ 部分的にスタイルシートを用いるが、HTMLでも一部の配置や見映えを指定する
◆選択した理由
検討２ スタイルシートが適用されない環境での読み取りに配慮しましょう
分かりにくさの原因になりそうなことがないかどうか、以下のような視点で確認しましょう。
【参照】→技術解説書5.2.b「背景と問題点」「技術解説」「ソリューション」
【注目ポイント例】
* スタイルシートを外した場合に、表示が崩れたり見映えが変わることで、文字が読み取れなかったり、情報の意味や関係性が理解しにくくならないか
* スタイルシートを外した場合に、元々表現されている情報のメリハリやグループ分け、見出し構成、箇条書きなど、文書の構造を理解できるか
（42ページ）
2-3 表
【対応するJIS項目 5.2.c】
表組みは視覚的に分かりやすく情報を整理して提示できる一方で、視覚障害者にとっては非常に分かりにくい情報の出し方になります。
【参照】→技術解説書5.2.c「背景と問題点」「技術解説」
■ 対応方針 （基本検討結果）
・表で情報を表現する場合、HTMLで表の構造を明示する
* 検討１→ 表組みの用い方が適切かどうか確認しましょう
* 検討２→ 表組みを用いる際の配慮の指定を行いましょう
検討１ 表組みの用い方が適切かどうか確認しましょう。
表で表現することが効果的でないものまで、複雑なtableで表現してしまうと、分かりにくい人が出てしまいます。さらに表組みを用いる時は、できるだけ単純な作りにすることが必要です。
【参照】→技術解説書5.2.c「背景と問題点」「技術解説」
◆分かりにくさの原因になりそうなことがないかどうか、以下のような視点で確認しましょう。
【注目ポイント例】
* 表組みにすることで見た目上の分かりやすさが向上しているでしょうか？
* 表組みでなく箇条書きでも同じ分かりやすさで提供できる情報ではありませんか？
* 表の構造は複雑すぎませんか？ 複数の表に分けて表現することが出来ませんか？
* 複数の表に分けて表現することでセルの結合を減らせませんか？
検討２ 表組みを用いる際の配慮の指定を行いましょう
音声読み上げソフトでも意味が理解しやすい表組みを作るには、HTMLに理解を補助する指定を行う必要があります。行う配慮指定には、以下のような例があり、この例を単独で用いたり、あるいは組み合わせたりすることで配慮につながります。どのような配慮の指定を行うか、以下を参考に検討してください。
【参照】→技術解説書5.2.c「ソリューション」
（必須） □ 表の見出しセルにはthを指定する
（必須） □ セル結合などで、複雑な構造の場合は、scope、headers、id属性で、見出しセルとデータセルの関連を指定する
（必須） □ caption要素で、どのような表か明確に分かるような表題をつける
（必須） □ 表を理解する上で必要な概要や構造に関する情報をsummary属性として記述する
□ その他の配慮を行なう （具体的に： ）
（44ページ）
2-4 フレーム
【対応するJIS項目 5.2.f】
※基本検討シート中の「2-4 フレーム」で「フレームは使用しない」を選択した場合は、この項の詳細検討は不要です。
フレームを使ったページは、音声ブラウザの利用者や、キーボード操作をしている利用者の操作が煩雑になり、複雑な構成の場合は内容の理解が難しくなる可能性があります。まずは、フレームを使用した場合に発生する問題を理解しましょう
【参照】→技術解説書5.2.f「背景と問題点」「技術解説」
■ 対応方針 （基本検討結果）
・フレームを用いるので、各フレームの役割が明確になるよう配慮する
* 検討１→ フレーム使用時に必要な配慮を理解しましょう
* 検討２→ フレーム構成を決め、配慮記述の内容を決めましょう
検討１ フレーム使用時に必要な配慮を理解しましょう
フレームを使用する場合は、各フレームの役割を利用者に分かりやすく伝えることが重要です。また、noframes要素でフレームに対応していない利用者向けの記述を行います。
【参照】→技術解説書5.2.f「ソリューション」
検討２ フレーム構成を決め、配慮記述の内容を決めましょう
作成するページのフレーム構成図を作り、各フレームのタイトルと、noframesの記述内容を決めてください。
【参照】→技術解説書5.2.f「ソリューション」
◆フレーム構成図
◆framesetのHTMLでの記述
noframesの記述内容：
frame要素内のtitle属性の内容：
◆各フレームのHTMLでの記述
フレーム１のtitle要素の内容：
フレーム２のtitle要素の内容：
フレーム３のtitle要素の内容：
（46ページ）
2-5 現在位置の情報
【対応するJIS項目 5.2.g】
サイトを利用しているうちに、今現在のページがサイトの中のどのあたりに位置するのか分からなくなることがあります。
【参照】→技術解説書5.2g「背景と問題点」「技術解説」
■ 対応方針 （基本検討結果）
・現在位置を示す情報やリンクを各ページに表示する
* 検討１→ 階層などの構造を示す方法について検討しましょう
* 検討２→ 採用する方法についてアクセシビリティを確認しましょう
検討１ 階層などの構造を示す方法について検討しましょう
閲覧者がページの中で迷子にならないように、またなったとしても適切な場所からやり直せるようにすることが重要です。以下の例のような方法を単独で用いたり、あるいは組み合わせたりすることで、閲覧者に情報や移動手段を提供します。採用する方法を具体的に検討してください。
【参照】→技術解説書5.2.g「技術解説」「ソリューション」
【例】
* トップページおよび、後方、前方へのリンク
* サイトマップ
* ナビゲーションバーやパンくずリスト
◆階層などの構造を示す方法
◆分かりやすい方法かどうか複数人で確認しましょう。
【注目ポイント例】
* サイトの中のどのあたり位置するかが容易に理解できるでしょうか？
* 基点となるページ（例えばトップページやサイトマップなど）移動できるでしょうか？
* 上記２点は、どの情報グループのどの階層に進んだときでも、可能でしょうか？
* サイト内の情報のグループ分け、階層の深さなどと考え合わせて破綻しないでしょうか？
* 他のサイトを参照してみて、より良い方法は無いでしょうか？
検討２ 採用する方法についてアクセシビリティを確認しましょう
階層などの構造を示す方法にアクセシビリティの配慮が無いと、利用者がうまく理解できない、あるいは移動できない可能性があります。
◆分かりやすさの原因がないかどうか複数人で確認しましょう。
【注目ポイント例】
* 視覚的に分かりやすい位置に、分かりやすい表現で配置されているでしょうか？
* 音声で聞いた場合でも、視覚的に理解するのと同じように、階層などの構造を把握できるでしょうか？
* 色の識別ができない場合でも、階層などの構造を把握できるでしょうか？
（48ページ）
2-6 新しいウィンドウ、自動更新
【対応するJIS項目 5.3.e】
※基本検討シート中の「2-6 新しいウィンドウ、自動更新」で「新しいウィンドウを開いてページを表示することはしない」を選択した場合は、この項の詳細検討は不要です。
利用者が意図していない状態で新しいウィンドウが開くと、そもそも新しいウィンドウやタブが開いた事に気づかなかったり、勝手に開いた事に戸惑ったりする場合があります。
【参照】→技術解説書5.3.e「背景と問題点」「技術解説」
■ 対応方針 （基本検討結果）
・新しいウィンドウを開くケースと告知方法についてルール化する
* 検討１→ 新しいウィンドウを開くケースについて検討しましょう
* 検討２→ 新しいウィンドウが開くことを告知するルールについて検討しましょう
検討１ 新しいウィンドウを開くケースについて検討しましょう
新しいウィンドウを開くことで利用者に利便性がある場合もあります。どのような場合に新しいウィンドウを開く設計にするか予めルールを検討してください。
【参照】→技術解説書5.3.e「背景と問題点」「技術解説」
（新しいウィンドウを開く場合、利用者にとっての利便性）
◆分かりにくさや混乱の原因がないかどうか確認しましょう。
【参照】→技術解説書5.3.e「背景と問題点」「技術解説」
【注目ポイント例】
* 新しいウィンドウを開くことで、利用者の立場に立ってどのような利便性があるでしょうか
* 他のサイトへのリンクに対して、提供サイトのウィンドウを残すことを目的に新しいウィンドウを開いていませんか？
* 新しいウィンドウを開かないと得られない利便性がありますか？
検討２ 新しいウィンドウが開くことを告知するルールについて検討しましょう
新しいウィンドウが開く箇所では、リンクを選択する前に利用者がその事を認識できるように、告知する必要があります。サイト全体で統一のルールを決めてください。
【例】
* 新しいウィンドウを開くリンクテキスト内にメッセージを含める（別ウィンドウ 新しいウィンドウで表示 など）
* 新しいウィンドウを開くリンクテキストや画像に、統一の図記号を添える(alt要素に統一のメッセージを入れること)
◆新しいウィンドウの告知ルール
（50ページ）
2-7 共通メニュー
【対応するJIS項目 5.3.f】
ウェブサイトやウェブシステム内では、一貫した仕組みで、基本的な機能を提供することが大切です。
【参照】→技術解説書5.3.f「背景と問題点」
■ 対応方針 （基本検討結果）
・各ページに、スタイルや表記が共通の基本操作部分を表示する
* 検討１→ 提供する基本操作部分の仕組みと、配置を検討しましょう
* 検討２→ 基本操作部分の言葉の内容や見映え等の表現を検討しましょう
検討１ 提供する基本操作部分の仕組みと、配置を検討しましょう
サイトで用意する基本操作部の仕組みを記述してください。
【参照】→技術解説書5.3.f「背景と問題点」
【仕組みの例】
* サイト内を移動するメニューの仕組み（全ページ共通メニュー、コーナー内共通メニューなど）
* ページ内を移動するサイト内共通のリンクの仕組み（目次、ページの先頭へ戻るリンクなど）
◆提供する基本操作部分の仕組み
◆基本操作部分は、一貫したルールで配置されることが重要です。レイアウトを記述してください。
【参照】→技術解説書5.3.f「ソリューション」
◆レイアウト
◆レイアウトの意図
◆分かりにくさの原因になりそうなことがないかどうか、以下のような視点で複数人で確認しましょう。
【注目ポイント例】
* メニューやリンクの仕組みは複雑すぎたり、足りなすぎたりしませんか
* ページ内での表示位置に一貫したルールがあるか、そのルールは分かりやすいですか
検討２ 基本操作部分の言葉の内容や見映え等の表現を検討しましょう
基本操作部分の表現は一貫性のあるルールが重要です。用意する仕組みについて、言葉の内容と見映えをどのように設定するか、具体的な方針を記述してください。
【参照】→技術解説書5.3.f「ソリューション」
【見映えの例】
* 画像やレイアウト枠などの形
* 色の使い方
* その他装飾表現
◆メニュー項目、言葉、見映え：
◆ページ内リンク（置く場合）の言葉、見映え：
◆分かりにくさの原因になりそうなことがないかどうか、以下のような視点で複数人で確認しましょう。
【注目ポイント例】
* メニュー項目数は多すぎたり、少なすぎたりしませんか
* メニューやリンクの言葉の内容（画像の場合alt内容含む）の一貫性がありますか
* メニューやリンクの色や形などの見映えの一貫性がありますか
* 表現と反応の対応関係の一貫性がありますか
（53ページ）
2-8 メニュー読み飛ばし機能
【対応するJIS項目 5.3.h】
※基本検討シート中の「2-8 メニュー読み飛ばし機能」で「必要性が無いため、基本メニューの読み飛ばし機能は提供しない」を選択した場合は、この項の詳細検討は不要です。
各ページ共通に表示されるナビゲーションバーやメニューなどが、ページの前半にあると、音声ブラウザや、TABキーでリンクを移動させるような利用者は、各ページを表示するたびにそれを読み上げ、本文を読み上げるまでに時間がかかってしまいます。
【参照】→技術解説書5.3.h「背景と問題点」
■ 対応方針 （基本検討結果）
・基本メニューの読み飛ばし機能を提供する
* 検討１→ 配慮が必要となるリンクやメニューを検討しましょう
* 検討２→ 配慮の実現方法を選択しましょう
検討１ 配慮が必要となるメニューを検討しましょう
音声ブラウザなどで利用する場合に、わずらわしさや非効率の原因になりそうなナビゲーションやリンク群などがあるかどうか検討してください。
【参照】→技術解説書5.3.h「背景と問題点」
◆配慮が必要となるメニュー
検討２ 配慮の実現方法を選択しましょう
今回採用するナビゲーションスキップの実現方法を検討してください。
【参照】→技術解説書5.3.h「技術解説」「ソリューション」
【例】
* 検討２のメニューの最初に、本文の最初へジャンプするページ内リンクを用意する
* メニューをHTMLの最後の方に記述し、読み上げソフトでは最後に読み上げられるようにする
* メニュー内のリンク数、文字の量を減らす
◆配慮の実現方法
（55ページ）
2-9 やり直し手段
【対応するJIS項目 5.3.i】
※基本検討シート中の「2-9 やり直し手順」で「利用者が情報を入力する機能（入力フォーム、プルダウンメニュー、ラジオボタン、チェックボックス）は設けない」を選択した場合は、この項の詳細検討は不要です。
特にキーボードやマウス操作が難しい利用者や、画面が見えにくい利用者、加齢のため認知や理解力が低下した利用者にとっては、誤操作をやり直せたり、前のページに戻れたりすることが容易に行えることが重要です。
【参照】→技術解説書5.3.i「背景と問題点」
■ 対応方針 （基本検討結果）
・全てのページで、ブラウザの「戻る」ボタンまたはコンテンツのリンクによって前のページに戻れるようにする
（以下は基本検討において選択された場合）
□ 利用者が情報を入力する機能（入力フォーム、プルダウンメニュー、ラジオボタン、チェックボックス）がある場合、入力内容の確認や入力エラーの確認、やり直しが簡単にできるようにする
* 検討１→ 全てのページの設計が、利用者が前のページに戻れるかを確認しましょう
* 検討２→ （入力機能がある場合）入力内容の確認やエラーの確認、やり直しが出来るようにしましょう
検討１ 全てのページの設計が、利用者が前のページに戻れるかを確認しましょう
設計上、利用者が前のページに戻れない設計箇所がないか確認してください。
【参照】→技術解説書5.3.i「技術解説」「ソリューション」
【注目ポイント例】
* 全てのページで、ブラウザの戻る機能、またはウェブコンテンツ自身の前のページに戻る機能のいずれかを利用者が利用できるようになっていますか？
* セッション管理などの理由で、ブラウザの戻る機能が有効に機能しないページがありませんか？
検討２ （入力機能がある場合）入力内容の確認やエラーの確認、やり直しが出来るようにしましょう
入力機能での配慮の方法を検討してください。
【参照】→技術解説書5.3.i「技術解説」「ソリューション」
【例】
* 入力後、データの確定（送信など）前に、利用者自身が入力内容を再確認できるようにする
* 入力ページに戻った場合、入力済みのデータが消去されないようにする
* サイトで入力内容をチェックする場合、入力のエラーメッセージは、こまめにその都度表示する
* 申込み内容を表示し、印刷できるようにする
* 送信後に、利用者に対してフィードバックを行う
◆入力機能での配慮の方法
（57ページ）
2-10 形や位置
【対応するJIS項目 5.5.b】
「○」「×」などの記号文字は、視覚的に分かりやすく情報を伝えるために使用されます。しかし、音声読み上げソフトでは意図したとおりに読み上げられない場合があり、情報が伝わらない可能性があります。
また、「右のボタン」というように、位置関係だけで情報や操作指示などを示すと、音声読み上げの利用者には意図が伝わらない可能性があります。
【参照】→技術解説書5.5.b「背景と問題点」
■ 対応方針 （基本検討結果）
・情報の識別や指示は、形や位置だけでなく文字等でも分かるようにする
* 検討１→ 配慮の方法について理解しましょう
* 検討２→ サイト内でルール化すべきパターンを洗い出し、ルールを検討しましょう
検討１ 配慮の方法について理解しましょう
記号文字で情報を伝える場合、位置関係で情報や操作指示を示す場合には、音声読み上げでも情報が把握できるように配慮しましょう。
◆配慮の例
* 「○（マル）」「×（バツ）」などの記号文字で情報を伝える場合に、かっこ書きなどで「まる」「ばつ」、「あり」「なし」など、記号の意味をテキストで添える
* 記号文字を画像化して、alt属性で記号の意味の代替を示す
* 位置関係で情報や操作指示を示す場合は、位置が把握できない場合でも把握できるようにテキストを補足する（例：左の送信ボタン）
【参照】→技術解説書5.5.a「技術解説」「ソリューション」
検討２ サイト内での形や位置による表現のパターンを洗い出しましょう
制作の際に混乱を生んだり、配慮が抜けてしまったりしないように、サイト内で該当する表現のパターンを出来るだけ洗い出し、どのように配慮するかルールを決めて起きましょう。
◆サイト内での該当パターンと配慮方針
（分類、該当パターン、配慮方針）
・記号文字で情報と伝えるケース
・位置関係で情報や指示を伝えるケース
（59ページ）
2-11 画像内の文字
【対応するJIS項目 5.5.c】
以下のようなものについて、十分なコントラストがないと読み取りが難しい可能性があります。また、色の組み合わせに配慮が無い場合も読み取りが難しい可能性があります。
* テキストとその背景色
* テキストと背景の画像の色
* 画像やFlashなどの中の文字と背景の色
【参照】→技術解説書5.5.c「背景と問題点」「技術解説」
■ 対応方針 （基本検討結果）
・画像化された文字の背景色と前景色のコントラストにルールを設ける
* 検討１→ 配慮のルールについて検討しましょう
検討１ 配慮のルールについて検討しましょう
コントラスト、色の組み合わせそれぞれについて、配慮のルールを検討しましょう。
◆配慮のルールの設定例
* 制作時にアクセシビリティチェッカーで、コントラストに問題が無いかどうかを確認する
* 制作時にアクセシビリティチェッカーで配色に問題が無いかどうかを確認する
* 制作時にグレースケールで印刷をしてコントラストが読み取りにくく無いかどうかを確認する
* 制作時に複数のスタッフで配色が分かりにくくないかどうかを確認する
【参照】→技術解説書5.5.ｃ「技術解説」「ソリューション」
◆採用する配慮ルール
（分類、配慮ルール）
・コントラスト
・色の組み合わせ
（61ページ）
2-12フォント
【対応するJIS項目 5.6.b】
※基本検討シート中の「2-12 やり直し手順」で「フォントを指定せず、ブラウザで指定されたフォントで表示がされるようにする」を選択した場合は、この項の詳細検討は不要です。
文字のサイズや書体を指定する場合は、読みやすさに配慮して指定する必要があります。高齢者など操作に不慣れな利用者は、読みにくいと感じても文字を大きくする操作が出来ないという場合があります。
【参照】→技術解説書5.6.b「背景と問題点」
■ 対応方針 （基本検討結果）
・フォント指定にルールを設ける
* 検討１→ 配慮のルールについて検討しましょう
検討１ 配慮のルールについて検討しましょう
書体（フォント）、サイズを指定する場合の配慮方針についてルールを決めましょう。特に、ページ本文の文章部分などの指定は、読みやすさを十分考慮してください。
【参照】→技術解説書5.6.b「技術解説」「ソリューション」
◆配慮の方針例
* フォントサイズ指定が小さくなりすぎないよう指定サイズの下限を設定する（80%以下は指定しないなど）
* フォントを指定する場合は、明朝系ではなくゴシック系のフォントを選択する
◆文章の本文部分などで用いる文字の指定 （例： CSSで105%、フォント指定はしない）
◆その他の箇所に関する文字指定方法のルール
（例： 80%以下を指定しない。見出しに相当する箇所は110%以上を指定する。いずれもフォントは指定しない）
◆設定したルールについて配慮が問題ないかどうか確認してみましょう
ルールに基づいたデモページやテンプレートを作成し、複数の人で読みにくくないかどうかを確認してみましょう。できるだけ、多くの人数、多くの年齢層から意見を求め、可能であれば、視覚に障害のある方の意見を求めましょう。
（63ページ）
2-13 音の再生
【対応するJIS項目 5.7.a、5.7.b】
※基本検討シート中の「2-13 音の再生」で「音による情報提供は行わない」を選択した場合は、この項の詳細検討は不要です。
音を自動的に再生すると、意図していない利用者は、驚いてしまいます。一般にはその場合に必要に応じて音量を下げますが、聴覚に障害のある場合は音がなっていることに気づかずに周りの人などに迷惑がかかってしまうこともあります。また、音声読み上げソフトで利用している場合は、自動再生される音と、音声読み上げソフトの音が重なってしまい正確に情報を得られなくなります。
【参照】→技術解説書5.7.a「背景と問題点」、5.7b「背景と問題点」
■ 対応方針 （基本検討結果）
・音による情報提供を行うので、必要な配慮をルール化する
* 検討１→ 配慮の基本方針について検討しましょう
* 検討２→ （自動的に再生する場合）配慮のルールについて検討しましょう
検討１ 配慮の基本方針について検討しましょう
音声で情報を提供する場合に自動再生をせず、利用者の意思で再生できるように設計することで、上記の問題を回避できます。
また、音声で情報提供する場合は、利用者が再生・停止、音量の調節などの操作を行えるように設計する必要があります。
【参照】→技術解説書5.7.a「技術解説」「ソリューション」、5.7.b「技術解説」「ソリューション」
◆bgsoound要素
（必須） □ 特定ブラウザの独自の拡張属性であるbgsound要素を使用しない
◆自動再生の有無（どちらかを選択）
（推奨） □ ページを表示した時、自動的に再生されないように設計する
□ 検討１の理解を踏まえた上で、それでもなお自動的に再生する必要性があるため、自動的に再生する場合の配慮をルール化する（検討３へ）
◆利用者による調整
（必須） □ 再生、停止（可能であれば一時停止）、音量調節などのコントロールパネルを表示できるプラグインを採用する
（必須） □ コントロールパネルを意図的に隠す設計にはしない
検討２ （自動的に再生する場合）配慮のルールについて検討しましょう
自動的に音声を再生することが不可欠な場合は、音の聞こえない利用者にも配慮しその事を明示しましょう。
【参照】→技術解説書5.7.a「技術解説」「ソリューション」
◆配慮の方針例
* 分かりやすい位置（ページの先頭部分やタイトルなど）に、音が自動再生されていることを明示する
* 音楽を再生するプラグインのコントローラーを表示させ、音が再生されていることを伝える
（65ページ）
2-14 コンテンツの変化や移動
【対応するJIS項目 5.8.a】
※基本検討シート中の「2-14 コンテンツの変化や移動」で「変化や移動する画像、テキストなどは使わない」を選択した場合は、この項の詳細検討は不要です。
画像やテキストが移動したり表示が変化したりすると、見えにくい利用者や認知あるいは記憶に障害のある利用者、高齢者などが、内容を認識できなかったり、コンテンツへ集中できない場合があります。
【参照】→技術解説書5.8.a「背景と問題点」
■ 対応方針 （基本検討結果）
・変化や移動する画像、テキストなどを使うので、変化や移動の方法、スピードなどにルールを設ける
* 検討１→ 配慮のルールについて検討しましょう
検討１ 配慮のルールについて検討しましょう
画像やテキストの移動や変化は、見た目のインパクトや情報のアピールから採用されることが多いですが、その事で逆に読み取りにくくなったり集中できなくなったりする利用者がいることを念頭に、利用する場合のルールを定めましょう。
【参照】→技術解説書5.8.a「技術解説」「ソリューション」
◆文字のスクロール（移動）についての配慮方針
（必須） □ 規格外要素であるmarquee要素は使用しない
（推奨） □ 文字のスクロールは一切行わない
□ 利用者が読み取るべき情報はスクロールさせない
□ 文字のスクロールを一定時間行った後、その文字を静止させる
□ 文字のスクロールのスピードを緩やかに設定する
◆画像や文字の点滅、変化についての配慮方針
（必須） □ 規格外要素であるblink要素は使用しない
（推奨） □ 利用者が読み取るべき情報は点滅や変化をさせない
□ 一定時間点滅や変化を行った後、静止させる
□ 変化を出来るだけ緩やかに設計する
□ 変化するコンテンツが読み取りにくくないかどうか、利用者の評価を得る
（67ページ）
2-15 点滅
【対応するJIS項目 5.8.b】
※基本検討シート中の「2-15 点滅」で「画面の点滅は行わない」を選択した場合は、この項の詳細検討は不要です。
テレビなどの事例で知られるように、画面の明滅（早い周期での点滅）によって光感受性発作（光源性てんかん）を誘発することがあります。（部分的な点滅でも拡大して表示している人がいるため同様の危険性を伴います）
【参照】→技術解説書5.8.b「背景と問題点」
■ 対応方針 （基本検討結果）
・点滅するコンテンツを用意するので、周期などにルールを定める
* 検討１→ 配慮のルールについて検討しましょう
検討１ 配慮のルールについて検討しましょう
検討１を踏まえ、画面の全体や一部を明滅させるような表現を行う表現は原則として避けてください。事情によりどうしても採用する必要がある場合は、配慮が必要です。
【参照】→技術解説書5.8.b「技術解説」「ソリューション」
◆配慮方針
（必須） □ 画面全体を１秒間に２回以上明滅させない
（必須） □ 彩度の高い赤の明滅、コントラストの強い画面の反転は行わない
（必須） □ 画面全体を占めるような、しま、渦巻き、同心円といった規則的なパターンを使用しない
□ 明滅する部分は、画面内の出来るだけ小さい範囲内に留める
（68ページ）
2-16 使用する言語
【対応するJIS項目 5.9.a】
言語を指定することで、一般のブラウザの表示や、音声読み上げソフトの読みあげが正しく行われるようになります。
【参照】→技術解説書5.9.a「背景と問題点」
■ 対応方針 （基本検討結果）
・各ページできちんと言語指定を行う
・ページ内での言語の切り替えについてルール化する
* 検討１→ 配慮のルールについて検討しましょう
検討１ 配慮のルールについて検討しましょう
各ページ共通で行う言語指定、文書の途中で異なる言語が出てくる場合の指定、それぞれについてルール化しましょう。
【参照】→技術解説書5.9.a「技術解説」「ソリューション」
◆各ページ共通で行う言語指定
＜HTMLの場合＞
（必須） □ HTML要素にlang属性で、標準として使用される言語を指定する
（必須） □ ウェブサーバの設定で指定されるHTTPのContent-Languageヘッダでの言語指定を上記と一致させる
＜XHTML1.0の場合＞
（必須） □ lang属性と、xml:lang属性で、標準として使用される言語を指定する
（必須） □ ウェブサーバの設定で指定されるHTTPのContent-Languageヘッダでの言語指定を上記と一致させる
＜XHTML1.1の場合＞
（必須） □ xml:lang属性で、標準として使用される言語を指定する
（必須） □ ウェブサーバの設定で指定されるHTTPのContent-Languageヘッダでの言語指定を上記と一致させる
◆文書の途中で異なる言語が出てくる場合の指定についての方針例
* 文書内で、指定された言語とは異なる言語を用いる箇所で、lang属性を用い言語の切り替わりを指定する
* 原稿を制作する担当者が、配慮の必要性を判断する
* HTML化作業を行う担当者が、配慮の必要性を判断する
* 必要性の判断を行うのではなく、原則として全ての切り替わり箇所で指定する
（70ページ）
2-17 外国語
【対応するJIS項目 5.9.b】
子供や高齢者などをはじめ、外国語を理解できない人や困難な人がいます。
【参照】→技術解説書5.9.b「背景と問題点」
■ 対応方針 （基本検討結果）
・外国語の使用についての配慮のルールを定める
* 検討１→ 配慮のルールについて検討しましょう
検討１ 配慮のルールについて検討しましょう
ナビゲーションメニューや、トップページの見出しなどの重要な箇所では、特に配慮が必要です。
【参照】→技術解説書5.9.b「技術解説」「ソリューション」
◆配慮方針の例
* ナビゲーションメニューやトップページの見出しなど重要な箇所では、外国語を用いず日本語で表記する
* 外国語でなく日本語に置き換えられる表現は、日本語で表記する
* 外国語を使用する場合は、ページの最初に出現した箇所で、カッコ書きで日本語での言い換えや解説を沿える
* 原稿を制作する担当者が、配慮の必要性を判断する
* HTML化作業を行う担当者が、配慮の必要性を判断する
◆採用する配慮の方針
（71ページ）
2-18 省略語、専門用語等
【対応するJIS項目 5.9.c】
一般的でない表現は、理解できない人が大勢います。また、音声読み上げソフトなどで正しく読み上げられず理解が難しくなる場合があります。
【参照】→技術解説書5.9.c「背景と問題点」「技術解説」
■ 対応方針 （基本検討結果）
・省略後や専門用語、流行語、俗語などの使用についての配慮のルールを定める
* 検討１→ 配慮のルールについて検討しましょう
検討１ 配慮のルールについて検討しましょう
HTML表記、本文、それぞれでの配慮が考えられます。
【参照】→技術解説書5.9.c「技術解説」「ソリューション」
◆配慮方針の例
* ナビゲーションメニューやトップページの見出しなど重要な箇所では、省略語、専門用語を用いない
* 原稿を制作する担当者が、配慮の必要性を判断する
* HTML化作業を行う担当者が、配慮の必要性を判断する
* ページ内で始めて使用した箇所で、カッコ書きで正式名称や解説を沿える
* ページ内や別ページに用語解説を用意し、ページ内で始めて使用した箇所からリンクする
* ページ内で始めて使用した箇所で、abbr要素またはacronym要素によって正式な名称等を指定する
◆採用する配慮の方針
（72ページ）
2-19 読みの難しい言葉
【対応するJIS項目 5.9.d】
固有名詞、難しい漢字など、読みの難しい言葉を使用する必要がある場合がありますが、読めなかったり、混乱したりしてしまう利用者が出る可能性があります。
【参照】→技術解説書5.9.d「背景と問題点」
■ 対応方針 （基本検討結果）
・読みの難しい漢字の使用についての配慮のルールを定める
* 検討１→ 配慮のルールについて検討しましょう
検討１ 配慮のルールについて検討しましょう
何らかの方法で、読み仮名を提供することで、読みやすくなったり、音声読み上げソフトでの情報の把握が改善されたりする可能性があります。サイト内で統一のルールを定めましょう。
【参照】→技術解説書5.9.d「技術解説」「ソリューション」
◆配慮方針の例
* 原稿を制作する担当者が、読み仮名の必要性を判断する
* HTML化作業を行う担当者が、読み仮名の必要性を判断する
* カッコ書きなどで読み仮名を示す
* ruby要素を使って読み仮名を示す（XHTMLの場合）
◆採用する配慮の方針
（73ページ）
2-20 図などによる分かりやすい表現
【対応するJIS項目 5.9.f】
図記号や、アイコン、イラスト、音声、動画、などを効果的にテキストと組み合わせると、一般の利用者はもとより知的な障害のある場合も、理解が容易になる場合があります。
【参照】→技術解説書5.9.f「背景と問題点」
■ 対応方針 （基本検討結果）
・文章以外の表現を併用することで分かりやすく出来る箇所が無いか検討する
* 検討１→ 配慮の視点について確認しましょう
検討１ 配慮の視点について確認しましょう
【参照】→技術解説書5.9.f「技術解説」「ソリューション」
◆注目ポイント例
テキストだけで説明されていて分かりにくく感じる箇所はないでしょうか？
以上
|
