目次第 1 章ガイドラインの目的... 5 第 2 章ガイドラインの考え方 基本姿勢 適用範囲 想定する利用者 環境 利用者 利用環境 参考とする規格等 運用 目標 職員の意

Transcription

1 宮崎県ホームページ作成 のためのガイドライン 第 5 版第 4 版第 3 版第 2 版第 1 版 平成 29 年 1 月 10 日平成 27 年 3 月 31 日平成 26 年 3 月 20 日平成 16 年 9 月 1 日平成 15 年 9 月 12 日 宮崎県総合政策部秘書広報課広報戦略室 電話 FAX kohosenryaku@pref.miyazaki.lg.jp

2 目次第 1 章ガイドラインの目的... 5 第 2 章ガイドラインの考え方 基本姿勢 適用範囲 想定する利用者 環境 利用者 利用環境 参考とする規格等 運用 目標 職員の意識向上 委託業者への取組 ガイドラインの見直し 用語解説... 7 第 3 章情報発信等におけるガイドライン 情報発信上の留意点 文書取扱規程に基づいた作成 掲載情報の管理 著作権 肖像権の慎重な取り扱い 個人情報の保護 定期的な検証 分析による改善 リンクの設定 管理運営上の留意点 ホームページの日常管理 ユーザ ID 及びパスワードの管理の徹底 不正アクセス等への対応 誤掲載への対応 データ等のバックアップ 第 4 章ホームページ作成上のガイドライン 全般的事項 サイト全般 ページタイトル等は内容がわかる具体的な名称をつける ページ見出しは 内容や構成が理解しやすいものとする ページ内で使用する言語コードと文字コードを指定する ページの一部が別の言語で表現される場合 適切な言語コードを指定する ページのソースコードは使用する技術規格 仕様に準じた記述をする

3 6. ページの制作サイズは横スクロールが発生しないようページ幅に配慮する 情報掲載方法は原則として HTML によるものとし ダウンロードファイルに頼った情報提供とならないようにする サイトポリシーや利用方法に関するページを作成する トップページ等には宮崎県の名称を表示する 掲載日付を表示する 問い合わせ先を明示する ページレイアウト 適切な HTML 要素を用いて記述 ( 表現 ) する ページの長さは適切な長さとする 原則としてフレーム (frame 要素 ) を使用しない 異なる複数の閲覧環境で確認する 誘導 ( ナビゲーション ) 全ページに共通するナビゲーションはスキップでき 本文の先頭に移動できるようにする ページ全体共通のナビゲーションメニューは 同一レイアウト上に同じ順序で配置する 目的のページに到達できるようサイトマップや検索機能など複数の到達手段を用意する ホームページの現在位置を示した階層ナビゲーション ( パンくずリスト サイトマップ ) を設置する リンク リンクテキストは リンク先の内容を具体的に表すものにする リンクとリンクの間隔は十分にとる リンクを開く際は 新しいウィンドウを開かない リンク切れがないか定期的に確認する 個別事項 ファイル ファイル名やフォルダ名は 半角の英数字で簡潔に表現する トップページのファイル名は index.html とする サーバ格納ファイルのうち不要なファイルは原則として削除する ファイルのリンクにはファイルの種類 サイズを明記する サイズの大きなファイルは分割する 添付ファイルの閲覧ソフトの入手に関する情報を用意する 文字 文章 単語の途中にスペースや改行を入れない 文字サイズ ( 大きさ ) は絶対指定にしない

4 3. カタカナ文字 外国語 専門用語 略語を多用しない わかりやすい文章表現にする 機種依存文字 半角カナは使用しない 特殊書体 ( フォントタイプ ) は指定しない 表示 ( 表現 ) 形 大きさ 配置 方向 音だけに依存した情報提供は避ける 色に依存した情報提供は避ける 画像や文字と背景色とのコントラストを十分確保する ホームページ内の一部あるいは全体を 動かしたり更新したりさせない 点滅 閃光による表現は行わない ホームページ内で共通する機能を表すパーツや言語は 統一した表現を用いる 29 4 画像 画像やイメージマップ等には代替テキストを提供する 画像化された文字はできるだけ使用しない 画像データのファイルサイズを最適化する 地図 地図を挿入する時は 地図と同等の情報を代替テキストで提供する 音声 映像 音声や映像には 代替コンテンツを提供する 音声や映像を自動的に再生させない 表 表を使用する場合は単純な構造で読み上げ順序に配慮する 入力フォーム フォームを表すラベルはわかりやすい位置に配置し フォームの構成部品に関連づける フォームの入力欄には わかりやすいタイトルと入力条件の説明を行うとともに入力のしやすさの配慮を行う フォームの入力や選択の操作をしただけで予測できない状況の変化を起こさないようにする 入力エラーが生じた場合は エラー箇所を特定しエラー内容を説明する 入力エラーが生じた場合は エラーの修正方法を提示する 入力情報を送信する前に情報の確認 修正ができるようにする 不要になった入力フォームの削除 操作 キーボード操作だけで すべての情報 機能が利用できるようにする ホームページの利用に 制限時間を設けない キーボードによるフォーカスの移動順序と視覚的な順序を一致させる

5 4. フォーカスされていることが 視覚的に確認できるようにする フォーカスが当たったとき 自動的に配置の変化やページの移動など状況の変化を引きおこさないようにする 特殊技術 特殊技術を利用する場合は 必ず代替手段を提供する CGI は極力使用しないこと 第 5 章チェックリスト

6 第 1 章ガイドラインの目的 インターネット利用の普及が進展している中で ホームページは 伝えたい内容を伝えたいタイミングで直接情報発信できるなど 速報性 詳報性に優れ また 利用者にとっても場所や時間の制約がなく情報を即座に入手できるなど その有用性は高くなっており ホームページ活用による情報発信の重要性はますます高まっています そのような中 県でも 様々なホームページを通して 県民生活に密着した情報や災害 緊急情報 重点施策や地域の魅力など様々な情報を提供していますが その情報発信の内容や方法等が適時 的確で効果的なものであり 利用者視点で配慮の行き届いたものとすることが求められています この実現のためには ホームページの情報やサービスの機能 その運用管理などの質の向上を図るとともに 利用者の年齢や性別 障がいの有無や利用環境の違いを超えて 多くの人に利用いただくホームページづくりが重要です このガイドラインでは ホームページによる情報発信や管理運営に当たっての留意事項 作 成上配慮すべき基準などを示しており 県ではこのガイドラインに基づき 県のホームページ を利用する人にとって有益で利用しやすいホームページとなるよう取り組むこととします 第 2 章ガイドラインの考え方 1 基本姿勢ホームページの情報発信の内容や作成等に当たり 適時 的確で効果的な情報提供を行うとともに 使いやすさや分かりやすさ 情報の見つけやすさなど さまざまな利用者の視点に立ったページづくりに十分配慮します 2 適用範囲 このガイドラインは 宮崎県ホームページをはじめ ドメイン ( 配 下のページのほか 県の所属 機関が開設 運営するホームページに適用します 3 想定する利用者 環境利用者の個人特有の要素や 利用している機種 通信環境等の外的な要素などホームページの利用者の環境は実に様々です このガイドラインは 様々な環境のもとでホームページが利用されることを想定した上で作成しています 5

7 1 利用者年齢や性別 身体の障がいの有無などに関係なく ホームページを利用するすべての利用者を対象としています 特に 利用に当たって以下のような課題を抱えている利用者がいることを十分考慮し 支障なく利用できるようにすることが大切です 小さな文字を読むことが困難な人 キーボードやマウスを利用しにくいと感じている肢体不自由の人 外国語や専門用語 難しい漢字や複雑な文章を理解することが難しい人 パソコン初心者や高齢者 視聴覚による情報入手が困難な人 2 利用環境利用者は 様々な利用環境の中でホームページを利用していることを想定しなければいけません デスクトップ ノート型パソコンやスマートフォン タブレット等のモバイル端末などハードウェアの違い 低速回線や高速回線など通信環境の違い Windows や Mac など OS( 基本ソフト ) の違いや Internet Explorer や Firefox などブラウザやバージョンの違い キーボードやマウスがない環境など操作機器の違い 4 参考とする規格等このガイドラインは 様々な環境の違いを超えて できるだけ多くの人にホームページを快適に利用していただくため 特に ウェブアクセシビリティについては以下のような規格等を参考に作成しています JIS( 日本工業規格 )( 以下 JIS X という ) JIS X :2016 高齢者 障害者等配慮設計指針- 情報通信における機器 ソフトウェア及びサービス- 第 3 部 : ウェブコンテンツ (2016 年改正 ) 総務省 公共分野におけるアクセシビリティ確保に関する研究会報告書 みんなの公共サイト運用ガイドライン World Wide Web Consortium(W3C) ウェブコンテンツ アクセシビリティガイドライン 2.0 (WCAG2.0) 宮崎県 宮崎県ホームページバリアフリー化のための手引書 6

8 ウェブアクセシビリティとは ウェブサイトを利用するすべての人が 心身の機能や利用する環境に関係なく ウェブサイ トで提供されている情報やサービスを支障なく利用できることをいう 5 運用このガイドラインの運用に当たっては 職員をはじめホームページ作成の委託業者等とも連携して以下の内容に取り組みます 個別にホームページを開設 運営する所属等は このガイドラインを踏まえた 個別 具体的な作成 運営等のマニュアル等を備えるなど 適切に運営します 1 目標ホームページを活用し 適時 的確で効果的な情報発信に努めるとともに だれにでも使いやすく分かりやすいホームページづくりを目指します 特に ウェブアクセシビリティに関しては 公的機関は みんなの公共サイト運用ガイドライン を参考に 目標とする期限と適合レベルを定め その準拠を図ることが求められています 宮崎県ホームページにおいては 2017 年度末までに JIS X の適合レベル AA に準拠することを目標とします 2 職員の意識向上このガイドライン等の周知とともに ホームページを活用した情報発信やアクセシビリティの理解を深める研修 ホームページ作成操作研修等を継続的に実施し ホームページ作成に携わる職員の意識や知識 技能の向上に努めます なお 職員がホームページを作成 更新するときは 第 5 チェックリスト 等により基準が達成されているか確認し 公開するように努めます 3 委託業者への取組 ホームページの作成等を業務委託する場合においても このガイドラインを十分に踏まえた 上で 必要な事項等を明確に定め委託業者に示します 4 ガイドラインの見直し 利用者の閲覧環境やホームページの制作技術の変化 JIS 規格の変更等に対応するため 随 時見直すこととします 6 用語解説 このガイドラインの中で使用しているホームページに関係した専門用語の解説を 以下に記 載します 7

9 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 プログラミング言語 ( スクリプト言語 ) ユーザインターフェスの開発に用いられる 例え ば 画像にマウスを合わせたときにその画像を変化させる といったものある 8

10 代替テキスト 何かの理由で画像が表示されない場合に画像の代わりに表示される語句 文章 パンくずリスト Web ページの上部に表示されるナビゲーションで 見ているページのサイト内の位置や場所を示したもの パンくず は 童話 ヘンデルとグレーテル の中で 道に迷子にならないためにパンくずをまきながら歩いて行ったことに由来する pixel ピクセル 画素 画像を構成する単位のこと 第 3 章情報発信等におけるガイドライン この章では ホームページによる情報発信を行う上での方法 内容面の留意点や管理運営を 行う上で 心がけるべきポイント等を整理しています 1 情報発信上の留意点 1 文書取扱規程に基づいた作成ホームページに掲載する情報は 公文書に該当するため 通常の文書と同様に 宮崎県文書取扱規程に基づいた取扱をする必要があります 情報掲載に当たっては 原則として あらかじめ所属長の決裁をとる等 適切な対応を行いましょう 2 掲載情報の管理 適時 的確な情報の更新 修正を行う 記者投げ込み等で発表した情報 各種強化 普及期間の情報 災害情報など県民への周知が求められる または県民の関心が高いもの 重点施策の進捗結果や成果など 求められるタイミングで的確な情報を掲載し 最新の情報を提供するようにしましょう 新着情報や注目情報等の件数 掲載期間等は適切に管理する 新着情報や注目情報等は利用者の目に触れやすく閲覧される可能性を高めるといったメリットがあります しかし 件数が多いと見つけにくく 古い情報を掲載したままにしていると サイトに対する信頼が損なわれてしまいます また 掲載期間が短すぎると利用者の目に触れにくくなってしまいます 新着情報等の掲載件数や期間などのルールを定め 定期的な確認を行うなど適切に管理しましょう 9

11 掲載期間を過ぎた不要な情報は削除する 不要になった情報はこまめな削除を徹底する 公開期限の設定をする 更新日の掲示を行 うなど 古い情報により閲覧者に誤った情報を提供し 混乱を招かないようにしましょう 3 著作権 肖像権の慎重な取り扱いホームページは テキストによる文章のほか 写真 画像 音楽等の素材やネット上のサービス ( 地図等 ) を利用し わかりやすく情報提供する必要があります しかし 文章 写真 画像 音楽等の素材やネット上のサービスには著作権 意匠権 肖像権等があります 他者が 著作権を有するものを利用する場合は ホームページへの利用についての使用許諾について十分確認するとともに その引用等に関して注釈を明記する必要があります また 人物が写っている画像を使用する場合は 肖像権を侵害しないように留意する必要があります パンフレット等を PDF 等でホームページに掲載する場合も同様に注意する必要があります あわせて 県のホームページについても その内容の著作権等が県に帰属していることを記載するとともに 転載などの著作権の取扱に関する情報を明示する必要があります 4 個人情報の保護個人情報の掲載 収集に当たっては 宮崎県個人情報保護条例に基づき適切 慎重に対応する必要があります 特に 個人情報を収集する場合 目的等を明記し 目的外使用しないことを明示するとともに 通信の暗号化 (SSL 暗号化通信 ) 等の必要な措置を講じるなどセキュリティ対策を実施しましょう 5 定期的な検証 分析による改善 ホームページ開設後は アクセス状況の把握や利用者アンケートの実施等により 定期的に 検証 分析を行い 利用者視点にたった情報や機能等の見直し 改善に努めましょう 6 リンクの設定外部サイトにリンクを設定する場合 相手方がリンクフリーの場合を除き 相手先が指示した手続きにより承諾を得ましょう また 公序良俗に反するホームページ等にはリンクを設定しないなど 県のホームページとしてリンクがふさわしいか慎重に判断しましょう 10

12 2 管理運営上の留意点 1 ホームページの日常管理ホームページを開設する場合 ホームページ全体の責任者 ( 所属長等 ) 管理者( 担当者 ) を定め 点検や更新の責任の所在を明確にしましょう 責任者 管理者は 掲載された情報に古いものがないか リンク切れが生じていないか あるいは改ざんや閲覧できない状況が生じていないかなど定期的な確認等を行うようにしましょう 2 ユーザ ID 及びパスワードの管理の徹底ホームページの公開 更新時に必要となる CMS やサーバ等の ID パスワードについては各所属等で管理を徹底しましょう また 単純なパスワードは簡単に解析され ホームページの改ざん等の被害に遭う危険性が高まります パスワードは英数記号などを織り交ぜた複雑なものとし 定期的に変更するなどのセキュリティ対策を実施してください 所属で独自にホームページを開設している場合 管理者権限でのログインは特定の IP アドレスからしか行えないようなアクセス制限を設定しましょう 3 不正アクセス等への対応意図せずホームページの改ざんや閲覧できない状況が発生した場合 不正アクセスの可能性があるため 速やかに情報政策課 広報戦略室に連絡するとともに 関係業者等に連絡しましょう 4 誤掲載への対応 発信した情報に誤りがあった場合 ページを削除するのではなく まずはページ内で訂正し ましょう また 必要に応じて 関係者に連絡するなど適切 慎重に対応しましょう 5 データ等のバックアップ ホームページのデータ等は各所属等においてバックアップファイルを保存しましょう 11

13 第 4 章ホームページ作成上のガイドライン この章では JIS X など関連する規格等の内容を勘案し 宮崎県のホームページにおいて作成する上で配慮すべき項目として整理しています 各項目の後には JIS X の対応する項番及び適合レベル ( 例 : A など ) を表示しています また 項目の中で JIS X の適合レベル A 及び AA に該当するなど 目標達成のため取り組まなければならないもの等については 優先度 1 と表示し JIS X の適合レベル AAA に該当する または利用者の利便性に大きく寄与するもので 一定の配慮が求められるもの等については 優先度 2 と表示しています なお JIS X の詳細については 以下のホームページを確認ください ウェブアクセシビリティ基盤委員会ホームページ 1 全般的事項 1 サイト全般 1. ページタイトル等は内容がわかる具体的な名称をつける (2.4.2 A)< 優先度 1> ページタイトルは メニューバーや検索結果の見出し ブックマーク等に表示され 情報の取得や特定するための手がかりとなります 目的のページを見つけやすくなるよう ページタイトルから内容が推測できるような具体的なタイトルをつけましょう また 他のページと区別できる ( 固有の ) タイトルとし 複数のページで同じタイトルとしたり 長いタイトルにしないようにしましょう 図 1: メニューバーに表示されるページタイトル 12

14 図 2: 検索結果 2. ページ見出しは 内容や構成が理解しやすいものとする (2.4.6 AA)< 優先度 1> ページ見出しは 記載されている内容や構成を示すものです そのページにどのような情報があるのか そして そのページがどのように構成されているかを 利用者が理解しやすくするように わかりやすい見出しを提供しましょう 3. ページ内で使用する言語コードと文字コードを指定する (3.1.1 A)< 優先度 1> ホームページで使用される言語 HTML や CSS は 全世界で国や言語に関わらず同じ仕様 規格として定められています そのため どの言語によって記されているかが示されないと 正しい文字表記がなされなかったり 音声読み上げの際の誤読の原因となったりする可能性がありますので 言語コードを必ず指定しましょう 図 3:html 上での言語指定例 日本語ページであれば <html lang= ja > と記述するのが一般的です また 同じホームページ内では同じ文字コードを指定しましょう 4. ページの一部が別の言語で表現される場合 適切な言語コードを指定する (3.1.2 AA)< 優先度 1> 3. では そのページ全体が何語で書かれたものであるかを示すものだったのに対し この項目では ページの途中で言語が変わる場合の対応について示します 例えば 一つの段落 ( 一部 ) が英語で表現される場合には <p lang= en >English sample </p> のように言語コードを指定しましょう 13

15 5. ページのソースコードは使用する技術規格 仕様に準じた記述をする (4.1.1 A, A)< 優先度 1> Web ブラウザや音声読み上げソフト等の技術は HTML や CSS といったウェブコンテンツ技術の規格 仕様に合わせて開発されています そのため 技術規格 仕様にそって作成していない場合 用意した機能が動作しなかったり 正しく表示 読み上げすることができません ホームページを作成するのに用いる HTML 要素や CSS 等は W3C が勧告する Web 標準に従 って記述するとともに 下に示すホームページ等を用いて検証するなどにより確認しましょう HTML :W3C Markup Validation Service URL ( 英語版 ) CSS :W3C CSS Validation Service URL 6. ページの制作サイズは横スクロールが発生しないようページ幅に配慮する < 優先度 2> ホームページを閲覧する端末は ディスクトップ型やノート型のパソコン タブレット端末 スマートフォンなど多岐に渡っており 画面サイズも大小さまざまです ホームページ閲覧時に横スクロールが発生してしまうと 使い勝手が著しく低下するため ある程度小さな画面に対しても横スクロールが発生しないよう画面設計を行う必要があります 画面サイズは基本的に pixel を想定とするなど そのウィンドウサイズで閲覧し ても横スクロールが発生しないようなページ制作に心がけましょう 7. 情報掲載方法は原則として HTML によるものとし ダウンロードファイルに頼った情報提供とならないようにする < 優先度 2> ダウンロードファイル ( 添付ファイル ) だけに頼ったページだと利用者はファイルを開く 閲覧ソフトをダウンロードするという一手間がかかり情報が伝わりにくくなります また 音声読み上げソフトでは十分対応していない場合もあり 利用者にとっても不親切でもあります ダウンロードファイルは内容を補足するものととらえ 情報掲載は原則として HTML により提供 ( ページ本文への記載 ) をしましょう やむを得ずダウンロードファイルを掲載する場合は どのファイル形式が最適なのかを次の表を参考にしてください 14

16 情報の種類 最低限準備するファイル種 左項が不可能な場合代替として準備するファイル種 配慮するポイント 申請書等 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 を準備 別途ファイルの利用は 情報の性質上 操作性や検索性を損なうた め 行わないこと Office ファイルは Word の場合 doc,docx 形式 Excel の場合 xls,xlsx 形式で準備すること な お 一太郎は閲覧者が閲覧できない場合が多いため Word 形式で提供すること PDF ファイルは一般的に広く普及している電子ファイルであり 閲覧ソフト (Adobe Reader 等 ) が無償で配布されています また 様式のレイアウトを損なわずに閲覧 印刷ができるという特徴があり 閲覧環境が多様化している状況において 利便性の高いファイル形式といえます このような観点からダウンロードファイルを掲載する際は PDF ファイルを優先的に準備してください また 掲載する際には 次の点に注意しましょう 15

17 Word や Excel 等から直接 PDF ファイルを作成する ( 文書をスキャナー等で読み込んだものを使用しない ) タグ付き PDF ファイルにすることが望ましい ファイルサイズが大きい場合 章や項目ごとの分割ファイルと全体版の一括ダウンロードファイルの両方のファイルを掲載する 8. サイトポリシーや利用方法に関するページを作成する < 優先度 1> ホームページのサイトポリシー ( 管理運用主体 内容 個人情報保護 著作権 リンク 免責事項等の運用に当たっての方針 ) や利用方法に関するページを作成し トップページ等にリンクを設置しましょう 9. トップページ等には宮崎県の名称を表示する < 優先度 1> 利用者にこのホームページが宮崎県の管理するホームページであることがすぐにわかるよう トップページ等には 宮崎県の名称や必要に応じたロゴ画像を表示するとともに 各所属 機関が開設したホームページについては 県ホームページへのリンクを設置しましょう 10. 掲載日付を表示する < 優先度 1> 情報ページがいつ時点のものなのか 利用者に分かるように ページに掲載年月日を表示し ましょう 11. 問い合わせ先を明示する < 優先度 1> トップページ及び情報ページには利用者がホームページ全体や掲載情報に 不明な点がある場合の問い合わせ先を必ず記載しましょう 問い合わせ先には 担当部署 所在地 ( 住所 ) 電話番号 FAX 番号及びメールアドレスは最低限記載するようにしましょう 2 ページレイアウト 1. 適切な HTML 要素を用いて記述 ( 表現 ) する (1.3.1 A)< 優先度 1> HTML では 見出しや段落 箇条書き 引用 強調といった要素を適切に用いて記述 ( 表現 ) しましょう また ページレイアウトや文字の大きさ 色などは基本的に CSS を用いましょう 見出しは 見出し要素 (h1 h2 h3 h4 h5 h6) を用いる 各ページには ページ見出しを h1 として記述する 文字を大きくする目的で見出し要素を使用しない 16

18 図 4: 見出し要素 箇条書きは ol ul li dl dt dd 要素を用いて表現する 図 5: 箇条書き 文字の強調は strong em 要素を用いて表現する 図 6: 強調 2. ページの長さは適切な長さとする < 優先度 2> ページが長くなると 利用者は上下のスクロール操作が煩雑になり 目的の情報が探しにくくなったりしてしまいます ページの長さは著しく長くならないよう最適化を図ることとし 必要に応じて分割してページを作成するようにしましょう 17

19 3. 原則としてフレーム (frame 要素 ) を使用しない < 優先度 2> フレームとは 画面を分割し 一つの画面上に複数のページを同時に表示させるための技術です メニューとコンテンツを分割するために用いられるケースもありますが フレームを表示できない Web ブラウザがあったり フレームの切替えに手間が生じたりすることから 情報の取得が難しく 最近のホームページでは積極的に用いられることは少なくなりました より多くの利用者 利用環境で閲覧できることを目指すため 原則として フレームは利用しないようにしましょう コンテンツの構成上 やむを得ず採用する場合には 以下の条件を満たすようにしましょう フレーム一つ一つの役割を明確にする フレームが解除された状態でもナビゲーションが失われないようにする フレームを用いなくてもすべての情報が得られるようにする 図 7: フレームの仕組み メニューページ 詳細情報ページ 2 つ ( またはそれ以上 ) のページを結合 一つの画面に同時に表示 境界線で分割 4. 異なる複数の閲覧環境で確認する < 優先度 2> ホームページを閲覧する機器 環境はさまざまです 画面サイズ OS Web ブラウザやバージョンの違いなどによって 同じホームページを閲覧していても 異なった見た目になることが少なくありません 18

20 できるだけ多くの閲覧環境 (Web ブラウザ等 ) で情報の欠落 大幅なレイアウトの崩れがないか確認をしましょう なお 県情報掲載システムで作成したページについては 確認不要ですが それ以外のホームページについては 開設時に委託業者に義務づけたり 公開されたページを携帯電話等で確認しましょう <ブラウザの例 > Internet Explorer Google Chrome Mozilla Firefox スマートフォン (Android,iOS) また 可能であれば各 Web ブラウザの古いバージョンでも確認することもお勧めします 3 誘導 ( ナビゲーション ) 1. 全ページに共通するナビゲーションはスキップでき 本文の先頭に移動できるようにする (2.4.1 A) < 優先度 1> 全ページに共通するロゴやグローバルナビゲーション等は ホームページの使い勝手を高める上で必要ですが 音声読み上げソフトやキーボードのみで操作している利用者にとっては 新たなページを開くたびに多くの操作が必要になってしまいます このため ページ本文の先頭に 適切な見出しを記述するなど Web ブラウザの機能を用い て ナビゲーション部分を読み飛ばし ページ本文の開始位置へ容易に到達 ( スキップ ) でき るような仕組みを準備しましょう 図 8: 本文の先頭に適切な見出しを記述する 19

21 2. ページ全体共通のナビゲーションメニューは 同一レイアウト上に同じ順序で配置する (3.2.3 AA) < 優先度 1> ナビゲーションの機能 配置 見た目を統一することにより 利用者はホームページの使い方を理解しやすくなり 円滑に利用できます ナビゲーション部分とページ本文が明確に区別できることにより 情報を探すことに集中しやすくなることから 共通に提供するナビゲーションは 表示スタイルや標記に統一感を持たせるようにしましょう 図 9: 県ホームページのナビゲーションメニュー ( 全ページに表示し統一感を持たせている ) 3. 目的のページに到達できるようサイトマップや検索機能など複数の到達手段を用意する (2.4.5 AA)< 優先度 1> 一つのページへの到達手段が 一つしかない場合 その到達手段を見つけることができず 目的のページにたどり着けなくなってしまいます そのため ホームページ内には 主要分類 サイトマップ サイト内検索 などの複数の到達手段を提供し 利用者にとって使いやすい到達手段を選択できるようにしましょう 図 10: 県ホームページでは 主要分類 サイト内検索 組織で探す サイトマップ など複数手段を提供 4. ホームページの現在位置を示した階層ナビゲーション ( パンくずリスト サイトマップ ) を設置する (2.4.8 AAA) < 優先度 2> ホームページは たくさんのページが集まり複雑に構成されています 現在閲覧してページが どの階層にあるのか どのページとつながっているのかなどを知る助けとするため ホームページ全体の階層構造を示す パンくずリスト を提供するようにしましょう また すべてのページからトップページに戻れるようリンクを設置することも大切です 20

22 図 11: パンくずリスト なお サイトマップは ホームページ全体の構成を示すものです ホームページの目立つ 場所 ( トップページ等 ) にリンクを設定しましょう 21

23 4 リンク 1. リンクテキストは リンク先の内容を具体的に表すものにする (2.4.4 A)< 優先度 1> 別のページや添付ファイルにリンクを設定する場合 リンクテキストに 詳しくはこちら などと記載すると 利用者はリンク先の内容が特定できない ( 分からない ) ため 好ましい表現とは言えません リンクテキストだけでリンク先の内容を予測できるようなものにしましょう 図 12: リンクテキスト設定の例 上記の例のようにリンク先がページ以外の場合は PDF などファイルの種類とファイルサイズ ( 容量 ) を記載する必要があります また 外部サイトにリンクを設定する場合 外部サイトへのリンクであることを明示することも重要です 2. リンクとリンクの間隔は十分にとる < 優先度 1> リンクテキストとリンクテキストの間隔が狭いと 意図しないリンクテキストをクリックするなど 誤操作の原因になることから リンクテキストとリンクテキストは十分な間隔を確保しましょう また 画像リンクの場合は 画像が小さいとクリックしにくいので ある程度の大きな面積のものを準備しましょう 3. リンクを開く際は 新しいウィンドウを開かない < 優先度 2> 原則として 同じホームページ内のリンクは 同一ウィンドウで開くようにし 新しいウィンドウは開かないようにしましょう 外部サイトやヘルプページ等を開く場合など 新しいウィンドウを開くことに利点がある場合に限っては 新しいウィンドウで開くことができます 22

24 4. リンク切れがないか定期的に確認する < 優先度 2> 別のページにリンクを設定した場合 リンク先のページの削除等により リンクが切れる場合があります 定期的にホームページを確認し リンク切れがあった場合は 状況に応じて適宜修正しましょう 2 個別事項 1 ファイル WEB サーバ用ファイルについて 1. ファイル名やフォルダ名は 半角の英数字で簡潔に表現する < 優先度 1> ホームページは HTML ファイルと画像ファイル等によって構成されており 各ファイルはフォルダに保存されています これらファイル名やフォルダ名は 全角かな ( カナ ) 半角カナ 漢字 全角英数字文字を使用した場合 サーバやブラウザで認識されず ページが正しく表示されません 必ず ファイル名 フォルダ名は半角英数字で付けるようにしましょう : 認識できないファイル名〇 : 認識できるファイル名 県庁所在地.html kencho.html マッフ.gif map.gif 県庁写真 01.jpg ph-ken01.jpg 2. トップページのファイル名は index.html とする < 優先度 2> WEB サーバは 自動的に index.html もしくは index.htm をトップページ( 表紙 ) だと認識するよう設定されており URL を入力する際 index.html の入力を省略することができます 利用者に トップページであることが分かるようにするためにも トップページのファイル名は index.html と付けるようにしましょう 3. サーバ格納ファイルのうち不要なファイルは原則として削除する < 優先度 2> WEB サーバに格納されているファイルは 全て公開されることになります ファイルが WEB サーバ上に残ったままだと 検索エンジンに表示される場合があり 誤った情報等を伝えることになり 利用者に混乱を招きます 定期的にサーバ内のファイルの状況を確認し 不要なファイルについては確実に削除するようにしましょう なお ページを削除する際 HTML だけでなくページに付随するファイル 23

25 ( 画像や添付ファイルなど ) も必ず削除しましょう ページの添付ファイルについて 4. ファイルのリンクにはファイルの種類 サイズを明記する < 優先度 1> ファイルで情報提供する場合は ファイルの種類 ファイルサイズをリンクテキストに記載し 利用者に事前に分かるようにしておきましょう また 必要に応じて画像を表示するとより良いでしょう 5. サイズの大きなファイルは分割する < 優先度 2> サイズの大きいファイルは 閲覧やダウンロードするのに時間がかかります 様々な閲覧環境を考え サイズの大きいファイルの分割や解像度を低くするなど なるべく軽い添付ファイルを提供するなどの対応をしましょう 6. 添付ファイルの閲覧ソフトの入手に関する情報を用意する < 優先度 2> ファイルを添付する場合には 閲覧に必要なソフトウェア (viewer) のダウンロード先を案内 しましょう 図 13: 閲覧ソフト入手情報の例 2 文字 文章 1. 単語の途中にスペースや改行を入れない (1.3.2 A)< 優先度 1> 単語の途中にスペースや改行が入っていると 音声読み上げソフトや自動翻訳ソフトでは単語を正しく認識することができない可能性があります 例えば 所在地 のように字間を空けると 音声読み上げでは ところざいち などと読み上げられます レイアウトを揃えるために 単語内にスペースや改行を入れないようにしましょう 24

26 2. 文字サイズ ( 大きさ ) は絶対指定にしない (1.4.4 AA)< 優先度 1> 現在広く利用されている Web ブラウザには 文字や画面を拡大する機能があります その機能が正しく動作するよう 文字サイズはできるだけ指定しないようにしましょう どうしても 文字サイズを変更する必要がある場合は 相対指定にしてください 特定の文字列を 周辺の文字列強調したい場合には (CSS によって規定された ) スタイルを適用するか 強調 (strong 要素や em 要素 ) を用いるようにしましょう 3. カタカナ文字 外国語 専門用語 略語を多用しない (3.1.3 AAA, AAA)< 優先度 2> カタカナ文字や外国語 専門用語や行政用語 略語など 日常一般に使われていない表現は避け 一般的な用語 わかりやすい表現に置き換えられないかを検討しましょう どうしても 使用する必要がある場合は 文章の最初にでてきた際に説明を行い 読みの難しい漢字は 読み方を明示しましょう 4. わかりやすい文章表現にする (3.1.5 AAA)< 優先度 2> 分かりやすい文章で表現するとともに 図やイラストなども用いて ページを作成しましょう ホームページに記される情報は ななめ読み されやすいと言われています 概要が一目でわからなかったり 一文が長かったりすると 誤解が生じたり 理解が不十分になってしまいかねません 分かりやすい文章で表現し 必要に応じて 理解を促す別のコンテンツを用意するなど工夫しましょう 箇条書きを用いる 見出しをつける 結論を先に述べる 単文で構成する ( 一文を短くし 文の構造を複雑にしない ) 文章だけでなく 図やイラストなども用いる 5. 機種依存文字 半角カナは使用しない < 優先度 1> 丸付数字やローマ数字 省略記号などのいわゆる 機種依存文字 及び半角カナは 閲覧環境の OS や文字コードの違いによって 表示される文字が変わってしまう ( 文字化け ) あるいは全く表示されなかったりしてしまうため使用しないようにしましょう 25

27 機種依存文字の一覧 スホ ーツ振興課 スポーツ振興課 オールみやざき営業課 オールみやざき営業課 シーカ イアコンヘ ンションセンター シーガイアコンベンションセンター 26

28 また 日付や時刻の表記する場合 / や : は使用できません 数字を全角で入力し たり 曜日を ( 月 ) ( 火 ) などと入力した場合 音声読み上げソフトで正しく読み上げられない ため 半角数字や ( 月曜 ) または ( 月曜日 ) と記述します 1983/04/ 年 4 月 15 日 15 日 ( 金 ) 15 日 ( 金曜日 ) 10:15~ 午前 10 時 15 分から 6. 特殊書体 ( フォントタイプ ) は指定しない < 優先度 1> 特殊書体 ( フォントタイプ ) は 環境の違いによって予想外のフォントに置き換えられてしま たり 読みにくかったりするので できるだけ指定しないようにしましょう 3 表示 ( 表現 ) 1. 形 大きさ 配置 方向 音だけに依存した情報提供は避ける (1.3.3 A)< 優先度 1> 形 大きさ 配置 方向 音だけに依存した情報提供をすると 音声読み上げソフト利用者など ページの内容を理解することが難しくなるので テキストなどの補足情報をあわせて提供するなど配慮しましょう 図 14: 形のみで情報提供している例 27

29 2. 色に依存した情報提供は避ける (1.4.1 A)< 優先度 1> 色だけに依存した情報提供をすると 色の識別が難しい人や音声読み上げソフト利用者に 文章の内容を伝えることが難しくなります 色を使って情報を提供する場合 テキストの情報も併記するなどにより モノクロプリンターで印刷した場合でも内容が伝わるよう配慮しましょう 図 15: 色に依存した情報提供 赤文字の必須書類については 白黒で印刷した場合 情報の識別ができません 例えば 必須 書類に をつけ は必須書類です とテキストでの説明を付加するなど 正しく伝え るようにしましょう 3. 画像や文字と背景色とのコントラストを十分確保する (1.4.3 AA)< 優先度 1> ホームページは 背景色や壁紙 文字色を設定することによって 装飾を施すことができます しかし そのような工夫が文字の読みづらさの原因になってしまうことがあります 背景色は白 (#ffffff) 文字色は黒(#000000) を基本色とするなど より多くの利用者にとって 読みやすい 識別しやすい配色となるよう 心がけましょう なお 装飾を施す必要がある場合は コントラスト比 4.5:1 を確保しましょう 図 16: コントラスト比 28

30 コントラストは 以下のフリーソフトでチェックできます カラー コントラスト アナライザー 2013J 4. ホームページ内の一部あるいは全体を 動かしたり更新したりさせない (2.2.2 A)< 優先度 1> ホームページ内で 動いたり 情報が書き換わったりする部分があると その情報を正しく取得できなかったり 意図する操作ができなくなったりしてしまうことがあります そのため 必要があってホームページ上にこのようなコンテンツを提供する場合は 以下の条件を守るようにしましょう アニメーションやスライドショーは 停止させることができる アニメーションやスライドショー停止後も 意味が伝わるようにする 画面の一部 全部をスクロールさせない 情報の自動更新はしない 5. 点滅 閃光による表現は行わない (2.3.1 A, AAA)< 優先度 1> 利用者の中には 一定の周期で点滅 閃光を伴うコンテンツによって発作を引き起こす恐れがあります 情報を認識できないことがあるだけではなく 身体の安全に関わる事ですので特に注意しましょう また 点滅 閃光を放つコンテンツがある場合は 1 秒間に 3 回以下であるものにしましょう 例えば 記者会見における多数のカメラのフラッシュなどで 閃光を放つコンテンツが生成 される可能性がありますので そのような状況が生じる可能性がないか留意しておきましょう 6. ホームページ内で共通する機能を表すパーツや言語は 統一した表現を用いる (3.2.4 AA)< 優先度 1> ホームページの中で 一つの機能に対して複数の言葉や表現が使われていると 利用者の混乱を招きます トップページ と ホーム ページの先頭へ と ページのトップへ などの言葉の差だけでなく お問い合わせ と お問合せ のような表記の差にも注意しましょう また 同じ機能を持つリンクボタンには 同じ画像を用いるといった工夫も 使い勝手を高める上で重要な配慮となります 29

31 図 17: 好ましくない例 ( 同じ内容を複数の異なる表現で表示 ) 4 画像 1. 画像やイメージマップ等には代替テキストを提供する (1.1.1 A)< 優先度 1> 文字以外の画像やイメージマップには 必ず代替テキストを設定しましょう これによって 画像等が表示されない場合でも そこにどんな情報が表現されているのかを伝えることができるようになります 図 18: 代替テキストの例 ( 画像が表示されない場合でも内容が伝わる代替テキストを設定 ) また 画像が 装飾目的で用いられている場合には alt= と記述します 代替テキストは 画像の代わりとして表示されるテキスト ですので 画像に何が描かれ ているかではなく 文脈上でどのような意味を持つか 画像が表示されなかった場合にどのよ うな文字情報に置き換えられると意味が通じるかを考えて 適切な文字列を設定してください 図 19: 代替テキストの例 ( 画像の説明ではなく 文脈上意味が通じる代替テキストを設定 ) 30

32 2. 画像化された文字はできるだけ使用しない (1.4.5 AA)< 優先度 1> 文字は できる限り画像化された文字でなく テキストを用いるようにしましょう CSS ではできない場合に限って 画像化された文字を用いるようにしましょう 3. 画像データのファイルサイズを最適化する < 優先度 2> ページを表示する際 画像データのファイルサイズが大きいとページの読み込みに時間がかかり 利用者に負担をかけます 画像サイズは 目安として最大で pixel 200KB 以下になるようにしましょう 5 地図地図を挿入する時は 地図と同等の情報を代替テキストで提供する (1.1.1A)< 優先度 1> ページに地図を挿入する時は 地図を見ることができない人のために地図と同等の情報をテキストで記載する必要があります 地図が画像である場合は代替テキストでも記載できますが Google Maps など外部の地図サイトの情報をページに埋め込む場合は代替テキストを入力することが出来ないため 地図の前にテキストで記載する必要があります なお ページに地図を挿入する場合は必ず著作権や利用者規約等を確認してください 図 20: 画像の地図 ( 画像の代替テキストでも 地図の代替情報が記載可能 ) 図 21:Googlemaps などの外部サイトデータ埋込地図 ( 地図の前に 通常のテキストで地図の代替情報を記載 ) 31

33 6 音声 映像 1. 音声や映像には 代替コンテンツを提供する (1.2.1~1.2.3 A, AA, AA)< 優先度 1> 音声や映像などは 再生のための特別なソフトウェアや設定等が必要な場合があり また 耳が不自由な人も十分理解できないことから できる限り使用しないようにしましょう 使用する場合は 以下のような代替コンテンツを提供しましょう 音声情報のみの情報 内容を記載したテキストを提供する 映像情報のみの情報 テキストまたは音声を提供する テキストによる提供が難しい場合は 音声 映像の内容に関する問い合わせ先を明示する 2. 音声や映像を自動的に再生させない (1.4.2 A)< 優先度 1> ホームページを開いたとき 音声や映像が自動的に再生されると 音声読み上げソフトの読み上げ音声と音声とが重なってしまうため 情報取得が難しくなります また 利用者が静かな場所であったり 業務中であったりした場合には 音を鳴らすこと自体が好ましくないこともあります 音声や映像は 利用者によって再生 停止及び音量の調整ができるようにしましょう 32

34 7 表 表を使用する場合は単純な構造で読み上げ順序に配慮する (1.3.1 A, A)< 優先度 1> 表を使用する場合は 以下の点に注意しましょう 表組み (table 要素 ) を使用する前に 表以外に適した表現がないかを検討する 表を使用する際は 見出しを表す th 要素と データを表す td 要素を適切に使用するともに 適切な見出しをつける データテーブルでは caption 要素を用いて表題を記述する データテーブルでは headers scope id 属性を用いて見出しとデータの関連性を明示する 作成者の意図したとおりに読み上げが行われるように記述する ( 読み上げ順序は 図 22 に示すように 上の行から順に 左のセルから右のセルへと読み上げられる ) レイアウトのためだけに表を使用しない 図 22: 表組み 図 23: 表の読み上げ順序 33

35 8 入力フォーム 1. フォームを表すラベルはわかりやすい位置に配置し フォームの構成部品に関連づける (1.3.1 A)< 優先度 1> 入力欄に何を入力すればよいか分かりやすく表示し わかりやすい位置にラベルと入力欄を配置します 入力フォームに使用する ラジオボタン チェックボックス テキストフィールド ( 入力欄 ) などの部品は label 要素および for id 属性を用いて ラベルとの関連を付けましょう 図 24: 入力欄 2. フォームの入力欄には わかりやすいタイトルと入力条件の説明を行うとともに入力のしやすさの配慮を行う (3.3.2 A)< 優先度 1> 入力フォームの各入力欄には わかりやすいタイトルを表示しましょう また 入力ミスをしないよう 必要に応じて 情報を入力するためのシンプルな説明文や手がかり 注意点を提示しましょう 図 25: ラベルとフォームの例 ( 例 ) 必須項目 最大文字数 (200 文字まで ) カタカナ ひらがな 全角 半角など 34

36 3. フォームの入力や選択の操作をしただけで予測できない状況の変化を起こさないようにする (3.2.2 A)< 優先度 1> 例えば プルダウンメニューで項目を選択した途端 他の入力項目に変化が生じたり 別の画面に移動してしまったりすると 利用者はその変化に混乱する可能性があります 状況の変化があることを事前に通知しておくか 実行 などのボタンを押した際に状況の変化が起きるようにしておくことが必要です 図 26: 不適合な例 [ 不適合の事例 ] プルダウンメニューの値を変更した途端 意図しない内容の情報を示すウィンドウが開きます 4. 入力エラーが生じた場合は エラー箇所を特定しエラー内容を説明する (3.3.1 A)< 優先度 1> 入力フォームにおいて 入力した内容にエラーがあった場合には 具体的なエラーメッセージを表示するようにし 修正できるようにしましょう 図 27: 入力フォームでのエラー表示例 提言内容欄が空白という入力エラーがあった場合 提言内容は入力必須項目です とい う エラーメッセージを表示します 35

37 5. 入力エラーが生じた場合は エラーの修正方法を提示する (3.3.3 AA)< 優先度 1> 入力フォームにおいて 入力エラーがある場合には 正しい入力方法を提示しましょう 例えば 生年月日を入力する際に 昭和 65 年 と入力し 存在しない年号としてエラーが返された場合 1~64 の数値を入力する必要があるという説明を表示するような配慮が求められます 6. 入力情報を送信する前に情報の確認 修正ができるようにする (3.3.6 A)< 優先度 1> 入力フォームで情報を送信する場合には 送信する前に 利用者が情報の確認と修正を行えるようにしておくことが必要です 図 28: 入力フォームにおける画面遷移例 また ページ内には どうしても入力フォームを利用できない利用者のために入力フォーム 以外の方法も案内しましょう ( 例 : メール 電話 FAX) 7. 不要になった入力フォームの削除 < 優先度 1> 入力フォームは サイバー攻撃の対象となる可能性があります ホームページへの導入 作成にあたっては 慎重に判断するとともに 情報政策課の 電子申請システム を利用できないか検討しましょう また 不要となった入力フォームは速やかにプログラム等も含めサーバから削除しましょう 36

38 9 操作 1. キーボード操作だけで すべての情報 機能が利用できるようにする (2.1.1 A, A)< 優先度 1> マウスを利用できない利用者等のため キーボードによる操作だけで 画面上のリンク フォームコントロールを含むすべての情報 要素に到達できるようにしましょう マウスで操作したときだけ反応するボタンや マウスの動きに応じて情報が変化するなどの機能は使用しないようにしましょう 2. ホームページの利用に 制限時間を設けない (2.2.1 A)< 優先度 1> ホームページの閲覧時間や 操作可能な時間には制限を設けないでください ただし セキュリティを高める目的等でやむをえず制限時間を設ける場合には 事前に告知する または簡単な操作で制限時間の延長ができるよう配慮しましょう 3. キーボードによるフォーカスの移動順序と視覚的な順序を一致させる (2.4.3 A)< 優先度 1> ホームページをキーボードのみで操作する場合 キーボードフォーカス ( リンクの選択やフォームのフィールドが入力可能な状態になること ) は タブキーを押すごとに HTML の記述された順にリンクやフォームのコントロールを移動していきます そのため 視覚的な順序と実際の移動順序が異なっていると 意図したとおりの結果にならず戸惑いが生じてしまいます 文書構造を無視した表示位置の指定 (CSS による指定 ) や tabindex 属性を不適切に設定しないようにしましょう 4. フォーカスされていることが 視覚的に確認できるようにする (2.4.7 AA)< 優先度 1> 操作可能な または操作対象となっている部分を変化させる ( 色を反転させる 枠で囲む ) ことで 視覚的に分かるようにしましょう 図 29: フォーカスされている項目が視覚的に認識できる例 37

39 5. フォーカスが当たったとき 自動的に配置の変化やページの移動など状況の変化を引きおこさないようにする (3.2.1 A)< 優先度 1> フォーカスが当たったときに 配置を変化させたり 新しいページに移動したりといった状況の変化を引き起こさないようにしましょう 図 30: 不適合な例 [ 不適合の事例 ] 左図にてキーボードのタブキーを押すと フォーカスは 1~3の順に移動します 3にフォーカスが移動した瞬間 別ウィンドウが自動的に立ち上がり 利用者を混乱させる恐れがあります 10 特殊技術 1. 特殊技術を利用する場合は 必ず代替手段を提供する < 優先度 2> JavaScript( ジャバスクリプト ) や Flash( フラッシュ ) などの特殊な技術はユーザーの利便性を向上させる場合にのみ使用しましょう 特にスマートフォンなどのモバイル端末では Flash が使えないものが多いことに留意する必要があります もし 使用する場合は 代替手段や代替情報を併せて提供するようにしましょう 2.CGI は極力使用しないこと < 優先度 2> CGI は 極力使用しないようにしましょう もし 利用するには 以下の条件について確認等を行う必要があります 作成者が CGI に利用している言語 (Perl 等 ) について熟知し 動作エラー等に十分対応することができるか CGI を設置するサーバのシステム環境に 使用する CGI は対応しているか サーバへの負荷は 他ホームページへ影響がない程度の軽いものであるか セキュリティ対策は万全か CGI は専門的な知識が必要不可欠であり CGI プログラムのバグによってサーバの停止やホームページの改ざんが引き起こされる可能性があるため セキュリティ対策面からも極力使用しないようにしましょう また 使用する場合は 導入や運用について専門業者等に依頼しましょう 38

40 第 5 章チェックリスト この章では 作成したホームページが このガイドラインに沿っているかどうかをチェックするためのリストを掲載しています 確認欄の は ホームページ管理者がチェックする事項 CMS 欄の は 県情報掲載システムを利用すれば意識することなく達成できる項目 CMS 欄の は 県情報掲載システムの機能を利用して作成すれば達成できる項目 チェック項目 確認 CMS 1 情報発信について (1) 所属長の決裁はとりましたか (2) 掲載内容 タイミングは適切ですか (3) 他者の著作権 肖像権の取り扱いは適切ですか (4) 個人情報の取り扱いは適切ですか (5) ホームページは定期的に検証 分析できていますか (6) 外部サイトにリンク設定している場合 相手方の承諾を得ましたか 2 サイト全般について (1) ページタイトル等は内容が分かる具体的な名称ですか (2) ページ見出しは 内容や構成が理解しやすいものですか (3) ページ内で使用する言語コードと文字コードを指定していますか (4) ページの一部が別の言語で表現される場合 適切な言語コードを指定していますか (5) ページのソースコードは使用する技術規格 仕様に準じた記述をしていますか (6) ページの制作サイズは横スクロールが発生しないようページ幅ですか (7) ダウンロードファイルだけでなく HTML( ページ本文 ) に記載していますか (8) ホームページにはサイトポリシーや利用方法に関するページを作成していますか (9) 宮崎県が管理するホームページと分かりますか (10) 掲載日付を表示していますか (11) 各ページに問い合わせ先を明示していますか 3 ページレイアウト (1) 適切な HTML 要素を用いて記述 ( 表現 ) していますか (2) ページの長さは適切ですか (3) ページにフレーム (frame 要素 ) を使用していませんか 39

41 チェック項目 確認 CMS (4) 複数の閲覧環境で確認しましたか 4 誘導 ( ナビゲーション ) (1) ナビゲーションはスキップでき 本文の先頭に移動できるようにしていますか (2) ナビゲーションメニューは 同一レイアウト上に同じ順序で配置していますか (3) ホームページ上にサイトマップや検索機能など複数の到達手段を用意していますか (4) ホームページの現在位置を示した階層ナビゲーションを設置していますか 5 リンク (1) リンクテキストは リンク先の内容を具体的に表すものにしていますか (2) リンクとリンクの間隔は十分にとっていますか (3) リンクを開く際は 新しいウィンドウを開かないようにしていますか (4) リンク切れがないか定期的に確認していますか 6 ファイル (1) ファイル名やフォルダ名は 半角の英数字で簡潔に表現していますか (2) トップページのファイル名は index.html としていますか (3) サーバ格納ファイルのうち不要なファイルは削除していますか (4) ファイルのリンクにはファイルの種類 サイズを明記していますか (5) サイズの大きなファイルは分割していますか (6) 添付ファイルの閲覧ソフトの入手に関する情報を用意していますか (7) 添付ファイルは情報の種類にあった適切なファイル形式を用意していますか 7 文字 文章 (1) 単語の途中にスペースや改行を入れていませんか (2) 文字サイズ ( 大きさ ) は絶対指定にしていませんか (3) カタカナ文字 外国語 専門用語 略語を使用していませんか (4) わかりやすい文章表現にしていますか (5) 機種依存文字 半角カナは使用していませんか (6) 特殊書体 ( フォントタイプ ) は指定していませんか 8 表示 ( 表現 ) (1) 形 大きさ 配置 方向 音だけに依存した情報提供をしていませんか (2) 色に依存した情報提供をしていませんか 40

42 チェック項目 確認 CMS (3) 画像や文字と背景色とのコントラスト比 (4.5:1) を十分確保していますか (4) ホームページ内の一部あるいは全体を 動かしたり更新したりさせたりしていませんか (5) 点滅 閃光による表現をしていませんか (6) ホームページ内で共通する機能を表すパーツや言語は 統一した表現を用いていますか 9 画像 (1) 画像やイメージマップ等には代替テキストを提供していますか (2) 画像化された文字を使用していませんか (3) 画像データのファイルサイズを最適化していますか 10 地図 (1) 地図情報には 代替コンテンツを提供していますか 11 音声 映像 (1) 音声や映像には 代替コンテンツを提供していますか (2) 音声や映像は 利用者によって再生 停止及び音量の調節ができますか 12 表 (1) 表を使用する場合は単純な構造で読み上げ順序に配慮していますか 13 入力フォーム (1) ラベルはわかりやすい位置に配置し フォームの構成部品に関連づけていますか (2) 入力欄には わかりやすいタイトルと入力条件の説明や入力のしやすさに配慮していますか (3) 入力や選択の操作だけで予測できない状況の変化を起こさないようにしていますか (4) 入力エラーが生じた場合は エラー箇所を特定しエラー内容を説明していますか (5) 入力エラーが生じた場合は エラーの修正方法を提示していますか (6) 入力情報を送信する前に情報の確認 修正ができるようにしていますか 14 操作 (1) キーボード操作だけで すべての情報 機能が利用できるようにしていますか (2) ホームページの利用に 制限時間を設けていませんか (3) キーボードによるフォーカスの移動順序と視覚的な順序を一致させていますか (4) フォーカスされていることが 視覚的に確認できるようにしていますか (5) フォーカスが当たったとき 自動的に配置の変化やページの移動など状況の変化を引きおこさないようにしていますか 41

43 チェック項目 確認 CMS 15 特殊技術 (1) 特殊技術を利用する場合は 必ず代替手段を提供していますか (2)CGI は使用していませんか 42