ここから本文です。
更新日：平成23(2011)年6月13日
サイト運営の考え方（サイトポリシー）
基本的な考え方
千葉県では、インターネット（ウェブ）を活用して、県民に開かれた県政の実現を図り、また、県の政策や魅力等を広く県内外の方に知っていただくことを目指しています。このホームページを通じて、幅広い県政情報の提供や情報公開及び県民参加の行政を一層推進するとともに、県民のニーズに対応したサービスの充実を図っていきます。
そのためには、年齢や障害の有無、利用環境に関係なく誰でも利用しやすいウェブサイトづくり（ウェブアクセシビリティ（※1）の確保）が必要です。そこで、2004年6月に国が制定したJIS規格「高齢者・障害者等配慮設計指針--情報通信における機器、ソフトウェア及びサービス--第3部：ウェブコンテンツ （※2）」に沿って「千葉県ホームページアクセシビリティガイドライン」を定めました。
千葉県ホームページは「千葉県ホームページアクセシビリティガイドライン」に基づき、誰でも利用しやすいウェブサイトを目指してサイトの運営を行っています。
（※ 1）ウェブアクセシビリティアクセシビリティ"accessibility" とは
「近づきやすさ」「入手可能なこと」といった意味の英単語で、情報やサービス、ソフトウェアなどが、どの程度広範囲の人に利用可能であるかを表す言葉です。特に、高齢者や障害を持つなどハンディを持つ人にとって、どの程度利用しやすいかという意味で使われることが多くなっています。中でも、ウェブページ（以下、一般的によく使われている「ホームページ」を略した「HP」と表記）についての「利用のしやすさ」を「ウェブアクセシビリティ」といっています。
（※ 2）ウェブコンテンツ放送やネットワークで提供される動画・音声・テキストなどの情報の内容。
千葉県ホームページアクセシビリティガイドライン
平成21年7月
千葉県
千葉県ホームページアクセシビリティガイドラインの内容について、以下の目次リンクをクリックしながらご覧ください。
目次
確認及び改訂の履歴
|
確認日 |
改訂日 |
内容 |
備考 |
|---|---|---|---|
|
平成21年7月 |
|
制定 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
※本ガイドラインに掲載した画像の一部は、富士通エフ・オー・エム株式会社「よくわかる Webアクセシビリティ＆ユーザビリティ（改訂版）」）」から許諾を得て引用しています。
第1章 基本規定
1.作成方針
千葉県では、インターネット（ウェブ）を活用して、県民に開かれた県政の実現を図り、また、県の政策や魅力等を広く県内外の方に知っていただくことを目指しています。このホームページを通じて、幅広い県政情報の提供や情報公開及び県民参加の行政を一層推進するとともに、県民のニーズに対応したサービスの充実を図っていきます。
そのためには、年齢や障害の有無、利用環境に関係なく誰でも利用しやすいウェブサイトづくり（ウェブアクセシビリティ（※1）の確保）が必要です。
そこで、2004年6月に制定された「高齢者・障害者等配慮設計指針--情報通信における機器、ソフトウェア及びサービス--第3部：ウェブコンテンツ （※2）」に沿ってこの指針を定めるものとします。
（※ 1）ウェブアクセシビリティ
アクセシビリティ"accessibility" とは「近づきやすさ」「入手可能なこと」といった意味の英単語で、情報やサービス、ソフトウェアなどが、どの程度広範囲の人に利用可能であるかを表す言葉です。
特に、高齢者や障害を持つなどハンディを持つ人にとって、どの程度利用しやすいかという意味で使われることが多くなっています。中でも、ウェブページ（以下、一般的によく使われている「ホームページ」を略した「HP」と表記）についての「利用のしやすさ」を「ウェブアクセシビリティ」といっています。
（※ 2）ウェブコンテンツ
放送やネットワークで提供される動画・音声・テキストなどの情報の内容。
2.適用範囲
このガイドラインは、千葉県ホームページ運営要領に定める「千葉県ホームページ」(「公式ホームページ」及び「個別ホームページ」(以下「県HP」といいます。)を対象とします。
このガイドラインは、県HPに含まれる各ページの新規作成、更新時に適用されます。
なお、公式ホームページ管理者及び個別ホームページ管理者は、管理するウェブサイト内において当指針に適合しない事項を認めた場合、適宜その改善に努めなければなりません。
上記ウェブサイト内のウェブページを作成・管理する千葉県職員。
なお、委託によりウェブページを作成・管理する場合は、発注仕様として本ガイドラインの遵守を含めることにより成果物に反映させるものとします。
3.想定する利用環境
平成21年6月時点でメーカー等のサポートがある以下の環境での一般の方の利用に支障がないよう配慮します。
|
OS区分 |
OSバージョン |
ブラウザ |
備考 |
|---|---|---|---|
|
Windows |
2000 SP4以上 |
IE6 SP2以上 |
AdobeReader7以上は標準搭載しているものとする。 |
|
Mac OS |
10.4以上 |
Safari 3.0以上 |
Word、Excelは標準搭載せず、AdobeReader7以上を標準搭載しているものとする。 |
|
携帯電話 |
インターネット接続ができる、いわゆる「第3世代携帯電話」 |
HTMLファイルを表示できるキャリア標準ブラウザ |
キャリアを問わず利用できること。 |
ア パソコン版
ウィンドウサイズが横800ピクセル×縦600ピクセルでの利用に支障がないよう配慮します。
※ブラウザのタイトルバー、メニューバー、アイコン、アドレスバー、スクロールバー、ステータスバー、ウィンドウズのタスクバーなどがあるため、上記ウィンドウサイズでのウェブページを実際に表示する領域は横770ピクセル×縦430ピクセル程度となる。
イ 携帯電話版
横240ピクセル×縦320ピクセルの画面での利用に支障がないよう配慮します。
※携帯電話のメニュー表示、スクロールバーなどがあるため、ウェブページを実際に表示する領域は、横220ピクセル×縦270ピクセル程度となる。
- ア 音声読み上げソフトでの利用（キーボードのみでの操作）に支障がないように配慮します。
- イ 画面を数倍に拡大するソフトでの利用に支障がないように配慮します。
- ウ キーボードやマウスが使えない場合の様々な支援装置（技術）を利用しての利用に支障がないように配慮します。
56Kbps以上を想定します。
ただし、ビデオ配信については150kbps以上を想定します。
上記のほか、マルチメディアコンテンツの提供に当たっては、その情報発信の意図を伝えるために必要十分な通信速度を個別に検討します。
4.アクセシビリティへの取組方針
千葉県では報道広報課広報室が中心となり、コンテンツを作成する各担当課へのアクセシビリティに関する教育、周知を行い、千葉県Webサイトのアクセシビリティ向上に努めていきます。
アクセシビリティについてのガイドラインを整備し、年1回の講習会を実施することで、ウェブアクセシビリティ確保に取り組んでいきます。
また、コンテンツの公開前にはチェックシートによるチェックを実施し、アクセシビリティが確保されたコンテンツを公開するようにしていきます。
5.データ作成上の技術的な注意事項
県HPから情報を発信しようとする作成者は、インターネット（ウェブ）がすべての人にとって重要な情報源として利用されていることを充分認識し、作成されたデータが以下の事項に適合するよう努めなければなりません。
第2章 アクセシビリティ指針
1.規格・仕様
<指針>
HTML のバージョンは、職員が作成するウェブページにおいてはHTML4.01Transitional(互換モード)、業者委託により作成し、又はシステムで管理するウェブページにおいてはXHTML1.0Strict(標準モード)とし、ブラウザ のバージョンや種類に依存する技術は使用しない。
また、HTMLを制作する場合は、必ずDOCTYPE宣言をすること。
<説明・目的>
HTML制作に使用する技術のルール通りに制作されていないと、ブラウザの表示がおかしくなってしまったり、画面読み上げソフト等の特殊なソフトがうまく動作しなくなってしまう可能性があるため。
ブラウザのバージョンや種類に依存する技術を使用した場合、該当ブラウザを使用していない利用者が正しく閲覧できないため。
<具体例1>
xhtmlの場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
「XHTML 1.0 Transitional」は、XHTML 1.0で定義されている要素や属性のうち、「非推奨」とされている要素や属性を使用している場合のDOCTYPE宣言です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
「XHTML 1.0 Strict」は、XHTML 1.0で定義されている要素や属性のうち、「非推奨」とされている要素や属性を使用していない場合のDOCTYPE宣言です。
htmlの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
「HTML 4.01 Transitional」は、HTML4.01で定義されている要素や属性のうち、「非推奨」とされている要素や属性を使用している場合のDOCTYPE宣言です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
「HTML 4.01 Strict」は、HTML4.01で定義されている要素や属性のうち、「非推奨」とされている要素や属性を使用していない場合のDOCTYPE宣言です。
※ブラウザには「標準モード」と「互換モード」の2種類の描画モードがあります。
「標準モード」：標準の仕様に従って文法を解釈して表示。
「互換モード」：過去のブラウザの独特な表示方法で表示。
htmlの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">の
「"http://www.w3.org/TR/html4/loose.dtd">」を省略した場合、DOCTYPEを宣言しなかった場合には「互換モード」になります。
xhtmlの場合
DOCTYPE宣言の前に「<?xml version="1.0" encoding="shift_jis"?>」などのxml宣言があった場合にはIE6で「互換モード」になります。
<具体例2>
<marquee>
文字をスクロールさせるタグ
インターネットエクスプローラのみで表示可能
<blink>
文字を点滅させるタグ
旧ネットスケープナビゲータのみで表示可能
<layer>
文字や画像などを重ねて表示させるタグ
旧ネットスケープナビゲータのみで表示可能
<marquee>を使用している画面
<指針>
日本語の文字コードはShift-JIS、外国語の文字コードはutf-8とし、HTMLで宣言する。
<説明・目的>
文字コードを指定し、宣言することで、HTMLの文字化けを防ぐため。
<具体例>
【日本語ページ】
xhtmlの場合
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
htmlの場合
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
【外国語ページ】
xhtmlの場合
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
htmlの場合
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<指針>
機種依存文字などは使用しない。
<説明・目的>
機種依存文字を使用すると、利用者の環境によっては表示結果が異なってしまい、情報が正確に伝わらなくなってしまうため、代替手段を用意する。
<具体例1>
機種依存文字一覧
半角カタカナは使用せず、全角カタカナを使用する JIS第1、第2水準以外の漢字は使用せず、代替手段を用意する。
<具体例2>
①→<1>、②→<2>・・・など、代替手段の例
漢字の場合には画像化する。またはISO-2022-JPに対応している文字に置き換える。
2.スクロール
<指針>
ブラウザの横幅が800ピクセルの時に、横スクロールバーが発生しないようにする。
<説明・目的>
ブラウザで縦と横の両方にスクロールバーが表示されている場合、ページ全体の把握が困難になるため。
特に、上肢に障害のある利用者は、スクロール操作が困難になる場合がある。
また、弱視の利用者の場合、拡大ツールで画面の一部を拡大していることがあり、拡大ツールのスクロールとブラウザのスクロールが二重になると、操作がより困難になる。
<具体例>
<指針>
ページの長さは縦幅450ピクセルを1画面として3画面程度の長さにする。また、ページの長さにかかわらずページの先頭へ戻るリンクを設置する。
<説明・目的>
縦に長すぎるページは、上下のスクロールを多用しなければならず、必要な情報を探し出すまでに時間がかかり、利用者の記憶に負担をかける場合があるため。
また、トラックボールなど操作支援技術を使用した場合でも円滑に操作できるようにするため、前ページ共通でページの先頭へ戻るリンクを設置する必要がある。
<具体例>
3.キーボード操作
<指針>
マウスだけでなく、少なくともキーボードで全ての操作ができるようにする。
<説明・目的>
手の動作が不自由な人、目が見えない人等、マウスを利用できない人は、マウスの代わりにキーボードで操作をしているため、キーボードで全ての操作が可能でなくてはならない。
<具体例>
4.文書構造
<指針> 見出しや段落、箇条書き等の構造要素は論理構造に従ってHTMLで表現すること。
また、文字色や背景色等の装飾要素はCSSで表現すること。
<説明・目的>
見出しや段落、箇条書き等の文書構造をHTMLで指定すると、画面読み上げソフト等様々な機能を利用することができるようになるため。
文書を論理構造に従って記述することで、障害のある人を含めた様々な人にとって利用のしやすさ、わかりやすさが向上するため。
<具体例1>
見出し（<H>タグ）や段落（<P>タグ）、リスト（<UL><li>タグ）などを 用いて構造的され、見やすくなっている画面
5.スタイルシート
<指針>
見た目の設定は、HTMLのタグを使用した装飾は行わず、文書の構造と分離してスタイルシートを用いる。
※スタイルシートについては巻末の別紙参照
<説明・目的>
配置や配色、文字サイズ等の文書の見映え（表示方法）をスタイルシートで表現すると様々な利用者が自分の利用しやすいように表示等を切り替えることが容易になるため。
<具体例1>
<具体例2>
HTMLで装飾したテキストと、比較してCSSで装飾したテキスト
【HTML上での装飾】
<p><font size="5" color="#FF0000"><b>テキスト</b></font></p>
【CSSでの装飾】
<p>テキスト</p>
（CSSファイル）
p { font-size:100%; font-style:bold; color:#FF0000;}
6.配置
<指針>
配置のための表組み（table要素）はなるべく用いない。やむを得ず表組みを用いる場合は、画面読み上げソフト等への配慮を行う。
<説明・目的>
HTMLの表組み（table要素）で画面内の配置を行う場合、画面読み上げソフト等では情報の本来の順序と違う順序で読み上げられてしまい、内容の把握が困難になることがあるため、配置のための表組みは極力使用しない。
<具体例>
画面読み上げソフトでのテーブル読み上げ順序の悪い例
7.ページタイトル
<指針>
各ページには内容がわかるような適切なタイトルをつける。また、複数のページに同じタイトルをつけない。
<説明・目的>
ページタイトルによってページの内容が把握できないと、わかりにくさや混乱の原因になるため。
<具体例>
なお、本県では掲載内容が多岐にわたるため、次の表示で統一する。
「小項目名｜中項目名／千葉県」
（状況により「｜中項目名」は省略することができる。）
8.現在位置の情報
<指針>
現在位置を示す情報（パンくずリスト）やリンクを各ページに表示する。
【パンくずリストとは】
Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの。
すべてのページの同じ場所にパンくずリストを掲載することにより、サイトの訪問者が現在位置を直感的に理解する役に立つ。
<説明・目的>
表示されているページが、サイト内のどの位置にあるかをわかりやすく伝えることで、多くの人が混乱少なくサイトを利用できるようにするため。
<具体例>
パンくずリストの使用例
9.外国語
<指針>
日本語のページでは、想定するユーザーにとって理解しづらいと考えられる外国語は、多用しないようにする。使用するときは、最初に用いるときに解説しておく。
<説明・目的>
一般的でない外国語を使用すると、高齢者や子供をはじめ多くの利用者が理解できない可能性があるため、可能な限り使用しないことが望ましい。
<具体例>
カタカナで表記した英語表現（モチベーション・キックオフ等）を使用している例
<指針>
日本語以外の言語の利用者が閲覧することが想定されるページにおいては、外国語のページを用意する。
<説明・目的>
ページの特性によって、様々な言語の利用者がいることを考慮しなければならないため。
<具体例>
千葉県ホームページ(英語版)
10.省略語、専門用語等
<指針>
省略語、専門用語、流行語、俗語など、想定するユーザーにとって理解しにくいと考えられる用語は、多用しないようにする。使用するときは、最初に用いるときに定義しておく。
<説明・目的>
一般的でない省略語や専門用語が使用されると、高齢者や子供をはじめ多くの利用者が理解できない可能性がある、可能な限り使用しないことが望ましい。
使用する場合は、必ず最初に用いるときに定義し、説明しなければならない。（ページ単位で行うこと）
<具体例>
（括弧）書きで省略語や専門用語の正式名称を示し、内容を解説をしている例
11.読みの難しい言葉
<指針>
想定するユーザーにとって、読みの難しいと考えられる言葉（固有名詞など）は、多用しないようにする。使用するときは、最初に用いるときに読み（ふりがな）を明示しておく。
<説明・目的>
地名や人名などに見られるような読みの難しい言葉が使用されると、高齢者や子供をはじめ多くの利用者が理解できない可能性があるため、読みの難しい言葉を使用する際には十分に検討し、最初に用いるときには読み（ふりがな）を明示する必要がある。
<具体例1>
読みの難しい言葉に読み（ふりがな）をふっている例
12.図等によるわかりやすい表現
<指針>
文章以外の表現（図やイラストなど）を併用することでわかりやすくできる箇所がないか検討する。
<説明・目的>
文章だけでなく、図解やイラスト、アニメーション等を合わせて提供することで、多くの利用者にとってわかりやすさが向上する。
<具体例>
図やグラフなど、文章以外の表現を併用することで文章を補足し、わかりやすい表現となっている例
13.使用する言語
<指針>
各ページにHTMLで使用している言語を宣言する。
<説明・目的>
ホームページやウェブシステムで使用している言語（日本語か外国語かの区分）をHTMLで適切に宣言していないと、音声や点字に変換して利用する場合に、適切に変換されない可能性があるため、HTMLファイルはすべて使用している言語を明確にしなければならない。
<具体例>
【日本語ページの言語指定】
（言語の指定）
<html lang="ja">
（文字コードの指定）
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
【英語ページの言語指定】
（言語の指定）
<html lang="en">
（文字コードの指定）
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
14.画像・リンク画像
<指針>
画像には、画像の意味する内容を具体的に説明する代替テキスト（alt属性） をつける。
また、地図やフローチャート、グラフを掲載する場合は、その画像が伝えている情報を表したテキストを画像の近くに記載する。
<説明・目的>
画像を掲載する場合はに代替テキスト（alt属性）がなければ、目の不自由な方など画面読み上げソフト等を利用してホームページを閲覧している人たちがどのような内容が掲載されているか情報を知ることができないため。
<具体例1>
画像にマウスオーバーすると、alt属性に記入された文字が表示されている様子の例
<具体例2>
【画像にalt属性を記入する場合のHTMLソース】
<img src="img/logo.gif" alt="千葉県ホームページ" WIDTH="25%" height="50">
15.画像の補足情報
<指針>
図表やグラフなどの画像には、画像と同じHTMLファイル内に、テキストで解説を記述する。
<説明・目的>
図表やグラフなどの画像は、単に画像を表示するだけでなく、テキストで解説を記述すれば、より理解しやすくなるため。
特に、画面読み上げソフトの利用者は、図表やグラフなどの画像の内容を詳細に把握することが困難であるため、本文などにテキストで解説が記述してあれば、より詳細な内容を把握できる。
<具体例>
図表やグラフに補足情報としてのテキストを付記している例
16.リンク
<指針>
テキストリンク部分には下線をつけた表示、画像リンク部分はボタンのような「押すことができる」とわかる形状にするなど、リンクであることがわかりやすく、操作しやすくする。
また、リンクとリンクの間は十分な間隔を取り、リンクボタンには十分な大きさを取る。
<説明・目的>
リンクの貼られている部分の文章（リンクテキスト）やリンク画像の内容がわかりにくいと、多くの利用者が混乱してしまうため、わかりやすい表現を心掛ける。
<具体例>
17.画像へのリンク
<指針>
画像へ直接リンクする場合は、リンク元で画像へのリンクであることが把握できるようにする。
<説明・目的> リンク先に画像ファイルを指定した場合、画面読み上げソフトは画像の内容を読み上げることができないため、リンク元で、リンク先が画像であることを推測できるようにする。
<具体例>
※リンク元文言の先頭にリンク先ファイル種別を示すアイコンを設置し、リンクはアイコンからファイル名までにつける、（原則として、ファイルサイズもリンクに含める。）
18.文字の色、サイズ、書体
<指針>
文字色は、ウェブセーフカラー（※）の中から使用し、コントラスト等視認性に配慮する。
※ウェブセーフカラー：OSやハードウェアなどの閲覧環境に関係なく、正しく表示できる216色のこと
<説明・目的> 利用者の環境によって意図したとおりの色に表示されないことがあるため。 <具体例> ウェブセーフカラーは、巻末別紙「ウェブセーフカラー（OSが異なっても同じように表示される色）一覧」を参照。
参考サイト：http://e-words.jp/p/r-websafecolor.html
<指針>
原則として、背景に色や画像は用いない。
<説明・目的>
文字色とその背景色のコントラストが不十分な場合、色覚障害を持つ利用者や弱視の利用者、高齢者はその文字が読みにくく、コンテンツの内容を十分に理解しにくくなるため、文字色とその背景色には十分なコントラストを取らなければならない。
<具体例>
<指針>
文字サイズは、利用者がブラウザ側で変更可能となるように相対値で指定する。また、読みやすさに配慮し、適切な大きさとなるようにする。
フォントの書体は原則として指定しない。
<説明・目的>
利用者が見づらいと思った時に、自分で文字サイズを変更できるようにするため。
<具体例>
ブラウザでの文字の大きさ変更中の例
19.色による区別
<指針>
情報の識別や指示は、色だけでなく文字等でもわかるようにする。
<説明・目的>
色の区別がつきにくい人や、画面読み上げソフト等で利用している人は、色の違いを把握できない。
また、「赤字は・・・」等、色の違いだけで、情報の意味の違いや強調が表現されていると、意図が伝わらない可能性があるが、色だけで表現せずに文字等で表現することで、ほぼすべての利用者に同じように情報を伝えることが可能となるため。
<具体例>
20.単語内の空白
<指針>
単語の文字の間にスペースや改行を入れない。
<説明・目的>
ひとつの単語の文字と文字の間にスペースや改行を入れると、画面読み上げソフト等が正しく読み上げられなくなるため、体裁を整える目的で文字と文字の間にスペースや改行を入れてはならない。
<具体例>
単語の文字の間にスペースや改行を入れている例
21.入力や選択
<指針> 入力フォームは、記入例を併記する、入力の際制限時間を設けないなど利用者に配慮する。
利用者の過度の負担とならないよう、設問は簡潔にするなど、効果的な運用に努める。
<説明・目的>
視覚障害者や手の動作が不自由な人、高齢者等は、ホームページやウェブシステムでの入力に時間がかかり、場合によっては大きな負担になるため、記入例の併記や制限時間の排除などの配慮が必要である。
<具体例>
記入例を併記している入力フォームの例
22.PDF
<指針>
アクセシビリティに配慮したPDF形式で制作し公開すると同時に、掲載の際にはPDFファイルの情報内容を説明するテキスト等を提供する。（Acrobatバージョン5.0以上）。
<説明・目的>
アクセシビリティに配慮していないPDFファイルの場合、利用者が内容を読み取ったり操作できなくなったりするため。
また、事前にPDFの内容を把握できるようにするため。
<具体例1>
参考URL
（http://www.adobe.com/jp/products/acrobat/pdfaccessibility/index_04.html 参照）
<具体例2>
※リンク元文言の先頭にリンク先ファイル種別を示すアイコンを設置し、リンクはアイコンからファイル名までにつける、（原則として、ファイルサイズもリンクに含める。）
<指針>
PDF掲載時にはファイルサイズを明記し、1MB以上は分割したファイルも併せて掲載させる。
<説明・目的>
ファイルサイズの大きなファイルは、利用者の環境によってはダウンロードに時間がかかってしまうため。
事前にファイルサイズを明記したり、分割することによって利用者が受けるリスクを軽減する。
<具体例>
※リンク元文言の先頭にリンク先ファイル種別を示すアイコンを設置し、リンクはアイコンからファイル名までにつける、（原則として、ファイルサイズもリンクに含める。）
23.音声、動画、プログラムやアプリケーションソフト等を使ったHTML以外の情報
<指針>
音声情報を提供する場合、音声の内容を書き起こしたテキスト等の代替情報を提供する。
<説明・目的>
動画等で提供される情報は、視覚障害者、聴覚障害者、高齢者等、内容を把握できない人が出る可能性があるため。
<具体例>
※リンク元文言の先頭にリンク先ファイル種別を示すアイコンを設置し、リンクはアイコンからファイル名までにつける、（原則として、ファイルサイズもリンクに含める。）
<指針>
動画やアニメーションを提供する場合、内容を説明する代替情報を提供する。
これは、「映像」と「音声」それぞれに代替となるコンテンツが必要である。
<説明・目的>
動画等で提供される情報は、視覚障害者、聴覚障害者、高齢者等、内容を把握できない人が出る可能性があるため。
<具体例>
動画の中（字幕）もしくは外に、動画の内容を説明するテキスト情報が出ている画面の例
<指針>
オブジェクト（WORDファイル等での情報提供を含む）は、利用者の環境を考慮して使用し、使用する場合は、ファイルサイズやプラグインの入手先を明記する。また、FLASH、Script等は、真に必要性を考慮して使用し、過度な装飾とならないよう、配慮する。また、利用できない者のために代替手段を用意する。
<説明・目的>
HTML以外のプログラム（Flash、Script、Applet等）やオブジェクト（WORD等での情報提供を含む）を使用する場合は、内容を読み取ったり操作できない利用者が出る可能性があるため。
<具体例>
Flashコンテンツにおける代替手段の例と、プラグインのダウンロード先を提供している例
24.表示時間
<指針>
HTMLファイルやPDFファイルは1ファイルあたりのファイルサイズに制限を設け、それを超えてしまう場合はファイルを分割するなど、ファイルサイズが大きくなりすぎないよう注意し、ページの表示時間が長くなりすぎないようにする。
また、実際にブラウザ内に表示されるサイズより大きな表示サイズの画像ファイルは、データ量が不必要に大きくなるためページの読み込みに時間がかかる。ブラウザ内に表示されるサイズと同一の表示サイズで画像ファイルを制作する。
<説明・目的>
ページの表示に時間がかかると、利用者は多くの不安を感じ、ひどい場合は、ウェブサイトへのアクセスそのものを止めてしまう可能性があるため。
25.ダウンロードデータ
<指針>
データのダウンロードを可能にする場合は、データのファイル形式やファイルサイズを、あらかじめ参照できるようにする。
<説明・目的>
ファイル形式やファイルサイズがわかりにくい場合、利用者は自分のインターネット環境に応じたデータをダウンロードできない可能性があるため。
<具体例>
※リンク元文言の先頭にリンク先ファイル種別を示すアイコンを設置し、リンクはアイコンからファイル名までにつける、（原則として、ファイルサイズもリンクに含める。）
26.表
<指針>
表を使用する際には、セル結合や入れ子構造など複雑な構造は使用せず、できるだけわかりやすく単純な構造とする。
<説明・目的>
HTMLの表組み（table要素）で提供される情報は、画面読み上げソフト等を利用している利用者にとって配慮のある作りになっていないと、内容の把握が困難であるため、セル結合などを多用した複雑な構造のものは極力使用しない。
<具体例>
セル結合や入れ子構造を使った複雑なデータテーブルの例
27.フレーム
<指針>
フレームは原則として使用しない。
<説明・目的>
フレームを使ったページは、適切な配慮がなされないと利用できなかったり、利用しにくいページになるため。
<具体例>
フレームの画面の例
28.新しいウィンドウ、自動更新
<指針>
県サーバ内の移動については新しいウィンドウは開かない。特に必要がある場合、または外部サーバの場合は、新しいウィンドウが開くことをリンクに表示すること。
また、自動で新しいページへ移動したり、ページ内の表示を更新しないこと。
※リンク先がPDFファイルの場合、リンク元ページを参照しながら見る場合があることなど利用者の利便性を考慮して新規ウィンドウで開くようにすること。
<説明・目的>
リンク先のページを新しいウィンドウに表示すると、全盲の利用者や高齢者をはじめ、混乱したり上手に利用できない人が出てしまうため。
自動で新しいページへ移動したり、ページ内の表示内容を切り替える場合も同様。
<具体例>
新しいウィンドウでページが開くことを示したテキストをつけたリンクの例
29.共通メニュー
<指針>
各ページに共通ナビゲーション（グローバルナビゲーション）を設置する。また、サイト内での基本操作部分（「トップページ」、「サイトマップ」などへのリンクや、ページ内リンクなど）は、サイト内での表現（文言・形状・色彩・配置など）や機能に、一貫性をもたせる。
<説明・目的>
ホームページ内の各ページに共通のメニュー等を表示することで、多くの利用者がわかりやすく利用することができる。
<具体例>
トップページを含む複数のページのヘッダーの基本操作部分とグローバルナビゲーションの例
30.メニュー読み飛ばし機能
<指針>
共通メニューがわずらわしさの原因にならないように、読み飛ばし機能をつけるか、配置に配慮する。
<説明・目的>
ホームページ内の各ページに共通のメニュー等が表示される場合、音声で読んでいる人や、キーボードで操作している人等は、ページ内のメインの部分（本文等）にすぐにたどり着けず、非常に使いづらくなってしまう可能性があるため。
<具体例>
ナビゲーションスキップ（読み飛ばし機能）を設けている部分の例
31.メニュー項目数
<指針>
メニュー項目は覚えやすさと選びやすさを考慮し、7 プラスマイナス 2程度の項目数を目安とすることが望ましい。
また、多くなるときは適宜グルーピングしたり、場合によってはページを分割することも考慮しておく。
<説明・目的>
メニュー項目の数が多いほど、利用者は必要な項目を見つけ出すまでに時間がかかるため。
特に、画面読み上げソフトを利用している人は、メニュー項目を音声で参照するため、全ての項目を参照するまでに時間がかかる。
32.フォーム
32-（ア）項目数
<指針>
フォームに入力する内容は、必要最小限にする。
<説明・目的>
フォームでの入力操作は、利用者にとって負担のかかる作業であり、同じ情報を複数回入力してもらうことを求めたり、必須ではない数多くの情報を入力させることは、さらに大きな負担となるため。
32-（イ）ボタンの位置
<指針>
[実行]ボタンや[送信]ボタンは、フォームの最後に表示するなど、入力操作の流れを考慮し、気づきやすい場所に表示する。
<説明・目的>
不適切な位置にボタンがある場合、ボタンの存在に気がつかない可能性があり、操作対象と関連するボタンの位置が離れていると、ボタンの機能を推測できない場合があるため。
<具体例>
32-（ウ）注意書きの位置 <指針>
[必須]や[任意]などの注意書きは、入力・選択エリアよりも前に記載する。
<説明・目的>
画面読み上げソフトを使用している利用者は、音声のみでサイトを閲覧していることも考えられるため、[必須]などの注意書きを入力や選択エリアの後に記載していると、注意書きを読まずに必須項目を入力（選択）しない可能性がある。
このため、注意書きは必ず入力・選択エリアの前に記載する。
<具体例>
32-（エ）入力コントロールとラベル
<指針>
フォームのラベル（※）は、どの入力コントロールと関係しているかわかるように、HTMLのlabel要素で関連付ける。
※ラベル：フォームの各入力コントロールの名称にするテキスト
<説明・目的>
HTMLのlabel要素で入力コントロールとラベルを関連付けると、画面読み上げソフトでサイトを閲覧している場合に、入力コントロールを選択した状態で所定の操作をするとラベルが読み上げられるため操作しやすくなる。
また、上肢に障害のある利用者や高齢者など、小さなボタンやチェックボックスをクリックする微妙なマウス操作が難しい利用者が、ラベルをクリックするだけで選択できるようになるなど、操作性が大幅に向上する。
33.やり直し手段
33-（ア）「戻る」ボタン又はリンク
<指針>
すべてのページで、ブラウザの「戻る」ボタン又はページ内のリンクによって前のページに戻れるようにする。
<説明・目的>
ホームページ内で利用者が迷ったり、意図していた情報とは違うものだった場合に、前のページに戻って探し直すことができるようにするため。
<具体例>
<指針>
利用者が情報を入力・選択する機能がある場合、入力内容の確認や入力エラーの確認、やり直しが簡単にできるようにする。
<説明・目的>
利用者が誤った操作をしたときでも、簡単にやり直しができ、利用者が自ら誤操作したことに気づくことができるようにするため。
<具体例>
フォームでの確認画面やエラー表示の例
34.エラー
<指針>
リンク切れを示すメッセージ（エラーメッセージ）は、わかりやすくする。
また、エラーメッセージを、サイトで統一したフォーマットに表示する。
<説明・目的>
エラーが生じた状況と、その解決策が把握できなければ、利用者は有効な対処を実施することができないため。
エラーメッセージを、サイトで統一したフォーマットに表示することで、サイト内の他のリンクを選択できるなど、利用者に安心感を与えることができるため。
<具体例>
35.形や位置
<指針>
情報の識別や指示は、画面上の形や位置だけでなく文字等でもわかるようにする。
<説明・目的>
画面読み上げソフト等で利用している人等は、画面に表示されている形や位置によって情報を区別したり指示が行われる場合、情報の区別がつかなかったり、操作できなくなる可能性があるが、画面上の形や位置だけでなく文字等で情報を提供することで、ほぼすべての利用者に同じように情報を伝えることが可能となるため。
<具体例>
36.画像内の文字
<指針>
画像、テキストを含めるすべてのコンテンツの背景色と前景色とには,十分なコントラストを取り,識別しやすい配色にする。
<説明・目的>
背景色と文字色のコントラストが不十分な場合、文字が見難くなり必要な情報が得られなくなるため。
<具体例>
37.音再生のコントロール
<指針>
音による情報提供を行なう場合は、自動的に再生してはならない。また、利用者がコントロールするための配慮をする。
<説明・目的>
自動的に音声が再生された場合、以下のような問題が起こることが考えられる。
- スピーカーが接続されていない環境では、音が再生されていることに気が付かない可能性があるため、提供されている情報を得ることができない。
- 画面読み上げソフト等の音と自動的に再生された音が重なってしまい、どちらの情報も理解しにくくなる。
- 聴覚障害を持つ利用者は、音が再生されていることに気が付かない可能性がある。そのため、提供されている情報を得られなくなるほか、図書館や学校などの静かにしなければならない場所で周囲の迷惑となってしまう。
また、画面読み上げソフト等を使用している場合、コンテンツで再生されている音と読み上げの音声が重なってしまうため、音を一時的に停止したりボリュームの調整をしたい場合がある。聴覚障害を持つ利用者や高齢者の場合は、大きな音量で聞きたい場合も考えられる。
このような様々な需要が考えられるため、音は調整できるようにしなければならない。
<具体例>
動画再生ソフトのコントロールパネルの音声部分の例
再生ボタンや音量調節ボタンを音声読み上げソフトでコントロール（指定／決定、大小の調整）できるようにしてある。
38.変化や移動
<指針>
原則として、変化・移動する画像およびテキストは使用しない。
<説明・目的>
画像を含め、文字情報が速いスピードで変化・移動すると、弱視や高齢者、また認知や記憶に障害を持つ利用者は、それらの内容を理解することがとても難しくなる。
また、オープニングムービーなどは、早く本文を知りたい利用者にとっては大きなストレスになる。
このため、変化・移動する画像およびテキストは使用しないことが望ましい。
（どうしても利用しなければならない場合は、変化・移動の速度に注意すること）
39.点滅
<指針>
明滅や自動スクロールなどの動きがある表現は、原則として使用しない。使用する場合は、必要性を十分考慮の上、コントラストやスピードに充分配慮する。
<説明・目的>
利用者の注意を促すために点滅を利用することがあるが、早い周期での点滅はてんかん発作を引き起こすなどの危険がある。（部分的な点滅でも拡大して表示している人がいるため同様）
このため、使用しないことが望ましい。
<具体例>
40.ブラウザ
<指針>
デザイン等の目的でブラウザの基本的な機能やGUIコントロール（ツールバー、スクロールバーなど）は変更しない。
<説明・目的>
ブラウザの各機能や基本的な GUI コントロールを非表示にしたり、変更したりすると、利用者は使い慣れたブラウザの機能を充分に利用できなくなる場合があるため。
<具体例>
ブラウザのメニューバーを隠した表示の例
スタイルシート（Cascading Style Sheets：以下、CSS）は、背景色や文字色、配置など、Webページの見栄え（スタイル）を指定する言語のひとつです。CSSはHTML（XHTML）と同様、テキストエディタに記述します。
以前はスタイルの指定もHTMLで記述していましたが、現在では、文書構造をHTMLで記述し、スタイルをCSSで記述する方法が一般的です。
CSSをWebページに適用するには、HTML（XHTML）ファイルの中の定められた位置に記述する方法と、拡張子「css」を付けて保存した「CSSファイル」をHTML（XHTML）ファイルにリンクさせる方法があります。
CSSを使ってWebページを作成するメリットは、次のとおりです。
<記述ミスの軽減>
HTML（XHTML）で文書構造を、CSSでスタイルを記述する方法は、それぞれの文書がシンプルになるので、記述ミスが軽減されます。
<ファイルのサイズダウン>
スタイルを直接HTMLで記述する方法に比べて記述の重複が少ないため、ファイルサイズが小さくなり、管理しやすくなります。
<出力先ごとにスタイルの指定が可能>
プリンタ用に印刷時のフォントサイズを指定したり、画面読み上げソフト用に読み上げ方法を指定したりするなど、Webページの出力先ごとにスタイルを指定できます。
<作業効率のアップ>
CSSファイルを使うと、ひとつのファイルでWebサイト全体のスタイルを指定でき、スタイルの記述や変更にかかる手間が減って効率的に作業できます。
よくある質問
このページに関するお問い合わせ
住所：〒260-8667 千葉市中央区市場町1-1
本庁舎9階
Copyright © Chiba Prefectural Government. All rights reserved.