「アクセシビリティ ガイドライン」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし |
編集の要約なし |
||
| (同じ利用者による、間の7版が非表示) | |||
| 1行目: | 1行目: | ||
<div id="manual"> | <div id="manual"> | ||
<p>光画デジタルサプライのアクセシビリティ指針です。</p> | <p>光画デジタルサプライのアクセシビリティ指針です。</p> | ||
==プロセスに関する指針【5項目】== | 【関連ページ】[[アクセシビリティ]]、[[ユーザビリティ]] | ||
==1.プロセスに関する指針【5項目】== | |||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]]'''企画・設計・制作・運営のすべてのプロセスで、アクセシビリティを検討するための工程を組み込む。'''→[[アクセシビリティ解説1-1]] | ||
'''企画・設計・制作・運営のすべてのプロセスで、アクセシビリティを検討するための工程を組み込む。''' | |||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''ウェブサイトの関係者全員が、アクセシビリティに関する基本的な知識や情報を共有できるようにする。''' | '''ウェブサイトの関係者全員が、アクセシビリティに関する基本的な知識や情報を共有できるようにする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
''' | '''利用するユーザーの目的、要求を収集・把握し、ウェブサイトに反映できるようにする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''できるだけ多くの機器やソフトで操作・利用できるように、利用環境を定める。''' | '''できるだけ多くの機器やソフトで操作・利用できるように、利用環境を定める。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr003.gif]] | [[画像:pr003.gif]] | ||
'''ウェブコンテンツが将来に向けての継続的な耐久性を持つよう、後方互換性に注意しながら、設計・制作する 。''' | '''ウェブコンテンツが将来に向けての継続的な耐久性を持つよう、後方互換性に注意しながら、設計・制作する 。''' | ||
</div> | </div> | ||
| 35行目: | 35行目: | ||
==設計・ページ制作に関する指針【11項目】== | ==2.設計・ページ制作に関する指針【11項目】== | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''ページタイトル(title要素)は、利用者がページの内容と役割を識別できるタイトルを付ける。''' | '''ページタイトル(title要素)は、利用者がページの内容と役割を識別できるタイトルを付ける。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''文字の可読性を確保するため、文字色と背景色のコントラストを充分にとる。''' | '''文字の可読性を確保するため、文字色と背景色のコントラストを充分にとる。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
''' | '''リンクであることが、見ただけで分かるようにする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''リンクは、リンク先の内容や役割があらかじめ分かるように表現する。''' | '''リンクは、リンク先の内容や役割があらかじめ分かるように表現する。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''サイト内において、ナビゲーションの位置、出現順、機能、表現(文言・形状・色彩・配置)に一貫性をもたせる。''' | '''サイト内において、ナビゲーションの位置、出現順、機能、表現(文言・形状・色彩・配置)に一貫性をもたせる。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''メニューの項目数(選択肢)が多い場合、分かりやすい並び順にするか、階層化、グループ化により、一度に把握しなければならない項目数を減らす。''' | '''メニューの項目数(選択肢)が多い場合、分かりやすい並び順にするか、階層化、グループ化により、一度に把握しなければならない項目数を減らす。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''フレームは使用不可とする。''' | '''フレームは使用不可とする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''コンテンツの内容を理解・操作するのに必要な情報は、色のみに依存せず、文字や模様などを併用する。''' | '''コンテンツの内容を理解・操作するのに必要な情報は、色のみに依存せず、文字や模様などを併用する。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
''' | '''利用者がサイト構成を把握しやすいように、サイト内での共通ナビゲーションやサイトマップなどを設ける''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''現在表示されているページが、サイト構造内のどこに位置しているかを容易に把握できるようにする。''' | '''現在表示されているページが、サイト構造内のどこに位置しているかを容易に把握できるようにする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''横方向のスクロールが発生しないようにする。''' | '''横方向のスクロールが発生しないようにする。''' | ||
</div> | </div> | ||
| 97行目: | 97行目: | ||
==3.操作に関する指針【6項目】== | |||
==操作に関する指針【6項目】== | |||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''特定のデバイス(マウスだけ)に依存せず、少なくともキーボードでも、すべての操作ができるようにする。''' | '''特定のデバイス(マウスだけ)に依存せず、少なくともキーボードでも、すべての操作ができるようにする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''同一サイト内へのリンクは、同じウィンドウで表示し、新たなウィンドウを開くことは極力しない。''' | '''同一サイト内へのリンクは、同じウィンドウで表示し、新たなウィンドウを開くことは極力しない。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''利用者の意思に反して、表示中のページを自動更新することや、自動的に他のページへ移動することはしない。やむをえず移動する場合、あらかじめその旨を告知する。''' | '''利用者の意思に反して、表示中のページを自動更新することや、自動的に他のページへ移動することはしない。やむをえず移動する場合、あらかじめその旨を告知する。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''ダウンロードするデータは、ファイル形式・ファイルサイズを明記する。''' | '''ダウンロードするデータは、ファイル形式・ファイルサイズを明記する。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
''' リンクのある文字や画像は、クリックしやすいように充分な面積にし、誤操作しないように充分な間隔をあける。''' | ''' リンクのある文字や画像は、クリックしやすいように充分な面積にし、誤操作しないように充分な間隔をあける。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''ブラウザの基本機能を無効にしたり(右クリックの禁止等)、アドレスバー、ステータスバー等のコントロールを変更しないようにする。''' | '''ブラウザの基本機能を無効にしたり(右クリックの禁止等)、アドレスバー、ステータスバー等のコントロールを変更しないようにする。''' | ||
</div> | </div> | ||
| 135行目: | 132行目: | ||
==4.テキスト・原稿作成に関する指針【6項目】== | |||
==テキスト・原稿作成に関する指針【6項目】== | |||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''文字サイズ、フォントを利用者がブラウザ上で変更できるようにする。''' | '''文字サイズ、フォントを利用者がブラウザ上で変更できるようにする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''見栄え調整のため、日本語(単語)にスペースや改行を挿入しない。''' | '''見栄え調整のため、日本語(単語)にスペースや改行を挿入しない。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''機種依存文字(丸付き文字や外字など)は使用しない。''' | '''機種依存文字(丸付き文字や外字など)は使用しない。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''記号や省略表記を使用する場合は、音声での読み上げに配慮する。''' | '''記号や省略表記を使用する場合は、音声での読み上げに配慮する。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr003.gif]] | [[画像:pr003.gif]] | ||
'''できるだけ簡潔な文章とし、適度に見出しを付けることで、読みやすくする。''' | '''できるだけ簡潔な文章とし、適度に見出しを付けることで、読みやすくする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr003.gif]] | [[画像:pr003.gif]] | ||
'''一般の利用者にとって、理解しにくい言葉(外国語・専門用語・略語・社内用語など)を多用しない。''' | '''一般の利用者にとって、理解しにくい言葉(外国語・専門用語・略語・社内用語など)を多用しない。''' | ||
</div> | </div> | ||
| 172行目: | 166行目: | ||
==画像・ビジュアルに関する指針【5項目】== | ==5.画像・ビジュアルに関する指針【5項目】== | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''すべての画像には、画像の内容を示した適切な代替テキスト(alt属性)をつける。''' | '''すべての画像には、画像の内容を示した適切な代替テキスト(alt属性)をつける。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''単純な文字の画像化は最小限の使用とし、可能な限りテキストを用いる。''' | '''単純な文字の画像化は最小限の使用とし、可能な限りテキストを用いる。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''画面全体が短時間で連続的に変化するような表現など、光源性てんかんを誘発するおそれのあるビジュアルを用いない。'''<br> | '''画面全体が短時間で連続的に変化するような表現など、光源性てんかんを誘発するおそれのあるビジュアルを用いない。'''<br> | ||
※点滅、スクロールの速いもの、色のコントラストが極端に変わるものなど。 | ※点滅、スクロールの速いもの、色のコントラストが極端に変わるものなど。 | ||
| 190行目: | 184行目: | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''文字を画像化する場合は、書体・サイズ・コントラストを考慮し、読みやすくする。''' | '''文字を画像化する場合は、書体・サイズ・コントラストを考慮し、読みやすくする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr003.gif]] | [[画像:pr003.gif]] | ||
'''文章だけで分かりにくい内容は、分かりやすい絵や図、動画などを用いて表現する。''' | '''文章だけで分かりにくい内容は、分かりやすい絵や図、動画などを用いて表現する。''' | ||
</div> | </div> | ||
| 204行目: | 198行目: | ||
==フォームに関する指針【7項目】== | ==6.フォームに関する指針【7項目】== | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''フォームに入力する内容は、必要最小限にする。''' | '''フォームに入力する内容は、必要最小限にする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''フォームはラベルとコントロールを正しく関連付ける。''' | '''フォームはラベルとコントロールを正しく関連付ける。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''フォームの選択肢が多い場合は、グループ化によって情報をわかりやすく示す。''' | '''フォームの選択肢が多い場合は、グループ化によって情報をわかりやすく示す。''' | ||
</div> | </div> | ||
| 226行目: | 220行目: | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''利用者が誤った操作(エラー)をすることを考慮し、簡単に元の状態に戻すことのできる手段を提供する。''' | '''利用者が誤った操作(エラー)をすることを考慮し、簡単に元の状態に戻すことのできる手段を提供する。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''入力した内容は、送信前に利用者が確認・修正できるようにする。''' | '''入力した内容は、送信前に利用者が確認・修正できるようにする。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr003.gif]] | [[画像:pr003.gif]] | ||
'''フォームには時間制限を設けない。やむをえず、制限時間を作る場合は事前に利用者に告知する。''' | '''フォームには時間制限を設けない。やむをえず、制限時間を作る場合は事前に利用者に告知する。''' | ||
</div> | </div> | ||
| 243行目: | 238行目: | ||
==7.PDFに関する指針【2項目】== | |||
==PDFに関する指針【2項目】== | |||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''PDFへのリンクは、PDFであることを示し、容量が大きい場合はあわせて表記する。''' | '''PDFへのリンクは、PDFであることを示し、容量が大きい場合はあわせて表記する。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''PDFでの情報提供においては、可能な限り、HTML(XHTML)版をあわせて提供する。もし、提供困難な場合は、文書の要約の提供を検討する。''' | '''PDFでの情報提供においては、可能な限り、HTML(XHTML)版をあわせて提供する。もし、提供困難な場合は、文書の要約の提供を検討する。''' | ||
</div> | </div> | ||
| 260行目: | 251行目: | ||
==8.特定の技術やプラグインに関する指針【2項目】== | |||
==特定の技術やプラグインに関する指針【2項目】== | |||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''特定の技術やプラグイン(Flash・PDF・Javaアプレットなど)、動画、オーディオの利用が、ユーザーにサービスを提供するに際して、必要かどうか、有効かどうかを検討する。'''</div> | '''特定の技術やプラグイン(Flash・PDF・Javaアプレットなど)、動画、オーディオの利用が、ユーザーにサービスを提供するに際して、必要かどうか、有効かどうかを検討する。'''</div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''特定の技術やプラグイン(Flash・PDF・Javaアプレットなど)で、必要なコンテンツを提供する場合は、代替手段・代替情報も併せて提供する。'''</div> | '''特定の技術やプラグイン(Flash・PDF・Javaアプレットなど)で、必要なコンテンツを提供する場合は、代替手段・代替情報も併せて提供する。'''</div> | ||
==9.音声・映像に関する指針【4項目】== | |||
==音声・映像に関する指針【4項目】== | |||
<div class="example"> | <div class="example"> | ||
[[画像:pr001.gif]] | [[画像:pr001.gif]] | ||
'''音声を使用するときは、テキストなどによる代替コンテンツを用意する。''' | '''音声を使用するときは、テキストなどによる代替コンテンツを用意する。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr003.gif]] | [[画像:pr003.gif]] | ||
'''動画を使用するときは、テキストなどによる代替コンテンツを用意する。''' | '''動画を使用するときは、テキストなどによる代替コンテンツを用意する。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr002.gif]] | [[画像:pr002.gif]] | ||
'''自動的に音声や動画を再生しない。''' | '''自動的に音声や動画を再生しない。''' | ||
</div> | </div> | ||
<div class="example"> | <div class="example"> | ||
[[画像:pr003.gif]] | [[画像:pr003.gif]] | ||
'''音声や動画を提供する場合、利用者側で停止・再生の制御ができるようにする。''' | '''音声や動画を提供する場合、利用者側で停止・再生の制御ができるようにする。''' | ||
</div> | </div> | ||
</div> | </div> | ||
2009年12月24日 (木) 11:03時点における最新版
光画デジタルサプライのアクセシビリティ指針です。
1.プロセスに関する指針【5項目】
企画・設計・制作・運営のすべてのプロセスで、アクセシビリティを検討するための工程を組み込む。→アクセシビリティ解説1-1
2.設計・ページ制作に関する指針【11項目】
3.操作に関する指針【6項目】
4.テキスト・原稿作成に関する指針【6項目】
5.画像・ビジュアルに関する指針【5項目】
6.フォームに関する指針【7項目】
7.PDFに関する指針【2項目】
8.特定の技術やプラグインに関する指針【2項目】