1

小松島ホームページCMS（ｺﾝﾃﾝﾂﾏﾈｰｼﾞﾒﾝﾄｼｽﾃﾑ）

操作研修会資料

2009年度

1

・・・・・・・・・３１ ブラウザの「戻る」ボタン等前ページへの戻り ・・・・・・・・・３２ 新しいウィンドウを開いて表示させる場合のリンクのルール ・・・・・・・・・３３ フレーム使用の禁止 ・・・・・・・・・３０ 形や位置だけでなく、文字でも識別できる配慮 ・・・・・・・・・２９ パンくずナビゲーションの使用 ・・・・・・・･･２８ 表作成時の注意点 ・・・・・・・・・２５ 表を利用したレイアウト調整の禁止 ・・・・・・・・・１１ 機種依存文字の使用禁止 ・・・・・・・・・２４ 画像内の文字について ・・・・・・・・・・ ２ アクセシビリティ ・・・・・・・・・・８ 文書の構造化について ・・・・・・・・・・４ ページタイトル ・・・・・・・・・３０ 統一されたデザインや操作性 ・・・・・・・・・２３ 変化・移動する画像や文字の禁止 ・・・・・・・・・１８ 文章表現について ・・・・・・・・・１９ 差別用語などの表現について ・・・・・・・・・２０ 固有名詞や専門用語などについて ・・・・・・・・・２１ 色だけで情報を区別しないこと ・・・・・・・・・２２ 文字色・背景色について ・・・・・・・・・１７ ローマ字,英単語の表記と読み上げ ・・・・・・・・・１６ 書式のルール ・・・・・・・・・１５ 位置調整目的のスペースの禁止 ・・・・・・・・・１４ ファイル添付のみでページを作成しない ・・・・・・・・・１４ リンクの設定 ・・・・・・・・・１２ 画像の代替テキスト ・・・・・・・・・・９ 文字サイズや書体指定の禁止

目次

みんなの公共サイト運用モデル・・・ 総務省が平成１７年１２月に策定した、高齢者や障がい者を含む誰もが地方公共団体のホームペー ジやウェブシステムを利用することができるよう、ウェブアクセシビリティの維持・向上を実現するため の取組モデル。 （参考ページ：総務省ホームページ みんなの公共サイト運用モデル         http://www.soumu.go.jp/joho_tsusin/w_access/index.html）

アクセシビリティ

日本工業規格 JIS X 8341-3・・・ 日本工業規格調査会（JISC）で定められる日本工業規格（通称：JIS）のうち、主に高齢者、障がいの ある人及び一時的な障がいのある人が、ウェブコンテンツを利用するときの情報アクセシビリティを 確保し、向上させるために、ウェブコンテンツの企画、開発、制作、保守及び運用をするときに配慮す べき工業標準。 （参考ページ：日本工業規格調査会ホームページ http://www.jisc.go.jp/ ）

(ウェブアクセシビリティ関係資料)

「高齢者や障がい者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェ

ブで提供されている情報にアクセスし利用できること」を意味します。 

（参考ページ：｢みんなのウェブ｣情報バリアフリーのための情報提供サイト   http://barrierfree.nict.go.jp/accessibility/index.html）

ウェブアクセシビリティとは

ウェブアクセシビリティとは

3

•ページタイトルは、それぞれページ内容を把握できるタイトルをつけて下さい。同じページタイトルにならないようにし てください。 （ページタイトルは、タイトルバー（下図①）の表示、「お気に入り」の表示、検索サイトの結果表示に使われます。 また音声読み上げ機能のユーザーは、最初に読み上げられるページタイトルでページの内容を把握します。 ページタイトルの内容が不適切な場合、ページ本文の読み上げで判断しなければならず、ページ内容を把握するの に時間がかかります。また飾り文字などを使用すると、音声読み上げソフトでは正しく読み上げられない場合がありま すので、使用しないで下さい。） ルール

ページタイトル

JIS X 8341-3 → 5.2e必須 みんなの公共サイト運用モデル→1-6 2e)レベル１

・・・入力したタイトルが反映される場所

適切な表現のページタイトルについて ページの内容が容易に 推測できる、わかりやす い表題を付与した例 一連のページ群であるこ とを明示するとともに、わ かりやすい表題を付与し た例 ページの内容が推測し にくい。 表題が汎用的で、一連の ページ群であることさえも、 推測しにくい。 表題が付与されていない例 （音声読み上げソフトは、そ のページのＵＲＬを読み上 げるため、利用者にページ の内容がまったく伝わらな い） よい例 悪い例

・

・

・

・

・

よい例 悪い例 悪い例

（例１）

（例２）

（例３）

○○の助成額について ○○の計画について ○○の助成額が変更になります ○○の計画が変更になりました 読者登録 バックナンバー 防災メールマガジン読者登録 防災メールマガジンバックナンバー http://www.test.lg.jp/****/***.html インターネットを見る際に開くウィンドウの 上部の青いバーをタイトルバーといいます。 ①

ページタイトル (CMSでの方法)

JIS X 8341-3 → 5.2e必須 みんなの公共サイト運用モデル→1-6 2e)レベル１

◆管理画面でのタイトル入力箇所

・「タイトル」は必須入力項目となります。タイトルが入力されてない場合はエラーが表示されます。

タイトルの内容に関しては最終的に、コンテンツの作成者や承認者の判断が必要になります。作成

者だけでなく承認者も、コンテンツの内容の予測しやすいタイトルがついてるかなど、十分な注意を

もって、ご入力、ご確認ください。

｢CMS｣では・・・

5

 文書の構造化について

・見出しの指定、リストの指定、ワード文書貼り付け時の独自書式削除機能など、ホームページ作成機能

を正しく利用していただくことで、文書の構造化が可能です。

・見出しの文字には、「見出し指定」を、リストを表示する際には「リスト指定」を行ってください。

見出し、段落、リスト等の要素は、文字装飾（強調文字）やスペース、「・」や「１，２，３」などの文字を用いて行うの ではなく、専用の文法（見出し指定、段落、リストタグの指定）を守って行うようにしてください。 ルール

JIS X 8341-3 → 5.2a必須 みんなの公共サイト運用モデル→2-1 2a) レベル２

ポイント 音声ブラウザでは、たとえば見出しの部分と本文の部分とを区別して読み上げることができます。しかし、文字装 飾だけで、見出しのように見せてしまうと、音声ブラウザでは見出しと本文の区別がつかなくなります。 このように装飾ではなく、文法を守ってホームページを作ることを構造化と言います。 構造化は音声ブラウザ対応だけでなく、検索サイトへの登録にも役立ちます。（検索サイトのキーワード登録シス テムは本文と見出しにあるキーワードの重要度を区別します。） ○よい例 ×悪い例 構造化された文書のサンプル ・見出し、リストなどのルールを守る例 アクセシビリティチェッカーの「デザイン なしで確認」で確認しても見出しの部分 が強調され、見出しらしく見れる。 構造化されていない文書のサンプル ・見出し、リストなどを文字装飾で実現し ている例 アクセシビリティチェッカーの「デザイン なしで確認」で確認すると、どれが見出 しなのか分かりにくい。

｢CMS｣では・・・

 文書の構造化について  (CMSでの方法)

JIS X 8341-3 → 5.2a必須 みんなの公共サイト運用モデル→2-1 2a) レベル２

◆見出しタグの設定方法

見出しはここで指定できます。

見出しの種類によって見た目

が変わりますので注意です。

※見出し１はタイトルになります

ので、見出し２から指定します。

一見、文字サイズが変わった

だけのように見えますが、実際

は下のように装飾されます。

7

 文書の構造化について  (CMSでの方法)

JIS X 8341-3 → 5.2a必須 みんなの公共サイト運用モデル→2-1 2a) レベル２

・見出しの指定については、下記についてご注意ください。

情報のタイトルは、｢見出し１｣となります。

｢見出し１｣の次は、｢見出し２｣というように、順番に設定する必要があります。

タイトルが｢見出し１｣となるため、登録時には、｢見出し２｣から設定するようにして下さい。

見出し１はタイトル

（変更不可）

・同様に、｢見出し２｣の次は、｢見出し３｣というように順番に設定してください。

見出し１はタイトル

（変更不可）

・｢見出し１｣（ｈ１タグ）は、２個以上連続して使用しないで下さい。

 文書の構造化について  (CMSでの方法)

JIS X 8341-3 → 5.2a必須 みんなの公共サイト運用モデル→2-1 2a) レベル２

◆リストタグの設定方法

文章をリストとして設定する

には、ここのボタンより行うこ

とができます。

リストボタンを押し、改行する

度にリストを追加できます。

終了する場合、もう一度リスト

ボタンを押して下さい。

見出し同様、リストも、改行や番号でリストのように見せるのではなく、リストとして設定を行う必要

があります。（リストタグの設定）

9

文字の大きさや文字の種類（明朝やゴシックなどの書体）は指定しないで下さい。 ルール

文字サイズや書体指定の禁止

・フォントの指定（明朝やゴシックなどの書体）は、アクセシビリティや文字サイズの拡大・縮小機能

に配慮して、基本的に行えない設定になっています。

・ホームページ作成ソフトやエクセルなどを利用して作成したコンテンツを、コピーして貼り付ける場

合は、一旦文字サイズやフォントの指定は残りますが、ゴミタグ処理ボタンによってそれらの指定を

外すことができます。

JIS X 8341-3 → 5.6a必須 みんなの公共サイト運用モデル→1-9 6a)レベル１

文字サイズ最小で表示 文字サイズ最大で表示 ○よい例 _{ブラウザで文字サイズの変更ができる} ×悪い例 入力時に文字サイズを固定で指定してしまうと、公開画面で文字サイズを大きくし ても、本文の一部、又は全文の文字サイズが変化しない 文字サイズ最小で表示 文字サイズ最大で表示 ※ブラウザの｢表示｣→｢文字のサイズ｣より、文字サイズ の変更をします。

｢CMS｣では・・・

ここの文字の大きさが変わっていない 文字全体が大きく拡大されている

機種依存文字とは、特定のPC・ソフトでしか正しく表示されない文字です。

下記の機種依存文字(一般に半角カタカナや過去のワープロやパソコンのデータを元に作成された文字)はPC・ソ フトによっては正しく表示されない場合があります。使用しないよう注意して下さい。

ルール

JIS X 8341-3 → 5.1a必須 みんなの公共サイト運用モデル→1-1 1a)レベル１

機種依存文字の使用禁止

よく使われる文字のため、注意が必要 ２バイト半角文字・罫線(PC-9801/9821固有) NEC特殊罫線・NEC特殊記号(PC-9801/9821固有) 半角カタカナ 丸付き文字・ローマ数字・単位記号など Macintosh文字

11

機種依存文字の一般的な置き換えのルールは、次の通りです。

ルール

JIS X 8341-3 → 5.1a必須 みんなの公共サイト運用モデル→1-1 1a)レベル１

機種依存文字について その２

・エディタ機能における「アクセシビリティチェッカー機能」では、機種依存文字に関する警告を表示

させるとともに、一部の文字（間違えやすいと思われる文字）については、「代替文字案」を表示す

る機能があります。その代替文字案は下記のように表示されます。

日本語に置き換えて表示 電話番号など ℡など 「ミリ」、「キロ」、「パーセント」と、一文字ごとに記述する → 単位記号（㍉、㌔、㌫など） 「(」＋「株」＋「)」と分けて入力する → ㈱ 平成、昭和と、一文字ごとに記述する → ㍻、㍼など 日本語に置き換えて表示 「平方メートル」など → 単位記号（㎡など） アルファベットの小文字を組み合わせて表示する ㎏ → 「k」＋「g」   ㎝ → 「c」＋「m」 → 単位記号（㎏、㎝、など） アルファベットの大文字などを組み合わせて表示する Ⅳ → 「I」＋「V」 → ローマ数字（Ⅰ、Ⅱ、Ⅴなど） 「(」＋「1」＋「)」と分けて入力する → (1)、(2)など ※１文字で表示される記号 「(」＋「1」＋「)」とした記述で｢（１）．（２）．…｣と、表示する または、「a.b.c…」、「あ、い、う…」などに置き換える → ①、②など mm、cm （１文字で表示しない） ㎜、㎝・・・ 代替文字案 → 機種依存文字 アイウエオ・・・ （全角文字に直す） 平成、（株）・・・ （１文字で表示しない） 電話番号、平方メートル・・・（日本語に直す） ミリ、キロ、センチ・・・ １、２、３・・・ （上）、（中）、（下）・・・ （１）、（２）、（３）・・・ → ㍻、 ㈱・・・ → ｱｲｳｴｵ・・・ → ㊤、㊥、㊦・・・ → ℡ 、㎡・・・ → ㍉、㌔、㌢・・・ → Ⅰ、Ⅱ、Ⅲ・・・ → ①、②、③・・・

｢CMS｣では・・・

画像の代替テキスト

JIS X 8341-3 → 5.4a必須 みんなの公共サイト運用モデル→1-2 4a)レベル１

※画像が見えなくても、どの ようなイメージがあるのかあ る程度分かる ※画像が見えない場合、 どのようなイメージがあ るのか想像できない ※画像が見えなくても、どの ようなイメージがあるのか想 像し易い ×悪い例 ○よい例 ◎よりよい例 ルール 代替テキストはとは、目の不自由な方が音声読み上げソフトを利用した際に、画像の変わりに読み上げられるテキストと なります。また、画像が正しく表示されない場合などに表示されるテキストとなります。(画像の上にマウスを乗せて確認 することもできます) 代替テキストは、どんな利用者にも画像の内容が正しく伝わるよう、設定して下さい。 ② ③

「フリースペースで追加」では、対象の画像を選択して「画像ツール」

ボタン（②）をクリックします。修正が可能になりますので「画像の代

替テキスト」欄に正しく入力してください。

◆フリースペースで追加

13

・リンクは、リンク先の内容が予測できる文字をリンクとするようにして下さい。 ｢ここ｣、｢こちら｣、｢クリック｣、｢Click Here!｣などリンク先の内容が予測できない表現は避けてください。 （音声読み上げソフトの中には、リンクだけを読み上げる機能を有しているものもあります。したがってリンクには「こち ら｣などといったものではなく、リンク先の内容を予測できるものを設定して下さい。またリンクを貼った部分が長いと 逆に利用者がリンク先の内容を理解するのに時間がかかってしまうので、リンク先の内容を予測しやすい適切な部 分にリンクを設定して下さい。） ルール

 リンクの設定

JIS X 8341-3 → 5.3g推奨 みんなの公共サイト運用モデル→1-7 3g)レベル１ ×悪い例 ○よい例 防災に関する情報はこちら 台風に関する情報はこちら ポイント リンク箇所のテキストを読んだだけで、利用者がリンク先の内容を予測できること。 防災に関する情報はこちら 台風に関する情報はこちら リンク先を予測できない例 リンク先を予測できる例

「フリースペースで追加」では、まず、「こちら」だけにリンクを貼っているような問題のリンクテキストを選

択（①）して「リンクツール」ボタン（②）をクリックします。ここで設定されているURLを一旦消して「OK」ボ

タン（③）をクリックし、リンク情報を解除します。

次に正しい範囲でリンクテキストを選択し、「リンクツール」ボタン（②）をクリックしてリンクを再設定してく

ださい。

① ② ◆「フリースペースで追加」の画面 ×悪い例 ○よい例 長い文章にリンクを設定している例 長い文章の中から、リンク先の内容 を予測できる部分にリンク先を設定 している例 " ビジネス支援ネット " 経営・創業・新規事業展開に役立 つ支援情報を一括して提供します【平成19年度の支援情 報を登録】 " ビジネス支援ネット " 経営・創業・新規事業展 開に役立つ支援情報を一括して提供します【平成 19年度の支援情報を登録】

｢CMS｣では・・・

③

 リンクの設定

・アクセシビリティチェッカー機能」でチェックした際に、「こちら」、「リンク」といった文字列にリンクが張

られている場合は「警告」が表示されます。

◆「リンクを追加」の画面

｢CMS｣では・・・

http://www.test.lg.jp/***/aaa.html

15

・ 申請書（記載例）（PDFファイル 24KB） ・ 申請書（エクセルファイル 12KB） ・ 申請書（ワードファイル 11KB）

ファイル添付のみでページを作成しない

テキストによる説明をせずに、ファイル添付のみでページを作成しないで下さい。 PDFファイルは、アクセシビリティに配慮したPDF形式（Acrobatバージョン5.0以上）で制作してください。 ルール JIS X 8341-3 → 5.4b必須 みんなの公共サイト運用モデル→1-13 1b) レベル１ 例：申請書ダウンロードページ（サンプル） 申請書などの添付ファイル（PDF形式等） 内容を説明するテキスト ○よい例 ・テキストで内容を説明している

位置調整目的の文字間スペースの禁止

音声読み上げの際に、正しく読み上げられない可能性もあります。また、利用者の閲覧するブラウザの幅によっては、 コンテンツの作成者の意図しないレイアウト崩れなどを招きます。単語の文字の間には、スペースや改行を入れない で下さい。 ルール

JIS X 8341-3 → 5.9e必須 みんなの公共サイト運用モデル→1-11 9e) レベル１

単語内にスペースを入れている 電 話  →   ｢デン ハナシ｣ 住 所  →   ｢ジュウ トコロ｣ と読み上げられることがある 単語内にスペースがない 音声読み上げソフトで読み上げた際に、情報が正しく伝わる 電話   →   ｢デンワ｣  住所   →   ｢ジュウショ｣ ×悪い例 _○よい例

書式のルール

書式に関するルー 音声読み上げの際に正しく読み上げられないため、日付、時刻、電話番号、数値は、統一書式で表記してください。

統一書式

よい例 悪い例 種類 書式 備考 日付（１） 平成○年○月○日（○曜日） 西暦「○○○○年○月○日」形式としてもよい。 ただし、同一ページ中で、和暦形式と西暦形式 を混在させないこと。 日付（２） ○○○○‐○○‐○○ 上記実現が困難な場合は、区切り文字に「‐」 （半角ハイフン）を用いた西暦形式とすること。 電話番号 電話番号：XXX-XXX-XXXX ファクス番号： XXX-XXX-XXXX 電話番号とファクス番号は合わせて表記する こと。 時間 午前10時30分、正午、15時30分 午前、午後、正午の表記を使用する、または、 24時間表記とすること。 記号 × ∼お知らせ∼ ○10月20日 15時30分∼16時30分 ○日○時∼○時といった日時表記を除き、 記号「∼」を装飾目的で使用しないこと。 １．2005年10月1日 ２．日曜日、火曜日 ３．10時15分 １．にせんごねんじゅうがついちにち ２．にちようび、かようび ３．じゅうじじゅうごふん １．2005/10/1 ２．（日）、（火） ３．10：15 １．じゅうぶんのにせんご ぜろいち ２．ひ、ひ ３．じゅう じゅうご  [表記例]  [音声読み上げソフトの読み上げ状況] 数値 1,234 0.123 必要に応じ、３桁区切り「,」および小数点「.」 を使用すること。 数値は、半角数字で統一する。

17

ローマ字、英単語の表記と読み上げ

ローマ字で表記するときや、英単語（省略語以外）を使用するときは、頭文字以外を小文字で表記してください。 全て大文字の場合、アルファベットの名前を読み上げることがあります。 ロゴやタイトルなど、意図的に大文字表記とする場合は、かっこ書きで読みや日本語名を併記するなど、配慮 が必要です。 ルール よい例 悪い例 Ｎｉｐｐｏｎ くらぶＮＩＰＰＯＮ（くらぶニッポン） ＮＩＰＰＯＮ ＴＲＡＤＥ ＤＩＲＥＣＴＯＲＹ （日本貿 易関係企業名簿） かっこ書きで読みを併記 した例 括弧内の表記により、｢ＮＩ ＰＰＯＮ｣部分の読みを後 で正しく認識できる。 かっこ書きで日本語名 を併記した例 括弧内の表記により、 ｢ＮＩＰＰＯＮ・・・｣部分の 読みを後で正しく認識 できる。 音声読み上げソフトは、 「ニッポン」と読み上げる 音声読み上げソフトは、 連続する英大文字を省略 語とみなすため、「エヌアイ ピーピーオーエヌ」と読み 上げる ＮＩＰＰＯＮ

・

・

・

・

文章表現について

ルール 文体は、「です。ます。」調とし、言葉づかいは、日常一般に使われている理解しやすい表現としてください。 省略語、流行語、俗語は原則として使用しないでください。 専門用語や難しい用語については多用を避け、使用する場合には注釈をつけてください。 JIS X 8341-3 → 5.9c推奨 みんなの公共サイト運用モデル→2-18 9c) 文体は、「です。 ます。」調とすること。（原則） 特殊な言葉や堅苦しい言葉を避け、日常一般に使われている易しい言葉を用いること。（原則） 使い方の古い言葉を避け、日常使い慣れている言葉を用いること。（原則） 言いにくい言葉を使わず、口調のよい言葉を用いること。（原則） 音読する言葉はなるべく避け、耳で聞いて意味のすぐ分かる言葉を用いること。（原則） 音読する言葉で、意味が複数に受け取れるものは、なるべく使用しないこと。（原則） 同一ページの文章の中で、同じ内容のものを違った言葉で表現しないこと。（原則） 用語は、使い慣れた日常語を使用し、読みの難しい言葉、省略語、専門用語の多用を 避けなければならない。（必須） 例） 稟請→申請、 措置→処置・取扱い、 救援する→救う、 懇請する→お願いする など 例） 牙保→周旋・あっせん、 彩紋→模様・色模様 など 例） 拒否する→受け入れない、 はばむ→防げる など 例） 橋梁→橋、 塵埃→ほこり、 堅持する→堅く守る、 陳述する→述べる など 例） 協調する （強調するとまぎれるおそれがある。） →歩調をあわせる    勧奨する （干渉する） →すすめる、 潜行する（先行する） →ひそむ など 例） 事由・理由、 趣意・趣旨 など

・

・

・

・

・

・

・

・

19

差別用語などの表現について

ルール 差別用語など、行政が用いるにふさわしくない表現は避けてください。 よい例 悪い例 性別、職業、身分、地位、境遇、信条、人種、民族、地域、心身の状態、病気、身体的な特徴などについて、差別 の概念を表す言葉、言い回しを用いてはならない。（必須） 命令的、押し付けがましい表現をしてはならない。（必須） あいまいな表現、もってまわった表現をしてはならない。（必須） 差別用語等は、単純に言葉を言い換えるだけでなく、「使われた側の立場」になって確認する。 以下の参考となる書籍等を確認する。   ・「記者ハンドブック新聞用字用語集」 （一般の出版物）    ※報道関係者などのプロが文書を書く際に指標としている、共同通信社「記者ハンドブック」   ・「行政広報物における表現のガイドライン」 （行政の事業）     ※行政広報物の作成方法についての事業がある場合、それを確認する。 １．障がいのある人 ２．お越しください。 障がいのある人が自分から障がいを持った わけではないことに配慮した例 身体的な表現を含む慣用句を避けた例 性による区別や排除をしない例 命令的、権威的な表現を避けた例 もってまわった表現を避けた例 ３．保護者 ４．皆さんにおしらせしてください。   徹底してください。 ５．出席をお願いします。 １．障がいを持つ人 ２．足をお運びください。 ３．父兄 ４．周知徹底されたい。 ５．出席方、よろしくお取り計らい願います。

・

・

・

・

・

・

・

・

・

・

・ホームページ作成システムアクセシビリティチェッカーで、一部の用語については該当箇所がチェック

されます。問題の箇所を確認し、修正してください。

JIS X 8341-3 → 5.9c推奨 みんなの公共サイト運用モデル→2-18 9c)

｢CMS｣では・・・

固有名詞や専門用語などについて

ルール 読みの難しい言葉、省略語、専門用語は、ページ内で初めて使用するときに、「読み」や「意味・解説」を明示してく ださい。 JIS X 8341-3 → 5.9d推奨 みんなの公共サイト運用モデル→2-19 9d) よい例 悪い例 読みの難しい言葉は、ひらがな または カタカナで 「読み」 をかっこ書きで併記しなければならない。 （必須） 例） 飯塚市目尾 （いいづかし しゃかのお） 省略語、専門用語は、正式名称を併記し、必要に応じて 「意味」 や 「解説」 を併記しなければならない。 （必須） 例）FAQ （よくある質問） 土地の 「名称」 と 「読み」 は、 日本郵政公社が提供している郵便番号検索システム「郵次郎」を 利用し確認する。（URL： http://yuujirou.twinspark.co.jp/) 作成したページを読み返し、読みの難しい言葉等を使用していないか、確認する。 病原性大腸菌Ｏ１５７（オーイチゴウナナ） グラントワ （島根県芸術文化センター） 読みを解説した例 施設の愛称を解説した例 Ｏ１５７

・

・

・

・

・

・

グラントワ

21

 色だけで情報を区別しないこと

・情報の識別や指示は、色だけでなく文字等でもわかるようにしてください。

・色だけを使用せずに、文字やパターン（模様）などを併用するなど心がけてください。 ルール

JIS X 8341-3 → 5.5a必須 みんなの公共サイト運用モデル→1-10 5a)レベル１

×悪い例 ○よい例

色だけで円グラフの領域を表現 引き出し線で円グラフの各領域を説明

文字色・背景色について

JIS X 8341-3 → 5.6c推奨 みんなの公共サイト運用モデル→1-8 6c)レベル１ 文字色・背景色は原則として指定しないで下さい。サイト全体の統一感を失うだけでなく、色覚に障がいのある利用 者が、正しく内容を理解できない場合もあります。 ルール 例外的に、文字色・背景色を設定する場合は、下記に気をつけて色の指定を行って下さい。 ・色覚の障がいは、世界的にみるとAB 型の血液型の頻度に匹敵する、男性の20 人に1 人(5%)、女性の500 人 に1 人(0.2%)に見られると言われています。（黄色人種の場合。白人では男性の8%、黒人では男性の4%）。 ・ 日本の場合で考えると、身体障がい者の総計と同レベル、300 万人以上の計算となります。 ・一方、60 歳代の70%以上で、白内障が見られるとも言われています。（加齢に伴う目の老化が原因の「老人   性白内障」が最も多いと言われています。 ・目のレンズの白濁により視力が低下し、霞んで見えたり、明るいところへ出るとまぶしくて見にくかったりします。  （白内障が進むと、黄白色のフィルターがかかったような見え方になります） ・ 今後、インターネットがますます普及すること、高齢化社会が到来すること、色覚の障がいと白内障をあわせ る と1,000 万人以上の規模となること、を踏まえると、ウェブページにおける「文字の見やすさ・読みやすさ」の 確 保は、極めて重要になると考えられます。 よい例 悪い例 はっきりと確認できる 色の組み合わせ例 目に優しいと言われ ている組み合わせ 色覚障がいのない人 でも、コントラストが 高すぎ、まぶしく感じ る例（補色関係の色 を原色同士で使用し た例） 色覚障がいのある人 は識別が困難な例 白の背景に黒文字 白の背景に濃紺文字 薄灰の背景に黒文字 濃緑の背景に白文字 水色の背景に赤文字 赤の背景に水色文字 黄色の背景に青文字 青の背景に黄色文字 明るい緑の背景に紫文字 紫の背景に明るい緑文字 赤の背景に黒文字 黒の背景に赤文字 赤の背景に緑文字 濃紺の背景に赤文字 茶の背景に緑文字 黄色の背景に水色文字

・

・

・

・

23

 変化・移動する画像や文字の禁止

•変化や移動する画像、テキスト等は使わないでください。 •画面に表示される内容は点滅させないようにしてください。 •ＧＩＦアニメや、点滅・移動するテキストは使用しないようにしてください。 ルール

JIS X 8341-3 → 5.8a推奨 みんなの公共サイト運用モデル→2-14 8a) JIS X 8341-3 → 5.8b必須 みんなの公共サイト運用モデル→2-15 8b) 悪い例 移動するテキストを使用 悪い例 GIFアニメを使用 ※利用者の注意を促すために点滅を利用することがあるが、早い周期 での点滅はてんかん発作を引き起こすなどの危険がある。（部分的な 点滅であっても拡大して表示している利用者がいる場合がある） ※利用者によっては、読み取れなかったり、読 みにくい場合がある。

・文字の点滅・移動に関する入力があった場合には、アクセシビリティチェッカーで警告表示されます。

 該当箇所を確認の上、修正してください。

｢CMS｣では・・・

 画像内の文字について

•掲載している画像の中で使用されている文字が、下部のような「悪い例」のように、識別しにくい箇所がないか確認して ください。 •認識しやすい画像内の文字サイズは、ブラウザで表示される標準の文字サイズよりも、１回り大きいものが目安となり ます。 •背景に模様のある画像や写真の中に文字が使用されている場合は、周りをふちどるなどし、読みにくくならないよう工 夫してください。 •画像内の文字のフォントは、明朝体よりもゴシック体のフォントの方が見やすいため、ゴシック体を使用してください。 ルール JIS X 8341-3 → 5.5c推奨 みんなの公共サイト運用モデル→2-11 5c) レベル２

行政改革

行政改革

行政改革

行政改革

悪い例 よい例 背景に模様がある 文字が小さい 装飾が多い 文字が見にくい

25

表を利用したレイアウト調整の禁止

・ 特に対応していません。表の利用は、表形式で提供すべき資料等に限定してください。（表を使っ

て、画像や文章などの位置調整（レイアウト調整）をしないで下さい。）

JIS X 8341-3 → 5.2d推奨 みんなの公共サイト運用モデル→1-5 2d)レベル１ ルール 表などを利用した、画像や文章などの位置調整（レイアウト調整）は行わないで下さい。音声読み上げソフトを利用し ている目の不自由な方には、コンテンツの作成者の意図せぬ順番で読み上げが行われ、内容が正しく伝わらない場 合があります。 悪い例 よい例

上記のページでは、表を利用したレイアウトが行われているので、音声読み上げソフトでは矢印の

ように読み上げが行われます。“施設の概要 ”“利用時間と料金”が読み上げられた後に、それぞれ

の説明が読み上げられる順序となってしまいますので、利用者は混乱してしまいます。

見出しなどを利用した構成にすることで、目の不自由な方にも正しく内容が伝わります。

読み上げ順序 読み上げ順序 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧

｢CMS｣では・・・

 表作成時の注意点（タイトル、項目、内容表示）

•セル数の多い大きな表はなるべく使用しないようにしてください。 •行／列の項目は、セルごとに項目指定を行ってください。 •セルの結合は必要最小限とし、複雑に入り組んだ表にしないようにしてください。 •数値を表示するときは、視覚的に煩雑にならない範囲で各セルに単位を記述してください。 ・どのような表か明確にわかるような表題をつけてください。 ルール JIS X 8341-3 → 5.2c必須 みんなの公共サイト運用モデル→2-3 2c) レベル２ ６０００円 １０kg りんご（ふじ並み） ８０００円 １０kg りんご（ふじ特上） ４０００円 ５kg りんご（ふじ並み） ５０００円 ５kg りんご（ふじ特上） 価格（円） 容量（キログラム） 各セルに、単位まで記述しているため、音声ブラウザのユー ザーは各セルの数値の意味を把握しやすい りんごセット価格一覧 ○よい例 表題を明記（具体的に） 行・列の見出しを指定 ６０００ １０ りんご（ふじ並み） ８０００ １０ りんご（ふじ特上） ４０００ ５ りんご（ふじ並み） ５０００ ５ りんご（ふじ特上） 価格（円） 容量（キログラム） ×悪い例 各セルに、数値しか記述されておらず、音声ブラウザのユー ザーは各セルの数値の意味を把握しにくい

27

 表作成時の注意点（CMSでの方法)

JIS X 8341-3 → 5.2c必須 みんなの公共サイト運用モデル→2-3 2c) レベル２ ○よい例 ＜表のタイトルの指定＞ 表名を入力します。 こちらに入力された内容は、表の概要を表す説明として認識されます。

表を選択した状態で、表のプ

ロパティ画面を開きます。

 表作成時の注意点（読み上げ順序）

表は一番上の「行」から、「行」ごとに左から右方向に読み上げられます。このように読み上げられた際に意味が伝 わりやすいよう表を作成してください。 ルール JIS X 8341-3 → 5.2c必須 みんなの公共サイト運用モデル→2-3 2c) レベル２

スマートメディアカー

ド

SDメモリカード

デジタルズーム4.4倍

デジタルズーム12倍

デジタルズーム2.6倍

光学ズーム3倍

2.5インチ

2.2インチ

2インチ

500万画素

550万画素

510万画素

デジタルカメラC

デジタルカメラB

デジタルカメラA

1

2

3

4

5

6

7

8

9

10

₁₁

12

13

14

15

1

 ~ 

15

 の順に読み上げられる。

表の構造上、縦方向に読み上げて欲しいのに、横方向に読み 上げられてしまう。読み上げ順序と情報の方向が一致しない ため、音声ブラウザのユーザーにとって内容を把握しにくい。 ×悪い例 音声ブラウザを利用すると ポイント

29

 パンくずナビゲーションの使用

・現在位置を示す情報として「パンくずナビゲーション」を全ページに表示します。 ・パンくずナビゲーションは、原則として「全庁トップページ」をスタート位置として表示させます。 ルール JIS X 8341-3 → 5.2g推奨 みんなの公共サイト運用モデル→2-5 2g) レベル２ •パンくずナビゲーションやサイトマップなどを用いると、現在位置やサイトの構 成を把握しやすくなるため、高齢者、障がいのある人をはじめとして利用する際 に、現在位置を見失わずにすみます。 パンくずナビゲーション グローバルナビゲーション ポイント

 統一されたデザインや操作性

・ホームページ作成システムを利用する際は、作成するホームページに対して、統一されたナビゲーシ

ョンが自動的に配置されます。

•基本操作を行う共通メニューをページ内の同じ位置に配置します。 •基本操作の部分の表現は文言・形状・色彩・位置などをウェブサイト内で統一します。 •｢戻る｣ボタンなどに使用する画像は、ウェブサイト内で統一し、画像の代替文字も必ずつけます。 ルール JIS X 8341-3 → 5.3f推奨 みんなの公共サイト運用モデル→2-7 3f) レベル２ ヘッダー メインメニュー フッター ローカルメニュー

｢CMS｣では・・・

31

 形や位置だけでなく、文字でも識別できる配慮

•情報の表示や識別について、形や位置だけで表現することは避けてください。テキストの文字などを併用し、画面 上の表示に関係なく内容を把握できるように配慮してください。 ルール ○よい例 ×悪い例 右下の「印刷する」ボタンを押してください。 右下の赤いボタンを押してください。 印刷する 画面上の表示位置や色などに依存した指示表現 テキストの文字などを併用した指示表現 JIS X 8341-3 → 5.5b必須 みんなの公共サイト運用モデル→2-10 5b) レベル２

 ブラウザの「戻る」ボタン等前ページへの戻り

•ブラウザの「戻る」ボタン又はページ内のリンクによって前のページに戻れるかどうか確認してください。 前のページに戻る機能

JIS X 8341-3 → 5.3i必須 みんなの公共サイト運用モデル→2-9 3i) レベル２

ブラウザの「戻る」ボタン（インターネットエクスプローラー）

・このルールに自動対応します。したがって、ホームページ作成時にこのルールを意識していただく必要

はありません。

 新しいウィンドウを開いて表示させる場合のリンクのルール

・新しいウィンドウを開いて表示させるページへのリンクは、利用者に「このリンクは新しいウィンドウで開きます」と 明示しておく必要があります。何も知らずに新しいウィンドウが開いた場合、利用者はブラウザの「戻る」ボタンでは 前ページに戻れなくなり、前述のようなアクセシビリティに影響します。 ・同じサイト内のページへのリンクは原則として同一ウィンドウで開くように設定し、外部サイトのページを開く場合 のみ新規ウィンドウで開くように設定してください。 ・２つのページを同時に開いて情報提供する方が適している場合のように、例外的に新しいウィンドウで開く方がよ い場合もあります。 ・新しいウィンドウでリンクを開く場合は、リンクを設定している文字・画像の前か後に、｢別ウィンドウで開きます｣と 表示してください。 ・自動で新しいページへ移動しないようお願いします。 新しいウィンドウを開くことについて

JIS X 8341-3 → 5.3e必須 みんなの公共サイト運用モデル→2-6 3e) レベル２

・エディタ機能では、リンク先に対して、同一ウィンドウで開くか、新しいウィンドウで開くかを選択する機

能があります。したがって、ホームページ作成時には、上記のようなルールにしたがって設定を行ってく

ださい。

｢CMS｣では・・・

◆リンクを追加 ◆フリースペースで追加

33

 フレーム使用の禁止

フレームは使用しないでください。音声ソフトで正しく読み上げられなかったり、正しく印刷などが行えない場合があ ります。また検索サイトにより訪れた利用者の表示されたページが、フレームの一部分であった場合、その他のペー ジに移動できなくなる場合があります。 フレームの使用について JIS X 8341-3 → 5.2f推奨 みんなの公共サイト運用モデル→2-4 2f) レベル２ 悪い例(フレームを使用しているページ例)