佐賀県ホームページ
アクセシビリティ向上マニュアル
アクセシビリティ向上マニュアル
《目次》
はじめに
マニュアルを策定するにあたって ... i１．トップページ
1-1. 利用者の立場で項目を分類する ... 1 1-2. トップページでサイト全体が見通せるようにする ... 2 1-3. 団体名・所在地を明記し、アクセス情報（地図や交通案内）ページへのリンクを設ける ... 2 1-4. 「サイトポリシー」や「個人情報の取り扱い」ページへのリンクを設ける ... 3 1-5. ページの使い方（ご利用方法メニュー）を用意する ... 4２．県庁ポータル
（トップページ、各メニューページ、各機能ページ、定型コンテンツ） 2-1. 各ページにグローバルナビゲーションを設ける ... 5 2-2. 各ページに検索機能、もしくは検索ページへのリンクをつける ... 6３．コンテンツ作成における基本的ルール
3-1. 全ページの左上には佐賀県のロゴ画像を配置し、県ホームページトップへのリンクを設ける ... ... 7 3-2. 各コンテンツには、コンテンツのトップへ戻るリンクを設ける ... 8 3-3. 各ページに「パンくずリスト」を設ける ... 9 3-4. 各ページの内容に関する問い合わせ先を明記する ...10 3-5. 個人情報を収集する場合には、目的等を明記する ...11 3-6. ページ作成後も随時内容の更新、修正をする ...12４．アクセシビリティ（JIS X8341-3）への配慮
4-1. ソースコード・タグ 4-1-1. ソースコードは文書型宣言を行い、使用する技術の規格や仕様に従って記述する ...13 4-1-2. ページ内で記述する、基本言語を明示する ...14 4-1-3. ページの内容は文書構造を適切なタグを用いて示す ...15 4-1-4. 文章には見出しをつけ、段落を意識しながら表現する ...16 4-1-5. ページの見た目を表現するには、できるだけスタイルシート（CSS）を使用する ...17 4-1-6. HTML や CSS の文法チェックを心がける ...184-2. レイアウト 4-2-1. ページの長さは適切な長さとし、上下のスクロールを極力少なくする ...19 4-2-2. 利用者の画面サイズは 800 600 を想定し、横スクロール無しで表示できるようにする ...20 4-2-3. フレームは利用しない ...21 4-2-4. なるべく表（テーブル）をレイアウトのために使用しない ...22 4-2-5. プルダウンメニューを利用したナビゲーションは避ける ...23 4-3. 表現 4-3-1. ページの内容を適切に表す、他と重複しないタイトルを付ける ... 24 4-3-2. 日付や時間の表記を統一し、音声ブラウザ等に配慮する ...25 4-3-3. 不必要に点滅したり動いたりする表現を使用しない ...26 4-3-4. 背景と内容のコントラストを十分にとる ...27 4-3-5. 色や形だけで情報を伝えない ...28 4-3-6. 簡潔で明瞭な文章を心がけ、専門的な用語の乱用は避ける ...29 4-3-7. 地名・人名等、独特な漢字の読みに対して配慮する ...30 4-4. 文字 4-4-1. 文字のサイズはできるだけ標準的な大きさを使用し、サイズは利用者が変更できるように配慮する ....31 4-4-2. 書体は指定しない ...32 4-4-3. 数値は半角文字を使用する ...33 4-4-4. 単語の途中に空白文字（スペース）や改行を入れない ...34 4-4-5. 機種依存文字、および半角カナを使用しない ...35 4-4-6. 一般的なブラウザでリンクを表す色（青や紫）に近い色は、文字の強調色として使用しない ...36 4-4-7. 強調したい文字は、強調タグを使用する ...37 4-5. リンク 4-5-1. リンク先のページがサイト内のコンテンツである場合、別ウィンドウで表示しない ...38 4-5-2. リンクは十分な面積を確保する ...39 4-5-3. リンクテキストが隣接する場合、十分な間隔を確保する ...40 4-5-4. リンク先の内容がわかるようにする ...41 4-5-5. 画像ファイルに直接リンクしない ...42 4-5-6. PDF ファイルなどにリンクする場合、その旨を明示する ...43 4-6. 画像 4-6-1. 画像には適切な代替テキストをつける ...44 4-6-2. 画像のファイルフォーマットは、GIF、JPEG、PNG 形式のいずれかを採用する ...45 4-6-3. 画像データのファイルサイズは最適化する ...46 4-6-4. 画像内の文字は読みやすくする ...47 4-6-5. クリッカブルマップには文字リンクを併記する ...48
4-7. PDF・Flash・JavaScript 4-7-1. PDF ファイルを作成する場合は、できるだけ画像からの変換ではなく、テキスト文書を書き出 して作成すること ...49 4-7-2. PDF や Flash などを用いる場合には、適切な代替手段を用意すること ...50 4-7-3. JavaScript は基本的に使用しない ...51 4-8. 表（テーブル） 4-8-1. 表はわかりやすい構造にする ...52 4-8-2. 表には行・列に適切な見出しをつけ、表の上部（あるいは下部）に表題を記述する ...53 4-9. 入力フォーム 4-9-1. 入力させるときは、どのように入力するのかを明確にする ...54 4-9-2. 重要な選択（情報の送信など）では、確認画面を用意する ...55 4-9-3. チェックボックス、ラジオボタンは LABEL 要素を使用し、コントロールとラベルと関連づける ....56 4-9-4. 入力制限時間を設けない ...57 4-10. 動画・音 4-10-1. 動画、音声、アニメーションなどは利用者側で制御できるようにする ...58 4-10-2. テキストで同等の情報を準備する ...59
ቒሻቤ
マニュアルを作成するにあたって
⾐⋵ࡎࡓࡍࠫࠕࠢࠪࡆ࠹ࠖะࡑ࠾ࡘࠕ࡞ߪޔࡎࡓࡍࠫࠍᚑߒ㐿ߒߚ㓙ߦޔ ߛࠇ߽߇߿ߔߊޔ᳞ߡࠆᖱႎࠍ◲නߦᚻߢ߈ࠆࠃ߁ߦߔࠆߚޔࡎࡓࡍࠫࠍᚑߔ ࠆ㓙ߦᵈᗧߔߴ߈㗄⋡ߣߘߩౕ⊛ߥᣇᴺࠍ␜ߒߚ߽ߩߢߔޕ ࠗࡦ࠲ࡀ࠶࠻ߪޔߔߢߦᖱႎ㓸ᚻᲑߣߒߡᐢߊ᥉ߒߡ߅ࠅޔ⋵ߩᖱႎ⊒ାᚻᲑߩ৻ߟߣ ߒߡ㊀ⷐߦߥߞߡ߈ߡ߹ߔޕ㐿߆ࠇߚ⋵ߩផㅴߩߚߦ߽Ⓧᭂ⊛ߦࡎࡓࡍࠫߦࠃࠆᖱႎ⊒ ାߦദߡߊߛߐޕホームページのユニバーサルデザインとは
ࠗࡦ࠲ࡀ࠶࠻ߪޔߢߪᐕ㦂߿ᕈޔ㓚ኂߩήߥߤߦ㑐ଥߥߊ᭽ޘߥੱޘ߇↪ߔࠆࠃ߁ ߦߥࠅ߹ߒߚޕ߹ߚޔࠗࡦ࠲ࡀ࠶࠻߳ߩធ⛯ⅣႺ߽ࡕ࠺ࡓޔ࠽ࡠࡃࡦ࠼ޔࡉࡠ࠼ࡃࡦ࠼ߥߤ ߹ߔ߹ߔᄙ᭽ൻߒߡ߹ߔޕߎߩࠃ߁ߦޔ᭽ޘߥੱ߇᭽ޘߥⅣႺߢ↪ߔࠆ㓙ߦޔߛࠇ߽߇↪ߒ ߿ߔߊޔ߆ߟߛࠇߢ߽ᐔ╬ߦᖱႎࠍᚻߢ߈ࠆߎߣ߇᳞ࠄࠇߡ߹ߔޕߘߩߚߦߪࡎࡓࡍ ࠫߩ࡙࠾ࡃࠨ࡞࠺ࠩࠗࡦߦ㈩ᘦߔࠆߎߣ߇ᄢಾߦߥࠅ߹ߔޕ ࡎࡓࡍࠫߩ࡙࠾ࡃࠨ࡞࠺ࠩࠗࡦߪޔᄢߔࠆߣޟ࡙ࠩࡆ࠹ࠖޠߣޟࠕࠢࠪࡆ࠹ࠖޠ ߦಽߌߢ߈߹ߔޕ࡙ࠩࡆ࠹ࠖߣߪޔޟ߿ߔߐޠࠍᗧߒ߹ߔޕ࡙ࠩࡆ࠹ࠖߩࡐࠗࡦ ࠻ߪޟᔟㆡᕈޠޔޟᠲᕈޠޔޟ⍮ᕈޠߩὐߢߔޕ߹ߚޔࠕࠢࠪࡆ࠹ࠖߣߪޔޟߛࠇ߽߇ ↪ߢ߈ࠆߎߣޠࠍᗧߒ߹ߔޕߟ߹ࠅޔ㜞㦂⠪߿㓚ኂ⠪ߥߤޔᔃりߩᯏ⢻ߦ⚂ߩࠆੱߢ߽ࡎ ࡓࡍࠫߢឭଏߐࠇߡࠆᖱႎߦ㗴ߥߊࠕࠢࠬߢ߈ޔߛࠇߢ߽ᐔ╬ߦ↪ߢ߈ࠆߎߣࠍ߹ ߔޕホームページのユニバーサルデザインが求められている背景
ᣣᧄߪ᰷☨⻉࿖ߣᲧߴߡޔᕆㅦߦ㜞㦂ൻ߇ㅴࠎߢ߹ߔޕᐕߦߪᱦએੱญߪਁੱޔ 㜞㦂ൻ₸ߪߦߥࠆߣ੍ᗐߐࠇߡ߹ߔ㧔̪㧝㧕ޕߎߩࠃ߁ߥޔ㜞㦂ൻߦኻᔕߔࠆߚޔ㜞㦂⠪ߩ ᖱႎᚻᚻᲑߣߒߡ߿ߔࡎࡓࡍࠫ߇᳞ࠄࠇߡ߹ߔޕ߹ߚޔࡄ࠰ࠦࡦ߿ࠗࡦ࠲ࡀ࠶ ࠻ߩ᥉ߢޔ␠ળෳടߩน⢻ᕈ߇ᩰᲑߦᐢ߇ߞߚ㓚ኂ⠪ߦኻߒߡ߽ห᭽ߢߔޕ㓚ኂ⠪ߩࠗࡦ࠲ࡀ ࠶࠻㧔ࡄ࠰ࠦࡦㅢାࠍ㧕ߩ↪₸ߪޔⷞⷡ㓚ኂ⠪߇㧑ޔ⡬ⷡ㓚ኂ⠪߇㧑ޔ⢇ਇ⥄↱ ⠪߇㧑ߣߥߞߡ߹ߔޕ߹ߚޔࠗࡦ࠲ࡀ࠶࠻ࠍ↪ߔࠆ㓚ኂ⠪ߩ⚂㧥ഀ߇ޔ↪ᓟߩ↢ᵴߩ ᄌൻߦߟߡޟࠃᣇะߦᄌࠊߞߚޠ߹ߚߪޟߤߜࠄ߆ߣ⸒߃߫ࠃᣇะߦᄌࠊߞߚޠߣ࿁╵ߒߡ ߹ߔ㧔̪㧞㧕γ
JJ
はじめに このように高齢者や障害者にとっても、ホームページは重要な情報源になりつつあります。特に、外出 が困難な障害者や視覚障害者にとっては、ホームページからの情報収集や情報交換は、社会との大切な 接点になっているといっても過言ではありません。しかし、実際に提供されているホームページは、高齢 者や障害者にとって非常に使いにくい、あるいは使えない作りになっていることが少なくありません。例え ば、ウェブブラウザには利用者が「文字を大きくする」ことができる機能が標準で搭載されています。しか し、残念なことにデザイン性を重視するあまり、文字の大きさを固定しているページが数多く存在しています。 結果として「文字を大きくする」機能が利用できない状況（バリア）を作り出しているのです。 ※１：出典：厚生労働省／平成 12 年版厚生白書 http://www1.mhlw.go.jp/wp/wp00_4/chapt-a1.html ※２：出典：厚生労働省／平成 13 年版障害者白書「障害のある人と IT -IT が拓く新たな可能性 -」 http://www8.cao.go.jp/shougai/whitepaper/h13hakusho/gaiyou.html高齢者・障害者の閲覧時の利用特性
高齢者の場合は、加齢に伴い、視覚・聴覚が変化するため、高齢者がホームページを利用する際には 下記に挙げる視覚障害、聴覚障害と同様の問題が発生します。また、個人差はありますが、全体的な傾 向としては IT 関係の専門用語や新語は苦手な人が多く、複雑な操作の習得も負担となります。 障害者の場合は、その利用者の身体条件によって異なりますので障害別に利用特性を示します。 視覚障害 ・全盲：画面を見ることができない。マウスを操作できない。 ・弱視：画面を拡大しないと見にくい。 ・色覚障害：識別できない色がある。 聴覚障害 ・音声が聞こえない。聞きづらい。 運動障害 ・手や指先が動かない。動かしづらい。視覚障害者の場合
障害者の中でも、特にハードルが高いのは全盲や弱視といった視覚障害者です。視覚障害者の多くは、JJJ
はじめに ホームページにアクセスする場合、音声ブラウザと呼ばれる補助ソフトを使います。つまりホームページを「聞 いている」といえます。音声ブラウザは、ホームページ上にあるテキストデータを読み上げるソフトなので画 像で表現されたところは何が書かれているか判別することができず、読み上げてくれません。もし、画像で 重要な情報が提供されていた場合、音声ブラウザを利用している視覚障害者は、その大事な情報を知るこ とができないのです。ウェブアクセシビリティの JIS 規格化
このような背景の中、ウェブアクセシビリティが JIS 規格化されました。政府は 2002 年 12 月 24 日、 国の障害者政策の基盤となる障害者基本計画を閣議決定し、その中で IT 関連では、障害者や高齢者も 使いやすいユニバーサルデザインの機器開発に向けたガイドラインの JIS 規格化を平成 15 年度までに行う こと、障害者の IT 利用を支えるサポートセンターを設置することなどを盛り込みました。 これを受け、日本規格協会より 2004 年 6 月 20 日に、JIS X 8341-3:2004「高齢者・障害者等配慮 設計指針 − 情報通信における機器，ソフトウェア及びサービス − 第 3 部：ウェブコンテンツ」が制定さ れました。これは、主に高齢者や障害者がホームページを利用する際にウェブアクセシビリティを確保し、 また、それを向上させるためにホームページの提供者や制作者が配慮しなければならない事項について規 定しています。マニュアルの重要性
アクセシビリティ向上マニュアルは、JIS X 8341-3 を中心としたアクセシビリティにユーザビリティ の要素を加味して作成しました。 ホームページ担当者全員が、一定のガイドラインのもとホームページを作成しなければ、佐賀県ホーム ページのユニバーサルデザインは確保できません。担当者全員が、このマニュアルの趣旨・内容を理解 し、このマニュアルに沿ったホームページの作成・更新に努めてください。１．トップページ
１．トップページ
1-1. 利用者の立場で項目を分類する
【理由】
制作者側の一方的な都合で分類分けされているサイトは、とても使いにくいものです。サイトの利用者を目 的のコンテンツに的確に誘導するために、利用者の立場に立った情報分類を行い、表記（ラベリング）の 仕方などにも細心の注意を払いましょう。【解説】
（図）好ましい例：利用者の目的に沿った情報分類で、情報へ到達し やすい。 （図）好ましくない例：発信者の立場での項目分類。利用者は目的の 情報がどこに分類されているのか想像しにくい。１．トップページ
1-2. トップページでサイト全体が見通せるようにする
【理由】
トップページは、多くの場合、訪問者が最初に訪れるページであり、そこに書かれている内容によって、サ イト内にどんな情報があるか判断しています。【解説】
サイト内の情報を体系的かつ網羅的に掲載することで、サイト全体の構成・内容を予測することができます。1-3. 団体名・所在地を明記し、アクセス情報（地図や交通案内）ペ
ージへのリンクを設ける
【理由】
ホームページで解決できない問題・情報・お問合せ・ご相談などについて、インターネット以外の方法を 提示する必要があります。【解説】
団体名、情報発信主体者を明記し、併せてその連絡先、その場所へのアクセス方法も明記します。１．トップページ
1-4. 「サイトポリシー」や「個人情報の取り扱い」ページへのリン
クを設ける
【理由】
「佐賀県プライバシーポリシー及び行動プログラム」【行動プログラム】201（ポリシーの公表）により、個 人情報の取り扱いに関する佐賀県のポリシーを公表することとしています。【解説】
「サイト運用の考え方（サイトポリシー）」や「個人情報の取り扱い（プライバシーポリシー）」に関する情 報を掲載することで、利用者の安心感を高めることができます。 「サイトポリシー」と「プライバシーポリシー（個人情報の取り扱い）」が掲載されています。１．トップページ
1-5. ページの使い方（ご利用方法メニュー）を用意する
【理由】
ホームページを使い慣れていない方や、初めて佐賀県ホームページを訪れる方に配慮します。【解説】
ページの使い方を説明するページを用意します。ページの各部分の役割、ページ閲覧の方法、検索の仕方、 用語などを説明します。 また、このページは実際のページの更新に併せ、随時更新します。 ご利用方法ページへのリンクが張られています。２．県庁ポータル
２．県庁ポータル
（トップページ、各メニューページ、各機能ページ、定型コンテンツ）2-1. 各ページにグローバルナビゲーションを設ける
【理由】
共通するナビゲーションが同じ位置にないと、利用者は別のサイトに移動したように感じるとともに、使い 勝手を大きく損ねます。【解説】
各ページに位置・表記・デザインが共通のナビゲーションをつけることにより、同じサイト内であることが 明確になり安心感が生まれます。また、ナビゲーション部分と本文の構成をページごとに確認する必要が ないので、情報の取得に集中することができます。 【用語解説】 ナビゲーション ナビゲーションとは、サイト内を案内する道しるべのようなもの。ナビゲーションは各ページへのリンクによって構成さ れ、それぞれのページをつなげるリンクの集合体である。利用者は、自分の知りたい情報の入り口を見つける目的で ナビゲーションを利用するため、サイトの構造と同様、大変重要な要素である。 共通するナビゲーション部 分。各コンテンツページに 配置することで、サイト全 体の統一感が生まれ、使い 勝手を向上させます。２．県庁ポータル
2-2. 各ページに検索機能、もしくは検索ページへのリンクをつける
【理由】
サイト検索機能は、サイト内の膨大な情報から、任意のキーワードに関する情報を探し出すことができるた め、Web サイトには欠かせないものとなっています。検索機能はトップページから利用できるのみにとどま らず、各コンテンツページからも利用できるように配慮しましょう。【解説】
各ページに、直接キーワードの入力フィールド、もしくは検索機能のある画面へのリンクを設置します。 ▲ トップページ ▲ コンテンツページ トップページおよび各コンテンツページから、サイト内 検索機能が利用できるようになっています。䋳䋮䉮䊮䊁䊮䉿ᚑ䈮䈍䈔䉎ၮᧄ⊛䊦䊷䊦㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷 㩷
㧟㧙㧝㧚ోࡍࠫߩᏀߦߪ⾐⋵ߩࡠࠧ↹ࠍ㈩⟎ߒޔ⋵ࡎࡓࡍࠫ࠻࠶ࡊ߳ߩ ࡦࠢࠍ⸳ߌࠆ ޣℂ↱ޤ ࡍࠫࠍ㐿ߚߣ߈ޔหߓ႐ᚲߦหߓࡠࠧࡑࠢ߇㈩⟎ߐࠇߡࠆߣޔ⾐⋵ߩࠨࠗ࠻ ߢࠆߎߣ߇ߔߋߦಽ߆ࠅޔ࡙ࠩߦᔃᗵࠍਈ߃ࠆߎߣ߇ߢ߹ߔޕ ߹ߚޔ⋵࠻࠶ࡊࡍࠫ߳ߩࡦࠢߪޔᬌ⚝ࠨࠗ࠻╬߆ࠄ⋥ធࡍࠫࠍ㐿ߚ࡙ࠩࠍ ࠻࠶ࡊࡍࠫߦ⺃ዉߔࠆߎߣߦࠃࠅޔ㑐ㅪߔࠆࡍࠫ߇តߒ߿ߔߊߥߞߚࠅޔઁߩࡍࠫ ࠍߡ߽ࠄ߃ࠆߥߤޔଢᕈ߇ะߒ߹ߔޕ ޣ⸃⺑ޤ ߢ߈ࠆߛߌޔԘߩ↹ࠍࡍࠫߩᏀߦ㈩⟎ߒߡߊߛߐޕ㧔Ԙࠍ߁႐วߦߪޔ⾐⋵ ࡎࡓࡍࠫ࠻࠶ࡊߦࡦࠢࠍᒛߞߡߊߛߐޕਅߩ࠲ࠣߢ↹ߣࡦࠢ߇ឝタߢ߈߹ ߔޕ㧕 <A href="http://www.pref.saga.lg.jp/"><imgsrc="http://www.pref.saga.jp/sozai/saga-logo.gif" border="0" alt="⾐⋵ࡎࡓࡍࠫ࠻ ࠶ࡊ߳"></A> ࠺ࠩࠗࡦ╬ߩ⚂Ԙߩ↹߇߃ߥ႐วߦߪޔԙࠍឝタߒߡߊߛߐޕ㧔↹ߩᄢ߈ ߐߪ⥄↱ߣߒ߹ߔޕߎߩ႐วޔߎߩ↹߆ࠄߩ⋵ࡎࡓࡍࠫ࠻࠶ࡊ߳ߩࡦࠢߪਇⷐߣ ߒ߹ߔ߇ޔԚߩᚻ㗅ߢࡦࠢࠍ⸳ቯߒߡߊߛߐޕ㧕 Ԙ ԙ Ԛ Ꮐߦឝタߔࠆ↹߇ԙߩ႐วޔࡄࡦࠢ࠭ࠬ࠻㧔㧥ࡍࠫ㧕ߩઁޔਅߩࡏ࠲ࡦ߆ࠄ⋵ ࡎࡓࡍࠫ࠻࠶ࡊ߳ߩࡦࠢࠍ⸳ቯߒߡߊߛߐޕ 㧔ࡍࠫߩਅߩㇱಽߦឝタ㧨ਅ⸥ෳᾖ㧪㧕 ઍᦧ࠹ࠠࠬ࠻ࠍޟ⾐⋵ࡎࡓࡍࠫ࠻࠶ࡊ߳ޠߦߔࠆޕ ̪ ਅߩ࠲ࠣߢ↹ߣࡦࠢ߇ឝタߢ߈߹ߔޕ <A href="http://www.pref.saga.lg.jp/"><img src="http://www.pref.saga.lg.jp/at-contents/img/pref-saga-logo.gif" border="0" alt="⾐
⋵ࡎࡓࡍࠫ࠻࠶ࡊ߳"></A>
㧟㧚ࠦࡦ࠹ࡦ࠷ᚑߦ߅ߌࠆၮᧄ⊛࡞࡞
ԙߩ↹ߩឝタ
３．コンテンツ作成における基本的ルール
3-2. 各コンテンツには、コンテンツのトップへ戻るリンクを設ける
【理由】
前述の「3-1. 各コンテンツのトップページに「佐賀県ホームページへ」を設ける」ことと同様、各コンテン ツのページには、そのコンテンツを束ねる「トップページ」への誘導が必要です。【解説】
▼佐賀県トップページ ▼コンテンツのトップ ▼各コンテンツ３．コンテンツ作成における基本的ルール
3-3. 各ページに「パンくずリスト」を設ける
【理由】
サイトを利用する場合において、トップページからいくつかのリンクをたどって目的のコンテンツページにた どり着くことが想定されます。どのページを遷移してきたのか、足跡（リンク付きのテキスト）として残すこ とで、サイトの使い勝手が大幅に向上します。 また、Google や Yahoo! といった検索ページから、県庁サイトのトップページではない、深い階層のペー ジに直接アクセスしてくる利用者も多く存在することでしょう。このような利用者のためにも、現在見ている ページがサイト内のどの位置にいるのかを明示することが望まれます。【解説】
パンくずリストとは、現在閲覧しているページのサイト内での位置（階層構造）と、各階層へのリンクを簡 潔に示したものです。 パンくずリストが各ページの同じ位置につけられていることで、自分が現在サイト内のどのページを見ている のかを確認することができ、容易にトップページや他の階層のページに移動することが可能になります。 ▼ 「パンくずリスト」の例 「アスベストに関する情報」へのパンくず リスト表示例。「くらし・安全」の中の 内容であることが明らかで、トップペー ジを含む上位階層への移動も容易に行 うことができる。３．コンテンツ作成における基本的ルール
3-4. 各ページの内容に関する問い合わせ先を明記する
【理由】
利用者がどのページからでも意見投稿や質問などが行えるように配慮する必要があります。【解説】
サイト全体やページの内容について、利用者が意見投稿や質問などを行う場合の連絡手段を提供します。 特定の手段だけでは利用できない人が存在するため、電話番号の掲載のみにとどまらず、複数の問い合わ せ手段を提供することが有効です。 各ページの最下部に問い合わせ先を明示。障害者や開庁時間内に電話できない人などのために、FAX 番号やメ ールアドレスを掲載しています。 各コンテンツページでは、問い合わせ先となる情報掲載課名と連絡先（もしくは連絡先ページへのリンク）を記 載するとよいでしょう。（電話、Tel、telは可、TELは不可。FAXはどのような表記でも可） ▼ 問い合わせ先の表示例３．コンテンツ作成における基本的ルール
3-5. 個人情報を収集する場合には、目的等を明記する
【理由】
サイトを通じて個人情報を収集する場合には、個人情報収集の目的を明確にするとともに、目的外での利 用を行わないことを明示します。【解説】
▼ 目的外使用を行わないことを明示した例 ○ 個人情報の取り扱いについて ・このインターネット会員の募集に伴い収集した個人情報は、メールマガジン「○○○」の配信のみに 使用し、それ以外の目的に使用することはありません。 ・なお、県における個人情報の取り扱いについては、 佐賀県プライバシーポリシー（http://www.pref.saga.lg.jp/portal/public/HP/privacy.htm） 及び行動プログラム（http://www.pref.saga.lg.jp/at-contents/privacy/）で定めています。３．コンテンツ作成における基本的ルール
3-6. ページ作成後も随時内容の更新、修正をする
ホームページに掲載された情報は随時、更新、修正、削除を行います。更新・修正を行った際には、ど の情報が更新・修正されたのかを明らかにするとともに、更新後も品質が保たれるよう、このマニュアル に沿って更新作業を行います。 更新、修正、削除を行った場合、リンク切れが発生しないようにリンクされているページのチェックも行い ましょう。 また、提供する情報の最終更新日の日付を必ず入れるようにします。できるだけ新着情報や最終更新日の エリアを設け、最終更新日がわかるようにしましょう。 （図）新着情報の例 更新された情報のタイトルを時系 列で並べている。４．アクセシビリティ（JIS X8341-3）への配慮
4-1. ソースコード・タグ
4-1-1. ソースコードは文書型宣言を行い、使用する技術の規格や
仕様に従って記述する
【理由】
ページを作成する際には、通常 HTML や XHTML が使用され、これらは W3C によってその仕様が規定 されています（コンテンツのレイアウトを定義する CSS も、W3C によって仕様が規定されています）。 各ブラウザ・音声ブラウザなどは、この仕様に基づいて様々な機能が提供されており、この仕様に従って いない技術・機能が用いられたページが作成された場合、その機能が使用できない場合があります。【解説】
HTML ファイルの冒頭に、文書型宣言を記載します。文書型宣言とは、これから書かれる HTML ファイ ルがどんな定義によって書かれるのかを示す、重要な役割を担っています。 （例） '2&7<3(+70/38%/,&:&'7'+70/7UDQVLWLRQDO(1! 上記の例では、HTML のバージョン 4.01 の仕様に準拠し、非推奨要素も含む（Transitional）記述をする、 と宣言しています。非推奨要素の代表例として、文字の体裁を指定する <font> や、中央揃えを指定する <center> などがあります。これらタグは、スタイルシートを用いて表現することが望まれます。 【用語解説】 CSSCSS とは、Cascading Style Sheet の略。Web ページのレイアウトを定義する規格で、CSS を使うと、フォントや文 字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体から切り離すことができる。これまで HTML には、 これらレイアウトに関する記述が大量に書き込まれていたが、文書の論理構造を記述するという本来の HTML の目的 に反することから、文書の視覚的構造を規定する枠組みとして CSS が新たに策定された。
W3C
W3C とは、World Wide Web Consortium の略。WWW（World Wide Web）技術にかかわりの深い企業や大 学・研究所、個人などが集まって 1994 年に発足。WWW で利用される技術の標準化を進める団体のことを指す。 音声ブラウザ
音声ブラウザは主に視覚障害者が Web を閲覧するときに使用するもので、サイト上の情報を音声で読み上げるソフト のこと。
4-1-2. ページ内で記述する、基本言語を明示する
【理由】
<html> には lang 属性を用いて、その文書の言語を明示しておくことが WAI で推奨されています。また、 文中で使用する言語が変わった場合、それを明示するようにしましょう。【解説】
制作するページの基本言語が日本語の場合、<html> のタグには以下の用に記述します。 （例） KWPOODQJ MD! "ja" は、日本語を意味し、仮に英語コンテンツだった場合には、<html="en"> のようにします。1-1. で示 した文書型宣言は、この <html> タグの前に書くことになりますので、HTML ファイルは以下のように書き 始めることを基本とするとよいでしょう。 '2&7<3(+70/38%/,&:&'7'+70/7UDQVLWLRQDO(1! KWPOODQJ MD! KHDG! ∼∼∼以下、省略。 【用語解説】 WAIWAI とは、Web Accessibility Initiative の略。Web に関する仕様の標準を策定している W3C 内に設けられた組 織で、高齢者や障害者を含め、より多くの人が Web コンテンツを利用できるようすることを目的に発足した。Web コ ンテンツをバリアフリーな状態にするためのコンテンツ作成方法など、アクセシビリティに関する指針を公表している。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈ソースコード・タグ〉
4-1-3. ページの内容は文書構造を適切なタグを用いて示す
【理由】
文書の構造は、音声ブラウザなどが利用者に適切な音声情報を提供するために不可欠な情報です。【解説】
文書構造とは、「大見出し」「小見出し」「段落」など、文書を構成する要素が表す階層構造のこと で、HTML においては、文書構造を示すための <h1> ∼ <h6>（見出し）、<li>（リスト）、<em>（強調）、 <strong>（より強い強調）、<blockquote>（引用）などのタグを適切に使用することによって、文書構造 を明らかにします。 例えば、箇条書きを表現する際には、文頭に文字としての「・」を書き入れるのではなく、HTML のタグ（<ul> や <li>）を使って正しく表現します。 （好ましい例）HTML のタグを使った箇条書きの表現例 XO!OL! DKUHI DKWPO! 平成 年度の実施状況 OL! OL! DKUHI EKWPO! 平成 年度までの実施結果 OL! OL! DKUHI FKWPO! パブリック・コメントとは・・・ OL! XO!
（好ましくない例）文頭に「・」を使って、文字として表現した例 ・ DKUHI DKWPO! 平成 年度の実施状況 D! EU! ・ DKUHI EKWPO! 平成 年度までの実施結果 D! EU! ・ DKUHI FKWPO! パブリック・コメントとは・・・ D!
どちらの例も、見た目は同じように見えますが、文書の構造を明らかにするためにも <li> を使用しましょう。
箇条書きが正しく表現されています。
4-1-4. 文章には見出しをつけ、段落を意識しながら表現する
【理由】
文章は、見出しや段落を設け、利用者にとって読みやすい状態を提供することが望まれます。ただし、単 純に見出しと本文の文字サイズや色を変えることで表現するのではなく、HTML の文書構造上、正しくマ ークアップする必要があります。HTML タグで見出しを指定することは、音声ブラウザなどが利用者に適切 な音声情報を提供するために不可欠な情報です。【解説】
見出しを表す場合は、見出しタグ（<h1> ∼ <h6>）を使用して表現します。また、段落においては段落タ グ（<p>）を使います（関連項目 4-1-3：15 ページ参照）。 （図）音声ブラウザの利用例（IBM 製 ホームページリーダーのスクリーンショット） ホームページリーダーでは、本文中の見出しだけを拾い読みしてくれる「見出し読みモード」があ り、利用者はページ内にどういった内容が書いてあるのか、見出しだけを追うことで迅速に把握す ることができる。もし、ページ内に見だしタグ（<h1> など）がマークアップされていなかった場合、 「見出し読みモード」は利用できず、ページ全体を把握するには、本文すべてを先頭から聞き続 けなければならない。 HTML 上で「見出し」が 指定されている。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈ソースコード・タグ〉4-1-5. ページの見た目を表現するには、できるだけスタイルシート
（CSS）を使用する
【理由】
より多くの利用者に対してサイトを快適に使っていただくためには、文書の構造（HTML）と表現のための 表示スタイル（スタイルシート）を分離する必要があります。こうすることで利用者が自分の特性に合った 表示スタイルを適用できるようになり、より操作、利用がしやすくなります。【解説】
スタイルシート（CSS）とは、ページの構成要素の見た目を設定するための仕組みのことで、HTML によ って文書構造を示すのに対し、スタイルシートを用いて文字の大きさや、色、装飾、レイアウトなどを設定 します。 ▼ HTML ファイル ▼ スタイルシート（CSS ファイル） ▼ 利用者の Web ブラウザ （図）文書と表示スタイルを分離した例 構造上、文書と表示スタイルが分離 されていても、利用者画面では、そ れぞれが併合して表示される。 利用者自身の特性に合った表示 スタイルが用意されていた場合、 サイトから提供されるスタイルよ りも優先されるので、サイトの利 用がしやすくなる。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈ソースコード・タグ〉4-1-6. HTML や CSS の文法チェックを心がける
【理由】
ウェブコンテンツのユニバーサルデザイン（高齢者や障害者を含め、より多くの方々に情報提供できること： アクセシビリティ）を図る上では、HTML や CSS のソースコードが正しい文法に則って記述されているこ とが求められます（項目 4-1-1：13 ページ参照）。【解説】
制作したページが正しい文法で記述されているかどうかを検証するのに、チェックツールを利用するとよい でしょう。例えば、「Another HTML-Lint」といった無料の検証サービスがあります。利用の目安として、 重要度「2」以上の警告がでないようにするとよいでしょう。 HTML の文法チェックツール 「Another HTML-lint」の画面 （http://openlab.ring.gr.jp/k16/htmllint/htmllint.html） 検証したいページ URL、またはソースコードを入力し、「チ ェック」ボタンを押すことで結果が返ってくる。 URL を指定 ソースコードをコピー & ペースト 検証結果の画面 HTML の文法として適切でない記述を一覧で返す。それ ぞれのエラーに対し、おおまかな重要度（0 ∼ 9 の 10 段階）が記されているので、重要度が「2」以上と表示 された項目は、適切な処置をする。 エラーに対する重要度示す数値 または ４．アクセシビリティ（JIS X8341-3）への配慮 −〈ソースコード・タグ〉4-2. レイアウト
4-2-1. ページの長さは適切な長さとし、上下のスクロールを極力少
なくする
【理由】
1 ページの長さが長すぎたり、文章が多すぎたりすると、ページ内の内容を理解しにくくなる、スクロール の操作が煩雑になる、他ページへの移動の際に多くの操作が必要になる、などの不具合が生じかねません。【解説】
1 ページの長さは、3 画面以内に収まるようにします。（画面サイズは、横 800 ピクセル 縦 600 ピクセル を想定しています。） １ 画 面 ２ 画 面 ３ 画 面 画面サイズ 800 600 ピクセルを想 定して、3 画面（画面スクロール回数 は 2 回）の長さをもったページの例。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈レイアウト〉4-2-2. 利用者の画面サイズは 800px
600px を想定し、横スクロー
ル無しで表示できるようにする
【理由】
利用者の画面環境で横スクロールが発生しないよう配慮します。利用者は、横方向へのスクロールに対し ストレスを感じやすいからです。 なお、リキッドレイアウト（ブラウザ表示画面の横幅に応じて、コンテンツ幅が可変する）にした場合には、 800px 600pxのモニタにおいて横スクロールが発生しません。【解説】
利用者の画面サイズを、800 600 ピクセルと想定します。その環境で横スクロールが発生しないよう、 スクロールバーなどを除いた実際の画面幅 750 ピクセル程度を、ページ幅の上限と考えてページを構成し ます。 （図）リキッドレイアウトのイメージ ▼ 画面サイズ 800 600 ピクセル（SVGA）での表示。 ▼ 画面サイズ 1024 768 ピクセル（XGA）での表示。 表示サイズに応じて、コンテンツ領域を 可変している。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈レイアウト〉4-2-3. フレームは利用しない
【理由】
フレームを使用したページを音声ブラウザで読み上げる場合、フレームを１つずつ選択して読み上げなけれ ばなりません。また、ブラウザのお気に入りに登録できない場合や、印刷がうまくできない場合があります。【解説】
フレームは使用せずにページのレイアウト表現を行いましょう。 （図）フレームを使ったページ。画面が 3 分割されている。①
②
③
【用語解説】 フレーム Web ブラウザの一つのウィンドウを複数に区切って、それぞれに別々の内容（HTML ファイル）を表示させる表現技法。 ページ内容を説明するメニューをひとつのフレーム内に、メニューに応じたコンテンツを別のフレーム内に、といった使 われ方が多い。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈レイアウト〉4-2-4. なるべく表（テーブル）をレイアウトのために使用しない
【理由】
音声ブラウザは、表（テーブル）を左上から右下に読み上げます。そのため、表（テーブル）の要素や 属性をレイアウト目的で使用した場合、作成者が意図しない順序で読み上げる可能性があります。【解説】
極力、レイアウトのために表（テーブル）の要素や属性を、レイアウト目的で使用しないようにします。もし、 使用する場合は、読み上げ順序を考慮します（項目 4-7-1：49 ページ参照）。 （図）音声ブラウザによる読み上げ順の例①
②
③
①
②
③
①
②
③
④
⑤
⑥
④
⑤
④
⑤
⑥
⑦
⑦
⑧
⑨
⑥
⑦
⑧
⑧
⑨
⑩
（悪い例）表組み要素を使って、レイアウトを構築した例 タイトル 内容 再生ボタン この例では、まずタイトルを A ∼ C の順に読み上げ、その後コンテンツの内容を 3 つ連続で読み上げる。最後に 「再生ボタン」を 3 回連続で読むことになる。これでは目的のコンテンツを再生することが困難である。 読み上げ順を表す数字。 1 ∼ 13 の順に読む。 赤い枠線は、表のセル ４．アクセシビリティ（JIS X8341-3）への配慮 −〈レイアウト〉4-2-5. プルダウンメニューを利用したナビゲーションは避ける
【理由】
プルダウンメニューを利用したナビゲーションでは、音声ブラウザ等でメニューの内容を読み上げられない 場合があります。また、マウスを利用できない環境にも配慮する必要があり、マウスでなければ使うことの できないメニューは避けるべきです。キーボードだけでも操作できるようにしましょう。【解説】
プルダウンメニューは、視覚に障害を持たれている方や、上肢に障害があり細かいマウスでの操作が苦手 な方等にとって、たいへん使いにくいものです。もし、必然性を考慮した上でプルダウンニューを利用する のであれば、その内容が文字のリンクによって一覧できる代替手段を考慮する必要があります。 （ 左 図 ）プ ルダウンを使ったメニュー 例（HTML の <form> タグを使用） 利用の際は、キーボードだけでも操作ができることに配慮する。 （上図）プルダウンを使ったメニュー例（JavaScript を使用） 音声ブラウザではメニューの内容を読み上げることができず、キーボードのみでの操作も不可能。また、 JavaScript を利用できない（あるいは機能をオフにしている）場合であってもプルダウンメニューは表示されない。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈レイアウト〉4-3. 表現
4-3-1. ページの内容を適切に表す、他と重複しないタイトルを付ける
【理由】
タイトルとは、一般的なブラウザのウインドウのタイトルバーに表示される文字列で、HTML においては 「<title> ○○○ </title>」で指定をします。 音声ブラウザではページを閲覧した際に最初に読み上げられ、どのような内容のページであるか判断する 手掛かりになります。また、「お気に入り（ブックマーク）」「履歴」で表示される名称にも使用されるため、 タイトルは、それのみでページの内容を適切に表すことができ、他のページとも異なる固有のものにする必 要があります。 ページの内容が佐賀県庁のコンテンツであることが明確にわかるよう、ページタイトルは「佐賀県 ： 」で 書き始めるよう、統一しましょう。【解説】
タイトルには、サイトの内容がわかる単語を入れましょう。 以下、タイトルの付け方として、好ましい例、好ましくない例を示します。 好 ま し い 例 各ページの内容がタイトルで表記されているとともに、 「佐賀県」のページであることも明らか。 サイトの内容に関する説明が明記されている。 「佐賀県：市町村合併情報（さが進化論）」 好 ま し く な い 例 複数のページに同じタイトルが設定されているため、 ページの内容を区別することができない。 タイトルに「佐賀県」とだけ書いてあっても、ページ の内容が伝わらない。 キャッチフレーズ的なもののみをタイトルにし ている。 「さが進化論」 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈表現〉4-3-2. 日付や時間の表記を統一し、音声ブラウザ等に配慮する
【理由】
日付や時間の表記において、文字記号を使って表現されていた場合、音声ブラウザでは意図したとおりに 読み上げないことがあります。【解説】
日付や時間など、重要な情報になり得るものの場合、記号を使っての表現は避け、内容を正しく伝えるた めの配慮が必要です。 （好ましい例）次の表現は、誤解なく情報を伝えることができる。 2005 年 1 月 15 日 10 時∼ 12 時 （ニセンゴネン イチガツ ジュウゴニチ ジュウジ カラ ジュウニジ と読み上げられる。） （好ましくない例）次の表現は、意図したとおりに情報を伝えることができない場合がある。 2005/1/15 10:00 − 12:00 （イチブンノ ニセンゴ ジュウゴ ジュウ ゼロゼロ ジュウニ ゼロゼロ と読み上げられる 場合がある。） ４．アクセシビリティ（JIS X8341-3）への配慮 −〈表現〉4-3-3. 不必要に点滅したり動いたりする表現を使用しない
【理由】
光過敏性てんかんのある利用者は、1 秒間に数回の点滅や、ストロボ光のような光量の急激な変化に対し、 発作を引き起こす可能性があります。また、視覚に障害がある場合や、加齢などの原因で認知力が低下し てくるような場合は、明減や自動スクロールなど、視覚的に変化する情報は把握しにくくなります。【解説】
下記の点に注意します。 ・画面全体が、1 秒間に 2 回以上明減する表現は行わない。 ・文字や画像の明減や自動スクロールなどの使用は極力避ける。 ・彩度の高い赤（鮮やかな赤）の明減や、色のコントラストの強い反転は避ける。 文字をスクロールさせるタグに <marquee>、文字を点滅させるタグに <blink> があります。 それぞれ、 PDUTXHH! 文字をスクロール PDUTXHH! EOLQN! 文字を点滅 EOLQN! とすることで、スクロールや点滅の効果を実現できます。 しかし、これら要素を使うことは避けましょう。視覚的に変化する情報は把握しにくい、といった理由ばかり ではなく、これらは Web ブラウザの開発企業が独自に開発した 独自拡張タグ だからです（<marquee> はマイクロソフト社、<blink> はネットスケープ社）。 つまり、W3C が定める、HTML や XHTML の規格外のタグになるため、使用は避けるべきです。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈表現〉4-3-4. 背景と内容のコントラストを十分にとる
【理由】
背景と内容のコントラスト（明度差）がないと、背景と内容が同化してしまい、内容を読み取ることができ なくなります。 ※サイト全体のデザイン統一のため、背景の基調色は白とします。【解説】
薄いピンク色を背景に、黒い文字（内容）を配色した例。 コントラストも十分で、読みやすい。 薄いピンク色を背景に、茶色い文字（内容）を配色した例。 コントラストが足りず、可読性に欠ける。 この配色では、第一色覚の方以外はすべて「可読性に欠 ける」との判定がでている。 図は、富士通社が開発した配色チェックツール「ColorSelector」のスクリーンショット。 どういった配色が、どういった人にとって判読しづらいのか、障害別に判定してくれる。 ▼ ColorSelector のダウンロード（無料） http://design.fujitsu.com/jp/universal/assistance/colorselector/ ４．アクセシビリティ（JIS X8341-3）への配慮 −〈表現〉4-3-5. 色や形だけで情報を伝えない
【理由】
音声ブラウザでは色の情報を伝えることができないため、色や形だけで情報を伝えることは意味がありませ ん。また、モノクロプリンタで出力した場合なども同様です。【解説】
左図のカレンダーでは、背景が赤くなっているところ が休館日であるとしている。 しかし音声ブラウザや特定の環境下においては、 背 景色が赤 といった情報を伝えられない。 InternetExplorer にてプリントアウト HTML の作り方によっては、印刷結果にて 背景色 が赤 を再現できない場合がある。 （好ましくない例）打ち消し線を使った例。音声ブラウザでは打ち消されていることを判別することができない。 （好ましい例）打ち消し線を使ってはいるが、終了した旨を併記している例。打ち消し線の表現を利用するのであ れば、こうした配慮が望ましい。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈表現〉4-3-6. 簡潔で明瞭な文章を心がけ、専門的な用語の乱用は避ける
【理由】
多くの利用者が理解しやすい表現を心がけます。【解説】
外来語、専門用語、略語等の多用はせず、日本語で分かりやすい表現をします。外来語等を使用する場 合には、できるかぎり用語の解説を付けます。 要点のみをまとめる、箇条書きにするなどして、簡潔な文章表現を心がけます。 また、「コンピューター」「コンピュータ」等の長音や、「問い合わせ」「問合せ」といった送りがなの不統 一は避けます。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈表現〉4-3-7. 地名・人名等、独特な漢字の読みに対して配慮する
【理由】
地名・人名は、通常の漢字の読み方と異なる場合があり、こどもや外国人など、読み方や意味が分から ない訪問者の場合、情報を読み取ることができない可能性があります。【解説】
読み方や意味の分からない訪問者と同様、音声ブラウザでも正しい読み上げが行われない可能性があるた め、場合によっては、フリガナを付けます。 ● <ruby> タグを使用して漢字にフリガナを付ける例 「厳木温泉を訪れる。」と表現したい場合のソースコードサンプル UXE\! UE! 厳木 UE! US!（ US! UW! きゅうらぎ UW! US!） US! UXE\! 温泉を訪れる。 上記ソースコードを含む HTML ファイルをブラウザで表示した例（図）<ruby> タグに対応したブラウザでの表示例（Internet Explorer での表示例）。
（図）<ruby> タグに対応していないブラウザでの表示例（Netscape Navigator での表示）。 <rp> でくくった記号《この例の場合は（ ） 》の中に、<rt> でくくった読み方を表示している。
4-4. 文字
4-4-1. 文字のサイズはできるだけ標準的な大きさを使用し、サイズ
は利用者が変更できるように配慮する
【理由】
スタイルシートによって、文字のサイズを「pt」や「px」等の単位で指定（絶対値指定）すると、Web ブラウザで文字の大きさの設定を変更することができない場合があり、高齢者などは文字が読みにくいこと があります。【解説】
文字サイズはスタイルシートにて、「em」や「%」の相対的な単位を用いて指定（相対値指定）します。 基本的に、本文で使用する文字サイズには変更を加えず、Web ブラウザの 文字のサイズ設定 で「小」 を選んだ状態であっても、判読できることを確認しましょう。 InternetExplorer にて、文字サイズを「小」 に変更した状態であっても、判読できることを 確認しましょう。 InternetExplorer の「 文 字 のサイズ」を「小」で表示確認。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈文字〉4-4-2. 書体は指定しない
【理由】
ページを作成するにあたって、スタイルシートや <font> タグを使うことにより、書体を指定することができ ます。しかしながら、指定する書体が利用者にインストールされていない場合、作成者の意図しない表示 がされる場合があるため、書体の指定は行いません。【解説】
どうしても特定の書体を使いたい場合（見出しやキャッチなどの装飾）、画像として保存し、ページ内に挿 入します。その際は項目 4-6（44 ページ）以降の、画像に関する注意事項を厳守しましょう。 （図）ホームページビルダーで書体を指定 「書体」メニューの「フォント」から、 パソコンにインストールされている 書体を簡単に指定できるので注意 が必要。 HTML のソースコードには、 <FONT face=" 書体名 "> と入力される。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈文字〉4-4-3. 数値は半角文字を使用する
【理由】
全角数字を使用した場合、音声ブラウザでは、数字が一つ一つ読み上げられたり、誤った位取りがされた りする場合があります。【解説】
数値には半角数字を使用します。 （好ましくない例）下の例では、数字を全角文字で表記している。この例を音声ブラウザで読み上げると、 「イチ ニヒャクエン」と読み上げられる場合があり、利用者に誤解を与えかねない。 （好ましい例）下の例では、数字を半角文字で表記している。この例を音声ブラウザで読み上げると、 「センニヒャクエン」と読み上げられる。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈文字〉4-4-4. 単語の途中に空白文字（スペース）や改行を入れない
【理由】
音声ブラウザでは、単語の途中にスペースや改行が入ることで、単語が分割されてしまい１文字ずつ単独 で読み上げられてしまう場合があるため、単語の途中では、スペースや改行は使用しません。【解説】
上記表を音声ブラウザで読ませた場合、 ・「日 時」は「ヒ トキ」 ・「場 所」は「バ トコロ」 ・「内 容」は「ウチ ヨウ」 と読み上げられるため、意味が通じない。 これは、間に空白文字が入ったため、単語が分断されたことが原因である。音声ブラウザでは、空白にて単語が 終わっているものと見なし、結果的には単漢字による読み上げをしてしまっている。 上記表のように、体裁を整えるために 空白文字 を利用してはならない。 文字と文字の間に 全角の 空白文字 が入っている。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈文字〉4-4-5. 機種依存文字、および半角カナを使用しない
【理由】
丸付き数字やローマ数字といったいわゆる機種依存文字は、環境によって表示される文字が変わってしま うため使用しません。また、半角カタカナについても使用しません。【解説】
下の図は、機種依存文字の一例です（これがすべてではありません）。特に①②③といった、丸付き数 字に注意しましょう。これらは Windows OS のパソコンにおいて正しく表示されていても、Mac OS では などと表示されてしまいます。 入力の際、機種依存文字かどうか迷ったときは、危機管理・広報課のホームページ管理者へお問い合わ せください。 《 内線：1197、1198（0952-25-7008） 》 （図）機種依存文字の一例 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈文字〉4-4-6. 一般的なブラウザでリンクを表す色（青や紫）に近い色は、
文字の強調色として使用しない
【理由】
一般的なブラウザでは、リンクの張られている文字色は青（#0000FF）、一度訪問したサイト（ブラウザの 履歴に残っているサイト）の文字色は紫（#800080）となっています。 これらの色（もしくは近い色）を文字の強調色などで利用した場合、リンクの張られたテキストであるとの 誤解を招きかねません。【解説】
青や紫を文字の強調色として使用しないこととは逆に、特別な理由がない限り、リンクの文字色を変更しな いようにしましょう（スタイルシートなどを使って、リンク文字色を変更することが可能です）。また同様に、 特別な理由がない限り、リンクの張られている文字の下線を取らないようにしましょう。 （図）リンク文字と訪問済リンク文字 訪問済のリンク文字色■
#800080 通常のリンク文字色■
#0000FF ４．アクセシビリティ（JIS X8341-3）への配慮 −〈文字〉4-4-7. 強調したい文字は、強調タグを使用する
【理由】
強調したい文字列は、単に文字の太さを変更するだけでなく、HTML の構造上 強調している ことを指 定しなければなりません。【解説】
強調を表す HTML のタグには、<em> タグや <strong> タグがあります。<em> は強調、<strong> はより 強い強調、とされており、スタイルシートで表示上の指定をしない限りは、前者では斜体で表示され、後 者では太字で表示される仕様になっています（一般的なブラウザの仕様において）。 表示上の見た目だけを太くする <b> タグがありますが、<strong> を使う運用が望まれます。 ソースコードの例 S! 指定の文字列を HP! 強調 HP!します。 S! S! 指定の文字列を VWURQJ! 強調 VWURQJ!します。 S! 一般的なブラウザでは、左図のように表示され ます。 ス タ イ ル シ ー ト を 使 っ て、<em> や <strong> に装飾を加えることで、様々な 表現を可能にします。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈文字〉
4-5. リンク
4-5-1. リンク先のページがサイト内のコンテンツである場合、別ウ
ィンドウで表示しない
【理由】
リンク先を表示する際に予告なく新しいウィンドウを開くと、例えばブラウザを全画面で使用していた場合な ど、そのことに気がつかずに、ブラウザの「戻る」ボタンが使えなくなってしまったと混乱する可能性があ ります。また、利用機器・環境によっては、ウィンドウを切り替える操作自体が困難な場合もあるため、外 部サイトにリンクする場合を除いては、同じウィンドウ内でリンク先が開かれるようにします。【解説】
県庁組織が作成したコンテンツは、すべて同一のウィンドウで開くようにします。<a> タグや <area> タグの target 属性で「_blank」や「_new」を指定しないようにします。
（「佐賀県ホームページへ」のリンクも同じウィンドウで開くようにする。） （図）別ウィンドウで開くリンクをアイコンを使って明示している例 リンクテキストの前に画像を置き、このリンクは別ウインド ウが開くことを利用者に予告している例。 画像には「新しいウィンドウが開きます」といった代替テ キスト（項目 4-6-1：44 ページ参照）が仕込まれており、 音声ブラウザであってもこのリンクが別ウィンドウで開くこ とがわかるようになっている。 ※ 図は、富士通のページ（http://design.fujitsu.com/jp/universal/assistance/webinspector/） ４．アクセシビリティ（JIS X8341-3）への配慮 −〈リンク〉
4-5-2. リンクは十分な面積を確保する
【理由】
リンク部分の面積がせまいと、正確なマウス操作が要求され、操作に不慣れな場合や細かな動作ができな い場合に、誤操作を引き起こす原因となります。【解説】
以下の 2 つのサンプルを比べた場合、リンクできる面積が大きい、下のサンプルの方が使い勝手がよい。 他のリンクに及ばない範囲で、できるだけ大きくリンク範囲を取るように心がけたい。 （図）リンクの面積確保が小さいパターン （図）リンクの面積確保が大きいパターン 赤い枠がリンクの張られている部分 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈リンク〉4-5-3. リンクテキストが隣接する場合、十分な間隔を確保する
【理由】
リンクのある文字や画像が隣接している場合、リンクの区切りを把握できないことがあります。【解説】
リンクとリンクが隣り合う場合や、リンク同士が極端に近い位置に配置されている場合には、リンクのない テキストなどを間に入れることによって十分な間隔を確保します。それによって、細かな操作が苦手な方で も、誤操作の可能性が低くなり使い勝手が向上します。 （好ましい例）各リンク部分の間に、リンクのない「｜」が挟まれているため、個々のリンクが明確。 （好ましくない例）各リンク部分が隣り合っており、すべてが同じリンクのように見え混乱が生じる。また、 操作時に意図しない部分をクリックしてしまう可能性もある。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈リンク〉4-5-4. リンク先の内容がわかるようにする
【理由】
音声ブラウザでは、リンク部分だけを拾い読みできる機能があります。例えば「こちら」などの代名詞だけ にリンクを付けた場合、その前後の文章を確認する必要が生じるため不便になります。【解説】
リンクは、それだけでリンク先の内容が分かるようにし、「こちら」「詳細」などそれだけではリンク先の内 容が想像できないものは使用しません。 （好ましくない例）リンク箇所が「こちら」だけに張られており、何に関する情報なのかそれだけでは判断 できない。 （好ましい例）リンク箇所から何についての内容なのかが想像できる。 「こちら」だけに リンクが張られている 内容全体にリンクを張っている ４．アクセシビリティ（JIS X8341-3）への配慮 −〈リンク〉4-5-5. 画像ファイルを直接開かない
【理由】
HTML ファイルではなく画像に直接リンクを張ると、音声ブラウザ利用者はその画像に関する情報を全く得 ることができません。【解説】
（悪い例） DKUHI LPDJHVVDPSOHMSJ! サンプル画像 D! 画像だけ表示された場合、音声ブラウザでは「Alt テキストなしの イメージ :sample.jpg（実画像のファイル名）」などと読み上げら れることが想定される。 画像だけが表示された。 音声ブラウザの利用者は、何の 画像が表示されたかもわからない （代替テキスト情報を得ることが できない）。 ４．アクセシビリティ（JIS X8341-3）への配慮 −〈リンク〉4-5-6. PDF ファイルなどにリンクする場合、その旨を明示する
【理由】
ブラウザ以外のアプリケーションが起動する（PDF の場合の Adobe Reader 含む）リンクや、対象のファ イルを保存するようなリンク（zip などの圧縮ファイル）は、アプリケーションを起動（ファイルを保存）す るつもりなくクリックしてしまったユーザーにとって、大きなストレスになります。【解説】
PDF ファイルやその他のファイルへリンクする場合は、必ず下記の項目を記述します。 ・リンク先のファイルが HTML でないことを明示する。 ・リンク先のファイルの形式を明示する。 ・リンク先のファイル容量を記載する。 ・リンク先のファイル形式を表示する際にプラグインが必要な場合は、その旨を記載し、プラグインの ダウンロード先の URL も同時に掲載する。 Web ブラウザのプラグインが必要になる代表例として、以下のようなものがあります。 ・PDF フォーマット（Adobe Reader が必要）・SWF フォーマット（Macromedia Flash Player が必要）
・各種動画フォーマット（Real Player や QuickTime Player 等が必要）
（図）PDF ファイルへのリンク例
リンク先が PDF ファイルであ ることを明示。ファイルサイ ズも併記すること。
