運営するウェブサイトにおいて高齢者・障害者をはじめ全ての人々の利便性に配慮した情報提供を行うため、ウェブページの作成を行う際に注意すべき点について、詳しく解説したものです。運営するウェブサイトを通じて情報提供のさらなる充実を図ることを、本ガイドラインの目的として位置づけます。作成し運営する全てのウェブコンテンツを対象とします。1.3.ウェブアクセシビリティについて「ウェブページを利用するすべての人が、心身の機能や利用する環境に関係なく、ウェブページで提供されている情報やサービスを利用できること」をウェブアクセシビリティといいます。X8341-3:2004)が制定されました。X8341-3:2010として公示されました。その後、WCAG2.0は平成24年10月に「ISO/IEC40500:2010」として勧告されました。X8341-3:2016は、「ISO/IEC40500:2012(WCAG2.0)」と完全一致する形へ改正され、平成28年3月に公示されました。X8341-3:2016の改正公示、および障害者差別解消法の施行を踏まえ、国および地方公共団体等の公的機関のウェブアクセシビリティ対応を支援するための「みんなの公共サイト運用ガイドライン(2016年版)」を平成28年4月に公表しました。X8341-3:2016の適合レベルAAに準拠することが求められています。ウェブサイトを訪れるすべての利用者を配慮の対象とします。本ガイドラインでは、総務省「みんなの公共サイト運用ガイドライン(2016年版)」が求めるJISX8341-3:2016の適合レベルAAを実現することを目標に、ウェブページの作成を行う際注意すべき点を示しています。1.7.ガイドラインの見直し利用者の閲覧環境の変化やウェブページの制作技術の変化などに対応するために、本ガイドラインを年に1回見直しの検討を行うものとします。1.8.職員等への周知ウェブアクセシビリティの必要性や対応方法等について、日々のウェブページ作成・更新において必要な対応を促します。2.情報を探しやすくするための配慮2.1.適切なページタイトルをつけるページの内容を予測できるページタイトルをつける。他のページタイトルと重複しないようにする。ページタイトルは可能な限り簡潔に表現する。2.2.共通のナビゲーションの仕組みを用いる各ページのヘッター・フッターを統一する。ウェブサイトの主要なメニューを共通で配置する。トップページへ移動するリンクや、ページの上端へ移動するリンクなど、同じ機能を有するリンクの名称と見映えをウェブサイト内で統一する。2.3.現在位置を把握するための仕組みを用意する各ページに、現在位置と上位階層への移動手段を示すナビゲーション(階層ナビゲーション=パンくずリスト)を配置する。このナビゲーションの先頭のリンクは「トップページ」という表現で統一する。階層ナビゲーションのうち現在表示しているページの名称には、リンクを指定しない。2.4.複数の検索手段を用意するウェブサイト内の情報検索手段としてキーワード検索機能を各ページで提供する。ウェブサイト内の情報検索手段としてサイトマップを用意し、各ページにリンクを提供する。そのほか、関連するページへのリンクなどを必要に応じて提供する。2.5.文書の見出しを適切に分けるウェブページの作成にあたっては、文書の論理的な構造を意識し、ページ内に配置する情報それぞれに対して、見出しを適切に指定する。見出しは見映えを変えるのではなく、CMSで見出しを設定する。見映えを変えるために、文書の構造に関係なく見出しを設定しない。2.6.箇条書きはHTMLで表現する順番に意味のある箇条書きは、CMSで「番号付き箇条書き」を指定する。順番に意味のない箇条書きは、CMSで「記号付き箇条書き」を指定する。テキストで「○」「」「・」などを行頭へ配置することによって箇条書きを表現しない。3.ウェブサイト内を快適に移動できるようにするための配慮3.1.リンク箇所は、選択と識別のしやすさに配慮するリンクテキストは下線を引き、リンクしていないテキストと識別しやすくする。リンク画像は小さくしすぎないように設定し、クリックできる画像であることを認識しやすい見映えにする。リンクテキスト及びリンク画像は、適切な間隔を空けて配置する。リンクテキスト及びリンク画像は、リンク部分にマウスカーソルを乗せた時や、キーボード操作によってリンクにフォーカス(選択可能領域)を合わせた時に、色が変わるなどの変化をつけることにより、リンク可能な箇所であることを明示する。3.2.リンクの表現は、リンク先を予測できる内容にする原則として、リンク先のページタイトルを利用することとし、長すぎる場合には要約を記載する。「こちら」などの表現は使用しない。リンクテキストは、リンク先のページタイトルと大きく異ならないようにする。3.3.PDFなどウェブページ以外のファイルにリンクを設定する場合は、わかりやすさに配慮するPDFファイル等へのリンクは、ファイル形式と容量を記入し、リンクテキストに含める。ウェブサイト内のリンクと、外部へのリンクを区別する外部のホームページへリンクを張る際には、外部のウェブページへ移動することを予測できるようにする。3.5.リンクは原則として別ウィンドウを開く設定にしないリンクは同一のウィンドウ内で遷移するように設定する。新しいウィンドウを開かせることはしない。外部サイトへのリンクについては、新しいウィンドウで開くものとする。利用者の意図しないポップアップウィンドウは使用しない。新しいウィンドウを開く仕組みを用いる場合は、利用者自身がリンクを選択した時のみ開くようにする。自動的に新しいウィンドウが開く仕組みは用いない。4.情報を見やすくするための配慮4.1.文字色と背景色の組合せ、コントラストに配慮するページ内のテキストや画像などにおいては、文字の色と背景の色の組合せやコントラストに十分配慮する。文字の入った画像などを作成したり、外部業者へウェブページの制作を依頼する際は、文字の色と背景の色の組合せやコントラスト(明暗の差)に十分配慮する。色の組合せやコントラストに問題がないか、チェックツールを用いて確認する。4.2.スタイルシートを適切に使用するレイアウトや文字の大きさ、色などは、原則としてスタイルシートで設定する。スタイルシートに対応していないウェブブラウザで表示した場合でも情報が伝わるようにする。テキストを画像化する場合、スタイルシートで同程度の装飾表現が実現できないか検討し、可能な場合はスタイルシートによって表現する。4.3.文字サイズは利用者が変更できるようにする主要なブラウザの機能で文字サイズが変更できることを確認する。文字サイズを変更できるようにするとともに、文字サイズを変更した場合に、情報が読み取れないほど表示が崩れることがないように作成する。4.4.読みやすい文字サイズ、フォント、行間を指定する5.情報の内容を理解できるようにするための配慮5.1.読みの難しい言葉に読み方を併記する固有名詞や読みの難しい言葉には、読み方を括弧書きで併記する。多用しない5.3.外国語・外来語は多用しない5.4.分かりやすい説明、表現を心がける5.5.データを表すための表組みを分かりやすく作る5.6.レイアウトは読み上げ順に配慮して構成するスタイルシートや、表組みの仕組みを使ってレイアウトする場合は、音声読み上げソフトで読んだ場合に意味が通じるように構成する。5.7.フレームは原則として使用しない5.8.ページの自動更新や自動的な移動は行わないウェブページの内容の自動更新が行われる場合、利用者がそれを停止あるいは非表示できる仕組み、または更新頻度を調整できる仕組みを用意する。ウェブページの内容の自動更新や入力内容の自動送信が行われる場合、そのことが事前に利用者に分かるよう、説明を記載する。6.情報を支障なく読み取れるようにするための配慮6.1.規格及び仕様に準拠する新たにウェブサイトを構築する際には、HTMLやスタイルシートといった使用する技術について、どのバージョンやDTD(文書型定義)で作成するかを、事前に検討し決定する。各ウェブサイトにおいて、決定した規格に従って作成、更新を行う。6.2.言語コードを指定するhtml要素のlang属性またはxml:lang属性に、使用している言語を記述する。ページ内に別の言語を表記する場合に、lang属性を用いて言語を記述する。6.3.文字コードを指定する文字コードutf‐8で作成する。head要素のmeta要素内に、utf‐8と記述する。6.4.機種依存文字は使用しない丸数字やローマ数字は、原則として使用しない。旧字体は、原則として使用しない。6.5.問い合わせ先を表示する各ウェブページの最後に、問い合わせ先を表示する。6.6.単語の間にスペースや改行を挿入しない体裁を整えるため、単語内の文字と文字との途中にスペースや改行を入れない。原稿の中に空白を含む単語があっても、ページを作成する際には削除する。6.7.画像に適切な代替テキストを用意する短い文字情報を含む画像(リンクバナー等)は、画像内に記載されている文字の内容をそのまま代替テキストに入れる。写真やイラスト等の画像を使用する際は、代替テキストに画像で表現している内容を簡潔に表す言葉を入れる。業務の説明図やグラフ、地図など複雑な内容を示している画像の場合は、簡潔な代替テキストを入れた上で、画像近くの本文内に、画像の内容を説明する文章や表を掲載する。装飾や見た目の整形を目的とした、情報として意味のない画像は、音声で読まれないように代替テキストを空(alt=””)にする。リンクが張らの張られている画像には、リンク先の内容を予測できるような代替テキストを指定する。6.8.音声で情報を提供する場合は、音声で伝える情報の内容をテキストで用意する音声で情報を提供する場合は、音声で伝える情報の内容をテキストで掲載する。テキストの準備が難しい場合は、提供内容に関する問い合わせ先を明記する。音声を自動的に再生しない。6.9.動画で情報を提供する場合は、動画で伝える情報の内容をテキストで用意する動画で情報を提供する場合は、以下のいずれかの対応を行う。動画の音声の内容を字幕で提供する。動画の映像で表現されている情報について、動画内で音声による説明(音声ガイド)を提供する。動画で伝える情報の内容をテキストで掲載する。上記の対応が難しい場合は、提供内容に関する問い合わせ先を明記する。外部の動画配信サービスを利用する場合も同様の対応をする。配慮する情報提供はページ本文で行うことを基本とし、PDF形式で提供しなければならない情報かどうか確認する。紙の文書をスキャナーなどで画像として取り込み、PDFに変換したものを提供しない。業者に依頼した印刷物をPDFで掲載する場合は、文字が埋め込まれていることを確認する。PDFを利用できない場合でも内容を把握できるよう、PDFで提供している情報の内容をテキストで掲載する。対応が難しい場合は、提供している内容に関する問い合わせ先を明記する。HTML以外のPDFなどを提供するウェブページでは、無償の閲覧用ソフトのダウンロード案内及びリンクを表示する。6.11.色のみに依存した情報提供はしない情報の意味や位置づけの違いは、色の違いで表現するだけでなく、文字内容などでも違いが分かるようにする。6.12.形または位置のみに依存した情報提供はしない画像には適切な代替テキストを用意し、画像の形や大きさなどを認識できない場合でも、内容を適切に理解できるようにする。記号だけで情報の内容を伝えることは避ける。しても必要な場合は、画像化して配置し適切な代替テキストを用意する。位置の違いで情報の違いを表したり、操作を指示したりしない。7.入力や操作を支障なく行えるようにするための配慮7.1.キーボードだけですべての操作が行えるようにするすべての操作をキーボードで行えるようにする。新規にホームページを作成する場合は、キーボードのTABキーとEnterキーを使って、ホームページ内のリンクを利用できること、入力フォームなどを利用できることを確認する。キーボードのTABキーを使ってホームページ内のリンクやフォームの選択候補(フォーカス)を移動する場合に、情報の意味のつながりや関係性に即した順序で移動するように、リンクやフォームを配置する。キーボード・フォーカスがあたっていることが視覚的に確認できるようにする。7.2.入力フォームはわかりやすく作成する入力フォームを用いたページを作成する際には、以下の内容に配慮する。7.3.フォームの入力内容を確認し、取り消しや修正が可能な仕組みを用意するフォームを作成するときは、利用者が一度入力した内容を確認し、必要に応じて修正してから送信したり、送信を取りやめたりすることができる仕組みを用意する。入力必須箇所や特定の形式での入力が求められている箇所で入力エラーとなった場合に、エラー箇所を一目で分かるように表示する。入力内容の修正を求める場合には、修正が必要な箇所とその修正方法を一目で分かるように表示する。入力したすべての項目を入力しなおすことなく、修正が必要な項目だけを編集できる仕組みを用意する。7.4.閲覧や操作、入力に制限時間を設定しない8.危害や苦痛を与えないための配慮8.1.画面の激しい点滅は行わない画面全体または画面の一部を1秒間に3回より多く点滅させない。8.2.表示内容の移動や変化について注意する原則として表示されているテキスト、あるいはテキストを含む画像を移動させない。複数の画像が一定時間ごとに切り替わり続ける仕組み(スライドショー)を設ける場合は、利用者が一時停止、再生を行えるようにする。