宮崎県ホームページ作成
のためのガイドライン
第５版 平成２９年 １月１０日
第４版 平成２７年 ３月３１日
第３版 平成２６年 ３月２０日
第２版 平成１６年 ９月 １日
第１版 平成１５年 ９月１２日
宮崎県 総合政策部 秘書広報課 広報戦略室 電話 26-0237 FAX 27-3003 E-mail: kohosenryaku@pref.miyazaki.lg.jp1
目次
第1 章 ガイドラインの目的 ... 5 第2 章 ガイドラインの考え方 ... 5 1 基本姿勢 ... 5 2 適用範囲 ... 5 3 想定する利用者・環境 ... 5 ①利用者 ... 6 ②利用環境 ... 6 4 参考とする規格等 ... 6 5 運用 ... 7 ①目標 ... 7 ②職員の意識向上 ... 7 ③委託業者への取組 ... 7 ④ガイドラインの見直し ... 7 6 用語解説 ... 7 第3 章 情報発信等におけるガイドライン ... 9 1 情報発信上の留意点 ... 9 ①文書取扱規程に基づいた作成... 9 ②掲載情報の管理 ... 9 ③著作権・肖像権の慎重な取り扱い ... 10 ④個人情報の保護 ... 10 ⑤定期的な検証・分析による改善 ... 10 ⑥リンクの設定 ... 10 2 管理運営上の留意点 ... 11 ①ホームページの日常管理 ... 11 ②ユーザID 及びパスワードの管理の徹底 ... 11 ③不正アクセス等への対応 ... 11 ④誤掲載への対応 ... 11 ⑤データ等のバックアップ ... 11 第4 章 ホームページ作成上のガイドライン ... 12 1 全般的事項 ... 12 ①サイト全般 ... 12 1.ページタイトル等は内容がわかる具体的な名称をつける。 ... 12 2.ページ見出しは、内容や構成が理解しやすいものとする。 ... 13 3.ページ内で使用する言語コードと文字コードを指定する。 ... 13 4.ページの一部が別の言語で表現される場合、適切な言語コードを指定する。... 13 5.ページのソースコードは使用する技術規格・仕様に準じた記述をする。 ... 142 6.ページの制作サイズは横スクロールが発生しないようページ幅に配慮する。 ... 14 7.情報掲載方法は原則として HTML によるものとし、ダウンロードファイルに頼った 情報提供とならないようにする。 ... 14 8.サイトポリシーや利用方法に関するページを作成する。 ... 16 9.トップページ等には宮崎県の名称を表示する。 ... 16 10.掲載日付を表示する。 ... 16 11.問い合わせ先を明示する。 ... 16 ②ページレイアウト ... 16 1.適切な HTML 要素を用いて記述(表現)する。 ... 16 2.ページの長さは適切な長さとする。 ... 17 3.原則としてフレーム（frame 要素）を使用しない。 ... 18 4.異なる複数の閲覧環境で確認する。 ... 18 ③誘導(ナビゲーション) ... 19 1.全ページに共通するナビゲーションはスキップでき、本文の先頭に移動できるように する。 ... 19 2.ページ全体共通のナビゲーションメニューは、同一レイアウト上に同じ順序で配置す る。 ... 20 3.目的のページに到達できるようサイトマップや検索機能など複数の到達手段を用意 する。 ... 20 4.ホームページの現在位置を示した階層ナビゲーション（パンくずリスト、サイトマッ プ）を設置する。 ... 20 ④リンク ... 22 1.リンクテキストは、リンク先の内容を具体的に表すものにする。 ... 22 2.リンクとリンクの間隔は十分にとる。 ... 22 3.リンクを開く際は、新しいウィンドウを開かない。 ... 22 4.リンク切れがないか定期的に確認する。 ... 23 2 個別事項 ... 23 ①ファイル ... 23 1.ファイル名やフォルダ名は、半角の英数字で簡潔に表現する。 ... 23 2.トップページのファイル名は「index.html」とする。 ... 23 3.サーバ格納ファイルのうち不要なファイルは原則として削除する。 ... 23 4.ファイルのリンクにはファイルの種類、サイズを明記する。 ... 24 5.サイズの大きなファイルは分割する。 ... 24 6.添付ファイルの閲覧ソフトの入手に関する情報を用意する。 ... 24 ②文字・文章 ... 24 1.単語の途中にスペースや改行を入れない。 ... 24 2.文字サイズ(大きさ)は絶対指定にしない。... 25
3 3.カタカナ文字・外国語・専門用語・略語を多用しない。 ... 25 4.わかりやすい文章表現にする。... 25 5.機種依存文字、半角カナは使用しない。 ... 25 6.特殊書体（フォントタイプ）は指定しない。 ... 27 ③表示（表現） ... 27 1.形、大きさ、配置、方向、音だけに依存した情報提供は避ける。 ... 27 2.色に依存した情報提供は避ける。 ... 28 3.画像や文字と背景色とのコントラストを十分確保する。 ... 28 4.ホームページ内の一部あるいは全体を、動かしたり更新したりさせない。 ... 29 5.点滅・閃光による表現は行わない。 ... 29 6.ホームページ内で共通する機能を表すパーツや言語は、統一した表現を用いる。 29 ④画像 ... 30 1.画像やイメージマップ等には代替テキストを提供する。 ... 30 2.画像化された文字はできるだけ使用しない。 ... 31 3.画像データのファイルサイズを最適化する。 ... 31 ⑤地図 ... 31 地図を挿入する時は、地図と同等の情報を代替テキストで提供する。... 31 ⑥音声・映像 ... 32 1.音声や映像には、代替コンテンツを提供する。 ... 32 2.音声や映像を自動的に再生させない。 ... 32 ⑦表 ... 33 表を使用する場合は単純な構造で読み上げ順序に配慮する。 ... 33 ⑧入力フォーム ... 34 1.フォームを表すラベルはわかりやすい位置に配置し、フォームの構成部品に関連づけ る。 ... 34 2.フォームの入力欄には、わかりやすいタイトルと入力条件の説明を行うとともに入力 のしやすさの配慮を行う。 ... 34 3.フォームの入力や選択の操作をしただけで予測できない状況の変化を起こさないよ うにする。 ... 35 4.入力エラーが生じた場合は、エラー箇所を特定しエラー内容を説明する。 ... 35 5.入力エラーが生じた場合は、エラーの修正方法を提示する。 ... 36 6.入力情報を送信する前に情報の確認・修正ができるようにする。 ... 36 7.不要になった入力フォームの削除 ... 36 ⑨操作 ... 37 1.キーボード操作だけで、すべての情報・機能が利用できるようにする。 ... 37 2.ホームページの利用に、制限時間を設けない。 ... 37 3.キーボードによるフォーカスの移動順序と視覚的な順序を一致させる。 ... 37
4 4.フォーカスされていることが、視覚的に確認できるようにする。 ... 37 5.フォーカスが当たったとき、自動的に配置の変化やページの移動など状況の変化を引 きおこさないようにする。 ... 38 ⑩特殊技術 ... 38 1. 特殊技術を利用する場合は、必ず代替手段を提供する。 ... 38 2.CGI は極力使用しないこと。 ... 38 第5 章 チェックリスト ... 39
5
第 1 章 ガイドラインの目的
インターネット利用の普及が進展している中で、ホームページは、伝えたい内容を伝えたい タイミングで直接情報発信できるなど、速報性・詳報性に優れ、また、利用者にとっても場所 や時間の制約がなく情報を即座に入手できるなど、その有用性は高くなっており、ホームペー ジ活用による情報発信の重要性はますます高まっています。 そのような中、県でも、様々なホームページを通して、県民生活に密着した情報や災害・緊 急情報、重点施策や地域の魅力など様々な情報を提供していますが、その情報発信の内容や方 法等が適時・的確で効果的なものであり、利用者視点で配慮の行き届いたものとすることが求 められています。 この実現のためには、ホームページの情報やサービスの機能、その運用管理などの質の向上 を図るとともに、利用者の年齢や性別、障がいの有無や利用環境の違いを超えて、多くの人に 利用いただくホームページづくりが重要です。 このガイドラインでは、ホームページによる情報発信や管理運営に当たっての留意事項、作 成上配慮すべき基準などを示しており、県ではこのガイドラインに基づき、県のホームページ を利用する人にとって有益で利用しやすいホームページとなるよう取り組むこととします。第 2 章 ガイドラインの考え方
1 基 本 姿 勢 ホームページの情報発信の内容や作成等に当たり、適時・的確で効果的な情報提供を行うと ともに、使いやすさや分かりやすさ、情報の見つけやすさなど、さまざまな利用者の視点に立 ったページづくりに十分配慮します。 2 適 用 範 囲 このガイドラインは、宮崎県ホームページをはじめ、ドメイン(www.pref.miyazaki.lg.jp)配 下のページのほか、県の所属・機関が開設・運営するホームページに適用します。 3 想 定 す る 利 用 者 ・ 環 境 利用者の個人特有の要素や、利用している機種、通信環境等の外的な要素などホームページ の利用者の環境は実に様々です。このガイドラインは、様々な環境のもとでホームページが利 用されることを想定した上で作成しています。6 ① 利用者 年齢や性別、身体の障がいの有無などに関係なく、ホームページを利用するすべての利用者 を対象としています。特に、利用に当たって以下のような課題を抱えている利用者がいること を十分考慮し、支障なく利用できるようにすることが大切です。 小さな文字を読むことが困難な人 キーボードやマウスを利用しにくいと感じている肢体不自由の人 外国語や専門用語、難しい漢字や複雑な文章を理解することが難しい人 パソコン初心者や高齢者 視聴覚による情報入手が困難な人 ② 利用環境 利用者は、様々な利用環境の中でホームページを利用していることを想定しなければいけま せん。 デスクトップ・ノート型パソコンやスマートフォン・タブレット等のモバイル端末などハ ードウェアの違い 低速回線や高速回線など通信環境の違い
Windows や Mac など OS(基本ソフト)の違いや Internet Explorer や Firefox などブラウ ザやバージョンの違い キーボードやマウスがない環境など操作機器の違い 4 参 考 と す る 規 格 等 このガイドラインは、様々な環境の違いを超えて、できるだけ多くの人にホームページを快 適に利用していただくため、特に、ウェブアクセシビリティについては以下のような規格等を 参考に作成しています。 ○JIS（日本工業規格）（以下、JIS X 8341-3 という。） JIS X 8341-3:2016「高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェ ア及びサービス－第３部：ウェブコンテンツ」（2016 年改正） ○総務省 「公共分野におけるアクセシビリティ確保に関する研究会 報告書」 「みんなの公共サイト運用ガイドライン」
○World Wide Web Consortium(W3C)
「ウェブコンテンツ・アクセシビリティガイドライン2.0」(WCAG2.0) ○宮崎県
7 ※ウェブアクセシビリティとは ウェブサイトを利用するすべての人が、心身の機能や利用する環境に関係なく、ウェブサイ トで提供されている情報やサービスを支障なく利用できることをいう。 5 運 用 このガイドラインの運用に当たっては、職員をはじめホームページ作成の委託業者等とも連 携して以下の内容に取り組みます。 個別にホームページを開設・運営する所属等は、このガイドラインを踏まえた、個別・具体 的な作成・運営等のマニュアル等を備えるなど、適切に運営します。 ① 目標 ホームページを活用し、適時・的確で効果的な情報発信に努めるとともに、だれにでも使い やすく分かりやすいホームページづくりを目指します。特に、ウェブアクセシビリティに関し ては、公的機関は「みんなの公共サイト運用ガイドライン」を参考に、目標とする期限と適合 レベルを定め、その準拠を図ることが求められています。宮崎県ホームページにおいては、2017 年度末までにJIS X 8341-3 の適合レベル AA に準拠することを目標とします。 ② 職員の意識向上 このガイドライン等の周知とともに、ホームページを活用した情報発信やアクセシビリティ の理解を深める研修、ホームページ作成操作研修等を継続的に実施し、ホームページ作成に携 わる職員の意識や知識・技能の向上に努めます。 なお、職員がホームページを作成・更新するときは、「第５ チェックリスト」等により基 準が達成されているか確認し、公開するように努めます。 ③ 委託業者への取組 ホームページの作成等を業務委託する場合においても、このガイドラインを十分に踏まえた 上で、必要な事項等を明確に定め委託業者に示します。 ④ ガイドラインの見直し 利用者の閲覧環境やホームページの制作技術の変化、JIS 規格の変更等に対応するため、随 時見直すこととします。 6 用 語 解 説 このガイドラインの中で使用しているホームページに関係した専門用語の解説を、以下に記 載します。
8 Web ブラウザ
ホームページを閲覧するためのアプリケーションソフト。主なものに Internet Explorer やGoogle Chrome、Mozilla Firefox、Safari、Opera などがある。
HTML ウ ェ ブ 公 開 す る 文 書( ド キ ュ メ ン ト ) を 記 述 す る た め の 言 語 。 HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の頭文字を取った略称。 音声読み上げソフト ホームページの情報を合成音声で読み上げるソフトウェア。主に視覚障がい者が利用して いる。音声ブラウザとも言う。 OS Operating System の略称。コンピュータシステム全体を管理するソフトウェアのこと。 パソコン用OS には Windows や OS X、UNIX など、スマートフォン用 OS には Android やiOS などがある。 グローバルナビゲーション ホームページ内の情報を大きくいくつかのカテゴリに分類してタイトルを付けたもの。宮 崎県ホームページでは、「暮らし・教育」「健康・福祉」「しごと・産業」「観光・文化・交 流」「社会基盤」「県政情報」などがグローバルナビゲーションに相当する。 コンテンツ 動画・音声・テキスト等の情報の内容。 CSS HTML を視覚的にどのように表示するかを指示する仕様の 1 つ。Cascading Style Sheet(カスケーディング・スタイル・シート)の頭文字をとった略称。 CGI
Common Gateway Interface の略称。Web サーバー上でプログラムを動作させるための 仕組み。掲示板やアンケートフォームのページ作成などに使われる。
Java Script
プログラミング言語(スクリプト言語)。ユーザインターフェスの開発に用いられる。例え ば、画像にマウスを合わせたときにその画像を変化させる、といったものある。
9 代替テキスト 何かの理由で画像が表示されない場合に画像の代わりに表示される語句、文章。 パンくずリスト Web ページの上部に表示されるナビゲーションで、見ているページのサイト内の位置や場 所を示したもの。「パンくず」は、童話「ヘンデルとグレーテル」の中で、道に迷子にな らないためにパンくずをまきながら歩いて行ったことに由来する。 pixel ピクセル、画素。画像を構成する単位のこと。
第 3 章 情報発信等におけるガイドライン
この章では、ホームページによる情報発信を行う上での方法・内容面の留意点や管理運営を 行う上で、心がけるべきポイント等を整理しています。 1 情 報 発 信 上 の 留 意 点 ① 文書取扱規程に基づいた作成 ホームページに掲載する情報は、公文書に該当するため、通常の文書と同様に、宮崎県文 書取扱規程に基づいた取扱をする必要があります。 情報掲載に当たっては、原則として、あらかじめ所属長の決裁をとる等、適切な対応を行 いましょう。 ② 掲載情報の管理 ○適時・的確な情報の更新・修正を行う。 記者投げ込み等で発表した情報、各種強化・普及期間の情報、災害情報など県民への周知 が求められる、または県民の関心が高いもの、重点施策の進捗結果や成果など、求められる タイミングで的確な情報を掲載し、最新の情報を提供するようにしましょう。 ○新着情報や注目情報等の件数・掲載期間等は適切に管理する。 新着情報や注目情報等は利用者の目に触れやすく閲覧される可能性を高めるといったメ リットがあります。 しかし、件数が多いと見つけにくく、古い情報を掲載したままにしていると、サイトに対 する信頼が損なわれてしまいます。 また、掲載期間が短すぎると利用者の目に触れにくくなってしまいます。 新着情報等の掲載件数や期間などのルールを定め、定期的な確認を行うなど適切に管理し ましょう。10 ○掲載期間を過ぎた不要な情報は削除する。 不要になった情報はこまめな削除を徹底する、公開期限の設定をする、更新日の掲示を行 うなど、古い情報により閲覧者に誤った情報を提供し、混乱を招かないようにしましょう。 ③ 著作権・肖像権の慎重な取り扱い ホームページは、テキストによる文章のほか、写真、画像、音楽等の素材やネット上のサ ービス(地図等)を利用し、わかりやすく情報提供する必要があります。 しかし、文章、写真、画像、音楽等の素材やネット上のサービスには著作権、意匠権、肖 像権等があります。 他者が、著作権を有するものを利用する場合は、ホームページへの利用についての使用許 諾について十分確認するとともに、その引用等に関して注釈を明記する必要があります。 また、人物が写っている画像を使用する場合は、肖像権を侵害しないように留意する必要 があります。 パンフレット等を PDF 等でホームページに掲載する場合も同様に注意する必要がありま す。 あわせて、県のホームページについても、その内容の著作権等が県に帰属していることを 記載するとともに、転載などの著作権の取扱に関する情報を明示する必要があります。 ④ 個人情報の保護 個人情報の掲載、収集に当たっては、宮崎県個人情報保護条例に基づき適切、慎重に対応 する必要があります。 特に、個人情報を収集する場合、目的等を明記し、目的外使用しないことを明示するとと もに、通信の暗号化（SSL 暗号化通信）等の必要な措置を講じるなどセキュリティ対策を実施 しましょう。 ⑤ 定期的な検証・分析による改善 ホームページ開設後は、アクセス状況の把握や利用者アンケートの実施等により、定期的に 検証・分析を行い、利用者視点にたった情報や機能等の見直し、改善に努めましょう。 ⑥ リンクの設定 外部サイトにリンクを設定する場合、相手方がリンクフリーの場合を除き、相手先が指示し た手続きにより承諾を得ましょう。 また、公序良俗に反するホームページ等にはリンクを設定しないなど、県のホームページと してリンクがふさわしいか慎重に判断しましょう。
11 2 管 理 運 営 上 の 留 意 点 ① ホームページの日常管理 ホームページを開設する場合、ホームページ全体の責任者（所属長等）、管理者（担当者） を定め、点検や更新の責任の所在を明確にしましょう。 責任者、管理者は、掲載された情報に古いものがないか、リンク切れが生じていないか、あ るいは改ざんや閲覧できない状況が生じていないかなど定期的な確認等を行うようにしまし ょう。 ② ユーザ ID 及びパスワードの管理の徹底 ホームページの公開・更新時に必要となるCMS やサーバ等の ID、パスワードについては各 所属等で管理を徹底しましょう。 また、単純なパスワードは簡単に解析され、ホームページの改ざん等の被害に遭う危険性が 高まります。パスワードは英数記号などを織り交ぜた複雑なものとし、定期的に変更するなど のセキュリティ対策を実施してください。 所属で独自にホームページを開設している場合、管理者権限でのログインは特定の IP アド レスからしか行えないようなアクセス制限を設定しましょう。 ③ 不正アクセス等への対応 意図せずホームページの改ざんや閲覧できない状況が発生した場合、不正アクセスの可能性 があるため、速やかに情報政策課、広報戦略室に連絡するとともに、関係業者等に連絡しまし ょう。 ④ 誤掲載への対応 発信した情報に誤りがあった場合、ページを削除するのではなく、まずはページ内で訂正し ましょう。また、必要に応じて、関係者に連絡するなど適切・慎重に対応しましょう。 ⑤ データ等のバックアップ ホームページのデータ等は各所属等においてバックアップファイルを保存しましょう。
12
第 4 章 ホームページ作成上のガイドライン
この章では、JIS X 8341-3 など関連する規格等の内容を勘案し、宮崎県のホームページにお いて作成する上で配慮すべき項目として整理しています。 各項目の後にはJIS X 8341-3 の対応する項番及び適合レベル(例：.2.4.2 A など)を表示して います。 また、項目の中で、JIS X 8341-3 の適合レベル A 及び AA に該当するなど、目標達成のた め取り組まなければならないもの等については「優先度１」と表示し、JIS X 8341-3 の適合レ ベルAAA に該当する、または利用者の利便性に大きく寄与するもので、一定の配慮が求めら れるもの等については「優先度２」と表示しています。 なお、JIS X8341-3 の詳細については、以下のホームページを確認ください。 ウェブアクセシビリティ基盤委員会ホームページ http://waic.jp/docs/jis2016/understanding/201604/ 1 全 般 的 事 項 ① サ イ ト 全 般 1.ページタイトル等は内容がわかる具体的な名称をつける。 (2.4.2 A)＜優先度１＞ ページタイトルは、メニューバーや検索結果の見出し、ブックマーク等に表示され、情報の 取得や特定するための手がかりとなります。 目的のページを見つけやすくなるよう、ページタイトルから内容が推測できるような具体的 なタイトルをつけましょう。 また、他のページと区別できる(固有の)タイトルとし、複数のページで同じタイトルとした り、長いタイトルにしないようにしましょう。 図 1：メニューバーに表示されるページタイトル13 図 2：検索結果 2.ページ見出しは、内容や構成が理解しやすいものとする。 (2.4.6 AA)＜優先度 1＞ ページ見出しは、記載されている内容や構成を示すものです。 そのページにどのような情報があるのか、そして、そのページがどのように構成されている かを、利用者が理解しやすくするように、わかりやすい見出しを提供しましょう。 3.ページ内で使用する言語コードと文字コードを指定する。 (3.1.1 A)＜優先度１＞ ホームページで使用される言語HTML や CSS は、全世界で国や言語に関わらず同じ仕様・ 規格として定められています。そのため、どの言語によって記されているかが示されないと、 正しい文字表記がなされなかったり、音声読み上げの際の誤読の原因となったりする可能性が ありますので、言語コードを必ず指定しましょう。 図 3：html 上での言語指定例 日本語ページであれば、 <html lang=”ja”> と記述するのが一般的です。 また、同じホームページ内では同じ文字コードを指定しましょう。 4.ページの一部が別の言語で表現される場合、適切な言語コードを指定する。 (3.1.2 AA)＜優先度 1＞ 3.では、そのページ全体が何語で書かれたものであるかを示すものだったのに対し、この項 目では、ページの途中で言語が変わる場合の対応について示します。 例 え ば 、 一 つ の 段 落( 一 部 ) が 英 語 で 表 現 さ れ る 場 合 に は 、 <p lang=”en”>English sample…</p> のように言語コードを指定しましょう。
14 5.ページのソースコードは使用する技術規格・仕様に準じた記述をする。 (4.1.1 A, 4.1.2 A)＜優先度１＞ Web ブラウザや音声読み上げソフト等の技術は、HTML や CSS といったウェブコンテンツ 技術の規格・仕様に合わせて開発されています。そのため、技術規格・仕様にそって作成して いない場合、用意した機能が動作しなかったり、正しく表示・読み上げすることができません。 ホームページを作成するのに用いるHTML 要素や CSS 等は W3C が勧告する Web 標準に従 って記述するとともに、下に示すホームページ等を用いて検証するなどにより確認しましょう。
HTML ：W3C Markup Validation Service
URL http://validator.w3.org/ (英語版) CSS ：W3C CSS Validation Service URL http://jigsaw.w3.org/css-validator/ 6.ページの制作サイズは横スクロールが発生しないようページ幅に配慮する。 ＜優先度 2＞ ホームページを閲覧する端末は、ディスクトップ型やノート型のパソコン、タブレット端末、 スマートフォンなど多岐に渡っており、画面サイズも大小さまざまです。 ホームページ閲覧時に横スクロールが発生してしまうと、使い勝手が著しく低下するため、 ある程度小さな画面に対しても横スクロールが発生しないよう画面設計を行う必要がありま す。 画面サイズは基本的に 1024×768pixel を想定とするなど、そのウィンドウサイズで閲覧し ても横スクロールが発生しないようなページ制作に心がけましょう。 7.情報掲載方法は原則として HTML によるものとし、ダウンロードファイルに頼った情報 提供とならないようにする。 ＜優先度２＞ ダウンロードファイル(添付ファイル)だけに頼ったページだと利用者はファイルを開く、閲 覧ソフトをダウンロードするという一手間がかかり情報が伝わりにくくなります。 また、音声読み上げソフトでは十分対応していない場合もあり、利用者にとっても不親切で もあります。ダウンロードファイルは内容を補足するものととらえ、情報掲載は原則として HTML により提供(ページ本文への記載)をしましょう。 やむを得ずダウンロードファイルを掲載する場合は、どのファイル形式が最適なのかを次の 表を参考にしてください。
15
※ Office ファイルは Word の場合 doc,docx 形式、Excel の場合 xls,xlsx 形式で準備すること。な お、一太郎は閲覧者が閲覧できない場合が多いため、Word 形式で提供すること。 PDF ファイルは一般的に広く普及している電子ファイルであり、閲覧ソフト（Adobe Reader 等） が無償で配布されています。また、様式のレイアウトを損なわずに閲覧・印刷ができるという特徴 があり、閲覧環境が多様化している状況において、利便性の高いファイル形式といえます。 このような観点からダウンロードファイルを掲載する際は、PDF ファイルを優先的に準備してく ださい。また、掲載する際には、次の点に注意しましょう。 情報の種類 最低限準備する ファイル種 左項が不可能な場合 代替として準備する ファイル種 配慮するポイント 申請書等 PDF (Word（※）) なし られる様式を閲覧者へ届ける必要申請書の場合、申請書として認め があるため、様式の体裁を損なわな いPDF、Word を準備。 計画、指針、 ｱｸｼｮﾝﾌﾟﾗﾝ HTML（概要） PDF（詳細） なし 計画等は、その情報量が多くなる ため概要版をテキスト、詳細版を PDF で作成することが望ましい。 広報誌、 ﾊﾟﾝﾌﾚｯﾄ HTML PDF 検索サイトから情報を求める閲 覧者が多いため、検索に柔軟に対応 できるHTML を準備。 PDF は印刷物データから作成す る事が条件となるため、印刷物制作 時にHTML 制作も視野に入れてお くこと。（既存の冊子をスキャニン グしてからのPDF 作成は、データ 容量が大きくなり、画質が悪くなる ため好ましくない。） 制度・条例集、 HTML PDF 検索サイトから情報を求める閲 覧者が多いため、検索に柔軟に対応 できるHTML を準備。 準備が不可能な場合は、PDF を優 先して準備。 統計情報 HTML PDF (Excel（※）、CSV) 統計情報は手しづらい場合があるため、概要版HTML では情報を入 をテキスト、詳細版をPDF で作成 し、可能な限りExcel（CSV）も準 備することが望ましい。 お知らせ、 イ ベ ン ト 情 報、ご意見募 集等 HTML なし 検索サイトから情報を求める閲 覧者が多いため、検索に柔軟に対応 できるHTML を準備。 別途ファイルの利用は、情報の性 質上、操作性や検索性を損なうた め、行わないこと。
16 Word や Excel 等から直接 PDF ファイルを作成する。(文書をスキャナー等で読み込んだもの を使用しない。) ※タグ付きPDF ファイルにすることが望ましい。 ファイルサイズが大きい場合、章や項目ごとの分割ファイルと全体版の一括ダウンロードファ イルの両方のファイルを掲載する。 8.サイトポリシーや利用方法に関するページを作成する。 ＜優先度１＞ ホームページのサイトポリシー(管理運用主体、内容、個人情報保護、著作権、リンク、免責 事項等の運用に当たっての方針)や利用方法に関するページを作成し、トップページ等にリンク を設置しましょう。 9.トップページ等には宮崎県の名称を表示する。 ＜優先度１＞ 利用者にこのホームページが宮崎県の管理するホームページであることがすぐにわかるよ う、トップページ等には、宮崎県の名称や必要に応じたロゴ画像を表示するとともに、各所属・ 機関が開設したホームページについては、県ホームページへのリンクを設置しましょう。 10.掲載日付を表示する。 ＜優先度１＞ 情報ページがいつ時点のものなのか、利用者に分かるように、ページに掲載年月日を表示し ましょう。 11.問い合わせ先を明示する。 ＜優先度１＞ トップページ及び情報ページには利用者がホームページ全体や掲載情報に、不明な点がある 場合の問い合わせ先を必ず記載しましょう。 問い合わせ先には、担当部署、所在地(住所)、電話番号、FAX 番号及びメールアドレスは最 低限記載するようにしましょう。 ② ペ ー ジ レ イ ア ウ ト 1.適切な HTML 要素を用いて記述(表現)する。 (1.3.1 A)＜優先度１＞ HTML では、見出しや段落、箇条書き、引用、強調といった要素を適切に用いて記述(表現) しましょう。 また、ページレイアウトや文字の大きさ、色などは基本的にCSS を用いましょう。 見出しは、見出し要素（h1、h2、h3、h4、h5、h6）を用いる。 各ページには、ページ見出しを h1 として記述する。 文字を大きくする目的で見出し要素を使用しない。
17 図 4：見出し要素 箇条書きは、ol、ul、li、dl、dt、dd 要素を用いて表現する。 図 5：箇条書き 文字の強調は、strong、em 要素を用いて表現する。 図 6：強調 2.ページの長さは適切な長さとする。 ＜優先度２＞ ページが長くなると、利用者は上下のスクロール操作が煩雑になり、目的の情報が探しにく くなったりしてしまいます。 ページの長さは著しく長くならないよう最適化を図ることとし、必要に応じて分割してペー ジを作成するようにしましょう。
18 3.原則としてフレーム（frame 要素）を使用しない。 ＜優先度２＞ フレームとは、画面を分割し、一つの画面上に複数のページを同時に表示させるための技術 です。 メニューとコンテンツを分割するために用いられるケースもありますが、フレームを表示で きない Web ブラウザがあったり、フレームの切替えに手間が生じたりすることから、情報の 取得が難しく、最近のホームページでは積極的に用いられることは少なくなりました。 より多くの利用者・利用環境で閲覧できることを目指すため、原則として、フレームは利用 しないようにしましょう。コンテンツの構成上、やむを得ず採用する場合には、以下の条件を 満たすようにしましょう。 フレーム一つ一つの役割を明確にする。 フレームが解除された状態でもナビゲーションが失われないようにする。 フレームを用いなくてもすべての情報が得られるようにする。 図 7：フレームの仕組み 4.異なる複数の閲覧環境で確認する。 ＜優先度２＞ ホームページを閲覧する機器・環境はさまざまです。画面サイズ、OS、Web ブラウザやバ ージョンの違いなどによって、同じホームページを閲覧していても、異なった見た目になるこ とが少なくありません。 「メニューページ」 「詳細情報ページ」 ２つ（またはそれ以上）のページを結合 一つの画面に同時に表示 境界線で分割
19 できるだけ多くの閲覧環境（Web ブラウザ等）で情報の欠落、大幅なレイアウトの崩れがな いか確認をしましょう。なお、県情報掲載システムで作成したページについては、確認不要で すが、それ以外のホームページについては、開設時に委託業者に義務づけたり、公開されたペ ージを携帯電話等で確認しましょう。 ＜ブラウザの例＞ Internet Explorer Google Chrome Mozilla Firefox スマートフォン(Android,iOS) また、可能であれば各Web ブラウザの古いバージョンでも確認することもお勧めします。 ③ 誘 導 ( ナ ビ ゲ ー シ ョ ン ) 1.全ページに共通するナビゲーションはスキップでき、本文の先頭に移動できるようにす る。 (2.4.1 A) ＜優先度１＞ 全ページに共通するロゴやグローバルナビゲーション等は、ホームページの使い勝手を高め る上で必要ですが、音声読み上げソフトやキーボードのみで操作している利用者にとっては、 新たなページを開くたびに多くの操作が必要になってしまいます。 このため、ページ本文の先頭に、適切な見出しを記述するなど、Web ブラウザの機能を用い て、ナビゲーション部分を読み飛ばし、ページ本文の開始位置へ容易に到達（スキップ）でき るような仕組みを準備しましょう。 図 8：本文の先頭に適切な見出しを記述する
20 2.ページ全体共通のナビゲーションメニューは、同一レイアウト上に同じ順序で配置する。 (3.2.3 AA) ＜優先度１＞ ナビゲーションの機能・配置・見た目を統一することにより、利用者はホームページの使い 方を理解しやすくなり、円滑に利用できます。 ナビゲーション部分とページ本文が明確に区別できることにより、情報を探すことに集中し やすくなることから、共通に提供するナビゲーションは、表示スタイルや標記に統一感を持た せるようにしましょう。 図 9：県ホームページのナビゲーションメニュー(全ページに表示し統一感を持たせている) 3.目的のページに到達できるようサイトマップや検索機能など複数の到達手段を用意する。 (2.4.5 AA)＜優先度１＞ 一つのページへの到達手段が、一つしかない場合、その到達手段を見つけることができず、 目的のページにたどり着けなくなってしまいます。 そのため、ホームページ内には「主要分類」「サイトマップ」「サイト内検索」などの複数の 到達手段を提供し、利用者にとって使いやすい到達手段を選択できるようにしましょう。 図 10：県ホームページでは「主要分類」「サイト内検索」「組織で探す」「サイトマップ」など 複数手段を提供 4.ホームページの現在位置を示した階層ナビゲーション（パンくずリスト、サイトマップ） を設置する。 (2.4.8 AAA) ＜優先度２＞ ホームページは、たくさんのページが集まり複雑に構成されています。現在閲覧してページ が、どの階層にあるのか、どのページとつながっているのかなどを知る助けとするため、ホー ムページ全体の階層構造を示す「パンくずリスト」を提供するようにしましょう。 また、すべてのページからトップページに戻れるようリンクを設置することも大切です。
21 図 11：パンくずリスト
なお、サイトマップは、ホームページ全体の構成を示すものです。ホームページの目立つ 場所(トップページ等)にリンクを設定しましょう。
22 ④ リ ン ク 1.リンクテキストは、リンク先の内容を具体的に表すものにする。 (2.4.4 A)＜優先度１＞ 別のページや添付ファイルにリンクを設定する場合、リンクテキストに「詳しくはこちら」 などと記載すると、利用者はリンク先の内容が特定できない（分からない）ため、好ましい表 現とは言えません。 リンクテキストだけでリンク先の内容を予測できるようなものにしましょう。 図 12：リンクテキスト設定の例 上記の例のようにリンク先がページ以外の場合は、PDF などファイルの種類とファイルサ イズ（容量）を記載する必要があります。 また、外部サイトにリンクを設定する場合、外部サイトへのリンクであることを明示するこ とも重要です。 2.リンクとリンクの間隔は十分にとる。 ＜優先度１＞ リンクテキストとリンクテキストの間隔が狭いと、意図しないリンクテキストをクリックす るなど、誤操作の原因になることから、リンクテキストとリンクテキストは十分な間隔を確保 しましょう。 また、画像リンクの場合は、画像が小さいとクリックしにくいので、ある程度の大きな面積 のものを準備しましょう。 3.リンクを開く際は、新しいウィンドウを開かない。 ＜優先度２＞ 原則として、同じホームページ内のリンクは、同一ウィンドウで開くようにし、新しいウィ ンドウは開かないようにしましょう。 外部サイトやヘルプページ等を開く場合など、新しいウィンドウを開くことに利点がある場 合に限っては、新しいウィンドウで開くことができます。
23 4.リンク切れがないか定期的に確認する。 ＜優先度２＞ 別のページにリンクを設定した場合、リンク先のページの削除等により、リンクが切れる場 合があります。定期的にホームページを確認し、リンク切れがあった場合は、状況に応じて適 宜修正しましょう。 2 個 別 事 項 ① フ ァ イ ル WEB サーバ用ファイルについて 1.ファイル名やフォルダ名は、半角の英数字で簡潔に表現する。 ＜優先度１＞ ホームページは、HTML ファイルと画像ファイル等によって構成されており、各ファイル はフォルダに保存されています。 これらファイル名やフォルダ名は、全角かな（カナ）・半角カナ・漢字・全角英数字文字を 使用した場合、サーバやブラウザで認識されず、ページが正しく表示されません。 必ず、ファイル名・フォルダ名は半角英数字で付けるようにしましょう。 ×：認識できないファイル名 〇：認識できるファイル名 県庁所在地.html ﾏｯﾌﾟ.gif 県庁写真０１.jpg kencho.html map.gif ph-ken01.jpg 2.トップページのファイル名は「index.html」とする。 ＜優先度２＞ WEB サーバは、自動的に「index.html」もしくは「index.htm」をトップページ（表紙） だと認識するよう設定されており、URL を入力する際、「index.html」の入力を省略すること ができます。 利用者に、トップページであることが分かるようにするためにも、トップページのファイル 名は「index.html」と付けるようにしましょう。 3.サーバ格納ファイルのうち不要なファイルは原則として削除する。 ＜優先度２＞ WEB サーバに格納されているファイルは、全て公開されることになります。 ファイルがWEB サーバ上に残ったままだと、検索エンジンに表示される場合があり、誤っ た情報等を伝えることになり、利用者に混乱を招きます。 定期的にサーバ内のファイルの状況を確認し、不要なファイルについては確実に削除するよ うにしましょう。なお、ページを削除する際、HTML だけでなくページに付随するファイル
24 （画像や添付ファイルなど）も必ず削除しましょう。 ページの添付ファイルについて 4.ファイルのリンクにはファイルの種類、サイズを明記する。 ＜優先度１＞ ファイルで情報提供する場合は、ファイルの種類・ファイルサイズをリンクテキストに記 載し、利用者に事前に分かるようにしておきましょう。また、必要に応じて画像を表示すると より良いでしょう。 5.サイズの大きなファイルは分割する。 ＜優先度２＞ サイズの大きいファイルは、閲覧やダウンロードするのに時間がかかります。 様々な閲覧環境を考え、サイズの大きいファイルの分割や解像度を低くするなど、なるべく 軽い添付ファイルを提供するなどの対応をしましょう。 6.添付ファイルの閲覧ソフトの入手に関する情報を用意する。 ＜優先度２＞ ファイルを添付する場合には、閲覧に必要なソフトウェア(viewer)のダウンロード先を案内 しましょう。 図 13：閲覧ソフト入手情報の例 ② 文 字 ・ 文 章 1.単語の途中にスペースや改行を入れない。 (1.3.2 A)＜優先度１＞ 単語の途中にスペースや改行が入っていると、音声読み上げソフトや自動翻訳ソフトでは単 語を正しく認識することができない可能性があります。 例えば、「所 在 地」のように字間を空けると、音声読み上げでは「ところ ざい ち」 などと読み上げられます。 レイアウトを揃えるために、単語内にスペースや改行を入れないようにしましょう。
25 2.文字サイズ(大きさ)は絶対指定にしない。 (1.4.4 AA)＜優先度１＞ 現在広く利用されている Web ブラウザには、文字や画面を拡大する機能があります。その 機能が正しく動作するよう、文字サイズはできるだけ指定しないようにしましょう。 どうしても、文字サイズを変更する必要がある場合は、相対指定にしてください。 特定の文字列を、周辺の文字列強調したい場合には、（CSS によって規定された）スタイル を適用するか、強調（strong 要素や em 要素）を用いるようにしましょう。 3.カタカナ文字・外国語・専門用語・略語を多用しない。 (3.1.3 AAA, 3.1.4 AAA)＜優先度２＞ カタカナ文字や外国語、専門用語や行政用語、略語など、日常一般に使われていない表現は 避け、一般的な用語、わかりやすい表現に置き換えられないかを検討しましょう。 どうしても、使用する必要がある場合は、文章の最初にでてきた際に説明を行い、読みの難 しい漢字は、読み方を明示しましょう。 4.わかりやすい文章表現にする。 (3.1.5 AAA)＜優先度２＞ 分かりやすい文章で表現するとともに、図やイラストなども用いて、ページを作成しましょ う。 ホームページに記される情報は、「ななめ読み」されやすいと言われています。概要が一目 でわからなかったり、一文が長かったりすると、誤解が生じたり、理解が不十分になってしま いかねません。分かりやすい文章で表現し、必要に応じて、理解を促す別のコンテンツを用意 するなど工夫しましょう。 箇条書きを用いる。 見出しをつける。 結論を先に述べる。 単文で構成する（一文を短くし、文の構造を複雑にしない。） 文章だけでなく、図やイラストなども用いる。 5.機種依存文字、半角カナは使用しない。 ＜優先度１＞ 丸付数字やローマ数字、省略記号などのいわゆる「機種依存文字」及び半角カナは、閲覧環 境の OS や文字コードの違いによって、表示される文字が変わってしまう(文字化け)、あるい は全く表示されなかったりしてしまうため使用しないようにしましょう。
26 【機種依存文字の一覧】
× ｽﾎﾟｰﾂ振興課 ○ スポーツ振興課 × ｵｰﾙみやざき営業課 ○ オールみやざき営業課
27 また、日付や時刻の表記する場合、「／」や「：」は使用できません。数字を全角で入力し たり、曜日を、(月)、(火)などと入力した場合、音声読み上げソフトで正しく読み上げられない ため、半角数字や(月曜)または(月曜日)と記述します。 × １９８３/０４/１５ ○ 1983 年 4 月 15 日 × １５日(金) ○ 15 日(金曜日) × １０:１５～ ○ 午前 10 時 15 分から 6.特殊書体（フォントタイプ）は指定しない。 ＜優先度１＞ 特殊書体(フォントタイプ)は、環境の違いによって予想外のフォントに置き換えられてしま たり、読みにくかったりするので、できるだけ指定しないようにしましょう。 ③ 表 示 （ 表 現 ） 1.形、大きさ、配置、方向、音だけに依存した情報提供は避ける。 (1.3.3 A)＜優先度１＞ 形･大きさ・配置・方向・音だけに依存した情報提供をすると、音声読み上げソフト利用者 など、ページの内容を理解することが難しくなるので、テキストなどの補足情報をあわせて提 供するなど配慮しましょう。 図 14：形のみで情報提供している例
28 2.色に依存した情報提供は避ける。 (1.4.1 A)＜優先度１＞ 色だけに依存した情報提供をすると、色の識別が難しい人や音声読み上げソフト利用者に、 文章の内容を伝えることが難しくなります。色を使って情報を提供する場合、テキストの情報 も併記するなどにより、モノクロプリンターで印刷した場合でも内容が伝わるよう配慮しまし ょう。 図 15：色に依存した情報提供 赤文字の必須書類については、白黒で印刷した場合、情報の識別ができません。例えば、必須 書類に「※」をつけ、「※は必須書類です。」とテキストでの説明を付加するなど、正しく伝え るようにしましょう。 3.画像や文字と背景色とのコントラストを十分確保する。 (1.4.3 AA)＜優先度１＞ ホームページは、背景色や壁紙、文字色を設定することによって、装飾を施すことができま す。しかし、そのような工夫が文字の読みづらさの原因になってしまうことがあります。背景 色は白（#ffffff）、文字色は黒（#000000）を基本色とするなど、より多くの利用者にとって、 読みやすい、識別しやすい配色となるよう、心がけましょう。 なお、装飾を施す必要がある場合は、コントラスト比4.5:1 を確保しましょう。 図 16：コントラスト比
29 ※コントラストは、以下のフリーソフトでチェックできます。 カラー・コントラスト・アナライザー2013J http://weba11y.jp/tools/cca/ 4.ホームページ内の一部あるいは全体を、動かしたり更新したりさせない。 (2.2.2 A)＜優先度１＞ ホームページ内で、動いたり、情報が書き換わったりする部分があると、その情報を正しく 取得できなかったり、意図する操作ができなくなったりしてしまうことがあります。 そのため、必要があってホームページ上にこのようなコンテンツを提供する場合は、以下の 条件を守るようにしましょう。 アニメーションやスライドショーは、停止させることができる。 アニメーションやスライドショー停止後も、意味が伝わるようにする。 画面の一部・全部をスクロールさせない。 情報の自動更新はしない。 5.点滅・閃光による表現は行わない。 (2.3.1 A, 2.3.2 AAA)＜優先度１＞ 利用者の中には、一定の周期で点滅・閃光を伴うコンテンツによって発作を引き起こす恐れ があります。情報を認識できないことがあるだけではなく、身体の安全に関わる事ですので特 に注意しましょう。 また、点滅・閃光を放つコンテンツがある場合は、1 秒間に 3 回以下であるものにしましょ う。 例えば、記者会見における多数のカメラのフラッシュなどで、閃光を放つコンテンツが生成 される可能性がありますので、そのような状況が生じる可能性がないか留意しておきましょう。 6.ホームページ内で共通する機能を表すパーツや言語は、統一した表現を用いる。 (3.2.4 AA)＜優先度１＞ ホームページの中で、一つの機能に対して複数の言葉や表現が使われていると、利用者の混 乱を招きます。 「トップページ」と「ホーム」、「ページの先頭へ」と「ページのトップへ」などの言葉の差 だけでなく、「お問い合わせ」と「お問合せ」のような表記の差にも注意しましょう。 また、同じ機能を持つリンクボタンには、同じ画像を用いるといった工夫も、使い勝手を高 める上で重要な配慮となります。
30 図 17：好ましくない例(同じ内容を複数の異なる表現で表示) ④ 画 像 1.画像やイメージマップ等には代替テキストを提供する。 (1.1.1 A)＜優先度１＞ 文字以外の画像やイメージマップには、必ず代替テキストを設定しましょう。これによって、 画像等が表示されない場合でも、そこにどんな情報が表現されているのかを伝えることができ るようになります。 図 18：代替テキストの例(画像が表示されない場合でも内容が伝わる代替テキストを設定) また、画像が、装飾目的で用いられている場合には、「alt=””」と記述します。 代替テキストは、「画像の代わりとして表示されるテキスト」ですので、画像に何が描かれ ているかではなく、文脈上でどのような意味を持つか、画像が表示されなかった場合にどのよ うな文字情報に置き換えられると意味が通じるかを考えて、適切な文字列を設定してください。 図 19：代替テキストの例(画像の説明ではなく、文脈上意味が通じる代替テキストを設定)
31 2.画像化された文字はできるだけ使用しない。 (1.4.5 AA)＜優先度１＞ 文字は、できる限り画像化された文字でなく、テキストを用いるようにしましょう。 CSS ではできない場合に限って、画像化された文字を用いるようにしましょう。 3.画像データのファイルサイズを最適化する。 ＜優先度２＞ ページを表示する際、画像データのファイルサイズが大きいとページの読み込みに時間がか かり、利用者に負担をかけます。 画像サイズは、目安として最大で「640×480pixel」、200KB 以下になるようにしましょう。 ⑤ 地 図 地図を挿入する時は、地図と同等の情報を代替テキストで提供する。 (1.1.1A)＜優先度１＞ ページに地図を挿入する時は、地図を見ることができない人のために地図と同等の情報をテ キストで記載する必要があります。 地図が画像である場合は代替テキストでも記載できますが、Google Maps など外部の地図サイ トの情報をページに埋め込む場合は代替テキストを入力することが出来ないため、地図の前に テキストで記載する必要があります。 なお、ページに地図を挿入する場合は必ず著作権や利用者規約等を確認してください。 図 20：画像の地図（画像の代替テキストでも、地図の代替情報が記載可能） 図21：Googlemaps などの外部サイトデータ埋込地図 （地図の前に、通常のテキストで地図の代替情報を記載）
32 ⑥ 音 声 ・ 映 像 1.音声や映像には、代替コンテンツを提供する。 (1.2.1~1.2.3 A, 1.2.4 AA, 1.2.5 AA)＜優先度１＞ 音声や映像などは、再生のための特別なソフトウェアや設定等が必要な場合があり、また、 耳が不自由な人も十分理解できないことから、できる限り使用しないようにしましょう。 使用する場合は、以下のような代替コンテンツを提供しましょう。 音声情報のみの情報 →内容を記載したテキストを提供する。 映像情報のみの情報 →テキストまたは音声を提供する。 テキストによる提供が難しい場合は、音声・映像の内容に関する問い合わせ先を明示する。 2.音声や映像を自動的に再生させない。 (1.4.2 A)＜優先度１＞ ホームページを開いたとき、音声や映像が自動的に再生されると、音声読み上げソフトの読 み上げ音声と音声とが重なってしまうため、情報取得が難しくなります。また、利用者が静か な場所であったり、業務中であったりした場合には、音を鳴らすこと自体が好ましくないこと もあります。 音声や映像は、利用者によって再生・停止及び音量の調整ができるようにしましょう。
33 ⑦ 表 表を使用する場合は単純な構造で読み上げ順序に配慮する。 (1.3.1 A, 1.3.2 A)＜優先度１＞ 表を使用する場合は、以下の点に注意しましょう。 表組み（table 要素）を使用する前に、表以外に適した表現がないかを検討する。 表を使用する際は、見出しを表す th 要素と、データを表す td 要素を適切に使用するとも に、適切な見出しをつける。 データテーブルでは、caption 要素を用いて表題を記述する。 データテーブルでは、headers、scope、id 属性を用いて見出しとデータの関連性を明示す る。 作成者の意図したとおりに読み上げが行われるように記述する。 （読み上げ順序は、図22 に示すように、上の行から順に、左のセルから右のセルへと読 み上げられる。） レイアウトのためだけに表を使用しない。 図 22：表組み 図 23：表の読み上げ順序
34 ⑧ 入 力 フ ォ ー ム 1.フォームを表すラベルはわかりやすい位置に配置し、フォームの構成部品に関連づける。 (1.3.1 A)＜優先度１＞ 入力欄に何を入力すればよいか分かりやすく表示し、わかりやすい位置にラベルと入力欄を 配置します。 入力フォームに使用する、ラジオボタン、チェックボックス、テキストフィールド（入力欄） などの部品は、label 要素および for、id 属性を用いて、ラベルとの関連を付けましょう。 図24：入力欄 2.フォームの入力欄には、わかりやすいタイトルと入力条件の説明を行うとともに入力の しやすさの配慮を行う。 (3.3.2 A)＜優先度１＞ 入力フォームの各入力欄には、わかりやすいタイトルを表示しましょう。 また、入力ミスをしないよう、必要に応じて、情報を入力するためのシンプルな説明文や手 がかり、注意点を提示しましょう。 図25：ラベルとフォームの例 (例)必須項目、最大文字数(200 文字まで)、カタカナ・ひらがな、全角・半角など
35 3.フォームの入力や選択の操作をしただけで予測できない状況の変化を起こさないように する。 (3.2.2 A)＜優先度１＞ 例えば、プルダウンメニューで項目を選択した途端、他の入力項目に変化が生じたり、別の 画面に移動してしまったりすると、利用者はその変化に混乱する可能性があります。 状況の変化があることを事前に通知しておくか、「実行」などのボタンを押した際に状況の 変化が起きるようにしておくことが必要です。 図26：不適合な例 4.入力エラーが生じた場合は、エラー箇所を特定しエラー内容を説明する。 (3.3.1 A)＜優先度１＞ 入力フォームにおいて、入力した内容にエラーがあった場合には、具体的なエラーメッセー ジを表示するようにし、修正できるようにしましょう。 図27：入力フォームでのエラー表示例 ※提言内容欄が空白という入力エラーがあった場合、“提言内容は入力必須項目です。”とい う、エラーメッセージを表示します。 ［不適合の事例］ プルダウンメニューの値を変更した途 端、意図しない内容の情報を示すウィン ドウが開きます。
36 5.入力エラーが生じた場合は、エラーの修正方法を提示する。 (3.3.3 AA)＜優先度１＞ 入力フォームにおいて、入力エラーがある場合には、正しい入力方法を提示しましょう。 例えば、生年月日を入力する際に、「昭和65 年」と入力し、存在しない年号としてエラーが 返された場合、1～64 の数値を入力する必要があるという説明を表示するような配慮が求めら れます。 6.入力情報を送信する前に情報の確認・修正ができるようにする。 (3.3.6 A)＜優先度１＞ 入力フォームで情報を送信する場合には、送信する前に、利用者が情報の確認と修正を行え るようにしておくことが必要です。 図28：入力フォームにおける画面遷移例 また、ページ内には、どうしても入力フォームを利用できない利用者のために入力フォーム 以外の方法も案内しましょう。（例：メール、電話、FAX） 7.不要になった入力フォームの削除 ＜優先度 1＞ 入力フォームは、サイバー攻撃の対象となる可能性があります。ホームページへの導入・作 成にあたっては、慎重に判断するとともに、情報政策課の「電子申請システム」を利用できな いか検討しましょう。 また、不要となった入力フォームは速やかにプログラム等も含めサーバから削除しましょう。
37 ⑨ 操 作 1.キーボード操作だけで、すべての情報・機能が利用できるようにする。 (2.1.1 A, 2.1.2 A)＜優先度１＞ マウスを利用できない利用者等のため、キーボードによる操作だけで、画面上のリンク、フ ォームコントロールを含むすべての情報・要素に到達できるようにしましょう。 マウスで操作したときだけ反応するボタンや、マウスの動きに応じて情報が変化するなどの 機能は使用しないようにしましょう。 2.ホームページの利用に、制限時間を設けない。 (2.2.1 A)＜優先度１＞ ホームページの閲覧時間や、操作可能な時間には制限を設けないでください。 ただし、セキュリティを高める目的等でやむをえず制限時間を設ける場合には、事前に告知 する、または簡単な操作で制限時間の延長ができるよう配慮しましょう。 3.キーボードによるフォーカスの移動順序と視覚的な順序を一致させる。 (2.4.3 A)＜優先度 1＞ ホームページをキーボードのみで操作する場合、キーボードフォーカス(リンクの選択やフォ ームのフィールドが入力可能な状態になること)は、タブキーを押すごとに HTML の記述され た順にリンクやフォームのコントロールを移動していきます。そのため、視覚的な順序と実際 の移動順序が異なっていると、意図したとおりの結果にならず戸惑いが生じてしまいます。 文書構造を無視した表示位置の指定(CSS による指定)や、tabindex 属性を不適切に設定しな いようにしましょう。 4.フォーカスされていることが、視覚的に確認できるようにする。 (2.4.7 AA)＜優先度１＞ 操作可能な、または操作対象となっている部分を変化させる(色を反転させる、枠で囲む)こ とで、視覚的に分かるようにしましょう。 図29：フォーカスされている項目が視覚的に認識できる例
38 5.フォーカスが当たったとき、自動的に配置の変化やページの移動など状況の変化を引き おこさないようにする。 (3.2.1 A)＜優先度１＞ フォーカスが当たったときに、配置を変化させたり、新しいページに移動したりといった状 況の変化を引き起こさないようにしましょう。 図30：不適合な例 ⑩ 特 殊 技 術 1. 特殊技術を利用する場合は、必ず代替手段を提供する。 ＜優先度２＞ JavaScript（ジャバ スクリプト）や Flash（フラッシュ）などの特殊な技術はユーザーの 利便性を向上させる場合にのみ使用しましょう。 特にスマートフォンなどのモバイル端末では、Flash が使えないものが多いことに留意する 必要があります。 もし、使用する場合は、代替手段や代替情報を併せて提供するようにしましょう。 2.CGI は極力使用しないこと。 ＜優先度２＞ CGI は、極力使用しないようにしましょう。 もし、利用するには、以下の条件について確認等を行う必要があります。 作成者が CGI に利用している言語（Perl 等）について熟知し、動作エラー等に十分対応す ることができるか。 CGI を設置するサーバのシステム環境に、使用する CGI は対応しているか。 サーバへの負荷は、他ホームページへ影響がない程度の軽いものであるか。 セキュリティ対策は万全か。 ※CGI は専門的な知識が必要不可欠であり、CGI プログラムのバグによってサーバの停止や ホームページの改ざんが引き起こされる可能性があるため、セキュリティ対策面からも極 力使用しないようにしましょう。また、使用する場合は、導入や運用について専門業者等 に依頼しましょう。 ［不適合の事例］ 左図にてキーボードのタブキーを押すと、フォーカスは ①～③の順に移動します。 ③にフォーカスが移動した瞬間、別ウィンドウが自動的 に立ち上がり、利用者を混乱させる恐れがあります。
39
第 5 章 チェックリスト
この章では、作成したホームページが、このガイドラインに沿っているかどうかをチェックす るためのリストを掲載しています。 ※ 確認欄の△は、ホームページ管理者がチェックする事項。 ※ CMS 欄の◎は、県情報掲載システムを利用すれば意識することなく達成できる項目。 ※ CMS 欄の○は、県情報掲載システムの機能を利用して作成すれば達成できる項目。 チェック項目 確認 CMS１ 情報発信について （１）所属長の決裁はとりましたか （２）掲載内容・タイミングは適切ですか （３）他者の著作権・肖像権の取り扱いは適切ですか （４）個人情報の取り扱いは適切ですか （５）ホームページは定期的に検証・分析できていますか △
○
（６）外部サイトにリンク設定している場合、相手方の承諾を得ましたか ２ サイト全般について （１）ページタイトル等は内容が分かる具体的な名称ですか （２）ページ見出しは、内容や構成が理解しやすいものですか （３）ページ内で使用する言語コードと文字コードを指定していますか◎
（４）ページの一部が別の言語で表現される場合、適切な言語コードを指定していますか◎
（５）ページのソースコードは使用する技術規格・仕様に準じた記述をしていますか◎
（６）ページの制作サイズは横スクロールが発生しないようページ幅ですか◎
（７）ダウンロードファイルだけでなく、HTML(ページ本文)に記載していますか （８）ホームページにはサイトポリシーや利用方法に関するページを作成していますか △○
15 （９）宮崎県が管理するホームページと分かりますか。◎
16 （１０）掲載日付を表示していますか◎
（１１）各ページに問い合わせ先を明示していますか◎
３ ページレイアウト （１）適切な HTML 要素を用いて記述(表現)していますか◎
（２）ページの長さは適切ですか （３）ページにフレーム（frame 要素）を使用していませんか◎
40 チェック項目 確認 CMS
