1.1 本ガイドラインの目的 本ウェブ制作ガイドラインは制作したウェブサイトを見る全ての人々への利用しやすさを配慮した情報提供を行うためにホームページ制作を行う際に注意すべき点と制作ルールや定義について明記したものです。本ガイドラインに沿って制作したウェブサイトによる情報提供の更なる充実と利用しやすさを目指してガイドライン更新をしていきます。
1.3 ウェブアクセシビリティ ホームページを利用するすべての人々が、心身の機能や利用する環境に関係なく、ホームページで提供されている情報やサービスが休息に拡大する中、ページの作成方法が原因で、高齢者や障害者などが情報やサービスを適切に利用できないという問題が生じているようです。ウェブアクセシビリティはそのような問題が生じないように、利用者誰もが等しく情報へアクセスでき快適に利用できることを配慮しながら、ウェブページ、サイトを制作する考え方です。
2.1 読みやすい文字サイズ、フォント、行間の指定 ・文字サイズ、フォントを指定する場合は読みやすさと読み手に与える印象を考慮して指定します。 ・行間は読みやすさとそれによって読み手に与える印象を考慮して充分に余裕をもった行間を指定します。
2.2 文字サイズの設定、指定方法 ・文字サイズはpxの他、相対的な単位であるem,%を使用します。 ・主要なブラウザ(エクスプローラー/chrome)の機能で文字サイズが自由に変更できることを確認します。 ・文字サイズを200%まで拡大して変更した場合に情報が読み取れること、表示が崩れることがないように設定を行います。
2.3 各行の文字数について ・画面表示を変更して閲覧した場合であっても、各行に表示されるテキストが平均40文字（英字の場合は80字）を超えないように設定してユーザーから見やすさを考慮した設定で作成します。
2.4 文字色と背景色の組み合わせ、コントラスト ・ページ内のテキストや画像などにおいては、文字の色と背景の色の組み合わせやコントラスト（明暗の差）、デザインを十分に配慮します。 ・文字の入った画像などを作成したり、外部の業者へページ制作を依頼する際は文字の色と、背景の色の組み合わせやコントラスト、デザインに充分に配慮して依頼します。 ・色の組み合わせやコントラストが適切であるかどうかについては外部サイトの内容からチェックを行い判断をします。
2.5 スタイルシートの適切な設定 ・レイアウト、文字の大きさ、色は原則としてスタイルシートで設定します。 ・スマートフォン・携帯など画面サイズの指定が必要なブラウザで表示する場合ではメディアクエリで別スタイルシートの指定、又はメディアクエリによるスタイルシートでの設定を行い、適切な情報伝達が可能で見やすい表示設定を行い利用者への配慮を行います。 ・基本的にスマートフォンで表示するためのスタイルシートの指定はメインのスタイルシートとは別にスタイルシートを指定する、またはBootStrap等を使用して読みやすさや見やすさを考慮した表示が行えるような設定にします。
3.1 ページタイトル ・そのページのおおまかな内容を把握できるように各ページに『ページタイトル』をつける、又他のページタイトルと重複しないようなページタイトルをつけます。 ・ページの内容がわかるように統一したページタイトル定義を使用します。例えば『○○_メインページ/○○_サイドページ』といったページタイトル定義を使用します。
3.2 構造化文書の表現 ・階層構造を判断する判断基準として見出し要素の<h group><h1-h6>を使用して、マークアップルールに準拠した適切なタグ指定を行い構造化文書作成に向けたページ作成を行います。 ・ページ階層構造のためのマークアップルールとして<section><h1-h6>を使用し、個別記事には<article>を使用して指定する、メニューには<menu>タグを使用して使用することでページの内容が検索エンジンに伝わるようなページ作成を行います。
4.1 ヘッダー/フッターの設定 ・ウェブサイト内の各ページのヘッダー・フッダーは統一した内容を使用します。 ・各ページのヘッダー/フッターには統一したメニュー表示を使用して、見やすさと利用しやすさを考慮したメニュー表示設定でページを作成します。
4.2 共通ナビゲーションの設定 ・各ページに共通したナビゲーションを設定して、トップページ、ページ上部に移動するスクロールなど同じ機能を有するリンクをつけてホームページ内で統一したナビゲーションを設定します。 ・ナビゲーションによって見栄え、表示が他のページと比較して変化がないような表示設定を行います。
4.3 現在位置を把握するための仕組みについて ・各ページに現在位置と上位階層・下位階層への移動手段を示すナビゲーション（階層ナビゲーション）を配置してユーザーに現在位置がわかるような表示を行います。 ・階層ナビゲーションには現在表示しているページの名称にはリンクを指定しないようにします。
5.1 文書内の見出し設定 ・文書の見出しは文書構造を意識して必要なタグを用いてページの構造化を図り、かつ表示の際に適度に目立ち可読性に適当な見出しをつけます。 ・<section><article><h group><h1-h6>タグによってページ構造化を図るとともにHTML5に準拠したマークアップルールのタグ付けを行います。
5.3 マークアップルールについて ・ページ制作をする上でのタグづけルールではHTML5のマークアップルールに準拠したタグ付けを行い、ページ内容が検索エンジンに伝わるマークアップを行いユーザーの訪問を促します。
6.1 リンク個所の識別 ・リンク個所はユーザーから識別とクリックすることを意識したテキスト設定を行います。 ・リンクテキストは『訪問済みリンク』『未訪問のリンク』ことを識別できる設定を行います。 ・リンク画像は小さくしすぎずクリックすることを意識した設定を行います。 ・リンクテキスト及びリンク画像は適切な間隔をあけて配置します。 ・テキストの色に変化をつけ識別するリンクテキストの種別は次のとおりとします。 ①未訪問リンク ②訪問済みリンク ③マウスホバーリンク
6.2 リンクテキストの表現 ・リンクテキストはテキストを読みリンク先を予測できるような内容を設定します。 ・メニュー内のリンクテキストについては原則としてリンク先ページのタイトルを使用するものとし長すぎるテキストについては要約したテキストを使用するものとします。
6.3 PDF等のファイルへのリンク指定について ・PDFなどのHTML以外のファイルにリンク設定をする場合には、リンクテキストに『ファイル形式』と『ファイルサイズ』を指定してリンク前にファイルを識別できるようにページに記載します。
6.4 ホームページ内のリンクと外部ページへのリンクについて ・外部ホームぺージへのリンクは、利用者がリンク選択する前に外部ホームページに移動することを予測できるように作成します。 ・外部ホームページのトップページにリンク設定する場合には、リンクテキストに『ホームページ名』『団体名』『その他必要な情報』を記してリンク先情報を予測できるように作成します。 ・外部ホームページの個別ページにリンク設定する場合には、リンクテキストの最後にカッコ書きで『ホームぺージ名』『団体名』を記載してリンク先情報を予測できるように作成します。
6.5 リンク先ウィンドウ設定について ・ホームページ内のリンクは原則として『同一のウィンドウ』で繊維するように設定します。外部へのリンクについては『新しいウィンドウ』を開く設定で作成します。 ・広告ウィンドウの自動表示などについては、利用者の意図しないポップアップウィンドウは使用しないように作成します。
7.2 専門用語、省略後、流行語の使用 ・行政用語や専門用語、省略後、流行語の使用については多用は控えた内容にします。又、使用する場合には単語の後に参照リンクなどで意味を補完できるようにしてページを作成します。基本的には平易な文章を心がけてぺージを作成します。 ・情報ページの利用者が限定的であり、かつ使用する用語についてユーザーが一定の知識を有していると想定できる場合においてはその限りではありません。
7.4 内容のわかりやすさについて ・難解な内容を説明する記載については、中学校教育レベルの読解力を指標として理解可能な要約説明を追記します。 ・難解な内容を説明する場合には、図やイラストなどを適宜に取り入れてページを作成します。
7.5 データを表すための表について ・複雑な表についてはできる限り表を分割するなどをしてユーザーに分かりやすく伝わるように設定をします。 ・読み上げ順を考慮して内容が把握しやすい構成にして作成します。 ・わかりやすい表題をつけて一目で表の概要がわかるように作成します。
7.8 情報検索機能等について ・ホームページの情報検索手段として必要であればキーワード検索機能を追加して利用しやすさ向上に努めます。 ・ホームページ探索手段としてサイトマップを用意して各ページにリンクを提供して利用しやすさの向上に努めます。
7.9 ページ内の表の表示設定について ・ページ内の表デザイン・色には無彩色・同系色を使用するなどして利用者に安心を与える色彩を使用、枠線は利用者の閲覧に邪魔にならないような配慮をして表デザインを考慮した線の太さ、フォントを選択して設定します。
8.1 規格及び仕様への準拠 ・ホームページ作成は原則として以下の定義、ルールに準拠した内容で制作、更新を行います。 [HTML] ・HTML5/HTML5.1/HTML5.2/HTML5.3 ・HTML 4.01 strict ・HTML 4.01 transitional ・XHTML 1.0 transitional [スタイルシート] ・CSS2.1 ・CSS3 ・新規にホームページ制作をする際には、HTMLやスタイルシートといった使用する技術についてどのバージョンやDTD(文書型定義)で構成して制作するかを事前に協議して制作を始めます。
8.2 言語コードと文字コードの指定 ・html要素のlang属性またはxml:lang属性に使用している言語を記述します。 ・文字コードutf-8で作成し、head要素のmeta要素内にutf-8と記述します。 ・ページ内に別の言語を表記する場合にはlang属性を用いて言語記述します。
8.5 画像を使用する場合に適切テキストの使用 ・画像を使用する際には、代替テキストに画像で表示している内容を簡潔に表す言葉をいれます。 ・地図やグラフなど複雑な内容を示している画像の場合には、画像近くに内容を説明する文章や表を表示してわかりやすく説明したページ制作をします。
8.6 音声で情報を提供する場合は、音声で伝える情報の内容をテキストで説明 ・音声で情報を提供する場合には、音声で伝える情報の内容をテキストで掲載します。 ・テキストの準備が難しい場合は提供内容に関する問い合わせ先等を明記します。 ・BGMを挿入する場合には聞こえやすさや内容を考慮したBGMを選択します。
8.7 動画で情報を提供する場合には、動画で伝える情報の内容をテキストで説明 ・動画で情報を提供する場合は次の対応を行います。 ①必要であれば動画の音声の内容に字幕を提供します。また動画の映像で表現されている情報について、動画ないで音声による説明（音声ガイド）を提供します。 ②動画で伝える情報の内容をテキストで掲載します。 ③上記対応が難しい場合には提供内容に関する問い合わせ先を明記します。 ・外部の動画配信サービスを利用する場合でも必要であれば同様の対応を行います。
8.8 Office(Word/Excel/PoworPoint）形式のファイル提供について ・PowerPoint形式のファイル掲載は原則として不可とします。パワーポイントをPDF形式に変換したものであれば掲載可とします。 ・Excel形式による情報提供は利用者が編集をかける必要がある場合において掲載可とします。 ・エクセル・ワード形式でのファイル掲載では作成したファイルにマクロウィルスなどの不適切なプログラムが混入しているかどうかを十分に確認してウェブページへのファイル掲載を行います。 ・Word/Excel/PoworPointで作成したファイルは原則としてHTMLのページを作成して提供します。HTML形式での提供が適切でない場合ではPDFを使用して改ざんされないような配慮を行い掲載をします。
8.9 PDF形式でのファイル提供について ・PDFを提供するページでは閲覧用ソフトのダウンロードページの案内及びリンクを追記したページを作成します。 ・PDF形式での情報提供では原則、パンフレット、ポスター、会社案内など限定した使用方法とします。
8.10 HTMLページ内でのFLASHの使用について ・Flashコンテンツには適切なムービータイトルをつけコンテンツの内容がわかるようなアクセシビリティにします。 ・Flashコンテンツを掲載する場合には、FlashPlayerのダウンロードへのリンクも併せて掲載します。 ・情報の内容に更新がある場合にはFlash版とHTML版の両者を同時に更新することとします。
9.1 ページ内のキーボードでの操作 ・ページ内での操作をキーボードのみで操作できるように作成します。 ・ページ内をキーボードのTABキー/スペースキー/Enterキーを使用してリンクフォーカスに移動してリンク先にアクセスできるようなページ作成を行います。
9.2 入力フォームについて ・入力フォームの使用したページを作成する場合には次の内容に配慮して使用します。 ①適切なラベルの使用 ②フォーム入力欄の適切な文字数の確保 ③フォーム入力欄に説明が必要な場合には適切なテキストの追加 ④入力内容に制限をする場合には制限内容を表記する、入力した場合にはエラーメッセージを表示
9.3 フォーム入力内容の修正・取り消しについて ・入力フォームへの入力では利用者が一度入力した内容を取り消し・修正・送信ができる仕組みを作ります ・入力内容の修正を求める場合には、修正が必要な個所とその修正方法がわかるような表示にするよう作成します ・入力したすべての項目を入力しなおすことなく修正が必要な項目だけ編集できる仕組みで作成します。
10.1 Java Scriptの使用について ・JavaScriptの使用では万が一プログラムが機能しない場合でも適切な画面表示ができるような設定を行い、利用者が困らないページ作成を行います。 ・JavaScriptプログラムの使用では利用者に悪意のあるプログラムにならないよう、十分に注意して使用します。
10.2 JQueryプラグインの使用について ・JQueryプラグイン等の使用では事前にローカルで機能を十分に確認したうえで、悪意のあるプログラムにならないよう、十分に確認した上で設置して使用します。 ・利用者にプラグインの説明が必要であると判断される場合においてはプラグインの必要な情報提供を行い、安心して利用できるページを作成します。
11.1 表示画面の点灯・点滅表示の禁止 ・画面全体を点滅させることは禁止します。 ・画面の一部を激しく点滅させることは禁止します。例えば1秒間に3回より多く点滅することを禁止します。 ・画面の配色を考慮し、利用者の目に害がないような配慮を行います。
11.2 表示内容の移動や変化について ・表示されているテキスト・画像の移動・変化には利用者へのインパクトが強すぎることのない設定で使用します。 ・画像内のテキスト内容が変化するバナー広告などの画像を掲載する必要がある場合には、5秒経過したら静止する設定で使用します。