木津川市ホームページ作成ガイドライン

第1章 はじめに

目的

このガイドラインは、木津川市(以下「市」という。)が設置・運営するWebサイト(以下「ホームページ」という。)の作成に関する基準を定めることにより、多様化する閲覧環境において、誰でも支障なく閲覧可能なホームページの作成を目指す。

適用範囲

このガイドラインは、市ホームページのドメイン(city.kizugawa.lg.jp)を使用している機関が設置・運営するホームページに適用する。

基本的姿勢

ホームページの作成にあたっては、使いやすさ、判りやすさ、情報の見つけやすさなど、閲覧者の立場に立ったページづくりを最優先するとともに、正確かつ迅速な情報提供を行うことを基本とする。

第2章 提供内容等

ホームページで提供する内容については、ホームページの原稿を作成する各所属課で決定することとなるが、提供する内容の共通事項については、次のとおりとする。

情報発信のあり方
  • 各所属は、ホームページによる情報発信と広報活動の連携をはかりながら、逐次、ホームページの内容を更新するように努め、更新した内容は市ホームページの新着情報等に反映させること。
  • また、各所属課にてホームページの更新ができる体制を整えること。
個人情報の保護
  • 個人情報については、木津川市個人情報保護条例(平成19年3月12日施行・木津川市条例第8号)等に基づき、漏洩等が生じないよう慎重に対応すること。
  • なお、閲覧者から意見募集を行うなど、個人情報を収集(個人に関する情報の入力が任意である場合を含む。)する場合は、個人情報の取り扱い方針と問い合わせ先を明示すること。
著作権等の処理
  • ホームページに画像、音楽やプログラム等を利用する場合は、著作権の市への帰属を確認するとともに、転載などの著作権の取り扱いに関する情報を明記すること。
  • なお、他者が著作権を有する著作物を利用する場合は、ホームページへの利用についての使用許諾を得るとともに、第三者による複製、引用等に関しての注釈を明記すること。
  • また、人物の画像・映像等を使用する場合は、肖像権を侵害しないこと。
各所属課の記事に明記すべき内容
  • 各所属課の記事は、問い合わせ先部署名、電話番号、所在地、E-mailアドレス等を明記するなど、利用者が問い合わせ等を行えるよう配慮すること。
リンクの設定
  • リンクを設定する場合は、相手先がリンクフリーの場合を除き、相手先が指示した手続きにより承諾を得ること。
    なお、リンクの設定を行った場合は、リンク先の所属名等を明示すること。
  • 次の内容のホームページには、リンクを設定しないこと。
    なお、この基準によりがたい場合は、理由を明示の上、市長公室学研企画課長の承認を得ることとする。(バナー広告等・市の規定・契約によりリンクしたものは除く。)
    • 公共的な性格を持つ団体以外のホームページ
    • 公序良俗に反するホームページ
    • 虚偽のホームページ

第3章 作成基準等

利用環境

ホームページを次のような環境で利用している利用者がいることを考慮し、それぞれの利用環境で支障なく利用できるように配慮すること。

  • 視覚による情報入手が困難な利用者は、音声又は点字を利用している場合がある。
  • 視力が低い又は視野が狭い利用者は、極めて近い距離から画面を見たり、画面を拡大したり、画面の色のコントラストを高くするなどして利用している場合がある。
  • 色の識別が困難な利用者は、色に頼った情報が利用できない場合がある。
  • 聴覚による情報入手が困難な利用者は、字幕や文字による情報を利用している場合がある。
  • 肢体が不自由な利用者は、マウスやキーボードの代わりになる装置を使用している場合がある。
  • 利用者の中には、強い光刺激等を受けた際に、光過敏性てんかん発作を誘発する場合がある。
作成基準

ホームページの作成は、「World Wide Web Consortium(W3C)」の「Web Content Accessibility Guidelines 2.0(WCAG2.0)草案」及び日本工業規格「JIS X 8341-3 高齢者・障がい者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ」(経済産業大臣制定)などに基づき、配慮して作成すること。

なお、この基準によりがたい場合は、理由を明示の上、市長公室学研企画課長の承認を得ること。

誰でもホームページの内容が認識できる(読める)こと
  • 文字以外の情報には、文字による代替説明をつけること
    • 画像には、alt属性や文字による説明をつけること。
    • 行頭記号や罫線の装飾には、スタイルシートを使用すること。
    • 代替説明を必要としない画像には、空のalt属性(alt="")を記述すること。
    • イメージマップを使用する場合は、各領域にalt属性の記述と文字によるリンクを併記すること。
    • script、object、iframe要素を使用する場合は、代替説明もしくは代替リンクをつけること。
  • 文書情報と装飾表現は、切り離せるようにすること
    • マークアップは、見出しや段落、リストなどの情報内容に基づいて記述すること。
    • 見出し(h1~h6)は、文書構造に従って使用すること。
    • 色で識別される情報は、色が表示されなくても認識できるようにすること。
    • 色や文字の大きさなどのページの装飾には、スタイルシートを使用すること。
    • 文字の大きさの単位には、emまたは%を使用すること。
    • インデント、文字位置、文字間隔の設定には、スタイルシートを使用すること。
    • 一つの単語内に空白を挿入して文字を揃えたり、強制改行したりしないこと。
    • ロゴ画像の多用は控え、スタイルシートを用いた文字を使用すること。
    • 整形目的の画像(spacer.gif)などは、使用しないこと。
    • 表には、表題(caption)や見出し(th)などを記述すること。
    • 表は、音声ブラウザなどで正しく情報が利用できるようにすること。
  • 文字は、読みやすい大きさにすること
    • プラグインソフトの説明など補足的な文章を除き、文字の大きさを指定する場合は、一定以上の大きさを指定すること。
    • ロゴ画像を使用する場合は、文字の大きさを一定以上にすること。
  • 文字や画像は、背景と区別しやすくすること
    • 文字の背景には、スタイルシートを使用すること。
    • 文字色と背景色のコントラストは、明確にすること。
    • 文字の背景に、画像や模様を使用しないようにすること。なお、使用する場合は、白黒の濃淡だけで表示される画面で容易に文字が読めるようにすること。
    • 文字色を指定する場合は、背景色も指定すること。
  • 音声は、BGMと区別しやすくすること
    • 音声を流す場合は、BGMを使用しないようにすること。やむを得ず使用する場合は、音声よりも20デシベル以上小さくすること。
誰でもホームページの操作ができること
  • ホームページの操作が、キーボードもしくはキーボード型の装置を使ってできるようにすること
    • ポインティングデバイス、キーボード、音声入力などの装置を使って、ページ間の移動が支障なくできるようにすること。
    • マウスに限定した操作方法ではなく、キーボードなどでも操作できるようにすること。
    • リンク文字やボタンは、選択しやすい大きさにすること。
  • ライブ中継等のリアルタイムイベントを除き、ホームページを読んだり操作したりする時に、時間制限を設けないこと
    • フォームに入力する時に、時間制限を設けないこと。
    • 点滅する文字を使用しないこと。
    • 流れて表示される(スクロール)文字を使用しないこと。
  • 光過敏性てんかん発作の原因になるページは作成しないこと
    • 点滅する文字や画像、色は使用しないこと。
    • しま、渦巻き、同心円などの規則的なパターン模様を、画面の大部分で使用しないこと。
  • 目に負担がかからないようにすること
    • マウス等の動きにあわせて、画面上で背景色や形・大きさが極端に変化する文字や画像は使用しないこと。
    • ページの基本的な背景色は、白もしくは白に近い薄い色を使用し、ページごとに背景色が大きく切り替わらないようにすること。
  • ページ内の位置の確認や移動が容易にできるようにすること
    • サイトの階層構造を提供すること。
    • ページの現在位置を > 等で階層表示すること。
    • 音声ブラウザなどでナビゲーションを読み飛ばせるようにするため、ページの最初に本文へのリンクを提供すること。
    • 目次やサイトマップを提供すること。
    • タイトル(title要素)は、ページの内容が具体的に伝わるものとし、ページごとに固有のタイトルをつけること。
    • フレーム(frame)は、使用しないようにすること。やむを得ず使用する場合は、によること。
    • 絵や図形を記号文字を使って描画すること(アスキーアート)は、控えること。
  • 利用者が操作を誤らないようにし、誤った操作をした場合でも、利用者に通知したり、修正したりできるようにすること
ホームページの内容と操作方法が理解できること
  • ホームページの言語を明らかにすること
    • マークアップ言語の種類とバージョンを記述すること。
    • 文書の基本となる自然言語を記述すること。
    • 文字コードセットについて記述すること。
    • 機種依存文字は使用しないこと。
  • 情報内容や意味をわかりやすくすること
    • 専門用語や略語には、可能な限り用語解説を提供すること。
    • 地名、人名など読みの難しい言葉には、読み仮名を記述すること。
    • 見出しやリンク文字だけでも意味が判るようにすること。
    • リンクを設定する場合は、リンク先の情報を的確に記述すること。
    • 「リンクはこちら」や「右のボタンをクリック」など、視覚に頼ったリンク設定はなるべく避けること。
    • 内容をわかりやすくするため、文章だけではなく、図やイラスト、音声を併せて用いるようにすること。
  • 一貫した操作でページ間が移動できるようにすること
    • グローバルナビゲーションを備えることとし、その雛型は市が提供するものを基本とする。
  • ホームページは、利用者が予測可能な動作とすること
    • ページを表示する際に、やむおえない場合を除き別ウィンドウが開かないようにすること。
    • リストボックス等で選択した際、「選択」ボタン等を押した後にページが動作するようにし、自動的にページが切り替わらないようにすること。
  • ハイパーリンクを見つけやすくすること
    • リンク設定には文字を使用するようにし、画像を使ったリンクの多用は控えること。
    • リンク文字の下線を消す設定は、行わないこと。
    • 通常の文字とリンク文字、リンク後の文字の色を指定する場合は、それぞれ異なる色を指定すること。
現在および将来の技術をもって十分に機能すること
  • W3C等の仕様に基づいた技術を使用すること
    • W3Cが作成するインターネットの技術標準及びJIS X 8341-3に準拠した技術をなるべく用いること。
    • マークアップ及びスタイルシートは、仕様に基づいて記述すること。
    • 複数の環境(ブラウザ)で支障なく利用できることを確認すること。
  • プラグインソフトを使用する場合は、プラグインソフトが誰でも使用できるようにするか、文字などの代替手段を提供するともに、動画・音声・PDF等を使用する場合は、次の方法により使用すること
    • プラグインソフトのアクセシビリティ技術を使用したコンテンツを作成すること。
    • 各ホームページのトップページにおいては、使用しないこと。
    • 利用者が利用する前に、文字による説明文を付けるともに、ファイルの種類及びファイルサイズを明記すること。
    • 自動的に音を流したり、動画を表示したりしないこと。
    • 再生や停止の動作を、利用者が制御できるようにすること。
    • 極端な色の変化や点滅を繰り返す映像は使用しないこと。
    • 必要なプラグインソフトについての情報(ソフト名・バージョン等)を明記し、利用者がダウンロードするためのリンクを設定すること。
  • 利用機器及び通信速度に配慮すること
    • 背景画像の多用は控えること。
    • PDFファイルを分割して提供した場合は、必要に応じて、分割しないファイルも提供すること。
    • PDFファイルが多数ページになるわたる場合は、しおりを作成すること。
    • 画面の幅を設定する場合は、原則として、横800ピクセルのディスプレイで支障なく表示されるようにすること。

第4章 その他

データ等のバックアップ
  • データについては、各所属においてバックアップファイルを保存しておくこと。
  • 公開中のホームページの原稿については、各所属においてバックアップファイルを保存しておくこと。

木津川市ホームページ作成ガイドラインは、W3Cの仕様書及び指針(草案を含む)並びにJIS X 8341-3等を参考に加筆・変更等を行い、木津川市独自の基準として作成したものです。

よって、W3Cの仕様書及び指針については、W3Cサイトをご利用ください。

第1版:平成19年3月施行