Microsoft Word - A指針Web公開.doc

Transcription

1 静 岡 県 ホームページ 運 用 ガイドライン アクセシビリティに 関 する 指 針 静 岡 県

2 目 次 1.はじめに ガイドラインを 策 定 するにあたって ウェブアクセシビリティとは ウェアクセシビリティが 求 められている 背 景 高 齢 者 障 害 者 の 閲 覧 時 の 利 用 特 性 視 覚 障 害 者 への 対 応 ウェブアクセシビリティの JIS 規 格 化 ガイドラインの 重 要 性 ガイドラインの 適 用 範 囲 公 開 前 にチェックするブラウザとバージョン 企 画 制 作 上 の 注 意 点 保 守 運 用 上 の 注 意 点 利 用 者 からのフィードバック 9 2.ページ 全 体 について ページのソースコードは 使 用 する 技 術 の 規 格 や 仕 様 に 従 って 記 述 するようにする(5.1a) ページ 内 で 使 用 する 言 語 と 文 字 コードを 指 定 する(5.9a) ページの 内 容 は 文 書 構 造 を 適 切 なタグを 用 いて 示 す(5.2a) ページの 内 容 を 適 切 に 表 す 固 有 のタイトルを 付 ける(5.2e) ページの 見 た 目 を 表 現 するには できるだけスタイルシートを 使 用 する(5.2b) キーボードだけの 操 作 でも 利 用 できるようにする(5.3a) JavaScript を 使 用 しなくても 全 ての 情 報 を 入 手 できるよう 配 慮 する シンプルなレイアウトを 心 がけ 利 用 者 が 情 報 を 探 しやすいようにする ページの 全 体 または 一 部 を 自 動 的 に 更 新 したり 別 のページに 自 動 的 に 移 動 させたりしない (5.3e) 背 景 と 内 容 のコントラストを 十 分 にとる(5.5c 5.6c) 背 景 色 や 文 字 色 は 出 来 る 限 り 一 貫 性 を 持 たせたページ 作 りをする 色 や 形 だけで 情 報 を 伝 えない(5.5a 5.5b) ページの 長 さは 適 切 な 長 さとする また 長 さや 内 容 によってはページの 先 頭 に 戻 れる 配 慮 をする ページ 作 成 後 も 随 時 内 容 の 更 新 修 正 をする 画 面 のサイズは を 想 定 し 閲 覧 しやすいようにする ページは A4 タテの 用 紙 で 適 切 に 印 刷 できるようにする 各 ページには 担 当 部 署 名 連 絡 先 を 明 記 すること 問 い 合 わせには 電 話 FAX メールアドレスなど 複 数 の 手 段 を 明 記 すること(6.5) 17 3.トップページについて 利 用 者 の 立 場 で 項 目 を 分 類 する トップページで サイト 全 体 が 見 通 せるようにする 団 体 名 所 在 地 アクセス 情 報 ( 地 図 道 順 交 通 案 内 )を 明 記 する (6.5) 18 2

3 3-4.プライバシーポリシー 及 びアクセシビリティポリシーを 掲 載 する (6.1) ページの 使 い 方 (ヘルプメニュー)を 用 意 する 19 4.サイト 内 の 案 内 (ナビゲーション)について サイト 内 に 共 通 するナビゲーションをつける(5.3f) 共 通 するナビゲーションには トップページ 主 要 メニュー サイトマップ 問 い 合 わせへの リンクをつける (5.3f) 各 ページに 検 索 機 能 もしくは 検 索 ページへのリンクをつける パンくずリストを 各 ページにつける(5.2g) 共 通 するナビゲーションは 読 み 飛 ばせるようにする(5.3h) 文 字 について 文 字 のサイズは 利 用 者 が 自 由 に 変 更 できるようにする(5.6a) 文 字 のフォント( 書 体 )は 指 定 しない(5.6b) 理 解 しやすい 文 章 にする (5.9b 5.9c 5.9f) 文 章 による 説 明 だけでなく 必 要 に 応 じて 図 イラストなどを 用 いる(5.9f) 誤 読 されない 工 夫 をする(5.9d) 英 単 語 は 小 文 字 で 表 記 する 単 語 の 途 中 にスペースや 改 行 を 入 れない(5.9e) 数 値 は 半 角 数 字 を 使 用 する 機 種 依 存 文 字 および 半 角 カナを 使 用 しない(5.1a) 日 付 時 間 通 貨 単 位 は 漢 字 で 表 記 する 行 頭 に 記 号 文 字 を 使 用 しない 25 6.リンクについて リンクボタンは 容 易 に 判 別 できるものとする(5.3g) リンクは 十 分 な 面 積 を 確 保 する(5.3g) リンクとリンクの 間 は 十 分 な 間 隔 をあける(5.3g) リンク 先 の 内 容 がわかるようにする(5.3g) リンク 先 を 新 しいウィンドウで 開 く 場 合 は 事 前 に 利 用 者 に 知 らせる(5.3e) 画 像 について 画 像 には 適 切 な 代 替 テキストをいれる(5.4a 5.4b) イメージマップには 文 字 リンクを 併 記 する(5.4b) 表 (テーブル)について 表 (テーブル)はわかりやすい 構 造 にする(5.2c) 表 (テーブル)の 構 造 を 明 確 に 示 す(5.2c) 30 9.レイアウトについて なるべくテーブルタグをレイアウトのために 使 用 しない(5.2d) 入 力 フォームについて 入 力 させる 時 は どのように 入 力 するのかを 明 確 にする(5.3b) 全 てのコントロールとラベルは LABEL 要 素 を 使 用 し コントロールとラベルを 関 連 付 ける (5.3b) 入 力 制 限 時 間 を 設 けないようにする(5.3c 5.3d) 33 3

4 10-4.フォーム 入 力 後 入 力 内 容 の 確 認 画 面 を 提 供 し さらに 修 正 できる 手 段 も 同 時 に 提 供 する(5.3i) フレームについて フレームは 基 本 的 に 使 用 しない (5.2f) Word Excel PDF Flash ファイルの 扱 いについて Word Excel ファイルを 公 開 する 場 合 (5.1b 5.4e) PDF ファイルを 公 開 する 場 合 (5.1b 5.4e) Flash ファイルを 公 開 する 場 合 (5.1b 5.4e) 動 画 音 について 動 画 音 は 自 動 で 再 生 せず 利 用 者 側 で 制 御 できるようにする(5.7a 5.7b) テキストなど 代 替 情 報 を 提 供 する(5.4c 5.4d) 速 度 について 変 化 または 移 動 する 画 像 テキストは 速 度 を 考 慮 する(5.8a) 早 い 周 期 での 点 滅 を 避 ける(5.8b) Java アプレットなどその 他 オブジェクトについて アクセスできない 場 合 の 配 慮 から 代 替 情 報 を 提 供 する(5.1b 5.4e) インターネット 環 境 について ファイルのサイズは 小 さくする 閲 覧 できるファイル 形 式 を 掲 載 する 40 4

5 ウェブアクセシビリティに 関 する 指 針 1.はじめに 1-1.ガイドラインを 策 定 するにあたって ウェブアクセシビリティに 関 する 指 針 は ホームページを 作 成 し 公 開 した 際 に 誰 もが 使 いやすく 求 めている 情 報 を 簡 単 に 入 手 できるようにするために ホームページを 作 成 する 際 に 注 意 すべき 項 目 とその 具 体 的 な 方 法 を 示 したものです インターネットは 県 民 においてすでに 情 報 収 集 手 段 として 広 く 普 及 しており 県 政 の 情 報 発 信 手 段 のひとつとして 重 要 になってきています 開 かれた 県 政 の 推 進 のためにも 積 極 的 にインターネット による 情 報 発 信 に 努 めてください ウェブアクセシビリティとは ユニバーサルデザインと 言 えばみなさんご 存 知 だと 思 います バリア( 障 壁 )のないまちづくり ものづくりを 進 めて 子 どももお 年 寄 りも 障 害 のある 人 もない 人 も 全 ての 人 々がいきいきと 生 活 で きる 社 会 づくりをしていこうということです 公 共 施 設 などでエレベータやスロープが 設 置 されてい れば バリア( 障 壁 )を 取 り 除 いていることが 分 かるかと 思 います 実 は ホームページにもバリア ( 障 壁 )が 存 在 しているのです ウェブアクセシビリティとは ホームページを 閲 覧 する 際 のバリア( 障 壁 )がなくお 年 寄 りや 障 害 のある 人 がホームページ 上 で 提 供 されている 情 報 に 問 題 なくアクセスでき だれでも 平 等 に 利 用 でき ることを 指 します ウェアクセシビリティが 求 められている 背 景 日 本 は 欧 米 諸 国 と 比 べて 急 速 に 高 齢 化 が 進 んでいます 2020 年 には 65 歳 以 上 人 口 は 3,334 万 人 高 齢 化 率 は 26.9%になると 予 想 されています ( 注 1)このような 高 齢 化 に 対 応 するため 高 齢 者 の 情 報 入 手 手 段 として 使 いやすいウェブコンテンツが 求 められています また パソコンやインター ネットの 普 及 で 社 会 参 加 の 可 能 性 が 格 段 に 広 がった 障 害 者 に 対 しても 同 様 です 総 務 省 情 報 通 信 政 策 研 究 所 が 東 京 都 内 の 16 歳 以 上 49 歳 以 下 の 障 害 者 を 対 象 に 行 なった 調 査 では 障 害 者 のインターネ ット( 携 帯 電 話 等 による 利 用 も 含 む)の 利 用 率 は 視 覚 障 害 者 が 69.7% 聴 覚 障 害 者 が 81.1% 肢 体 不 自 由 者 が 43.6%となっています ( 注 2) このように 高 齢 者 や 障 害 者 にとっても ホームページは 重 要 な 情 報 源 になりつつあります 特 に 外 出 が 困 難 な 障 害 者 や 視 覚 障 害 者 にとっては ホームページからの 情 報 収 集 や 情 報 交 換 は 社 会 と の 大 切 な 接 点 になっているといっても 過 言 ではありません しかし 実 際 に 提 供 されているホーム ページは 高 齢 者 や 障 害 者 にとって 非 常 に 使 いにくい あるいは 使 えない 作 りになっていることが 少 なくありません 例 えば ウェブブラウザには 利 用 者 が 文 字 を 大 きくする ことができる 機 能 が 標 準 で 搭 載 されています 残 念 ながらデザイン 性 を 重 視 するあまり 文 字 の 大 きさを 固 定 している 5

6 ページが 数 多 く 存 在 しています 結 果 として 文 字 を 大 きくする 機 能 が 利 用 できない 状 況 (バリ ア: 障 壁 )を 作 り 出 しているのです 注 1: 出 典 : 厚 生 労 働 省 / 平 成 12 年 版 厚 生 白 書 注 2: 出 典 : 総 務 省 情 報 通 信 政 策 研 究 所 / 障 がいのある 方 々のインターネット 等 の 利 用 に 関 する 調 査 報 告 書 高 齢 者 障 害 者 の 閲 覧 時 の 利 用 特 性 高 齢 者 の 場 合 は 加 齢 に 伴 い 視 覚 聴 覚 が 変 化 するため 高 齢 者 がホームページを 利 用 する 際 に は 下 記 に 挙 げる 視 覚 障 害 聴 覚 障 害 と 同 様 の 問 題 が 発 生 します また 個 人 差 はありますが 全 体 的 な 傾 向 としては IT 関 係 の 専 門 用 語 や 新 語 は 苦 手 な 人 が 多 く 複 雑 な 操 作 の 習 得 も 負 担 となります 障 害 者 の 場 合 は その 利 用 者 の 身 体 条 件 によって 異 なりますので 障 害 別 に 利 用 特 性 を 示 します 視 覚 障 害 全 盲 : 画 面 を 見 ることができない マウスを 操 作 できない 弱 視 : 画 面 を 拡 大 しないと 見 にくい 画 面 を 白 黒 反 転 させないとまぶしい 色 覚 特 性 : 識 別 できない 色 がある 聴 覚 障 害 : 音 声 が 聞 こえない 聞 きづらい 運 動 障 害 : 手 や 指 先 が 動 かない 動 かしづらい その 他 障 害 になりうるものとしては 交 通 事 故 などによる 一 時 的 な 障 害 ( 手 の 怪 我 など)や PHS を 利 用 したモバイル 環 境 などの 通 信 環 境 による 障 害 外 出 先 にマウスを 持 っていかなかった めがねを 忘 れてしまったなど 様 々な 障 害 が 考 えられます 視 覚 障 害 者 への 対 応 障 害 者 の 中 でも 特 にハードルが 高 いのは 全 盲 や 弱 視 といった 視 覚 障 害 者 です 視 覚 障 害 者 は ホ ームページにアクセスする 場 合 音 声 ブラウザあるいはスクリーンリーダーと 呼 ばれる 音 声 読 み 上 げ ソフトを 使 います つまりホームページを 聞 いている といえます 音 声 読 み 上 げソフトは ホー ムページ 上 にあるテキストデータを 読 み 上 げるソフトなので 画 像 で 表 現 されたところは 何 が 書 かれ ているか 判 別 することができず 読 み 上 げてくれません もし 重 要 な 情 報 が 画 像 だけ 提 供 されてい た 場 合 そういった 音 声 読 み 上 げソフトを 利 用 している 視 覚 障 害 者 は その 大 事 な 情 報 を 知 ることが できないのです 今 まで 視 覚 障 害 者 が 印 刷 物 などの 情 報 を 得 る 場 合 は ボランティアなどによる 代 読 や 点 字 など 限 定 された 情 報 入 手 手 段 しかありませんでした 前 述 したとおり パソコンとインターネットの 普 及 に より 視 覚 障 害 者 の 情 報 を 入 手 できる 環 境 は 劇 的 に 向 上 したわけです これにより 視 覚 障 害 者 本 人 が 自 分 ひとりで 情 報 を 入 手 できるようになりました 6

7 1-1-5.ウェブアクセシビリティの JIS 規 格 化 このような 背 景 の 中 ウェブアクセシビリティが JIS 規 格 化 されました 政 府 は 2002 年 12 月 24 日 国 の 障 害 者 政 策 の 基 盤 となる 障 害 者 基 本 計 画 を 閣 議 決 定 し その 中 で IT 関 連 では 障 害 者 や 高 齢 者 も 使 いやすいユニバーサルデザインの 機 器 開 発 に 向 けたガイドラインの JIS 規 格 化 を 平 成 15 年 度 までに 行 うこと 障 害 者 の IT 利 用 を 支 えるサポートセンターを 設 置 することなどが 盛 り 込 まれま した これを 受 け 経 済 産 業 省 より 2004 年 6 月 20 日 に JIS X :2004 高 齢 者 障 害 者 等 配 慮 設 計 指 針 - 情 報 通 信 における 機 器,ソフトウェア 及 びサービス - 第 3 部 :ウェブコンテンツ が 制 定 されました これは 主 に 高 齢 者 や 障 害 者 がホームページを 利 用 する 際 のアクセシビリティを 確 保 し また それを 向 上 させるためにウェブコンテンツの 提 供 者 や 制 作 者 が 配 慮 しなければならない 事 項 について 規 定 しています また 国 及 び 地 方 公 共 団 体 については 工 業 標 準 化 法 第 67 条 に 基 づき 調 達 にあたり JIS 規 格 を 尊 重 することとされています ( 日 本 工 業 規 格 の 尊 重 ) 第 67 条 国 及 び 地 方 公 共 団 体 は 鉱 工 業 に 関 する 技 術 上 の 基 準 を 定 めるとき その 買 い 入 れる 鉱 工 業 品 に 関 する 仕 様 を 定 めるときその 他 その 事 務 を 処 理 するに 当 たつて 第 二 条 各 号 に 掲 げる 事 項 に 関 し 一 定 の 基 準 を 定 めるときは 日 本 工 業 規 格 を 尊 重 してこれをしなければならない ガイドラインの 重 要 性 ウェブアクセシビリティに 関 する 指 針 は JIS X を 中 心 としたウェブアクセシビリティとホ ームページのユニバーサルデザインの 要 素 を 加 味 して 作 成 されました 静 岡 県 では 各 部 署 にホームペ ージ 担 当 を 設 け 各 部 署 ごとウェブコンテンツを 作 成 更 新 しています これらの 担 当 者 全 員 が 共 通 のガイドラインのもとウェブコンテンツを 作 成 しなければ 静 岡 県 ホームページ 全 体 のユニバーサ ルデザインは 確 保 できません ウェブコンテンツに 関 わる 担 当 者 全 員 が このガイドラインの 主 旨 内 容 を 理 解 し このガイドラインに 沿 ったページの 作 成 更 新 に 努 めてください 7

8 1-2.ガイドラインの 適 用 範 囲 対 象 となるウェブサイト 静 岡 県 ホームページ( 対 象 となる 時 期 対 象 となるホームページの 新 規 作 成 時 及 び 更 新 時 対 象 となる 作 成 者 対 象 となるホームページのコンテンツを 作 成 する 者 つまり 静 岡 県 庁 職 員 はもとより 静 岡 県 か ら 作 成 を 委 託 された 業 者 も 含 め 対 象 となるホームページのコンテンツ 作 成 に 関 わる 全 ての 者 を 指 す 1-3. 公 開 前 にチェックするブラウザとバージョン Microsoft Internet Explorer 6 及 び 5( 必 須 ) Netscape 7.1( 任 意 ) Opera 7.5( 任 意 ) Firefox 1.0( 任 意 ) Safari 1.2( 任 意 ) 上 記 は 2005 年 2 月 15 日 現 在 のバージョンです チェックする 際 は 最 新 バージョンでチェックするようにしてください 1-4. 企 画 制 作 上 の 注 意 点 ホームページを 企 画 制 作 する 場 合 は ウェブアクセシビリティが 容 易 に 維 持 できるように 企 画 制 作 してください 維 持 する 方 法 としては 企 画 制 作 の 際 に このガイドラインの 要 件 を 満 たすよ うにすること 及 び 更 新 時 にウェブアクセシビリティの 品 質 を 保 てるようにテンプレートを 作 成 す ることを 心 がけてください また コンテンツ 管 理 システム( 略 称 :CMS)などのページを 自 動 生 成 するプログラムを 採 用 する 際 は そのプログラムで 生 成 されるページがこのガイドラインの 要 件 を 満 たしているかを 必 ずチェックし 満 たしていない 場 合 は 必 要 な 改 変 を 行 なってください 1-5. 保 守 運 用 上 の 注 意 点 ホームページを 保 守 運 用 するときは ウェブアクセシビリティの 品 質 を 確 保 し 向 上 させるよう に 注 意 してください 品 質 を 確 保 し 向 上 させる 方 法 としては 掲 載 する 内 容 としてこのガイドライ ンの 要 件 を 満 たしている 原 稿 を 用 意 し 決 められた HTML 編 集 ソフトを 利 用 してページを 作 成 して ください また この 決 められた HTML 編 集 ソフト 上 に 搭 載 されているアクセシビリティチェック を 必 ず 実 行 してからページを 公 開 してください もし 決 められた HTML 編 集 ソフト 以 外 のソフト でページを 作 成 する 場 合 は このガイドラインの 要 件 を 満 たすように 作 成 し 必 ず ペー ジの 検 証 を 行 なってから 公 開 してください 8

9 ウェブページの 作 成 を 外 部 に 委 託 する 場 合 も 必 ず 委 託 する 際 に 運 用 手 順 書 に 従 った 指 示 を 行 い 委 託 先 から 納 品 されたページに 対 して 必 ず ページの 検 証 を 行 ってから 公 開 してください 1-6. 利 用 者 からのフィードバック ホームページの 企 画 制 作 を 行 う 際 には 利 用 者 の 意 見 を 収 集 する 窓 口 を 用 意 し 利 用 者 からの 意 見 をウェブアクセシビリティの 確 保 向 上 に 活 かすようにしてください 9

10 2.ページ 全 体 について 2-1.ページのソースコードは 使 用 する 技 術 の 規 格 や 仕 様 に 従 って 記 述 するようにする(5.1a) ウェブブラウザ( 音 声 読 み 上 げソフトを 含 む)は W3C によって 規 定 された(X)HTML CSS などの 仕 様 に 基 づいて 表 示 方 法 機 能 が 提 供 されているため 規 格 や 仕 様 に 従 わない 記 述 をすると 動 作 に 問 題 が 起 きたり 誤 った 情 報 が 表 示 されたりする 可 能 性 があります 非 推 奨 とされている 以 下 のタグは 使 用 しないようにしましょう <center> 中 央 揃 え <font> 文 字 の 色 大 きさの 指 定 <s> 取 消 し 線 <strike> 取 消 し 線 <u> 下 線 非 推 奨 ではありませんが 以 下 のタグは 使 用 しないようにし 文 字 に 関 する 指 定 をする 場 合 にはスタ イルシート(1-5 参 照 )を 利 用 しましょう <b> 太 字 <i> 斜 体 <big> 大 きな 文 字 <small> 小 さな 文 字 特 定 のブラウザしか 認 識 しないタグは 使 用 しないようにしましょう <marquee>( 文 字 の 横 方 向 の 移 動 ) <blink>( 点 滅 ) 等 2-2.ページ 内 で 使 用 する 言 語 と 文 字 コードを 指 定 する(5.9a) ページ 内 で 使 用 する 言 語 と 文 字 コードが 指 定 されていないと 文 字 化 けが 起 こったり 音 声 読 み 上 げソ フト 等 で 正 しい 発 音 にならなかったりする 可 能 性 があります また ページ 内 の 一 部 で 別 の 言 語 を 使 用 する 場 合 にも 同 様 の 理 由 で 言 語 コードを 指 定 する 必 要 があります 10

11 2-3.ページの 内 容 は 文 書 構 造 を 適 切 なタグを 用 いて 示 す(5.2a) font 要 素 等 を 用 いて 文 字 の 大 きさだけで 見 出 し を 表 現 した 場 合 音 声 読 み 上 げソフトでは その 構 造 を 理 解 することはできません 見 出 し 段 落 リスト 強 調 など 文 書 を 構 成 する 要 素 は 適 当 なタグを 用 いて 明 確 に 示 す 必 要 があります 見 出 し<h1> <h2> リストの 表 示 例 とソースコード 例 2-4.ページの 内 容 を 適 切 に 表 す 固 有 のタイトルを 付 ける(5.2e) 複 数 のページに 同 じタイトル(<title></title>で 囲 まれた 部 分 )が 設 定 されていると ウェブブラウザ の お 気 に 入 り(ブックマーク) 履 歴 などに 表 示 された 際 にページの 区 別 がつきません また 音 声 読 み 上 げソフトではページを 閲 覧 した 際 に 最 初 に 読 み 上 げられる 内 容 のため この 部 分 だけでページ の 内 容 を 適 切 に 表 すことが 必 要 です 記 入 例 : 静 岡 県 / 良 い 例 :ページの 内 容 が 固 有 のタイトルとして 適 切 に 表 されています 11

12 2-5.ページの 見 た 目 を 表 現 するには できるだけスタイルシートを 使 用 する(5.2b) ページの 文 書 構 造 は HTML で 記 述 ( 参 照 )しますが レイアウト 文 字 の 大 きさや 色 行 間 や 文 字 間 隔 などの 見 た 目 を 表 現 するためには スタイルシートを 使 用 しましょう ただし 古 いブラウザやテキストブラウザ 一 部 の 携 帯 電 話 などスタイルシートに 対 応 していない 環 境 があるため その 場 合 でも 掲 載 されている 全 ての 情 報 が 取 得 できるようにしましょう 2-6.キーボードだけの 操 作 でも 利 用 できるようにする(5.3a) 目 が 不 自 由 手 や 指 が 不 自 由 などの 理 由 でマウスが 利 用 できない 場 合 があります マウスでしか 行 えない 動 作 が 必 要 なページでは 情 報 に 到 達 できなかったり 誤 った 動 作 をしたりする 可 能 性 があります この 例 は JavaScript を 使 用 しています 実 際 のページでは JavaScript を 使 用 しなくても 問 題 が 生 じないようする 必 要 があります ( 参 照 ) イベントハンドラ(スクリプトを 実 行 させるための 特 定 の 操 作 や 状 態 )は マウスの 操 作 に 依 存 する onclick onmousedown だけでなく キーボードの 操 作 でも 動 作 する onkeypress onkeydown などを 併 記 するようにしましょう 12

13 2-7.JavaScript を 使 用 しなくても 全 ての 情 報 を 入 手 できるよう 配 慮 する 利 用 者 によっては JavaScript が 使 用 できない 環 境 で 使 用 していたり JavaScript を 無 効 にしていた りする 場 合 があります JavaScript によってページの 内 容 を 書 き 出 していたり JavaScript のみによ って 他 ページへのナビゲーションが 提 供 されていると 情 報 に 到 達 できなかったり 誤 った 情 報 を 伝 え てしまったりする 可 能 性 があります 悪 い 例 :リンク 先 が javascript. となっています JavaScript が 無 効 の 場 合 には このリンクテキ ストはクリックしても 何 も 起 きず 意 見 を 送 ることができません リンクで JavaScript を 使 用 しては いけません 2-8.シンプルなレイアウトを 心 がけ 利 用 者 が 情 報 を 探 しやすいようにする 複 雑 なレイアウトを 行 ったり 過 度 な 装 飾 や 奇 抜 な 配 色 を 行 ったりすると 本 来 伝 えたい 情 報 とは 関 係 のない 要 素 に 目 が 向 いてしまう 可 能 性 があり 情 報 を 探 せない 探 すのに 時 間 がかかるなどの 問 題 が 起 きる 可 能 性 があります 2-9.ページの 全 体 または 一 部 を 自 動 的 に 更 新 したり 別 のページに 自 動 的 に 移 動 させたりしない (5.3e) ページが 自 動 的 に 更 新 されると 更 新 されたことに 気 づかない 可 能 性 があります また 音 声 読 み 上 げ ソフト 利 用 時 にページが 自 動 的 に 更 新 されると 利 用 者 がページの 読 み 上 げを 行 っている 途 中 で 再 度 読 み 込 みが 行 われる 場 合 があり 混 乱 します ページを 自 動 的 に 更 新 している 例 他 のページに 自 動 的 に 移 動 させている 例 13

14 2-10. 背 景 と 内 容 のコントラストを 十 分 にとる(5.5c 5.6c) 背 景 と 内 容 のコントラスト( 明 度 差 )が 十 分 でないと 弱 視 高 齢 の 利 用 者 など 文 字 が 読 みにいか 全 く 読 めないといった 問 題 が 起 きる 可 能 性 があるので 十 分 なコントラストを 確 保 しましょう ページの 背 景 ( 画 像 ) 色 と 文 字 色 の 関 係 だけでなく 画 像 内 の 背 景 色 と 文 字 色 についても 同 様 です 悪 い 例 : 十 分 なコントラストが 確 保 されていないため 文 字 が 読 みにくい 良 い 例 : 十 分 なコントラストが 確 保 されているため 文 字 が 読 みやすい 背 景 色 や 文 字 色 は 出 来 る 限 り 一 貫 性 を 持 たせたページ 作 りをする 背 景 色 や 文 字 色 がページごとに 異 なっていると 視 覚 的 なストレスがあるほか 同 じホームページでな いような 印 象 を 受 ける 可 能 性 があります 共 通 するナビゲーション( 参 照 )の 利 用 とともに 背 景 色 および 文 字 色 を 統 一 することは ホームページ 全 体 の 統 一 感 を 生 み 出 すものとして 重 要 な 要 素 です また 多 くの 文 字 色 を 使 いすぎると 情 報 の 重 要 性 が 判 断 しにくくなったり 色 の 持 つ 意 味 を 考 えなく てはならなかったりするため 大 きな 負 担 となります 色 や 形 だけで 情 報 を 伝 えない(5.5a 5.5b) 文 字 色 や 背 景 色 などに 依 存 して 情 報 の 区 別 を 行 うと 音 声 読 み 上 げソフトではその 情 報 の 違 いを 確 認 す ることができません モノクロのモニタを 用 いた 場 合 や モノクロのプリンタで 印 刷 を 行 った 場 合 も 同 様 です 悪 い 例 : 施 設 の 休 館 日 が 赤 字 で 示 されています モノクロのプリンタで 印 刷 すると 右 図 のようになり 休 館 日 を 判 別 することができません 14

15 色 のみに 依 存 した 情 報 だけでなく 12 月 の 休 館 日 は 4 日 6 日 13 日 のように 文 章 に よる 説 明 を 併 記 することが 好 ましいでしょう また アイコンやマークのみで 情 報 を 表 したり リンクボタンとして 使 用 したりことはせず 文 字 も 併 記 しましょう 悪 い 例 : 別 ウィンドウで 開 くことを アイコンだけで 表 しているため そのアイコンが 何 を 意 味 するの かわからない 可 能 性 があります 2-13.ページの 長 さは 適 切 な 長 さとする また 長 さや 内 容 によってはページの 先 頭 に 戻 れる 配 慮 をする 1 ページが 長 すぎたり 文 章 が 多 すぎたりすると ページ 内 の 内 容 を 理 解 しにくい スクロールの 操 作 が 煩 雑 になる 他 ページへの 遷 移 の 際 に 多 くの 操 作 が 必 要 となるなど 多 くの 不 都 合 が 生 じる 可 能 性 が あるため 場 合 によってはページを 分 割 するなどして 1 ページは 適 切 な 長 さに 収 めましょう また 1 ページが 長 くなる 場 合 には 掲 載 される 内 容 に 応 じて ページの 先 頭 に 戻 るためのリンクを 設 置 しましょう HTML コード 記 述 例 : 15

16 2-14.ページ 作 成 後 も 随 時 内 容 の 更 新 修 正 をする ホームページは 作 成 公 開 の 時 点 で 全 ての 作 業 が 完 了 するものではありません 終 了 した 情 報 はバック ナンバーに 移 行 するなど 内 容 の 更 新 を 随 時 に 行 い その 更 新 状 況 については 更 新 履 歴 などにで きる 限 り 反 映 させましょう また 更 新 修 正 の 際 も このガイドラインに 則 ったページとなるよう 心 掛 けてください 画 面 のサイズは を 想 定 し 閲 覧 しやすいようにする ページの 内 容 がウェブブラウザの 表 示 より 右 側 にはみ 出 す( 横 スクロールバーが 表 示 されている) 状 態 では 文 章 が 折 り 返 されるごとにスクロールを 繰 り 返 すという 非 常 に 煩 わしい 操 作 が 必 要 になるため 横 幅 はウェブブラウザのウィンドウサイズに 追 随 するか (800 からスクロールバーなどを 除 いた)750 ピクセル 程 度 を 超 えないページ 幅 で 制 作 するようにしましょう ( 多 くの 利 用 者 が 以 上 の 画 面 サイズを 利 用 していると 想 定 ) 表 示 領 域 の 例 : 左 (ピクセル) 右 (ピクセル) 2-16.ページは A4 タテの 用 紙 で 適 切 に 印 刷 できるようにする ホームページに 掲 載 されている 情 報 は 画 面 上 で 閲 覧 されるだけでなく そのページを 印 刷 して 利 用 する ことも 考 えられます 印 刷 時 にページが 切 れてしまうことで 印 刷 物 としての 使 い 勝 手 が 著 しく 低 下 す るため A4 タテの 用 紙 で 適 切 に 印 刷 できるページ 幅 (もしくは 印 刷 に 対 応 できる 方 法 )で 作 成 しまし ょう 注 意 点 テーブルを 使 用 する 場 合 は 幅 の 指 定 をパーセントで 指 定 してください パーセントで 指 定 できないときは 幅 が 600 を 越 えないように 指 定 してください 画 像 を 挿 入 する 場 合 画 像 の 幅 が 600 ピクセルを 越 えないようにしてください 16

17 2-17. 各 ページには 担 当 部 署 名 連 絡 先 を 明 記 すること ホームページに 掲 載 されている 情 報 だけでは 不 十 分 である 場 合 があるため ホームページ 全 体 に 対 する 問 い 合 わせだけでなく 個 別 の 情 報 に 対 する 担 当 部 署 ( 情 報 主 体 者 )および 連 絡 先 を 明 記 しましょう 連 絡 先 表 示 例 問 い 合 わせには 電 話 FAX メールアドレスなど 複 数 の 手 段 を 明 記 すること(6.5) 問 い 合 わせフォームや 電 子 メールによる 問 い 合 わせ 手 段 だけでは インターネットの 利 用 ができないと 問 い 合 わせができない 多 くの 利 用 者 が 使 いやすい 問 い 合 わせ 方 法 を 選 べるように できるだけ 多 くの 問 い 合 わせ 手 段 を 確 保 明 記 しましょう 問 い 合 わせ 方 法 例 17

18 3.トップページについて 3-1. 利 用 者 の 立 場 で 項 目 を 分 類 する 静 岡 県 庁 の 組 織 ( 部 室 担 当 )を 基 準 に 情 報 を 分 類 した 場 合 利 用 者 は 自 分 の 目 的 にあった 情 報 がど の 組 織 に 分 類 されるのかわからないため 目 的 の 情 報 に 到 達 することが 困 難 になります 項 目 分 類 の 例 : 静 岡 県 庁 の 組 織 ではなく 情 報 の 内 容 に 基 づいて 分 類 されている 3-2.トップページで サイト 全 体 が 見 通 せるようにする トップページは 利 用 者 が 最 初 に 訪 れるページであることが 多 く トップページに 掲 載 されている 情 報 によってホームページ 全 体 にどんな 情 報 が 掲 載 されているかを 判 断 しているため ホームページ 全 体 を 体 系 的 かつ( 煩 雑 になり 過 ぎない 範 囲 で) 網 羅 的 に 掲 載 する 必 要 があります 3-3. 団 体 名 所 在 地 アクセス 情 報 ( 地 図 道 順 交 通 案 内 )を 明 記 する (6.5) インターネットだけで 解 決 しない 問 題 や 各 種 申 請 書 類 の 提 出 などのために 静 岡 県 庁 や 関 連 施 設 へ 直 接 訪 問 する 必 要 がある 場 合 があります そのための 案 内 として 所 在 地 地 図 交 通 案 内 を 明 記 しまし ょう その 際 には 鉄 道 バス 徒 歩 など 多 くの 交 通 手 段 について 各 所 からの 所 要 時 間 なども 併 記 すること で 利 便 性 が 向 上 します ただし 時 刻 表 などを 掲 載 する 場 合 には その 情 報 が 最 新 のものであるか 注 意 を 払 う 必 要 があります 3-4.プライバシーポリシー 及 びアクセシビリティポリシーを 掲 載 する (6.1) 個 人 情 報 の 取 り 扱 いに 関 する 情 報 が 明 記 されていないと 情 報 の 送 信 だけでなくページの 閲 覧 自 体 を 躊 躇 する 利 用 者 が 存 在 します また アクセシビリティポリシーが 明 記 されることで 利 用 者 自 身 の 閲 覧 環 境 で 問 題 なくホームページを 利 用 できるかを 判 断 する 助 けとなるので 安 心 感 が 生 まれます 18

19 プライバシーポリシーページに 記 載 する 項 目 例 個 人 情 報 保 護 条 例 収 集 する 個 人 情 報 の 内 容 データの 暗 号 化 収 集 した 個 人 情 報 の 取 り 扱 い クッキー 等 アクセスログの 取 り 扱 い アクセシビリティポリシーに 記 載 する 項 目 例 基 本 方 針 準 拠 する 指 針 参 考 となる 指 針 等 評 価 の 方 法 利 用 者 からのフィードバック 3-5.ページの 使 い 方 (ヘルプメニュー)を 用 意 する ホームページ 全 体 の 構 成 機 能 各 ページの 構 成 各 機 能 の 使 用 方 法 などを 説 明 するページを 用 意 する ことで ホームページを 使 い 慣 れていない 利 用 者 や 初 めて 静 岡 県 ホームページを 利 用 者 が 安 心 して ホームページを 利 用 することができるようになります ページの 使 い 方 (ヘルプメニュー)に 記 載 する 項 目 例 情 報 の 分 類 や 情 報 の 探 し 方 ページの 構 成 文 字 を 大 きくする 方 法 必 要 なソフトウェアやプラグイン 推 奨 環 境 対 応 環 境 用 語 の 解 説 19

20 4.サイト 内 の 案 内 (ナビゲーション)について 4-1.サイト 内 に 共 通 するナビゲーションをつける(5.3f) 共 通 するナビゲーションがあることで そのページが 静 岡 県 ホームページであることが 明 確 になり 安 心 感 が 生 まれます また デザインや 機 能 をページごとに 改 めて 確 認 する 必 要 がないので 目 的 の 情 報 を 探 すことに 集 中 できます 4-2. 共 通 するナビゲーションには トップページ 主 要 メニュー サイトマップ 問 い 合 わせへの リンクをつける (5.3f) トップページ 主 要 メニュー サイトマップ 問 い 合 わせへのリンクが 共 通 するナビゲーションに 含 ま れることで どのページにいても ホームページ 全 体 の 構 造 を 意 識 することができ 特 定 の 動 作 を 行 う ためのボタンが 常 に 同 じ 位 置 に 存 在 するためストレスなく 別 のページに 移 動 することができるように なります 4-3. 各 ページに 検 索 機 能 もしくは 検 索 ページへのリンクをつける 利 用 者 は 何 らかの 目 的 を 持 ってホームページを 訪 れます 任 意 の 用 語 (キーワード)で 検 索 を 行 うこと で 膨 大 な 情 報 の 中 から 目 的 の 情 報 に 容 易 にたどりつくことができます また 各 ページにその 機 能 が あることで ページを 閲 覧 している 途 中 でも 検 索 を 行 うことができるため さらに 利 便 性 が 向 上 します 4-4.パンくずリストを 各 ページにつける(5.2g) 多 くの 情 報 が 提 供 されているホームページでは ページを 閲 覧 するうちに 自 分 がどこにいるのか ど うすれば 前 のページに 戻 れるのかがわからなくなる 可 能 性 があります また 検 索 などで 階 層 の 深 いペ ージに 直 接 訪 問 した 場 合 にも 関 連 情 報 や 他 ページへの 移 動 が 容 易 になるため すべてのページに 適 切 なパンくずリストをつけましょう ホームページ 全 体 の 構 造 と パンくずリストの 内 容 に 乖 離 があったり ページを 遷 移 するうちにパンく ずリストの 上 位 階 層 が 変 化 してしまうと ホームページの 構 造 がわかりにくくなるため 注 意 が 必 要 で す パンくずリスト: 現 在 閲 覧 しているページのサイト 内 での 位 置 ( 階 層 構 造 )と 各 階 層 へのリンクを 簡 潔 に 示 したもの 20

21 パンくずリストの 設 置 例 :ホームから 現 在 のページまでの 階 層 が 示 されている 4-5. 共 通 するナビゲーションは 読 み 飛 ばせるようにする(5.3h) 音 声 読 み 上 げソフト 利 用 者 は 新 しいページを 開 くたびに サイト 内 に 共 通 するナビゲーション 部 分 を 何 度 も 繰 り 返 し 聞 かなければならず そのページの 本 文 に 到 達 するのにかなりの 手 間 がかかります そ こで ナビゲーション 部 分 より 前 に ナビゲーションを 読 み 飛 ばして 本 文 の 開 始 位 置 までスキップする ためのしくみを 用 意 しましょう 携 帯 電 話 など 小 さな 画 面 での 利 用 を 想 定 している 場 合 にも 有 効 な 手 段 と 言 えます ただし 読 み 飛 ばすものは 基 本 的 に 共 通 する メニューが 存 在 する 場 合 に 限 り 必 要 以 上 に 設 置 す ると かえって 使 いにくいものとなるため 注 意 が 必 要 です ナビゲーションを 読 み 飛 ばす 方 法 本 文 へ などとしたテキストリンクを 用 意 する 画 像 ( 透 過 gif 等 )を 最 小 の 大 きさで 表 示 させ その 画 像 に 代 替 テキストとリンクを 設 定 する 21

22 5. 文 字 について 5-1. 文 字 のサイズは 利 用 者 が 自 由 に 変 更 できるようにする(5.6a) ページの 文 字 サイズが px pt 等 で 指 定 されている 場 合 ウェブブラウザの 文 字 の 大 きさを 変 更 す る 機 能 が 使 えないため 文 字 の 大 きさに 問 題 があると 感 じても そのまま 利 用 しなければならず 不 便 を 強 いるものとなるので 文 字 のサイズは em % medium small large 等 で 指 定 をしましょ う ウェブブラウザの 文 字 の 大 きさを 変 更 する 機 能 が 有 効 でない 例 : 文 字 サイズが 10px と 指 定 されてい るため 文 字 のサイズを 最 大 ( 左 図 )にしても 最 小 ( 右 図 )にしても 表 示 される 文 字 の 大 き さを 変 えることができない 5-2. 文 字 のフォント( 書 体 )は 指 定 しない(5.6b) 表 示 する 書 体 が 指 定 されている 場 合 その 書 体 が 利 用 者 の 環 境 にインストールされていないと 正 しい 表 示 が 行 われないことがありますので 書 体 は 指 定 しないようにしましょう また パソコン 等 のモニタ 画 面 では 明 朝 体 よりもゴシック 体 のほうが 読 みやすいとされています ど うしても 書 体 を 指 定 しなくてはならない 場 合 は 明 朝 系 ではなくゴシック 系 の 書 体 を 指 定 するようにし ましょう 5-3. 理 解 しやすい 文 章 にする (5.9b 5.9c 5.9f) ページに 掲 載 する 情 報 は 要 点 をまとめる 箇 条 書 きを 使 用 するなどして 簡 潔 な 表 現 をしましょう 用 語 については 専 門 用 語 行 政 用 語 の 使 用 は 極 力 避 けましょう やむを 得 ず 使 用 する 場 合 には 使 用 する 際 に 十 分 な 解 説 をしましょう 22

23 5-4. 文 章 による 説 明 だけでなく 必 要 に 応 じて 図 イラストなどを 用 いる(5.9f) ページに 掲 載 する 情 報 は 文 章 による 説 明 だけでなく わかりやすい 図 やイラストをあわせて 用 いると 利 用 者 はその 内 容 をより 理 解 しやすくなります イラストを 用 いた 例 : 電 子 入 札 システムの 概 要 を 文 章 とイラストを 用 いて 表 現 しています 5-5. 誤 読 されない 工 夫 をする(5.9d) ページの 中 で 人 名 や 地 名 などを 用 いる 場 合 それを 読 むことができない 利 用 者 がいる 可 能 性 があります 音 声 読 み 上 げソフトでも 正 しい 読 み 上 げが 行 われない 可 能 性 がありますので フリガナをつけることや 漢 字 表 記 をやめることなどの 検 討 をしましょう 良 い 例 : 福 田 は フクダ と 読 まれることが 多 いですが ここではひらがなで 併 記 しているため フクデチョウ であることがわかります 23

24 5-6. 英 単 語 は 小 文 字 で 表 記 する 英 単 語 が 全 て 大 文 字 により 表 記 されている 場 合 音 声 読 み 上 げソフトでは アルファベットが 一 文 字 ず つ 読 み 上 げられることがありますので 原 則 として 小 文 字 で 表 記 しましょう ただし NPO PHS SARS などのように 略 語 等 で 大 文 字 表 記 が 通 例 となっている 場 合 や 製 品 名 などの 固 有 名 詞 はこの 限 りではありません 読 み 上 げの 例 : TEL は ティーイーエル と 読 み 上 げられます 5-7. 単 語 の 途 中 にスペースや 改 行 を 入 れない(5.9e) (X)HTML のソースコード 上 で 単 語 の 途 中 にスペースや 改 行 が 入 っていると 音 声 読 み 上 げソフトでは 一 つの 単 語 として 認 識 できず 期 待 する 読 み 上 げができなくなるため スペースや 改 行 は 使 用 しないよ うにしましょう 悪 い 例 : 案 内 が 案 内 となっているため 音 声 読 み 上 げソフトでは アン ウチ と 読 み 上 げ ます 5-8. 数 値 は 半 角 数 字 を 使 用 する 全 角 数 字 を 使 用 した 場 合 音 声 読 み 上 げソフトでは 数 字 が 一 つ 一 つ 読 み 上 げられたり 誤 った 位 取 り がされたりする 場 合 があるので 半 角 数 字 を 使 用 しましょう 24

25 5-9. 機 種 依 存 文 字 および 半 角 カナを 使 用 しない(5.1a) 丸 数 字 やローマ 数 字 などの 機 種 依 存 文 字 を 使 用 すると 利 用 環 境 によっては 別 の 文 字 に 置 き 換 わる 文 字 が 表 示 されないなどの 問 題 が 発 生 するため 機 種 依 存 文 字 を 使 用 しないよう 表 記 を 改 めましょう 機 種 依 存 文 字 と 改 善 例 機 種 依 存 文 字 については 付 録 B 機 種 依 存 文 字 を 参 照 日 付 時 間 通 貨 単 位 は 漢 字 で 表 記 する 日 付 表 記 に /. を 用 いたり 時 間 表 記 に : を 用 いたりすると その 数 字 が 何 を 意 味 しているの かわからない 可 能 性 があり 音 声 読 み 上 げソフトでも 意 図 しない 読 み 上 げが 行 われる 場 合 があるため 日 付 の 場 合 には 月 日 曜 日 を 時 間 ( 時 刻 )の 場 合 には 時 分 秒 を 通 貨 の 場 合 には 円 をそれぞれ 使 用 するようにしましょう 行 頭 に 記 号 文 字 を 使 用 しない 一 部 の 音 声 読 上 げソフトでは や などの 記 号 文 字 を まる や しかく あるいは き ごう と 読 上 げることがあります 記 号 文 字 は 主 に 装 飾 目 的 で 使 用 されるケースが 見 られますが 音 声 読 上 げソフトで 誤 読 される 原 因 とな りますので 特 に 行 頭 ( 見 出 しや 段 落 の 先 頭 )での 使 用 は 避 けましょう 25

26 6.リンクについて 6-1.リンクボタンは 容 易 に 判 別 できるものとする(5.3g) リンクボタンは 立 体 表 現 やフチ 取 り 矢 印 の 付 与 などに 適 当 な 手 段 によって ボタンであることが 明 確 になるようにしましょう また リンクテキストの 場 合 には 下 線 を 消 したり 通 常 のテキストと 同 じ 文 字 色 を 使 用 したりすると リンクを 見 落 とす 可 能 性 があります 逆 に リンクではない 画 像 に ボタンのような 表 現 を 行 ったり リンクテキストでないテキストを 青 色 にしたり 下 線 をつけたりすることは 好 ましくありません 見 た 目 は 同 じでありながら 場 所 によってリンクの 有 無 に 差 があると 利 用 者 は 混 乱 します 6-2.リンクは 十 分 な 面 積 を 確 保 する(5.3g) 小 さな 画 像 や 短 い( 幅 の 狭 い) 文 字 列 に 対 してリンクを 設 定 すると 細 かな 操 作 が 苦 手 な 利 用 者 が 利 用 できない 可 能 性 があります 6-3.リンクとリンクの 間 は 十 分 な 間 隔 をあける(5.3g) リンクとリンクに 間 隔 がない 場 合 利 用 者 が 意 図 しないリンクをクリックしてしまう 可 能 性 があるため リンクではない 領 域 を 間 に 挟 むなどして 十 分 な 間 隔 をあけましょう 6-4.リンク 先 の 内 容 がわかるようにする(5.3g) こちら 詳 細 など それだけではリンク 先 の 内 容 が 想 像 できない 言 葉 にリンクを 設 定 すると 音 声 読 み 上 げソフト 等 でリンク 部 分 だけを 拾 い 読 みする 場 合 などに 前 後 の 内 容 を 確 認 しなければならず 大 きな 負 担 となるため リンク 先 の 内 容 を 表 す 言 葉 に 対 してリンクを 設 定 しましょう リンクテキストに こちら を 用 いた 場 合 の 改 善 例 26

27 6-5.リンク 先 を 新 しいウィンドウで 開 く 場 合 は 事 前 に 利 用 者 に 知 らせる(5.3e) 予 告 なしにリンク 先 が 新 しいウィンドウで 開 かれると 利 用 者 は 新 しいウィンドウが 開 いたことに 気 づ かないことがあります 音 声 読 み 上 げソフトを 使 用 している 場 合 は 全 く 気 づくことができません そ のため 前 のページに 戻 ろうとしてもウェブブラウザの 戻 る ボタンが 使 用 できずに 混 乱 したり 利 用 者 によってはウィンドウを 切 り 替 える 動 作 が 大 きな 負 担 になったりするため 原 則 として 新 しいウィ ンドウは 開 かないようにしましょう やむを 得 ず 新 しいウィンドウを 開 く 場 合 には リンク 部 分 にそ の 旨 を 記 載 するなどして 事 前 に 利 用 者 に 知 らせるようにしてください また ページが 切 り 替 わると 同 時 に JavaScript 等 を 用 いて( 参 照 ) 別 のウィンドウが 立 ち 上 がる という 場 合 も 同 様 の 理 由 で 使 用 しないようにしましょう 27

28 7. 画 像 について 7-1. 画 像 には 適 切 な 代 替 テキストをいれる(5.4a 5.4b) 代 替 テキストが 設 定 されていないと 画 像 を 表 示 できない(もしくは 表 示 させない) 場 合 や 音 声 読 み 上 げソフトを 利 用 している 場 合 に 画 像 が 伝 えている 情 報 を 取 得 することができません 代 替 テキストが 設 定 されている 場 合 であっても 画 像 が 表 現 している 内 容 を 適 切 に 示 さなければ 情 報 が 得 られないどころか 画 像 が 伝 えている 情 報 の 理 解 を 阻 害 する 可 能 性 があります 悪 い 例 : 用 法 としては リストのアイコン ですが 適 切 な 内 容 を 表 現 しているとは 言 えません このように 装 飾 だけを 目 的 にしている 場 合 は alt= とするのが 適 当 でしょう 7-2.イメージマップには 文 字 リンクを 併 記 する(5.4b) 画 像 自 体 の 代 替 テキスト( 参 照 )が 適 切 に 設 定 されていたとしても イメージマップの 各 領 域 に 代 替 テキストが 設 定 されていないと リンク 先 に 関 する 情 報 を 取 得 することができません 画 像 の 一 部 にリンクがあることに 気 づかない 可 能 性 もありますので テキストリンクを 併 記 することで 確 実 な 誘 導 を 促 すことができます イメージマップへの 代 替 テキスト 設 定 例 とソースコード 例 : <img src=" gif " alt="" width="180" height="90" border="0" usemap="#pref"> <map name="pref" id="pref"> <area shape="rect" coords="47,7,85,70" href="tobu.html" alt=" 東 部 総 合 庁 舎 "> <area shape="rect" coords="6,7,44,70" href="fuji.html" alt=" 富 士 総 合 庁 舎 "> </map> イメージマップは サーバサイドイメージマップ は 使 用 せず クライアントサイドイメージマップ を 使 用 しましょう サーバサイドイメージマップとは 画 像 上 の 座 標 を CGI プログラムに 送 り 設 定 されたリンク 先 のペ ージに 遷 移 するものです クライアントサイドイメージマップとは CGI プログラムを 介 さず HTML のタグを 用 いて 画 像 に 設 28

29 定 されたリンク 先 のページに 遷 移 するものです 29

30 8. 表 (テーブル)について 8-1. 表 (テーブル)はわかりやすい 構 造 にする(5.2c) 表 (テーブル)を 使 用 する 場 合 は 極 力 複 雑 な 表 や 大 きな 表 は 避 け 小 さな 表 にしましょう これは 複 雑 な 表 や 大 きな 表 を 使 用 した 場 合 音 声 読 み 上 げソフトで 読 み 上 げた 場 合 に 行 と 列 の 関 係 が 分 かりに くくなるためです 音 声 読 み 上 げソフトは 表 を 左 上 から 右 下 に 1 セルずつ 読 み 上 げますので 音 声 読 み 上 げ 順 序 が 崩 れないように 配 慮 することが 必 要 です 特 にセルを 結 合 することはできるだけ 避 けるよ うにしてください 音 声 読 み 上 げソフトの 読 み 上 げ 順 の 例 8-2. 表 (テーブル)の 構 造 を 明 確 に 示 す(5.2c) 表 としてテーブルを 用 いる 場 合 は 表 の 構 造 をタグで 示 します 見 出 しとなるセルでは <td>タグでは なく <th>タグを 用 います その 他 下 記 の 点 に 注 意 します 見 出 しとなるセルには <id> 属 性 をつけます データセルには <headers> 属 性 をつけます 複 雑 な 表 にはテキストによる 解 説 を 記 述 する HTML コーディング 例 <table> <tr> <th id="t1"> 都 道 府 県 </th> <th id="t2"> 人 口 </th> <th id="t3"> 世 帯 数 </th> </tr> </tr> <td headers="t1" id="k1">a 県 </td> <td headers="t2 k1">300 万 人 </td> <td headers="t3 k1">75 万 世 帯 </td> </tr> </table> 30

31 9.レイアウトについて 9-1.なるべくテーブルタグをレイアウトのために 使 用 しない(5.2d) 音 声 読 み 上 げソフトは 表 (テーブル)を 左 から 右 へ そして 右 端 までくると 一 行 下 がって 再 び 左 から 右 へという 順 序 で 読 み 上 げます そのため 表 (テーブル)の 要 素 や 属 性 をレイアウト 目 的 で 使 用 した 場 合 作 成 者 が 意 図 しない 順 序 で 読 み 上 げる 可 能 性 があります ですから 極 力 レイアウトのために 表 (テーブル)の 要 素 や 属 性 を レイアウト 目 的 で 使 用 しないよ うにします もし 使 用 する 場 合 は 読 み 上 げ 順 序 を 考 慮 してください 悪 い 例 : 表 (テーブル)をレイアウト 目 的 で 使 用 しているのに 読 み 上 げ 順 を 考 慮 していない

32 10. 入 力 フォームについて 入 力 させる 時 は どのように 入 力 するのかを 明 確 にする(5.3b) パソコンに 慣 れていない 利 用 者 の 場 合 入 力 する 文 字 種 ( 半 角 文 字 全 角 文 字 など)を 誤 る 可 能 性 が 非 常 に 高 くなります ですから フォームの 各 入 力 項 目 には 入 力 する 内 容 や 条 件 などを 明 確 に 示 すよう にしましょう 悪 い 例 : 音 声 読 み 上 げソフトでは テキストボックスの 後 に 必 須 ひらがなで 入 力 と 読 み 上 げるため 利 用 者 は 入 力 の 条 件 が 把 握 できない 良 い 例 : 音 声 読 み 上 げソフトで 読 み 上 げられる 内 容 タイミングのどちらも 何 をどのように 入 力 すればいいかが わかりやすい 全 てのコントロールとラベルは LABEL 要 素 を 使 用 し コントロールとラベルを 関 連 付 ける (5.3b) チェックボックス ラジオボタンなどのコントロールは LABEL 要 素 を 使 って 対 応 するラベルと 関 連 付 けます これにより 各 コントロールは 対 応 するラベルと 関 連 づけられますので 音 声 読 み 上 げソフ トでの 読 み 上 げ 時 にセットとして 正 しく 読 み 上 げられます LABEL 要 素 を 使 用 している 例 LABEL 要 素 を 使 用 していない 例 32

33 10-3. 入 力 制 限 時 間 を 設 けないようにする(5.3c 5.3d) パソコンに 慣 れていない 利 用 者 の 場 合 フォームの 入 力 完 了 に 時 間 がかかる 場 合 がありますので フォ ームには 時 間 制 限 を 設 けないようにしましょう 10-4.フォーム 入 力 後 入 力 内 容 の 確 認 画 面 を 提 供 し さらに 修 正 できる 手 段 も 同 時 に 提 供 する(5.3i) 利 用 者 は 自 分 の 行 動 (クリックやキー 操 作 )を 完 全 に 自 覚 しているわけではありません また 誤 っ て 操 作 する 場 合 もあります 従 って 入 力 した 内 容 を 利 用 者 が 確 認 できるようにすることで 入 力 ミス を 防 ぎ 利 用 者 の 安 心 感 を 高 めることができます 必 ずフォーム 入 力 後 には 入 力 内 容 を 確 認 する 画 面 を 提 供 します また 修 正 する 手 段 も 同 時 に 提 供 してください 33

34 11.フレームについて 11-1.フレームは 基 本 的 に 使 用 しない (5.2f) フレームを 使 用 したページを 音 声 読 み 上 げソフトで 読 み 上 げる 場 合 フレームを1つずつ 選 択 して 読 み 上 げなければなりません また ブラウザのお 気 に 入 りに 登 録 できない 場 合 や 印 刷 がうまくできない 場 合 があります ですから 基 本 的 にはフレームを 使 用 しないようにしましょう どうしてもフレームを 使 用 しなくてはならない 場 合 は 次 の 点 に 注 意 します 分 割 する 領 域 は4つまでとする フレームは 入 れ 子 (フレーム 内 にフレームを 設 定 する)にしない 各 フレームの 役 割 (ヘッダ メニュー 本 文 など)を 整 理 して ページの 構 造 を 明 確 にして 一 貫 性 を 持 たせる すべてのフレームに フレームの 識 別 ができ かつ 内 容 を 的 確 に 示 すタイトルをつける 事 例 :フレームにタイトルを 付 ける <frameset cols="100,*" title=" 静 岡 県 公 式 ホームページ"> <frame src="menu.html" title="メニュー"> <frame src="docment.html" title=" 本 文 "> </frameset> 事 例 :フレーム 内 の 各 ページに <title>でタイトルを 指 定 34

35 12.Word Excel PDF Flash ファイルの 扱 いについて 12-1.Word Excel ファイルを 公 開 する 場 合 (5.1b 5.4e) 普 段 利 用 しているワープロソフトや 表 計 算 ソフトなどのアプリケーションソフトで 作 成 したファイル を 公 開 する 場 合 は 特 定 の 環 境 に 依 存 しない HTML での 情 報 も 同 時 に 掲 載 するようにしましょう こ れは アプリケーションソフトのファイル 形 式 のまま 公 開 した 場 合 には 受 け 取 った 利 用 者 側 にも 同 じ ソフトウェアが 必 要 になってしまうためです また 利 用 者 が 同 じソフトウェアを 持 っていたとしても レイアウトが 崩 れてしまうこともあります もし アプリケーションソフトで 作 成 したファイルをそのまま 公 開 する 場 合 は 下 記 の 情 報 を 同 時 に 提 供 します リンク 先 のファイルが HTML でないことを 明 示 する リンク 先 のファイルの 形 式 を 明 示 する リンク 先 のファイル 容 量 を 記 載 する 事 例 県 の 計 画 の 概 要 県 の 計 画 の 概 要 [Word ファイル 400KB] [Excel ファイル 400KB] 12-2.PDF ファイルを 公 開 する 場 合 (5.1b 5.4e) PDF ファイルをウェブブラウザで 表 示 する 場 合 は 専 用 のプラグインソフトが 必 要 になります つまり 専 用 のプラグインソフトが 設 定 されていないウェブブラウザでは PDF ファイルを 表 示 できません PDF ファイルにて 情 報 を 提 供 する 場 合 は 必 ず 下 記 の 項 目 を 記 述 します リンク 先 のファイルが PDF ファイルであることを 明 示 する リンク 先 のファイルの 形 式 を 明 示 する リンク 先 のファイル 容 量 を 記 載 する リンク 先 のファイル 形 式 を 表 示 する 際 にプラグインが 必 要 な 場 合 は その 旨 を 記 載 し プラグインのダウンロード 先 の URL も 同 時 に 掲 載 する 掲 載 例 PDF ファイルは Acrobat Reader( 無 料 )でご 覧 下 さい ダウンロード 先 URL: 事 例 県 の 計 画 の 概 要 [PDF ファイル 400KB] 35

36 12-3.Flash ファイルを 公 開 する 場 合 (5.1b 5.4e) PDF ファイルと 同 様 Flash ファイルをウェブブラウザで 表 示 する 場 合 は 専 用 のプラグインソフトが 必 要 になります Flash ファイルにて 情 報 を 提 供 する 場 合 は 必 ず 下 記 の 項 目 を 記 述 します リンク 先 のファイルが Flash ファイルであることを 明 示 する リンク 先 のファイルの 形 式 を 明 示 する リンク 先 のファイル 形 式 を 表 示 する 際 にプラグインが 必 要 な 場 合 は その 旨 を 記 載 し プラグインのダウンロード 先 の URL も 同 時 に 掲 載 する 掲 載 例 このページをご 覧 になるためには Macromedia Flash Player が 必 要 です ダウンロード 先 URL: Lang=Japanese&P1_Prod_Version=ShockwaveFlash&Lang=Japanese また 画 面 表 示 と 同 時 に Flash ファイルを 再 生 する 場 合 は 必 ずキャンセルボタンやスキップボタンを 設 け 利 用 者 が Flash ファイルを 最 後 まで 見 なくても 次 に 進 める 配 慮 が 必 要 です 事 例 :オープニングムービーにスキップを 提 供 スキップ 36

37 13. 動 画 音 について 動 画 音 は 自 動 で 再 生 せず 利 用 者 側 で 制 御 できるようにする(5.7a 5.7b) 動 画 音 声 アニメーションなど 時 間 によって 変 化 する 情 報 は 利 用 者 側 が 制 御 できる 機 能 を 提 供 しま す 提 供 する 機 能 としては 動 画 アニメーション/ 再 生 停 止 一 時 停 止 音 声 / 音 量 調 節 再 生 停 止 一 時 停 止 音 声 についてはそのページを 開 いた 際 に 自 動 で 音 声 を 再 生 することは 極 力 避 けましょう もし 自 動 で 再 生 する 場 合 は 再 生 していることを 明 示 するようにします また 画 面 全 体 を 動 画 や Flash で 表 現 する 場 合 は キャンセルやスキップできる 配 慮 をしましょう 再 生 停 止 早 送 り 巻 き 戻 しなどのコントロールを 提 供 する 例 37

38 13-2.テキストなど 代 替 情 報 を 提 供 する(5.4c 5.4d) 動 画 やアニメーションなど 時 間 によって 変 化 する 非 テキスト 情 報 には 字 幕 または 状 況 説 明 などの 手 段 によって 同 期 した 代 替 情 報 を 提 供 するようにします 画 面 で 視 覚 的 にしか 伝 えていない 情 報 は 同 期 した 副 音 声 で 状 況 説 明 をする あるいは 状 況 説 明 を 書 き 起 こしたテキストを 代 替 情 報 として 提 供 する ようにしましょう また 音 声 で 聴 覚 的 にしか 伝 えていない 情 報 は 同 期 したキャプション( 字 幕 ) を 提 供 する あるいは 音 声 情 報 を 書 き 起 こしたテキスト(トランスクリプト)を 代 替 情 報 として 提 供 する ようにしましょう 字 幕 の 例 38

39 14. 速 度 について 変 化 または 移 動 する 画 像 テキストは 速 度 を 考 慮 する(5.8a) バナーなどの 変 化 または 移 動 する 画 像 テキストは その 速 度 色 彩 輝 度 の 変 化 などに 注 意 して 作 成 します これは 認 知 もしくは 記 憶 に 障 害 のある 場 合 や 高 齢 者 などが 認 識 できない 可 能 性 があるためで す また 色 や 輝 度 の 激 しい 変 化 は 目 に 対 する 負 担 が 大 きくなるため 避 けるようにしましょう 早 い 周 期 での 点 滅 を 避 ける(5.8b) 光 過 敏 性 てんかんのある 利 用 者 は 1 秒 間 に 2 回 以 上 の 明 滅 や ストロボ 光 のような 光 量 の 急 激 な 変 化 に 対 し 発 作 を 引 き 起 こす 可 能 性 があります また 視 覚 に 障 害 がある 場 合 や 加 齢 などの 原 因 で 認 知 力 が 低 下 してくるような 場 合 は 点 滅 や 自 動 スクロールなど 視 覚 的 に 変 化 する 情 報 は 把 握 しにくくな ります 従 って 下 記 の 点 に 注 意 しましょう 画 面 全 体 あるいは 一 部 が 1 秒 間 に 2 回 以 上 明 滅 する 表 現 は 行 なわない 文 字 や 画 像 に 点 滅 や 自 動 スクロールなどの 使 用 は 極 力 避 ける 彩 度 の 高 い 赤 ( 鮮 やかな 赤 )の 明 滅 や 色 のコントラストの 強 い 反 転 は 避 ける 15.Java アプレットなどその 他 オブジェクトについて 15-1.アクセスできない 場 合 の 配 慮 から 代 替 情 報 を 提 供 する(5.1b 5.4e) JavaScript Java アプレット Flash PDF などを 使 用 する 場 合 は 必 ずコンテンツの 内 容 が 理 解 で きる 代 替 の 手 段 (このガイドラインの 要 件 を 満 たした HTML など)を 提 供 します 理 由 としては こ れらの 特 定 の 技 術 やプラグインを 利 用 できないブラウザがあるためです また ブラウザでこれらを 使 用 しない 設 定 にしている 場 合 もあります 事 例 JavaScript の 場 合 は <noscript>タグに 代 替 情 報 を 記 述 する プラグインは <object>タグと</object>タグの 間 に 代 替 情 報 を 記 述 する プラグインを<embed>タグで 指 定 する 場 合 は<noembed>タグに 代 替 情 報 を 記 述 する Java アプレットで <applet>タグを 使 用 する 場 合 は テキストで 同 等 の 情 報 を 提 供 する *<applet>タグは W3C で 推 奨 していないため 使 用 しないことが 望 ましい 特 定 の 技 術 やプラグインがアクセシブルでない 場 合 同 等 の 情 報 を 持 つこのガイドラインの 要 件 を 満 たした HTML を 用 意 し 元 のページと 同 じタイミングで 同 じ 内 容 の 追 加 あるいは 更 新 を 行 うこと 39

40 16.インターネット 環 境 について 16-1.ファイルのサイズは 小 さくする ページの 表 示 に 時 間 がかかると 利 用 者 は 不 安 を 感 じたり ページが 表 示 される 前 に 別 のページに 移 動 してしまう 場 合 があります ページのデータ 量 ( 画 像 も 含 む)は 極 力 小 さくしてページの 表 示 がスムー ズにできるよう 心 がけましょう 特 に 次 の 点 に 注 意 します 画 像 は 実 際 にブラウザ 内 で 表 示 させるサイズと 同 じサイズの 画 像 を 作 成 する 画 像 (<img>タグ)には 必 ず width 属 性 と height 属 性 を 指 定 する 表 (テーブル:<table>タグ)の 入 れ 子 を 多 用 しない ブロードバンド 向 けコンテンツ 以 外 では 1 ページあたりのファイルサイズ(HTML と 画 像 などの 合 計 ) が 100KB 以 内 となるようにしましょう 閲 覧 できるファイル 形 式 を 掲 載 する Word 形 式 や Excel 形 式 一 太 郎 形 式 などのファイルは 特 定 の OS でそのソフトウェアがインストー ルされた 環 境 でしか 閲 覧 することができません 特 定 のアプリケーションソフトに 依 存 するファイルを 掲 載 する 場 合 は 特 定 の 環 境 に 依 存 しない HTML での 情 報 も 同 時 に 掲 載 するようにしましょう 事 例 : 県 の 計 画 の 概 要 [Word ファイル 400KB] 40