Taro-０９　仕様書

Transcription

1 北 海 道 博 物 館 多 言 語 解 説 コンテンツ 制 作 業 務 仕 様 書 1 業 務 の 名 称 北 海 道 博 物 館 多 言 語 解 説 コンテンツ 制 作 業 務 2 業 務 の 概 要 と 目 的 北 海 道 博 物 館 の 施 設 案 内 及 び 総 合 展 示 に 係 る 多 言 語 解 説 コンテンツとして 総 合 展 示 ガイド( 印 刷 物 )の 入 稿 用 データ 多 言 語 対 応 ウェブサイト 北 海 道 博 物 館 の 既 往 の 資 料 管 理 システムと 連 携 可 能 なスマートフォンによる 多 言 語 解 説 サービス ( 展 示 ガイドアプリ) 同 スマートフォン 用 展 示 ガイドアプリの 表 示 サイン 同 表 示 サインの 場 所 を 示 した 案 内 リーフレットの 入 稿 用 データを 各 コンテンツ 間 にお けるデザイン 及 びサービスの 統 一 性 を 確 保 する 観 点 から 包 括 的 に 制 作 し 訪 日 外 国 人 等 への 補 助 メニューを 充 実 させる 3 業 務 の 内 容 (1) 企 画 打 ち 合 わせ 多 言 語 解 説 コンテンツ 制 作 に 係 る 目 的 及 び 展 開 方 法 について 北 海 道 博 物 館 担 当 職 員 と 認 識 を 共 有 し 制 作 するコンテンツの 企 画 演 出 編 集 等 について 打 ち 合 わせを 行 う (2) 総 合 展 示 ガイド の 入 稿 用 データ 制 作 総 合 展 示 ガイド 日 本 語 版 と 英 語 版 の2 種 類 の 入 稿 用 データを 制 作 し PDFフ ァイルで 出 力 する レイアウト 編 集 については 総 合 展 示 の 空 間 デザインや 北 海 道 博 物 館 ガイドブック 等 の 館 刊 行 物 に 則 った 形 でデザインを 行 うこと <1> 制 作 データ 仕 様 1 体 裁 :A4 判 フルカラー 144 頁 2 言 語 : 日 本 語 版 と 英 語 版 の2 種 類 ( 日 本 語 原 稿 英 語 原 稿 写 真 図 版 データは 北 海 道 博 物 館 が 受 託 者 に 支 給 する ) 3データ 形 式 inddファイル(adobe 社 InDesignで 制 作 )またはaiファイル(Adobe 社 illustrator で 制 作 ) PDFファイル( 入 稿 用 ) 4 校 正 回 数 :3 回 (3) 多 言 語 対 応 ウェブサイトの 制 作 多 言 語 対 応 の 北 海 道 博 物 館 ウェブサイトを 制 作 する 制 作 にあたっては 既 存 の 北 海 道 博 物 館 ウェブサイトをベースに 多 言 語 案 内 解 説 コンテンツを 新 規 に 追 加 する <1> 制 作 条 件 1 既 存 の 英 語 コンテンツ(トップページ+ 固 定 ページ14ページ)に 準 じ 中 国 語 ( 中 国 ) 中 国 語 ( 台 湾 ) 韓 国 語 ロシア 語 版 のコンテンツを 制 作 する 2 総 合 展 示 の 展 示 ガイドコンテンツ( 詳 細 資 料 解 説 )を 制 作 する(300コンテンツ 日 本 語 英 語 を 含 む6 言 語 1コンテンツ: 日 本 語 原 稿 で200~300 字 のテキス ト+ 写 真 1 点 ) 3 各 言 語 の 原 稿 及 び 写 真 図 版 等 は 北 海 道 博 物 館 が 受 託 者 に 支 給 する 4その 他 既 存 のウェブサイトについて 北 海 道 博 物 館 担 当 者 と 打 ち 合 わせのうえ 外 国 人 が 閲 覧 しやすく かつ 情 報 を 更 新 しやすいウェブサイトに 設 計 変 更 を 行 う ( 具 体 的 内 容 は 別 紙 1のとおり)

2 <2>サイトの 仕 様 1 契 約 日 時 点 で 最 新 のバージョンのWordPressを 用 いて 制 作 すること 2 対 応 するウェブブラウザのバージョンは 次 のとおりとする Internet Explorer 9 以 上 Google Chrome 41 以 上 Firefox 36 以 上 3パソコン タブレット 端 末 スマートフォンいずれのデバイスでも 最 適 化 された ページが 閲 覧 できる レスポンシブウェブデザインとし いずれのデバイスから も 音 声 動 画 の 再 生 が 可 能 であること 4 動 画 はYouTubeへのリンクによる 掲 載 でも 可 とするが この 場 合 は 画 面 上 に YouTubeのはめ 込 み 画 像 が 表 示 されるようにすること 5 北 海 道 ウェブアクセシビリティガイドライン( 別 紙 2)に 配 慮 したデザインとす ること 6Google Analyticsを 用 いたアクセス 解 析 を 行 うことができるよう 制 作 したページ に 北 海 道 博 物 館 が 提 供 するトラッキングコードの 埋 め 込 みを 行 うこと 7 当 館 のウェブサーバーはIDCに 設 置 しており(ハウジング) 同 時 に 稼 働 する 他 システムのセキュリティを 確 保 するため FTPによる 通 信 は 不 可 とする WordPress のメディアアップローダーからアップロードを 行 うことができない(または 適 切 でない)データは サーバーへ 直 接 必 要 なデータを 移 行 するので 北 海 道 博 物 館 にデータを 提 供 すること (4)スマートフォンによる 多 言 語 解 説 サービスの 構 築 ( 展 示 ガイドアプリ) 来 館 者 が 自 身 のスマートフォンにアプリをダウンロードすることにより 総 合 展 示 室 内 で 展 示 物 の 詳 しい 情 報 を 入 手 できる 多 言 語 解 説 サービスを 構 築 する <1> 制 作 コンテンツの 仕 様 1 制 作 数 :300コンテンツ 6 言 語 とする 21コンテンツ: 日 本 語 原 稿 で200~300 字 のテキスト+ 写 真 1 点 とする 3 言 語 : 日 本 語 英 語 中 国 語 ( 中 国 ) 中 国 語 ( 台 湾 ) 韓 国 語 ロシア 語 4 各 言 語 の 原 稿 及 び 写 真 は 北 海 道 博 物 館 が 受 託 者 に 支 給 する <2> 使 用 するアプリの 条 件 1アプリ 概 要 展 示 ガイドアプリは 他 の 博 物 館 美 術 館 においても 利 用 可 能 な 汎 用 性 のある ものを 採 用 すること また 運 用 開 始 時 にGoogle Play App Storeからダウ ンロード 可 能 なアプリであること 展 示 ガイドアプリは 利 用 者 向 けアプリ 職 員 向 け 管 理 システム 共 にクラウド 環 境 で 運 用 することとし かつ 納 品 日 から5 年 間 の 間 利 用 料 やメンテナン ス 料 などの 運 用 期 間 中 のランニングコストが 一 切 発 生 しないものとすること <3>アプリ 機 能 仕 様 1 展 示 ガイドアプリは 当 館 にて 稼 働 中 の 資 料 管 理 システム( I.B.Museum V11 博 物 館 版 早 稲 田 システム 開 発 株 式 会 社 )と 連 携 可 能 なものとすること 2 展 示 ガイドアプリはメニュー 画 面 より 他 館 を 含 め 利 用 可 能 な 館 がリスト 表 示 されること 3 展 示 ガイドアプリは 利 用 可 能 な 館 のリストから 当 該 館 を 選 択 することにより 館 の 案 内 ( 文 画 像 )ページが 表 示 されること 館 の 案 内 は 画 像 の 表 示 非 表 示 が 可 能 で 画 像 の 差 し 替 えなどが 館 職 員 にて 自 由 に 行 えること 4 展 示 ガイドアプリの 館 の 案 内 ページに 自 館 のWebサイトへのリンク 設 定 が 行 え ること 5 展 示 ガイドアプリは 対 象 資 料 の 番 号 をテンキーで 入 力 することで 選 択 可 能 である こと 6 展 示 ガイドアプリでは 番 号 選 択 後 対 象 資 料 の 名 称 画 像 文 再 生 ボタ ンが 表 示 されること 尚 対 象 資 料 の 画 像 については 非 表 示 も 可 能 とすること

3 7 展 示 ガイドアプリでは メニュー 画 面 よりガイドアプリの を 表 示 することが 出 来 ること 8 展 示 ガイドメニュー 画 面 より 対 象 となる 言 語 ( 日 本 語 中 国 語 ( 中 国 ) 中 国 語 ( 台 湾 ) 韓 国 語 ロシア 語 )を 選 択 可 能 なこと 9 展 示 ガイドアプリでは 選 択 可 能 な 言 語 については 将 来 的 な 利 用 も 鑑 み 上 記 の 他 フランス 語 ドイツ 語 イタリア 語 スペイン 語 ポルトガル 語 も 選 択 可 能 とすること 10 展 示 ガイドアプリに 表 示 する 資 料 解 説 は 音 声 データの 再 生 の 他 解 説 文 (テキス ト)のみの 表 示 動 画 (YouTube)の 再 生 が 可 能 であること 11 展 示 ガイドアプリでは コンテンツの 登 録 編 集 は 館 職 員 が 自 由 に 行 えること 12 展 示 ガイドアプリのコンテンツの 登 録 編 集 のための 管 理 システムを 有 すること 管 理 システムはコンテンツの 登 録 編 集 の 他 検 索 機 能 (キーワード 項 目 指 定 ) 出 力 機 能 ( 全 項 目 項 目 指 定 )を 有 すること また データベース 項 目 の 設 定 や レイアウトなども 自 由 に 行 えること (5)スマートフォン 用 展 示 ガイドアプリの 表 示 サインの 制 作 (4)を 利 用 者 が 使 用 する 際 に その 場 所 を 示 すための 表 示 サイン( 番 号 と 対 照 させるためのもの)を 総 合 展 示 室 内 の 北 海 道 博 物 館 が 指 示 した 場 所 に 制 作 設 置 する 印 刷 するサインのデザインは スマートフォン 解 説 のサインであることに 配 慮 したものを 新 たにデザインする <1>サイン 仕 様 1 展 示 ケースやステージ 上 に 設 置 するための 表 示 サイン( 置 き 型 ) サイズ:60 60mm 素 材 色 :アクリル 板 ( 白 ) 個 数 : 計 350 個 ( 予 備 50 個 含 む) 付 属 品 : 斜 め 置 きするための 演 示 具 (アクリル 製 のキャプション 立 て)300 個 2 壁 付 け 用 の 表 示 サイン( 壁 掛 け 型 ) サイズ: mm 素 材 色 :アクリル 板 ( 白 ) 個 数 : 計 100 個 ( 予 備 50 個 含 む) 仕 上 げ:ピン 留 めできるようにアクリル 板 の 左 右 2か 所 に 穴 空 け 加 工 (6) 表 示 サインの 場 所 を 示 した 案 内 リーフレットの 入 稿 用 データ 制 作 (4)の 場 所 を 示 した 案 内 リーフレットの 入 稿 用 データ(PDFファイル)を 制 作 する <1> 制 作 データ 仕 様 1 体 裁 :A3 判 2つ 折 4 面 フルカラー 2 言 語 :6 言 語 ( 日 本 語 英 語 中 国 語 ( 中 国 ) 中 国 語 ( 台 湾 ) 韓 国 語 ロシア 語 ) 併 記 の1 種 類 (6 言 語 原 稿 写 真 図 版 データは 北 海 道 博 物 館 が 受 託 者 に 支 給 する ) 3データ 形 式 inddファイル(adobe 社 InDesignで 制 作 )またはaiファイル(Adobe 社 illustrator で 制 作 ) PDFファイル( 入 稿 用 ) 4 校 正 回 数 :3 回 4 成 果 品 仕 様 (1) 総 合 展 示 ガイド 入 稿 用 データ DVD-ROM 等 : 正 副 計 2 組 (データファイルを 収 納 )

4 データ 形 式 :1inddファイルまたはaiファイル(Adobe 社 のIndesign illustrator 用 ) 2PDFファイル( 入 稿 用 ) (2) 多 言 語 対 応 ウェブサイト DVD-ROM 等 : 正 副 計 2 組 (コンテンツデータファイル 操 作 マニュアルを 収 納 ) 指 定 するサーバーにコンテンツデータファイルを 格 納 A4 用 紙 に 出 力 した 操 作 マニュアル (3)スマートフォン 用 展 示 ガイドアプリのコンテンツデータ DVD-ROM 等 : 正 副 計 2 組 (データファイルを 収 納 ) (4) 表 示 サイン 置 き 型 : 計 350 個 ( 予 備 50 個 含 む) 壁 掛 け 型 : 計 100 個 ( 予 備 50 個 含 む) (5) 案 内 リーフレット 入 稿 用 データ DVD-ROM 等 : 正 副 計 2 組 (データファイルを 収 納 ) データ 形 式 :1inddファイルまたはaiファイル(Adobe 社 のIndesign illustrator 用 ) 2PDFファイル( 入 稿 用 ) (1) 及 び(5)については 2016 年 2 月 末 日 までに 納 品 すること その 他 は 契 約 期 間 内 に 納 品 すること 5 版 権 成 果 品 の 版 権 は 北 海 道 博 物 館 のものとする 6 その 他 本 業 務 において 制 作 物 にかかる 著 作 権 等 に 関 する 一 切 の 権 利 は 北 海 道 博 物 館 に 帰 属 するものとする 受 託 者 は 業 務 に 当 たって 知 りえた 情 報 を 善 良 なる 管 理 者 の 注 意 をもって 管 理 し 受 領 した 情 報 を 北 海 道 博 物 館 が 合 意 する 目 的 以 外 に 使 用 しないこと 成 果 品 に 瑕 疵 があったときは 受 託 者 は 発 注 者 の 指 示 により 速 やかに 訂 正 を 行 うこと 本 仕 様 書 に 記 載 のない 事 項 についても 北 海 道 博 物 館 と 協 議 のうえ 本 業 務 内 容 に 必 要 と 認 められる 作 業 については 対 応 する

5 別 紙 1 現 行 ウェブサイトの 設 計 変 更 内 容 1 CMS(WordPress) 及 びプラグインの 更 新 WordPress( 現 在 のバージョン 4.1.1) 及 び 下 記 のプラグインを 契 約 日 現 在 で 最 新 の バージョンに 変 更 の 上 動 作 確 認 を 行 い 現 行 ウェブサイトの 動 作 に 不 具 合 があれば 修 正 を 行 うこと インストール 済 みプラグインの 種 類 Akismet Biz Calendar カスタムフィールドテンプレート Easy Pie Maintenance Mode Meta Slider Post Expirator 2 ウェブサイト 全 体 の 機 能 の 追 加 (1)ウェブサイトを 印 刷 する 際 に 印 刷 用 に 特 化 したページを 自 動 で 生 成 するプラグイ ンを 組 み 込 むこと (2) 投 稿 ページ 及 び 固 定 ページを 複 製 できるプラグインを 組 み 込 むこと 3 ウェブサイト 全 体 のデザイン 調 整 サイト 全 体 について 閲 覧 者 が 最 小 限 のページスクロールで 必 要 な 情 報 が 得 られるよ う 余 白 やコンテンツの 配 置 を 調 整 すること 4 トップページのデザイン 機 能 の 変 更 (1) 背 景 画 像 (トップページで 最 も 大 きく 表 示 される 画 像 )を 削 除 し 背 景 画 像 下 の Meta Slider( 注 目 情 報 を 表 示 する 部 分 )を 現 行 のテキスト 画 像 表 示 から 画 像 のみの 表 示 に 変 更 する Meta Slider は 季 節 ごとやイベント 開 催 時 の 館 内 の 様 子 を 適 宜 掲 載 できるよう 職 員 による 更 新 が 容 易 なものとすること (2) 講 座 体 験 イベント の 欄 を 現 行 ( 直 近 3 件 のみ 表 示 )から 開 催 まで1ヵ 月 を 切 ったイベントが 全 て 表 示 されるよう 変 更 する (トップページへの 表 示 / 非 表 示 を イベントごとに 設 定 できるようにする 点 は 現 状 どおり ) 表 示 する 情 報 は 1 日 時 2イベントカテゴリ3イベントタイトル4( 受 付 を 終 了 し たイベントのみ) 定 員 のため 受 付 を 終 了 した 旨 の 記 載 とし 開 催 までの 日 数 及 びイ ベントの 画 像 は 表 示 しない (3) 講 座 体 験 イベント 欄 の 上 部 に 開 催 中 / 近 日 開 催 の 展 示 会 の 項 目 を 設 け ること イベント 情 報 と 同 様 トップページの 表 示 / 非 表 示 を 展 示 会 ごとに 選 択 でき るようにし 開 催 中 の 展 示 会 と トップページの 表 示 を 選 択 した 展 示 会 の 情 報 がトッ プページに 掲 載 されるようにすること 掲 載 する 情 報 は 1 会 期 2 展 示 会 の 名 称 3 画 像 1 点 とすること 5 イベント 情 報 ページのデザイン 機 能 の 変 更 (1)ページ 上 部 にあるイベントカテゴリを 削 除 し イベント 一 覧 の 表 示 がページ 上 部 に 表 示 されるようにすること (2) 行 事 案 内 (PDF)がダウンロードできるようにすること

6 (3) 固 定 ページとして 過 去 のイベント のページを 新 設 し 過 去 のイベントが 一 覧 で 表 示 されるようにすること(イベントカテゴリごとのページは 不 要 ) (4)イベント 投 稿 ページを 次 のとおり 変 更 すること ア 開 催 期 間 が1 日 のイベントについては 始 期 と 終 期 を 表 示 せず 開 催 日 のみ 表 示 されるようにすること イ 現 在 ページごとに HTML を 記 述 し 作 成 しているイベント 内 容 について カスタム フィールドテンプレートの 改 修 を 行 い テンプレート 上 で 必 要 な 情 報 の 入 力 と 画 像 の 選 択 を 行 うことにより 自 動 的 にページが 生 成 されるようにすること ウ 定 員 に 達 し 受 付 を 終 了 したイベントについて チェックボックスへチェックを 行 うことにより 画 面 上 に 定 員 に 達 したため 受 付 を 終 了 しました という 文 言 が 表 示 されるようにすること また この 文 言 がトップページ 講 座 体 験 イベント の 欄 にも 表 示 されるようにすること エ 現 在 トップページに 表 示 されるカレンダーのイベント 開 催 日 を 色 つきにするた めには Biz Calendar 設 定 画 面 でイベント 開 催 日 を 入 力 する 必 要 があるが イベント 投 稿 ページを 作 成 することにより イベント 開 催 日 が 自 動 的 に 色 つきで 表 示 されるようにすること なお 開 催 期 間 が 長 期 にわたるイベントは イベント 開 催 日 を 色 つきで 表 示 する 必 要 がないことから イベントごとにカレンダーへの 反 映 する/しないが 選 択 で きるようにすること 6 その 他 本 仕 様 書 に 基 づく 実 施 が 困 難 な 場 合 またはデザイン 機 能 面 でより 効 果 的 な 方 法 が ある 場 合 は 北 海 道 博 物 館 と 受 託 者 で 協 議 し その 内 容 を 定 めることができる

7 別 紙 2

8 目 次 1 はじめに 1 2 ガイドライン 作 成 に 当 たっての 考 え 方 ウェブアクセシビリティに 関 する 取 り 組 みについて ウェブアクセシビリティ 配 慮 項 目. 4.1 ページ 作 成 に 関 する 共 通 事 項 ページには 固 有 のタイトルを 設 定 する 必 ず1つ 以 上 の 見 出 しを 設 定 する フォルダ 名 やファイル 名 は 半 角 英 数 で 適 切 に 設 定 する ページの 横 幅 を 適 切 に 設 定 する ページは 長 くなりすぎないように 配 慮 する(1) ページは 長 くなりすぎないように 配 慮 する(2) 各 種 ページは 長 くなりすぎないように 配 慮 する(3) 各 種 ページの 容 量 に 留 意 する 掲 載 情 報 は 適 切 に 管 理 する リスト 機 能 を 利 用 する ページに 到 達 する 手 段 を 複 数 用 意 する 正 しく 簡 潔 な 構 文 を 心 がける(1) 正 しく 簡 潔 な 構 文 を 心 がける(2) ~ 文 章 のコピー&ペーストをする 際 の 注 意 点 ~ ヘッダーなどの 共 通 で 使 用 する 部 品 は 統 一 する ナビゲーションを 読 み 飛 ばせるようにする テキストに 関 する 共 通 事 項 文 字 色 の 違 いについてはテキストで 補 足 する 形 や 位 置 はテキストでも 識 別 できるようにする( 情 報 の 識 別 や 指 示 ) 単 語 の 間 にスペースや 改 行 を 挿 入 しない サイト 内 で 使 用 する 単 語 は 統 一 する 文 字 色 と 背 景 色 には 十 分 なコントラスト 比 を 確 保 する(1) 文 字 色 と 背 景 色 には 十 分 なコントラスト 比 を 確 保 する(2) 参 考 : 色 の 使 用 例 について 日 付 時 間 通 貨 の 単 位 は 漢 字 で 表 記 する 単 語 や 文 章 を 太 字 にする 際 の 留 意 事 項 移 動 点 滅 するテキストを 使 用 しない 顔 文 字 を 使 用 しない 書 体 の 変 更 は 最 低 限 にする 機 種 依 存 文 字 を 使 用 しない 文 章 を 引 用 する 際 の 留 意 事 項 テキストのサイズは 利 用 者 が 変 更 できるようにする リンクの 設 定 に 関 する 共 通 事 項 リンク 先 を 推 測 できるようなテキストで 表 記 する リンクの 文 字 色 及 び 背 景 色 を 設 定 しない リンク 画 像 にはリンク 先 がわかるよう 代 替 テキストを 設 定 する 隣 接 する 画 像 とテキストに 対 する 同 一 のリンクは 一 つにまとめる リンク 切 れがないか 確 認 する

9 4.4 画 像 の 使 用 に 関 する 共 通 事 項 グラフなどで 色 の 違 いによって 情 報 を 提 供 している 場 合 は 模 様 も 併 用 する 画 像 化 されたテキストをできるかぎり 使 わない 画 像 には 代 替 テキストを 設 定 する 情 報 量 の 多 い 画 像 には 画 像 を するテキストを 別 途 提 供 する 表 の 使 用 に 関 する 事 項 テーブル( 表 )を 使 用 する 場 合 は 単 純 な 構 造 にすることで 読 み 上 げ 順 序 に 配 慮 する ダウンロードデータに 関 する 事 項 データファイルの 形 式 と 容 量 を 表 記 する データファイルの 容 量 を 小 さくするよう 配 慮 する PDFファイルで 情 報 を 提 供 する 場 合 は テキストによる 代 替 情 報 を 提 供 する ダウンロードデータを 利 用 するためのプログラムの 入 手 先 を 明 示 する 入 力 フォームに 関 する 事 項 アンケートなどの 各 項 目 に 入 力 すべき 内 容 を する 利 用 者 に 入 力 操 作 を 行 わせる 際 の 留 意 事 項 プルダウンメニューはマウスだけでなくキーボードでも 操 作 できるようにする キーボード 操 作 に 関 する 事 項 利 用 者 の 意 図 しないページの 変 化 が 起 きないようにする キーボードだけで すべての 操 作 ができるようにする フォーカスについて 音 声 動 画 に 関 する 事 項 GIFアニメーション 画 像 を 使 用 する 際 の 留 意 事 項 音 声 や 映 像 の 代 替 手 段 を 用 意 する 音 声 や 映 像 の 再 生 は 利 用 者 が 制 御 できるようにする せん 光 に 関 する 事 項 せん 光 を 用 いた 表 現 をしない 特 定 の 技 術 その 他 に 関 する 事 項 言 語 コードを 設 定 する 複 雑 なレイアウトや 装 飾 などは スタイルシートを 用 いて 表 現 する Flash Javaアプレット JavaScriptを 使 用 しない フレームを 使 用 しない イメージマップを 使 用 する 場 合 には 適 切 な 代 替 テキストを 設 定 する チェックリスト.. 65

10 1 はじめに 1 はじめに 近 年 インターネットの 急 速 な 進 展 や スマートフォンの 急 速 な 普 及 など 情 報 入 手 手 段 の 多 様 化 に 伴 い ネッ ト 系 広 報 をめぐる 社 会 経 済 情 勢 は 目 まぐるしく 変 化 しています ネット 系 広 報 の 基 本 ツールであるウェブサイトは 文 字 や 画 像 など 様 々な 情 報 を 多 くの 利 用 者 に 届 けるツー ルのひとつです インターネットの 浸 透 により 高 齢 者 や 障 がい 者 にとってもウェブサイトは 重 要 な 情 報 源 となっていますが 情 報 を 提 供 する 側 が 適 切 に 対 応 をしないと 高 齢 者 や 障 がい 者 がウェブサイトから 情 報 を 取 得 できない 操 作 で きないといった 問 題 が 発 生 します このため 高 齢 者 や 障 がい 者 を 含 めた 誰 もがウェブサイトを 支 障 なく 利 用 できるよう ウェブアクセシビリティ の 重 要 性 を 理 解 し 適 切 な 対 応 を 行 うことが 重 要 です ウェブアクセシビリティとは 高 齢 者 や 障 がい 者 といった ウェブサイトの 利 用 に 何 らかの 制 約 があったり 利 用 に 不 慣 れな 人 々を 含 めて 誰 もがウェブサイトで 提 供 される 情 報 や 機 能 を 支 障 なく 利 用 できることを 指 していま す このための 指 針 として ウェブアクセシビリティに 関 する 日 本 工 業 規 格 が 定 められるとともに 総 務 省 で みんな の 公 共 サイト 運 用 モデル が 定 められ 地 方 公 共 団 体 等 に 対 し ウェブアクセシビリティに 関 する 方 針 を 策 定 し 公 開 するよう 求 めています みんなの 公 共 サイト 運 用 モデル また 平 成 28 年 度 に 施 行 される 障 害 者 差 別 解 消 法 ( 通 称 )では 障 がい 者 の 社 会 的 障 壁 を 取 り 除 くために 必 要 で 合 理 的 な 配 慮 を 行 うこととされており ウェブサイトを 通 した 情 報 発 信 についても 同 様 の 配 慮 が 必 要 とさ れています 障 害 を 理 由 とする 差 別 の 解 消 の 推 進 に 関 する 法 律 このような 背 景 から 北 海 道 としてもウェブアクセシビリティに 配 慮 するため 北 海 道 公 式 ウェブサイト 全 7 万 ページのうち12,000ページ 以 上 を 対 象 に 現 状 を 把 握 その 結 果 を 踏 まえ 達 成 基 準 及 びポリシーを 策 定 するとと もに 各 部 局 のトップページやアクセス 数 が 多 いページなど 主 要 な 約 2,500ページを 対 象 に 改 修 を 行 ったほか 各 職 員 による 今 後 の 運 用 を 想 定 し 本 ガイドラインを 作 成 するなど 一 連 の 事 業 を 平 成 25 年 度 から26 年 度 にか けて 委 託 業 務 により 実 施 してきたところです 本 ガイドラインをCMS 操 作 書 と 併 せて 活 用 することで ウェブアクセシビリティ 向 上 に 努 め 利 用 者 がよ り 利 用 しやすいウェブサイトの 構 築 に 努 めてください 1

11 2 ガイドライン 作 成 に 当 っての 考 え 方 2 ガイドライン 作 成 に 当 たっての 考 え 方 本 ガイドラインは 以 下 に 示 す 利 用 者 を 想 定 して 作 成 しています (1)ウェブサイト 利 用 者 年 齢 や 性 別 身 体 の 障 がいの 有 無 などに 関 らず ウェブサイトを 利 用 するすべての 利 用 者 (2)ウェブサイトを 利 用 する 環 境 ウェブサイトを 利 用 するさまざまな 環 境 を 想 定 しています デスクトップ 型 パソコンやノート 型 パソコン モバイル 端 末 などハードウェアの 違 い ブロードバンドやナローバンドなどの 通 信 環 境 の 違 い Windows やMacintosh などのOS( 基 本 ソフト)の 違 い Internet Explorer やFirefox などインターネットブラウザの 違 い キーボードやマウスなど 操 作 機 器 の 違 い カラーやモノクロなどディスプレイの 表 示 機 器 の 違 い 身 体 障 がいの 状 況 に 応 じた 入 出 力 機 器 などの 違 い (3) 適 用 範 囲 下 記 のドメイン 以 下 に 配 置 されているページで コンテンツマネジメントシステム(CMS)のテンプ レート 機 能 を 用 いたページを 対 象 とします なお JavaScriptを 用 いているページについては 対 象 範 囲 から 除 外 するものとします (4) 参 考 とする 規 格 等 日 本 工 業 規 格 JIS X : 2010 高 齢 者 障 害 者 等 配 慮 設 計 指 針 - 情 報 通 信 における 機 器 ソフトウェア 及 びサービス- 第 3 部 :ウェブコンテンツ 総 務 省 みんなの 公 共 サイト 運 営 モデル W3C ウェブコンテンツ アクセシビリティガイドライン2.0 (WCAG 2.0) 2

12 3 ウェブアクセシビリティに 関 する 取 り 組 みについて 3 ウェブアクセシビリティに 関 する 取 り 組 みについて 北 海 道 では ウェブアクセシビリティ 向 上 のため 各 職 員 が 以 下 の 通 り 取 り 組 んでいきます (1) 取 り 組 み 体 制 について 北 海 道 公 式 ウェブサイトの 管 理 運 営 を 行 う 広 報 広 聴 課 が コンテンツを 作 成 する 各 職 員 へ 本 ガイド ラインなどの 周 知 に 向 けた 研 修 などの 取 り 組 みを 行 うことで ウェブアクセシビリティ 向 上 に 取 り 組 んで いきます (2) 職 員 の 意 識 向 上 について 本 ガイドラインを 周 知 し CMS 操 作 書 と 併 せて 運 用 することで ページ 作 成 に 携 わる 職 員 がウェ ブアクセシビリティ 向 上 に 取 り 組 んでいきます 職 員 がページを 作 成 更 新 する 場 合 は チェックリストを 適 宜 活 用 するなどウェブアクセシビリティの 達 成 状 況 や 留 意 点 を 確 認 し 適 切 な 配 慮 を 行 った 後 に 公 開 していくよう 努 めます (3) 委 託 業 者 への 取 り 組 み 今 後 委 託 業 者 によるページ 制 作 にあたっては 本 ガイドラインの 趣 旨 を 踏 まえウェブアクセシビリティ 配 慮 に 関 する 事 項 を 示 し 遵 守 を 求 めていきます (4) 検 証 について ウェブアクセシビリティに 関 する 対 応 状 況 については 本 ガイドラインやチェックリストを 使 用 して 作 成 更 新 したページはもとより 既 存 のページについても 機 会 を 見 ながら 検 証 していきます 3

13 4 ウェブアクセシビリティ 配 慮 項 目 4 ウェブアクセシビリティ 配 慮 項 目 本 ガイドラインに 示 すウェブアクセシビリティ 配 慮 項 目 として ウェブアクセシビリティに 関 する 日 本 工 業 規 格 を 元 に 北 海 道 公 式 ウェブサイトにおいて 重 点 的 に 配 慮 すべき 項 目 を 以 下 に 設 定 しました 本 ガイドラインは 既 に CMS 操 作 書 が 運 用 されている 実 態 があることから ウェブアクセシビリ ティのためのマニュアルの 役 割 を 果 たすこの 章 に 配 慮 項 目 毎 の を 記 載 するとともに CMS 上 における 具 体 の 操 作 については イントラネット 上 に 掲 載 したCMS 操 作 書 (HTML 版 )の 該 当 ページ へのリンクを 設 定 し 簡 単 に 参 照 できるようにするなど よりウェブアクセシビリティを 理 解 し 実 践 しやすく なるよう 工 夫 しました コンテンツ 管 理 システム 利 用 支 援 のページ なお 北 海 道 公 式 ウェブサイトでは 特 定 の 技 術 (CSSやJavaScriptなど)を 原 則 使 用 禁 止 としていま すが 作 成 の 都 合 上 委 託 業 者 やホームページ 編 集 の 詳 しい 職 員 がやむなく 使 用 する 場 合 代 替 手 段 による 情 報 提 供 や 当 該 ページの 更 新 マニュアル 作 成 などにより 担 当 職 員 の 変 更 後 もページ 更 新 が 可 能 になるなど 運 用 に 支 障 ないよう 対 策 を 必 ず 行 うよう 求 めています ウェブアクセシビリティ 配 慮 項 目 一 覧 本 ガイドラインに 示 すウェブアクセシビリティ 配 慮 項 目 として ウェブアクセシビリティに 関 する 日 本 工 業 規 格 を 元 に 北 海 道 公 式 ウェブサイトにおいて 重 点 的 に 配 慮 すべき 項 目 を 設 定 しました 4.1 ページ 作 成 に 関 する 共 通 事 項 ページには 固 有 のタイトルを 設 定 する 必 ず1つ 以 上 の 見 出 しを 設 定 する フォルダ 名 やファイル 名 は 半 角 英 数 で 適 切 に 設 定 する ページの 横 幅 を 適 切 に 設 定 する ページは 長 くなりすぎないように 配 慮 する(1) ページは 長 くなりすぎないように 配 慮 する(2) 各 種 ページは 長 くなりすぎないように 配 慮 する(3) 各 種 ページの 容 量 に 留 意 する 掲 載 情 報 は 適 切 に 管 理 する リスト 機 能 を 利 用 する ページに 到 達 する 手 段 を 複 数 用 意 する 正 しく 簡 潔 な 構 文 を 心 がける(1) 正 しく 簡 潔 な 構 文 を 心 がける(2) ~ 文 章 のコピー&ペーストをする 際 の 注 意 点 ~ ヘッダーなどの 共 通 で 使 用 する 部 品 は 統 一 する ナビゲーションを 読 み 飛 ばせるようにする 4.2 テキストに 関 する 共 通 事 項 文 字 色 の 違 いについてはテキストで 補 足 する 形 や 位 置 はテキストでも 識 別 できるようにする( 情 報 の 識 別 や 指 示 ) 単 語 の 間 にスペースや 改 行 を 挿 入 しない サイト 内 で 使 用 する 単 語 は 統 一 する 文 字 色 と 背 景 色 には 十 分 なコントラスト 比 を 確 保 する(1) 文 字 色 と 背 景 色 には 十 分 なコントラスト 比 を 確 保 する(2) 参 考 : 色 の 使 用 例 について 日 付 時 間 通 貨 の 単 位 は 漢 字 で 表 記 する 単 語 や 文 章 を 太 字 にする 際 の 留 意 事 項 4

14 4 ウェブアクセシビリティ 配 慮 項 目 移 動 点 滅 するテキストを 使 用 しない 顔 文 字 を 使 用 しない 書 体 の 変 更 は 最 低 限 にする 機 種 依 存 文 字 を 使 用 しない 文 章 を 引 用 する 際 の 留 意 事 項 テキストのサイズは 利 用 者 が 変 更 できるようにする 4.3 リンクの 設 定 に 関 する 共 通 事 項 リンク 先 を 推 測 できるようなテキストで 表 記 する リンクの 文 字 色 及 び 背 景 色 を 設 定 しない リンク 画 像 にはリンク 先 がわかるよう 代 替 テキストを 設 定 する 隣 接 する 画 像 とテキストに 対 する 同 一 のリンクは 一 つにまとめる リンク 切 れがないか 確 認 する 4.4 画 像 の 使 用 に 関 する 共 通 事 項 グラフなどで 色 の 違 いによって 情 報 を 提 供 している 場 合 は 模 様 も 併 用 する 画 像 化 されたテキストをできるかぎり 使 わない 画 像 には 代 替 テキストを 設 定 する 情 報 量 の 多 い 画 像 には 画 像 を するテキストを 別 途 提 供 する 4.5 表 の 使 用 に 関 する 事 項 テーブル( 表 )を 使 用 する 場 合 は 単 純 な 構 造 にすることで 読 み 上 げ 順 序 に 配 慮 する 4.6 ダウンロードデータに 関 する 事 項 データファイルの 形 式 と 容 量 を 表 記 する データファイルの 容 量 を 小 さくするよう 配 慮 する PDFファイルで 情 報 を 提 供 する 場 合 は テキストによる 代 替 情 報 を 提 供 する ダウンロードデータを 利 用 するためのプログラムの 入 手 先 を 明 示 する 4.7 入 力 フォームに 関 する 事 項 アンケートなどの 各 項 目 に 入 力 すべき 内 容 を する 利 用 者 に 入 力 操 作 を 行 わせる 際 の 留 意 事 項 プルダウンメニューはマウスだけでなくキーボードでも 操 作 できるようにする 4.8 キーボード 操 作 に 関 する 事 項 利 用 者 の 意 図 しないページの 変 化 が 起 きないようにする キーボードだけで すべての 操 作 ができるようにする フォーカスについて 4.9 音 声 動 画 に 関 する 事 項 GIFアニメーション 画 像 を 使 用 する 際 の 留 意 事 項 音 声 や 映 像 の 代 替 手 段 を 用 意 する 音 声 や 映 像 の 再 生 は 利 用 者 が 制 御 できるようにする 4.10 せん 光 に 関 する 事 項 せん 光 を 用 いた 表 現 をしない 4.11 特 定 の 技 術 その 他 に 関 する 事 項 言 語 コードを 設 定 する 複 雑 なレイアウトや 装 飾 などは スタイルシートを 用 いて 表 現 する Flash Javaアプレット JavaScriptを 使 用 しない フレームを 使 用 しない イメージマップを 使 用 する 場 合 には 適 切 な 代 替 テキストを 設 定 する 5

15 4 ウェブアクセシビリティ 配 慮 項 目 各 項 目 の ウェブアクセシビリティ 配 慮 項 目 の 解 説 ページでは いくつかのカテゴリや 項 目 に 沿 って しています このページでは その 構 成 と 項 目 についての をします タイトル ウェブアクセシビリティ 配 慮 項 目 のタイトルです ウェブアクセシビリ ティ 配 慮 項 目 につい て 具 体 的 に し ています 該 当 JIS 項 目 該 当 するJIS 規 格 の 項 目 です 等 級 JIS 規 格 によって 定 められたウェブ アクセシビリティ 配 慮 のレベルで す 最 も 優 先 すべき 配 慮 項 目 がA となっており その 上 位 のレベル としてAA さらに 上 位 のレベルとし てAAAが 用 意 されています ( 本 書 ではAAまでを 掲 載 ) 対 象 者 ウェブアクセシビリティ 配 慮 項 目 が 特 にどの 利 用 者 に 配 慮 しているの かをアイコンで 示 しています アイコンの 視 覚 に 障 がいがある 人 全 盲 や 色 弱 の 利 用 者 など 視 覚 による 情 報 入 手 が 難 しい 利 用 者 に 対 しての 配 慮 項 目 です 聴 覚 に 障 がいがある 人 音 が 聞 き 取 りにくいなど 聴 覚 によ る 情 報 入 手 が 難 しい 利 用 者 に 対 し ての 配 慮 項 目 です CMS 操 作 書 の 記 載 内 容 などに 沿 っ て を し ています テクニカルアイコン CMSの 標 準 画 面 以 外 でページを 編 集 する 際 に 必 要 となる 技 術 的 な 操 作 方 法 の です 身 体 能 力 に 障 がいがある 人 肢 体 不 自 由 の 利 用 者 など マウス やキーボードなどの 操 作 が 難 しい 利 用 者 に 対 しての 配 慮 項 目 です ページの 閲 覧 に 時 間 が かかってしまう 人 など ウェブページの 内 容 を 理 解 するの に 時 間 がかかる 利 用 者 などに 対 し ての 配 慮 項 目 です これらの 利 用 者 は 音 声 読 み 上 げソ フトなどの 補 助 ツールを 使 用 すること が 想 定 されます 補 足 補 足 情 報 を 記 載 して います CMS 操 作 書 該 当 ページ CMS 操 作 書 に 該 当 ページがある 場 合 ページを 示 すとと もに ネット 版 にリンク しています 優 先 度 この 基 準 を 達 成 する 優 先 度 を3パ ターンで 示 しています 必 須 必 ず 達 成 してください 推 奨 可 能 な 限 り 達 成 してく ださい 参 考 達 成 するには 高 度 な 技 術 が 必 要 ですが 達 成 に 向 け た 取 組 を 進 めることが 望 まれます 6

16 4.1 ページ 作 成 に 関 する 共 通 事 項 ページには 固 有 のタイトルを 設 定 する 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 必 須 書 物 や 書 類 にタイトルが 必 要 であるように ウェブサイトにおけるページにもタイトルが 必 要 です タイトルは 利 用 者 と 検 索 エンジンに 対 してページの 内 容 を 端 的 に 伝 えるものです また 音 声 読 み 上 げソフトは 最 初 にページのタイトルを 読 み 上 げることで 利 用 者 にページの 内 容 を 伝 達 する ことから タイトルが 不 適 切 である 場 合 ページの 概 要 を 把 握 するのが 困 難 となります 他 のページとの 識 別 ができ ページの 内 容 が 判 断 しやすいタイトルをつける 複 数 ページが 同 じタイトルとなっている 場 合 は 内 容 に 合 うよう 修 正 する HTML headタグ 内 のtitleタグを 用 いて ページタイトルを 指 定 する タイトルは ブラウザのタイトルバーに 表 示 されるだけでなく ブックマーク(お 気 に 入 り)への 登 録 や 検 索 エンジンの 結 果 表 示 にも 使 用 される ここでは タイトルバーにタイトルが 表 示 されている 状 況 を 例 として している 良 い 例 適 切 なタイトルをつけた 場 合 ページの 内 容 が 判 断 できる 悪 い 例 タイトルが 重 複 している 場 合 ページの 内 容 が 判 断 できない CMS 操 作 書 (PDF 版 ) 39ページ(ページタイトルの 入 力 ) WEB 版 にリンクする 場 合 はこちら >> 7

17 4.1 ページ 作 成 に 関 する 共 通 事 項 必 ず1つ 以 上 の 見 出 しを 設 定 する 該 当 JIS 項 目 : 等 級 : A AA 優 先 度 : 必 須 タイトル はページの 内 容 を 端 的 に 要 約 したものですが 見 出 し はページ 内 の 章 や 節 の 最 初 に 置 かれる 表 題 となるものです 書 物 や 書 類 の 章 ごとに 表 題 があるように ページ 内 にも 内 容 を 適 切 に 伝 えるために 見 出 し を 設 定 する 必 要 があります 色 やフォントのサイズなどの 装 飾 で 見 出 しを 表 している 場 合 がありますが 音 声 読 み 上 げソフトの 利 用 者 に は 文 章 の 一 部 のようにしか 聞 こえないので 本 文 を 読 み 終 わるまでページの 概 要 を 把 握 できません そのため 見 出 し 機 能 を 設 定 し 早 い 段 階 で 適 切 に 概 要 を 理 解 していただく 必 要 があります ページの 最 初 に 見 出 しの 範 囲 を 選 択 し 編 集 アイコン からHeading1を 設 定 する Heading1は 必 ず1ページに1つだけ 設 定 する 編 集 アイコンを 使 い 各 章 の 最 初 にHeading2からHeading6を 設 定 する 数 字 が 大 きくなるにつれて 下 位 の 見 出 しになる HTML 見 出 しとなるテキストに 対 して<h1>テキスト<h1>などとなるように 設 定 する 音 声 読 み 上 げソフトには 見 出 しだけを 読 み 上 げる 機 能 や 見 出 しの 前 にメッセージ 音 を 鳴 らすなどの 機 能 があり 時 間 を 必 要 とせず かつ 的 確 にページの 概 要 を 把 握 することができる 良 い 例 適 切 な 見 出 しを 設 定 した 場 合 Heading2 Heading2 Heading1 見 出 しだけを 抜 き 出 して 読 み 上 げることができる ためページの 概 要 を 把 握 しやすい 悪 い 例 装 飾 のみで 見 出 しを 設 定 している 場 合 装 飾 目 的 で 見 出 しを 設 定 している 場 合 文 字 を 大 きく 太 字 にしているだけで 見 出 し(Heading)は 設 定 されていない 見 出 しだけを 抜 き 出 して 読 み 上 げることがで きず 文 章 がひたすら 読 み 上 げられるように 聞 こえるため ページの 概 要 を 把 握 しにくい Heading2 本 来 見 出 しではないところで メッセージ 音 が なってしまい 混 乱 を 招 く CMS 操 作 書 (PDF 版 ) 166ページ( 文 字 を 見 出 しとして 設 定 ) WEB 版 にリンクする 場 合 はこちら >> 8

18 4.1 ページ 作 成 に 関 する 共 通 事 項 フォルダ 名 やファイル 名 は 半 角 英 数 で 適 切 に 設 定 する 該 当 JIS 項 目 : なし 等 級 : なし 優 先 度 : 推 奨 URLは インターネット 上 の 住 所 とでも 言 うべきもので ドメインやフォルダ 名 ファイル 名 によって 構 成 されてお り その 内 容 は 住 所 としての 役 割 を 果 たすため 固 有 のものである 必 要 があります URLからもそのページの 内 容 を 推 測 できることが 望 ましいため 単 なる 数 字 の 羅 列 や 意 味 のない 文 字 列 は 不 適 切 です 直 接 入 力 されることもあるため 長 すぎるものもまた 不 適 切 です また 日 本 語 や 全 角 英 数 字 を 使 用 した 場 合 ページが 正 しく 表 示 されない 不 具 合 が 発 生 する 可 能 性 があるた め フォルダ 名 ファイル 名 は 半 角 英 数 のみを 使 用 し 適 切 に 設 定 する 必 要 があります 半 角 英 数 ( 小 文 字 )を 使 用 しフォルダ 名 ファイル 名 を 設 定 する ファイル 名 から 内 容 が 推 測 できるように 努 め 長 すぎないよう 考 慮 する 良 い 例 適 切 なフォルダ 名 ファイル 名 をつけた 場 合 フォルダ 名 ファイル 名 アドレスが 短 く 内 容 を 類 推 できる 悪 い 例 フォルダ 名 ファイル 名 が 長 い 場 合 フォルダ 名 ファイル 名 アドレスを 直 接 入 力 するのが 難 しい CMS 操 作 書 (PDF 版 ) 77~81ページ(ファイル 名 変 更 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 9

19 4.1 ページ 作 成 に 関 する 共 通 事 項 ページの 横 幅 を 適 切 に 設 定 する 該 当 JIS 項 目 : なし 等 級 : なし 優 先 度 : 推 奨 ページを 閲 覧 するため 使 用 するモニタは 大 きいもの 小 さいもの 正 方 形 のもの 長 方 形 のものなど 大 きさも 形 も 様 々です 利 用 者 のモニタを 考 慮 し どのようなモニタでも 見 やすいものとするためにページの 横 幅 を 一 定 数 値 以 内 に 設 定 する 必 要 があります これは 横 幅 が 大 きいページを 作 成 した 場 合 横 幅 の 狭 いモニタを 使 用 している 利 用 者 が 縦 だけでなく 横 にも スクロール( 移 動 )が 必 要 となり ページを 閲 覧 する 時 間 の 増 加 を 避 けるための 配 慮 となります 平 成 27 年 2 月 現 在 北 海 道 公 式 ウェブサイトの 横 幅 は 750ピクセルで 作 成 されています テーブルやセル 画 像 などに 横 幅 を 指 定 する 場 合 は750ピクセル 以 内 の 数 値 を 指 定 する HTML table 要 素 やtd 要 素 th 要 素 のwidth 属 性 は 750 以 下 の 数 値 を 指 定 する 良 い 例 ページ 全 体 が 見 渡 せ ページを 見 やすい 悪 い 例 大 きいモニタ 小 さいモニタ ページ 全 体 が 見 渡 せず ページが 見 にくい 大 きいモニタ 小 さいモニタ CMS 操 作 書 (PDF 版 ) 132ページ(テーブル 挿 入 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 10

20 4.1 ページ 作 成 に 関 する 共 通 事 項 ページは 長 くなりすぎないように 配 慮 する(1) 該 当 JIS 項 目 : なし 等 級 : なし 優 先 度 : 推 奨 長 すぎるページは 見 るのが 面 倒 になることがあります また 利 用 者 からの 声 として ページが 長 すぎて 使 い にくい 情 報 を 探 しにくい などという 指 摘 が 寄 せられることがあります また 弱 視 の 利 用 者 や 読 み 上 げソフトなどの 利 用 者 は 情 報 を 取 得 するためにより 多 くの 時 間 が 必 要 となりま す さらに 上 肢 に 障 がいがある 利 用 者 は スクロール 操 作 が 困 難 な 場 合 があります こうしたことから ページは 長 くなりすぎないように 配 慮 する 必 要 があります ページの 長 さは 650ピクセルを1 画 面 とし 約 3 画 面 以 内 とすることが 望 ましい ページ 内 容 の 区 切 りで 別 ページに 分 割 する 参 照 新 着 情 報 欄 がある 場 合 過 去 の 新 着 情 報 を 別 ページに 分 割 する 参 照 例 外 縦 長 のページ 構 成 が 必 要 不 可 欠 なページには ページ 先 頭 に 簡 潔 な の 挿 入 ページ 内 リンク ページ 先 頭 に 戻 る リンク 設 定 などの 工 夫 をする 参 照 良 い 例 適 切 な 長 さのページ 悪 い 例 不 適 切 な 長 さのページ 650ピクセル 650ピクセル 最 下 部 までに 約 3 回 スクロールが 必 要 最 下 部 までに 約 11 回 スクロールが 必 要 適 切 な 長 さにすることで 見 やすいページとなる ページが 長 いため 目 的 の 情 報 を 探 すのに 時 間 が かかり 見 にくいページとなる CMS 操 作 書 (PDF 版 ) 該 当 なし 11

21 4.1 ページ 作 成 に 関 する 共 通 事 項 ページは 長 くなりすぎないように 配 慮 する(2) 各 種 ページ 内 容 の 区 切 りで 別 ページに 分 割 する A について 1ページ 目 について 1. について 2. について 3. について クリック 1. について 1-1. について 1-2. について 1-3. について A B C 1. について 1-1. について 1-2. について 1-3. について 2. について 2-1. について 2-2. について 2-3. について C 3. について 3-1. について 3-2. について 3-3. について B 2. については こちらをクリック について 2ページ 目 2. について 2-1. について 2-2. について 2-3. について 3. については こちらをクリック について 3ページ 目 3. について 3-1. について 3-2. について 3-3. について について にもどる CMS 操 作 書 (PDF 版 ) 42ページ(リンク 設 定 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 12

22 4.1 ページ 作 成 に 関 する 共 通 事 項 ページは 長 くなりすぎないように 配 慮 する(3) 各 種 過 去 の 新 着 情 報 を 別 ページに 分 割 する 新 着 情 報 2014 年 11 月 10 日 2014 年 10 月 30 日 2014 年 10 月 1 日 2014 年 9 月 22 日 2014 年 9 月 15 日 2014 年 9 月 3 日 2014 年 8 月 29 日 2010 年 11 月 11 日 新 着 情 報 2014 年 11 月 10 日 2014 年 10 月 30 日 2014 年 10 月 1 日 2014 年 9 月 22 日 過 去 の 新 着 情 報 はこちら クリック 過 去 の 新 着 情 報 2014 年 9 月 15 日 2014 年 9 月 3 日 2014 年 8 月 29 日 2014 年 8 月 6 日 2014 年 7 月 19 日 2014 年 7 月 10 日 2010 年 11 月 11 日 例 外 : 縦 長 のページ 構 成 が 必 要 不 可 欠 なページには ページ 先 頭 に 簡 潔 な の 挿 入 ページ 内 リンク ページ 先 頭 に 戻 る リンク 設 定 などの 工 夫 をする について 1. について へ 2. について へ クリックで 目 的 の 項 目 までジャンプできる 1. について ページの 先 頭 へ クリックでページの 先 頭 までジャンプできる 2. について ページの 先 頭 へ CMS 操 作 書 (PDF 版 ) 42ページ(リンク 設 定 方 法 ) 128ページ(ページ 内 リンクの 設 定 方 法 ) WEB 版 にリンクする 場 合 はこちら >> WEB 版 にリンクする 場 合 はこちら >> 13

23 4.1 ページ 作 成 に 関 する 共 通 事 項 ページの 容 量 に 留 意 する 該 当 JIS 項 目 : なし 等 級 : なし 優 先 度 : 推 奨 利 用 者 の 中 には 回 線 速 度 の 遅 い 回 線 や 性 能 の 低 い 機 種 を 使 用 している 方 々がいます ファイルサイズが 必 要 以 上 に 大 きい 場 合 閲 覧 時 の 読 み 込 みに 時 間 がかかることにより 必 要 な 情 報 を 取 得 しにくくなったり 利 用 者 がストレスを 感 じたりする 場 合 があります そうした 利 用 者 も 使 いやすいページとするために 容 量 に 留 意 することが 必 要 となります ページの 不 要 な 装 飾 をしない 画 像 の 枚 数 やサイズに 留 意 する 利 用 するファイルのサイズは 基 本 的 には1MB 以 内 とし ボリュームの ある 資 料 などであっても3MBを 超 えないようにする ファイルサイズの 大 きい 画 像 を 掲 載 する 必 要 がある 場 合 は サイズを 落 とした 画 像 のサムネイルを 掲 載 するとともに 元 の 画 像 を 別 ページに 掲 載 し リンクを 設 定 する 良 い 例 悪 い 例 ページが 短 時 間 で 表 示 される 画 像 が 多 用 され また ファイルサイズの 大 きい 画 像 があることから ページの 表 示 に 時 間 を 要 する サムネイルをクリック すると 拡 大 写 真 の ページに 移 動 する CMS 操 作 書 (PDF 版 ) 120ページ( 画 像 のリンク 設 定 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 14

24 4.1 ページ 作 成 に 関 する 共 通 事 項 掲 載 情 報 は 適 切 に 管 理 する 該 当 JIS 項 目 : なし 等 級 : なし 優 先 度 : 推 奨 ウェブサイトに 掲 載 する 情 報 には 年 月 の 経 過 とともに 現 状 と 合 わなくなるものがあります 掲 載 情 報 の 更 新 が 滞 り 古 い 情 報 が 掲 載 され 続 けているページや 数 カ 月 以 上 前 に 掲 載 された 情 報 が 新 着 情 報 として 掲 載 されているページは 利 用 者 に 不 適 切 な 情 報 を 提 供 することにより サイトの 信 頼 が 損 なわれ る 場 合 があります そのため 掲 載 情 報 を 適 切 に 管 理 することは 非 常 に 重 要 です 一 つの 項 目 の 掲 載 件 数 は10 件 ほどを 目 安 にし 多 くなり 過 ぎないようにする 掲 載 情 報 は 掲 載 日 数 を 設 定 し 運 用 する 古 い 情 報 が 掲 載 され 続 けていないか 定 期 的 に 確 認 する 新 着 情 報 をアーカイブとして 保 存 する 必 要 がある 場 合 は 過 去 の 新 着 情 報 など 別 ページを 用 意 し 順 次 移 行 するようにする 良 い 例 適 切 に 管 理 されている 場 合 掲 載 情 報 の 件 数 が 適 切 であり 見 やすい 悪 い 例 掲 載 件 数 が 多 く 古 い 情 報 が 掲 載 されている 場 合 掲 載 件 数 が 多 く 目 的 のページを 見 つけにくい すでに 終 了 したイベントが 掲 載 されている CMS 操 作 書 (PDF 版 ) 該 当 なし 15

25 4.1 ページ 作 成 に 関 する 共 通 事 項 リスト 機 能 を 利 用 する 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 推 奨 北 海 道 公 式 ウェブサイトでは などを 使 用 して 箇 条 書 きとしている 場 合 が 多 く 見 られます 音 声 読 み 上 げソフトの 利 用 者 は これらが くろしかく くろまる と 読 まれるなどにより その 部 分 が 箇 条 書 き であることを 認 識 することが 困 難 になります そのため リスト 機 能 を 設 定 し 適 切 に 情 報 を 伝 える 必 要 があります リストに 設 定 する 範 囲 を 選 択 し 編 集 アイコン ( 箇 条 書 き) ( 段 落 番 号 付 き)のいずれかを 用 いてリストを 設 定 する HTML ul olタグを 用 いて リストを 設 定 する ulは 箇 条 書 きリスト olは 段 落 番 号 付 きリストに 使 用 する 音 声 読 み 上 げソフトには リスト 機 能 を 設 定 した 部 分 にメッセージ 音 を 鳴 らし 箇 条 書 きや 段 落 であることを 伝 達 する 機 能 などがある 良 い 例 リスト 機 能 を 使 用 した 場 合 箇 条 書 きや 段 落 であることが どの 利 用 者 にも 伝 わり やすくなる 箇 条 書 きリスト 段 落 番 号 付 きリスト 悪 い 例 リスト 機 能 を 使 用 していない 場 合 メッセージ 音 が 鳴 らず 単 に 続 けて 読 まれるだけのた め 箇 条 書 きであることを 認 識 することが 困 難 先 頭 が くろしかく 先 頭 が 数 字 箇 条 書 きのような 配 置 だがリスト 機 能 が 使 用 されていない 場 合 メッセージ 音 が 鳴 らず 単 に 続 けて 読 まれるだけのため 新 着 情 報 リストの 一 覧 であることを 認 識 することが 困 難 リスト 機 能 なし CMS 操 作 書 (PDF 版 ) ページ( 文 字 を 箇 条 書 きにする) WEB 版 にリンクする 場 合 はこちら >> 16

26 4.1 ページ 作 成 に 関 する 共 通 事 項 ページに 到 達 する 手 段 を 複 数 用 意 する 該 当 JIS 項 目 : 等 級 : AA 優 先 度 : 推 奨 ( 一 部 対 応 済 み) ページに 対 して 複 数 の 到 達 手 段 を 設 けることで 利 用 者 がサイト 内 の 様 々なページを 行 き 来 することができ 主 要 な 情 報 へたどりつきやすくなるなど より 使 いやすいサイトになります 利 用 者 が 使 いやすい 分 類 イメージしやすい 経 路 でたどりつけるよう 各 部 局 のトップページなどに 主 要 な 情 報 が 掲 載 されたページへのリンクを 設 定 するほか 同 一 カテゴリのページにもリンクを 設 定 する サイトマップや 検 索 機 能 からの 到 達 する 方 法 も 提 供 する 現 行 の 北 海 道 公 式 ウェブサイトでは 対 応 済 み 良 い 例 複 数 の 手 段 を 用 意 した 場 合 主 要 な 情 報 が 掲 載 されたページヘ 複 数 の 手 段 によ り 到 達 できるため 利 用 しやすい 状 態 になっている 各 部 局 の トップページ 新 着 情 報 一 覧 同 一 カテゴリの ページ サイトマップ サイト 内 検 索 機 能 主 要 な 情 報 が 掲 載 されているページ 悪 い 例 複 数 の 手 段 が 用 意 されていない 場 合 主 要 な 情 報 が 掲 載 されているページヘ 移 動 する ための 経 路 がひとつしかないため 利 用 しにくい 同 一 カテゴリの ページ 主 要 な 情 報 が 掲 載 されているページ CMS 操 作 書 (PDF 版 ) 46 49ページ(リンク 設 定 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 17

27 4.1 ページ 作 成 に 関 する 共 通 事 項 正 しく 簡 潔 な 構 文 を 心 がける(1) 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 推 奨 ( 一 部 対 応 済 み) 現 在 北 海 道 公 式 ウェブサイトに 掲 載 されている 一 部 のページでは インターネットブラウザの 種 類 やバージョ ンなど 利 用 者 の 環 境 によって 表 示 が 崩 れたり 差 異 が 発 生 している 場 合 があります こうしたページは 情 報 を 取 得 するために 余 分 な 時 間 がかかったり 利 用 者 に 誤 った 情 報 を 伝 えてしまうことが あります そのような 状 況 を 回 避 するために 正 しく 簡 潔 な 構 文 (HTML CSS)を 心 がける 必 要 があります ( 関 連 項 目 とし て 複 雑 なレイアウトや 装 飾 などは スタイルシートを 用 いて 表 現 する (P61)も 参 照 のこと) Web 標 準 に 沿 って 構 文 を 記 述 する CMS 操 作 書 に 従 って 作 成 すれば 対 応 可 能 Word 等 で 作 成 した 文 章 のコピー&ペーストにより 作 成 したページは 多 くの 場 合 構 文 が 異 常 となり 表 示 の 崩 れなどが 発 生 するため 一 度 テキストにコピーしてから 編 集 する 次 ページ 参 照 HTML タグの 閉 じる 順 序 を 正 しいものとする HTML インライン 要 素 内 にブロック 要 素 を 使 用 しない HTML marqueeタグ blinkタグを 使 用 しない 良 い 例 悪 い 例 ソースコード( 正 しい 記 述 方 法 ) ソースコード( 誤 った 記 述 方 法 ) <html> <head> </head> <body> <p> <a href= >リンクテキスト</a> </p> ブロック 要 素 <p> 内 に インライン 要 素 <a>が 記 述 されている <html> <head> </head> <body> <a href= > <p>リンクテキスト</p> </a> インライン 要 素 <a> 内 にブロック 要 素 <p>が 記 述 されている <font color= >テキスト</font> テキスト テキストテキスト </body> </html> 閉 じタグが 記 述 されて いる <font color= >テキスト テキスト テキストテキスト 閉 じタグが 記 述 されて いない </body> </html> 表 示 される 画 面 表 示 される 画 面 リンクテキスト テキスト テキスト テキストテキスト テキスト テキスト テキストテキスト ページが 問 題 なく 表 示 される 正 しくページを 表 示 できない CMS 操 作 書 (PDF 版 ) 217ページ(HTMLについて) WEB 版 にリンクする 場 合 はこちら >> 18

28 4.1 ページ 作 成 に 関 する 共 通 事 項 正 しく 簡 潔 な 構 文 を 心 がける(2) ~ 文 章 のコピー&ペーストをする 際 の 注 意 点 ~ ( 続 き) Wordや 一 太 郎 で 作 成 した 文 書 をコピー&ペーストでCMS 編 集 画 面 に 登 録 すると 余 分 な 情 報 も 引 き 継 いで しまうため 必 ずメモ 帳 へのコピー&ペーストを 行 った 後 に メモ 帳 からCMS 編 集 画 面 へ 登 録 を 行 う 良 い 例 Word 一 太 郎 など 文 字 情 報 デザイン メモ 帳 文 字 情 報 CMS( 編 集 画 面 ) 文 字 情 報 コピー& ペースト コピー& ペースト ソースコード 2,700 文 字 Ctrl + A ボタンを 使 うと 簡 単 にページ 内 の 全 テキストを 指 定 できる 文 字 数 少 構 文 正 常 文 字 情 報 のみコピー&ペーストされるため 音 声 読 み 上 げソフトでは 不 要 なタグ 情 報 を 読 み 上 げないため 理 解 しやすい 悪 い 例 Word 一 太 郎 など 文 字 情 報 デザイン コピー& ペースト CMS( 編 集 画 面 ) 文 字 情 報 デザイン 大 量 の 不 要 なタグ ソースコード 33,000 文 字 文 字 数 多 構 文 異 常 見 た 目 は 変 わらないが 音 声 読 み 上 げソフ トでは 大 量 の 不 要 なタグ 情 報 も 読 み 上 げ てしまうため ページ 内 容 が 理 解 しにくくな る また 多 くの 場 合 構 文 が 異 常 になり 表 示 の 崩 れなどが 発 生 する 場 合 がある 19

29 4.1 ページ 作 成 に 関 する 共 通 事 項 ヘッダーなどの 共 通 で 使 用 する 部 品 は 統 一 する 該 当 JIS 項 目 : 等 級 : AA 必 須 優 先 度 : ( 対 応 済 み) 各 ページに 必 ず 存 在 する 要 素 として ヘッダーやフッター( 図 1 参 照 )などがあります これらは 各 ページで 統 一 したものを 使 用 することで 利 用 者 の 使 いやすさを 向 上 させています 図 1:ヘッダー( 赤 枠 部 分 上 ) フッター( 赤 枠 部 分 下 ) ヘッダーやフッターは 統 一 したものを 使 用 する 現 行 の 北 海 道 公 式 ウェブサイトでは 対 応 済 み 補 足 ページ 本 文 で メニューリンクなどの 各 ページで 共 通 に 使 用 する 部 品 を 作 成 する 場 合 は 他 ページと 統 一 すること ( 例 1 参 照 ) 課 のページ テンプレートを 利 用 することで 容 易 に 統 一 されたデザインのページを 作 成 することが 可 能 例 1:ページ 本 文 で 各 ページで 共 通 に 使 用 する 部 品 ( 赤 枠 部 分 )を 作 成 したページ CMS 操 作 書 (PDF 版 ) 36 38ページ(テンプレートの 利 用 ) WEB 版 にリンクする 場 合 はこちら >> 20

30 4.1 ページ 作 成 に 関 する 共 通 事 項 ナビゲーションを 読 み 飛 ばせるようにする 必 須 該 当 JIS 項 目 : 等 級 : A 優 先 度 : ( 対 応 済 み) 利 用 者 は 視 覚 的 に 情 報 を 取 捨 選 択 することを 通 じて ナビゲーション( 図 1 参 照 )をページ 毎 に 確 認 することな く 本 文 にたどり 着 くことができますが 音 声 読 み 上 げソフト 利 用 者 は ページを 開 く 毎 に 同 じナビゲーションの 読 み 上 げを 聞 かなければならないため ページ 本 文 に 到 達 するのに 時 間 を 要 します そのため 音 声 読 み 上 げソフトの 利 用 者 がナビゲーションを 読 み 飛 ばせるような 仕 組 みを 提 供 する 必 要 があり ます ナビゲーションを 読 み 飛 ばす 仕 組 みを 導 入 する 現 行 の 北 海 道 公 式 ウェブサイトでは 対 応 済 み ナ ビ ゲ ー シ ョ ン 図 1:ナビゲーション ペ ー ジ 本 文 のページへようこそ ナビゲーションを 読 み 飛 ばすことにより 音 声 読 み 上 げソフトの 読 み 上 げ 時 間 が 短 くなる 良 い 例 本 文 へスキップするか 選 択 できる のページへようこそ 悪 い 例 本 文 へスキップするか 選 択 できない 北 海 道 のホームページ ホームページの 使 い 方 サイトマップ 文 字 を 大 きくするには のページへようこそ すぐに 本 文 の 内 容 を 読 み 上 げることができる ナビゲーションの 内 容 をすべて 読 み 上 げてから 本 文 の 内 容 を 読 み 上 げるため 余 分 な 時 間 がかかる CMS 操 作 書 (PDF 版 ) 該 当 なし 21

31 4.2 テキストに 関 する 共 通 事 項 文 字 色 の 違 いについてはテキストで 補 足 する 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 必 須 物 事 をわかりやすく 伝 えるための 表 現 方 法 として 色 を 変 えて 違 いを 明 らかにする 方 法 があります 例 としては カレンダーの 祝 日 を 赤 い 文 字 にしたり 注 意 を 促 す 項 目 を 赤 い 文 字 にするなどが 挙 げられます しかし 色 覚 異 常 の 利 用 者 や 高 齢 者 などは こうした 情 報 を 取 得 できない 場 合 があるため テキストを 用 いた 文 による 補 足 が 必 要 になります 色 の 違 いで 物 事 を 伝 える 場 合 は 色 の 使 い 分 けによる 相 違 点 やポイントなど テキストを 用 いた 文 に より 補 足 する 良 い 例 テキストによる 補 足 がある 場 合 色 の 識 別 が 困 難 な 利 用 者 などにとっても 健 常 者 と 同 様 の 情 報 を 得 ることができる 悪 い 例 テキストによる 補 足 がない 場 合 色 の 情 報 を 得 ることが 出 来 ないため 色 弱 の 利 用 者 や 高 齢 者 音 声 読 み 上 げソフトの 利 用 者 は 情 報 を 正 し く 得 ることができない CMS 操 作 書 (PDF 版 ) 168ページ( 文 字 色 変 更 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 22

32 4.2 テキストに 関 する 共 通 事 項 形 や 位 置 はテキストでも 識 別 できるようにする ( 情 報 の 識 別 や 指 示 ) 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 必 須 物 事 をわかりやすく 伝 えるために 形 や 位 置 の 特 徴 を 用 いて する 方 法 があります 例 としては ボタンやリンクを 丸 いマーク や 右 下 のボタン というように することなどが 挙 げられます しかし 音 声 読 み 上 げソフトの 利 用 者 は こうした だけでは 情 報 を 得 ることができない 場 合 があるため テ キストを 用 いた 文 による 補 足 が 必 要 になります 形 や 位 置 の 特 徴 を 用 いて する 場 合 は テキストを 用 いた 文 でも 補 足 する 良 い 例 テキストによる 補 足 がある 場 合 続 きを 読 むには 右 の 次 のページへ ボタンを 押 してください 前 のページへ 次 のページへ まる( ) 以 外 に 実 施 バー(-) 以 外 に 休 業 という 言 葉 が 加 わるなど 音 声 で 情 報 を 得 る 利 用 者 にとっても 必 要 な 情 報 を 得 ることができ る 次 のページへ ボタンの 情 報 が 書 かれているこ とにより 音 声 で 情 報 を 得 る 利 用 者 にも 何 をク リックすべきかわかる 悪 い 例 テキストによる 補 足 がない 場 合 続 きを 読 むには 右 のボタンを 押 してください 前 のページへ 次 のページへ まる( )や バー(-)と 音 声 で 聞 かされても 形 の 情 報 を 得 ることが 出 来 ないため 音 声 で 情 報 を 得 る 利 用 者 は 情 報 を 正 しく 得 ることができない 右 のボタン などと 音 声 で 聞 かされても 情 報 を 得 ることが 出 来 ないため 音 声 で 情 報 を 得 る 利 用 者 には 何 をクリックすべきかわからない CMS 操 作 書 (PDF 版 ) 該 当 なし 23

33 4.2 テキストに 関 する 共 通 事 項 単 語 の 間 にスペースや 改 行 を 挿 入 しない 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 必 須 ページを 作 成 する 際 に 単 語 や 文 章 の 長 さを 調 節 するため スペースや 改 行 を 用 いる 場 合 があります そうす ると スペースを 単 語 の 区 切 り 改 行 を 文 節 の 区 切 りとして 認 識 してしまうため 例 えば 電 話 は でん はな し 日 時 場 所 は ひ とき ば ところ と 読 み 上 げられてしまいます そのため 音 声 読 み 上 げソフトの 利 用 者 は 制 作 者 の 意 図 した 情 報 を 正 しく 認 識 することが 困 難 になります 文 字 列 を 入 力 する 場 合 単 語 の 間 にスペース 及 び 改 行 を 挿 入 しない HTML 単 語 の 間 にbrタグを 挿 入 しない 良 い 例 適 切 に 文 字 列 を 入 力 した 場 合 でんわ にちじばしょ 文 字 列 が 正 しく 読 み 上 げられるため 音 声 読 み 上 げソフトの 利 用 者 は 正 しく 内 容 を 認 識 することができる 悪 い 例 単 語 間 にスペースを 挿 入 した 場 合 でん はなし ひ とき ば ところ 文 字 列 が 正 しく 読 み 上 げられないため 音 声 読 上 げソフトの 利 用 者 は 正 しい 内 容 を 認 識 できない 単 語 間 に 改 行 を 挿 入 して 縦 書 きにした 場 合 でん はなし ひ とき ば ところ 文 字 列 が 正 しく 読 み 上 げられないため 音 声 読 上 げソフトの 利 用 者 は 正 しい 内 容 を 認 識 できない CMS 操 作 書 (PDF 版 ) 該 当 なし 24

34 4.2 テキストに 関 する 共 通 事 項 サイト 内 で 使 用 する 単 語 は 統 一 する 該 当 JIS 項 目 : 等 級 : AA 優 先 度 : 必 須 ( 一 部 対 応 済 み) 単 語 には 同 じような 意 味 を 持 つものが 複 数 存 在 します そのため 同 一 のページや 同 じ 項 目 の 一 連 のペー ジにおいてはそれらをいずれかに 統 一 することで 利 用 者 に 混 乱 を 与 えることなく 情 報 取 得 しやすく 必 要 があり ます 同 じ 意 味 を 持 つ 単 語 を 複 数 使 用 した 場 合 表 記 のゆれにより 読 んで 理 解 する 方 に 違 和 感 を 与 えるケースは もとより 聞 いて 理 解 する 方 には 発 音 が 異 なる 単 語 を 違 う 意 味 で 捉 えるなど 混 乱 するケースも 考 えられます 言 葉 の 定 義 をはっきりさせながら 使 っていくことも 大 事 になります ナビゲーションの 表 記 を 統 一 する 現 行 の 北 海 道 公 式 ウェブサイトでは 対 応 済 み 名 称 や 送 りがななど 使 用 する 単 語 を 統 一 するとともに 可 能 な 限 り 表 現 を 短 縮 しない 対 応 例 統 一 前 の 単 語 アクセシビリティ ウェブアクセシビリティ WA Web Accessibility 音 声 読 上 ソフト 音 声 読 み 上 げソフト 音 声 読 上 げソフト ユーザー ユーザ 利 用 者 閲 覧 者 音 声 読 み 上 げ 結 果 あくせしびりてぃ うぇぶあくせしびりてぃ だぶりゅえい おんせいどくじょうそふと おんせいよみあげそふと おんせいどくあげそふと ゆーざー ゆーざ りようしゃ えつらんしゃ 統 一 後 の 単 語 ウェブアクセシビリティ 音 声 読 み 上 げソフト 利 用 者 CMS 操 作 書 (PDF 版 ) 該 当 なし 25

35 4.2 テキストに 関 する 共 通 事 項 文 字 色 と 背 景 色 には 十 分 なコントラスト 比 を 確 保 する(1) 該 当 JIS 項 目 : 等 級 : AA 優 先 度 : 推 奨 ある 文 字 色 と 背 景 色 の 組 み 合 わせを 読 みやすく 感 じるか 否 かは 利 用 者 によって 様 々であり 特 に 色 覚 異 常 の 利 用 者 や 高 齢 者 などは 色 の 識 別 がより 困 難 な 場 合 があります そこで 一 つの 指 標 として 規 格 によって 定 められたコントラスト 比 を 使 います この 数 値 を 一 定 以 上 にすることで より 多 くの 利 用 者 にとって 読 みやすい 状 態 を 作 り 出 すことができます また 多 くの 色 を 使 うサイトは 利 用 者 が 情 報 を 取 得 しにくくなる 可 能 性 があるため 過 剰 な 装 飾 などによる 文 字 色 と 背 景 色 の 指 定 は 避 け 色 を 使 う 必 要 がある 場 合 は 識 別 しやすい 組 み 合 わせを 用 いてください 識 別 しやすい 色 の 組 み 合 わせを 用 いる 識 別 しにくい 色 の 組 み 合 わせ( 例 : 白 色 と 黄 色 緑 色 と 赤 色 水 色 と 灰 色 桃 色 と 灰 色 など)はしない ( 例 1) 文 字 の 背 景 に 写 真 や 壁 紙 などの 画 像 を 用 いる 場 合 文 字 が 読 みにくくならないよう 配 慮 する ( 例 2) 文 字 を 入 れた 画 像 で デザイン 上 十 分 なコントラスト 比 を 確 保 できない 場 合 縁 取 り 線 を 付 与 する ことで 対 応 する このとき 識 別 しやすい 組 み 合 わせを 用 いる ( 例 3) ( 関 連 項 目 として 画 像 には 代 替 テキストを 設 定 する (P43) 情 報 量 の 多 い 画 像 には 画 像 を する テキストを 別 途 提 供 する (P44)も 参 照 のこと) 文 字 色 と 背 景 色 の 使 用 は 必 要 最 低 限 に 抑 えることが 望 ましい また リンクには 使 用 しない ( 関 連 項 目 として リンクの 文 字 色 及 び 背 景 色 を 設 定 しない (P37)も 参 照 のこと) 規 格 によって 4.5:1というコントラスト 比 が 定 められているが 専 用 ツールによる 測 定 が 必 要 となるな ど 厳 密 な 対 応 は 難 しいことから 以 下 の 例 示 を 参 考 にしてページ 作 成 にあたり 反 映 すること 例 1 識 別 しやすい 組 み 合 わせを 用 いる 良 い 例 悪 い 例 北 海 道 北 海 道 北 海 道 北 海 道 北 海 道 北 海 道 北 海 道 北 海 道 例 2 文 字 の 背 景 に 写 真 や 壁 紙 などの 画 像 を 用 いる 場 合 良 い 例 悪 い 例 例 3 文 字 を 入 れた 画 像 で 十 分 なコントラスト 比 を 確 保 できない 場 合 良 い 例 悪 い 例 参 考 : 色 の 使 用 例 について 次 ページを 参 照 すること CMS 操 作 書 (PDF 版 ) 168ページ( 文 字 色 変 更 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 26

36 4.2 テキストに 関 する 共 通 事 項 文 字 色 と 背 景 色 には 十 分 なコントラスト 比 を 確 保 する(2) 参 考 : 色 の 使 用 例 について カラーピッカーを 用 いた 場 合 の 組 み 合 わせ 例 カラーピッカーは 編 集 画 面 上 から 色 を 設 定 する 際 に 使 う 白 色 ( 背 景 色 もしくは 文 字 色 )との 組 み 合 わせ 例 推 奨 される 色 よく 用 いられるが 推 奨 されない 色 (コントラスト 比 が 規 定 以 下 と なってしまう 色 ) 黒 色 ( 背 景 色 もしくは 文 字 色 )との 組 み 合 わせ 例 推 奨 される 色 よく 用 いられるが 推 奨 されない 色 (コントラスト 比 が 規 定 以 下 と なってしまう 色 ) CMS 操 作 書 (PDF 版 ) 168ページ( 文 字 色 変 更 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 27

37 4.2 テキストに 関 する 共 通 事 項 日 付 時 間 通 貨 の 単 位 は 漢 字 で 表 記 する 該 当 JIS 項 目 : なし 等 級 : なし 優 先 度 : 推 奨 日 付 や 時 間 通 貨 は / や : などの 記 号 を 用 いることで 直 感 的 にわかりやすくなります こうした 表 記 にすることで 見 た 目 はスマートに 感 じることがありますが 音 声 読 み 上 げソフトでは 作 成 者 の 意 図 したとおりに 読 み 上 げできない 場 合 があります そのため 日 付 時 間 通 貨 の 単 位 は 漢 字 で 表 記 する 必 要 があります 日 付 の 表 記 に 記 号 / や. を 用 いず 漢 字 の 単 位 年 月 日 を 使 用 する 時 間 の 表 記 に 記 号 : を 用 いず 漢 字 の 単 位 時 分 秒 を 使 用 する 通 貨 の 表 記 に 記 号 を 用 いず 漢 字 の 単 位 円 を 使 用 する ( 外 国 通 貨 の 場 合 は ドル や セント などカタカナを 使 用 する) 良 い 例 単 位 を 正 しく 表 記 した 場 合 日 付 : 2014 年 1 月 20 日 時 間 : 午 前 10 時 8 分 通 貨 : 1,300 円 にせんじゅうよねん いちがつ はつか ごぜん じゅうじ はっぷん せんさんびゃくえん 正 しく 読 み 上 げることができる 悪 い 例 単 位 を 正 しく 表 記 していない 場 合 日 付 : H26/01/20 時 間 : AM10:08 通 貨 : 1,300 えいち にじゅうろく ぜろいち にじゅう えーえむ じゅう ぜろはち せんさんびゃく 作 成 者 の 意 図 したとおりに 読 み 上 げることができない 読 み 上 げ 結 果 は 使 用 するソフトウェアにより 違 いがある 掲 載 している 読 み 上 げ 結 果 は 一 例 である CMS 操 作 書 (PDF 版 ) 12ページ(ページ 作 成 修 正 上 の 注 意 ) WEB 版 にリンクする 場 合 はこちら >> 28

38 4.2 テキストに 関 する 共 通 事 項 単 語 や 文 章 を 太 字 にする 際 の 留 意 事 項 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 推 奨 文 章 の 重 要 な 箇 所 や 必 須 事 項 などを 表 現 するため 太 字 にする 場 合 があります これは 文 字 の 見 た 目 を 変 えるだけでなく 音 声 読 み 上 げソフトの 利 用 者 に 向 けて 強 調 を 示 すような 仕 組 みでもあります 音 声 読 み 上 げソフトは 強 調 された 文 字 をゆっくり 読 み 上 げることなどにより 利 用 者 にその 文 字 が 強 調 されていることを 伝 えます 一 方 文 字 の 大 きさを 調 整 するなど 装 飾 を 目 的 として 文 章 すべてを 太 字 にしているページも 見 受 けられます が 音 声 読 み 上 げソフトの 利 用 者 は 混 乱 する 場 合 があります そのため 強 調 したい 文 字 のみを 太 字 にしてください 強 調 したい 文 字 を 選 択 し 編 集 アイコンの HTML 強 調 したい 文 字 をstrongタグで 囲 む アイコンを 選 択 する 補 足 HTML やむを 得 ず 装 飾 目 的 で 文 字 を 太 字 にしたい 場 合 は 太 字 にしたい 文 字 をbタグで 囲 む 強 調 を 示 すstrongタグに 対 し bタグは 強 調 を 示 さず 見 た 目 のみ 太 字 にする 役 割 を 持 っている 良 い 例 強 調 したい 文 字 のみが 太 字 になっている 場 合 CMSの 標 準 機 能 として 文 字 を 太 字 にする 機 能 があります これは 文 字 の 見 た 目 を 変 えるだけで なく 音 声 読 み 上 げソフトの 利 用 者 に 向 けて 強 調 を 示 すような 仕 組 みとなっています 音 声 読 み 上 げソフトは 強 調 された 文 字 をゆっくり 読 み 上 げることなどで 利 用 者 にその 文 字 が 強 調 されて いることを 伝 えます そのため 装 飾 目 的 のために 文 字 を 太 字 にすることは 避 け 強 調 したい 文 字 のみを 太 字 にしてく ださい 強 調 される 部 分 が 明 確 に 読 み 上 げられ 音 声 読 み 上 げソフトの 利 用 者 にとっても 内 容 が 理 解 しやすい 悪 い 例 装 飾 目 的 で 文 字 が 太 字 になっている 場 合 CMSの 標 準 機 能 として 文 字 を 太 字 にする 機 能 があります これは 文 字 の 見 た 目 を 変 えるだけでな く 音 声 読 み 上 げソフトの 利 用 者 に 向 けて 強 調 を 示 すような 仕 組 みとなっています 音 声 読 み 上 げ ソフトは 強 調 された 文 字 をゆっくり 読 み 上 げることなどで 利 用 者 にその 文 字 が 強 調 されていること を 伝 えます そのため 装 飾 目 的 のために 文 字 を 太 字 にすることは 避 け 強 調 したい 文 字 のみを 太 字 にしてくださ い 強 調 する 必 要 のない 部 分 まで 強 調 されているため 音 声 読 み 上 げソフトの 利 用 者 は 混 乱 する CMS 操 作 書 (PDF 版 ) 167ページ( 太 字 設 定 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 29

39 4.2 テキストに 関 する 共 通 事 項 移 動 点 滅 するテキストを 使 用 しない 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 推 奨 装 飾 を 主 な 目 的 として テキストも 自 動 的 に 移 動 させたり 点 滅 させたりすることが 可 能 です しかし 移 動 や 点 滅 をするテキストは 利 用 者 によっては 認 識 しにくく 読 みにくさを 感 じる 場 合 があります とり わけ 画 面 を 拡 大 して 閲 覧 する 弱 視 の 方 にとっては 移 動 や 点 滅 が 余 計 に 目 立 つため 大 変 見 にくいものとなり ます また 移 動 点 滅 が 永 続 的 に 繰 り 返 されると 利 用 者 の 集 中 力 を 削 いでしまう 場 合 があります さらに 早 い 点 滅 はてんかん 発 作 の 原 因 となる 場 合 があります こうしたことから 移 動 点 滅 するテキストの 使 用 を 避 けてください ( 関 連 項 目 として せん 光 を 用 いた 表 現 をしない (P59)も 参 照 のこと) 移 動 点 滅 するテキストを 使 用 しない HTML marquee 要 素 を 使 用 しない HTML blink 要 素 を 使 用 しない CMS 操 作 書 (PDF 版 ) 該 当 なし 30

40 4.2 テキストに 関 する 共 通 事 項 顔 文 字 を 使 用 しない 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 推 奨 文 字 と 記 号 を 用 いて その 見 た 目 で 情 報 を 伝 える 方 法 として 顔 文 字 がありますが 顔 文 字 を 使 用 すると 音 声 読 み 上 げソフトでは 正 しく 読 み 上 げられず 意 味 の 通 じないものとなります また 装 飾 目 的 で 顔 文 字 を 多 用 すると 利 用 者 にとって 読 みにくいものとなります 全 ての 利 用 者 にとって 使 いやすいページになるよう 顔 文 字 を 使 用 しないでください 顔 文 字 を 使 用 しない 良 い 例 顔 文 字 を 使 用 していない 場 合 しています しています 正 しく 読 み 上 げられ 利 用 者 に 違 和 感 を 感 じさせない 悪 い 例 顔 文 字 を 使 用 している 場 合 しています (^^) しています かっこ ぺきじょ ぺきじょ かっことじ 意 味 の 通 じない 音 声 が 読 み 上 げられ 利 用 者 が 混 乱 する CMS 操 作 書 (PDF 版 ) 該 当 なし 31

41 4.2 テキストに 関 する 共 通 事 項 書 体 の 変 更 は 最 低 限 にする 該 当 JIS 項 目 : なし 等 級 : なし 優 先 度 : 推 奨 ( 一 部 対 応 済 み) ページのテキストは 利 用 者 の 端 末 を 購 入 した 時 に 標 準 で 設 定 されている(デフォルト) 書 体 で 表 示 されます ページのテキストには デフォルトの 書 体 の 他 に 設 定 可 能 な 書 体 が 多 数 存 在 していますが 変 更 を 行 うと 端 末 によっては 書 体 が 表 示 されない 場 合 があります また デフォルトの 書 体 は 様 々な 利 用 者 が 読 みやすいとされるものになっているため 弱 視 の 利 用 者 や 高 齢 者 は 書 体 の 変 更 により 読 みにくさを 感 じる 場 合 があります 書 体 の 変 更 は 最 低 限 にとどめる HTML fontタグのstyle 属 性 またはface 属 性 でフォントの 種 類 を 指 定 しない CMS 標 準 編 集 画 面 に 従 って 作 成 すれば フォントの 変 更 操 作 がないため 対 応 可 能 Word 等 で 整 形 した 文 書 のコピー&ペーストを 行 わない テキストファイルに 一 度 コピーするなどして テキスト 以 外 の 情 報 をそぎ 落 としたあとでコピー&ペーストを 行 う ( 関 連 項 目 として 正 しく 簡 潔 な 構 文 を 心 がける(1) (P18)も 参 照 のこと) 良 い 例 書 体 の 変 更 をしていない 場 合 端 末 A 端 末 B 端 末 C デフォルトの 書 体 が 表 示 される それぞれ 利 用 環 境 で デフォルトの 書 体 が 表 示 されており 読 みやすい 悪 い 例 書 体 の 変 更 をしている 場 合 (ここではHG 行 書 体 に 変 更 ) 端 末 A 端 末 B 端 末 C HG 行 書 体 で 表 示 されており 利 用 者 によっては 読 みにくく 感 じる デフォルトの 書 体 が 強 制 的 に 反 映 される 場 合 もある 利 用 環 境 によって 意 図 した 表 示 と 異 なった 書 体 で 表 示 されている また 利 用 者 によってはデフォルトの 書 体 より 読 みにくい 場 合 がある Word 等 で 整 形 したテキストのコピー&ペーストを 行 う 場 合 ペースト 以 前 の 書 体 を 引 き 継 いでしまう 場 合 がある CMS 操 作 書 (PDF 版 ) 該 当 なし 32

42 4.2 テキストに 関 する 共 通 事 項 機 種 依 存 文 字 を 使 用 しない 該 当 JIS 項 目 : なし 等 級 : なし 優 先 度 : 推 奨 ( 一 部 対 応 済 み) 丸 付 き 文 字 などの 機 種 依 存 文 字 や 半 角 カタカナ 文 字 を 用 いると 利 用 環 境 によっては 文 字 が 正 しく 表 示 されな い 場 合 があります 機 種 依 存 文 字 は 変 換 を 行 う 際 にその 旨 のメッセージが 表 示 されることがあります また 道 のCMSで 使 用 を 禁 止 している 文 字 の 資 料 として CMS 操 作 書 別 紙 4-1 禁 則 文 字 一 覧 があります その 他 半 角 カタカナ 文 字 も 使 用 禁 止 となっています こうした 文 字 を 使 用 しないことで すべての 利 用 者 に 対 して 正 常 にページが 表 示 されるように 配 慮 することが 必 要 です 機 種 依 存 文 字 ( 丸 付 き 文 字 や 省 略 記 号 など)を 使 用 しない 禁 則 文 字 (CMS 操 作 書 上 で 使 用 を 禁 止 している 文 字 )を 使 用 しない CMS 標 準 編 集 画 面 に 従 って 作 成 すれば 保 存 時 に 禁 則 文 字 の 有 無 がチェックされるため 対 応 可 能 半 角 カタカナ 文 字 を 使 用 しない 参 考 : 文 字 化 けを 起 こす 可 能 性 のある 文 字 の 例 機 種 依 存 文 字 禁 則 文 字 CMS 操 作 書 別 紙 資 料 禁 則 文 字 一 覧 を 参 照 すること 半 角 カタカナ 文 字 禁 則 文 字 一 覧 へ >> CMS 操 作 書 (PDF 版 ) 94ページ( 禁 則 文 字 について) WEB 版 にリンクする 場 合 はこちら >> 33

43 4.2 テキストに 関 する 共 通 事 項 文 章 を 引 用 する 際 の 留 意 事 項 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 参 考 文 章 を 引 用 する 場 合 は 引 用 していることを 示 すようにHTMLで 記 述 する 必 要 があります また 参 照 元 ( 例 : 夏 目 漱 石 のこころより 引 用 ~~ という 文 で 言 えば こころ の 部 分 )にも 参 照 元 であることを 示 すように 記 述 する 必 要 があります そうすることで 引 用 部 分 とそうではない 部 分 を 利 用 者 が 理 解 しやすくなるため 音 声 読 み 上 げソフトの 利 用 者 にも 配 慮 することができます 音 声 読 み 上 げソフトは 指 定 された 部 分 の 読 み 上 げ 速 度 やピッチに 違 いをつけて 読 み 上 げるなどの 方 法 で 引 用 あるいは 参 照 元 であることを 伝 えます HTML 引 用 した 文 章 をblockquoteタグで 囲 む HTML 参 照 元 をciteタグで 囲 む 現 行 のCMS 標 準 編 集 画 面 では 文 章 の 引 用 設 定 ができないため 対 応 困 難 ( 直 接 ソースプログラムの 編 集 が 必 要 ) 補 足 引 用 していることを 示 すタグを 設 定 した 場 合 自 動 的 に 字 下 げが 行 われる レイアウトを 整 えるためのものではないことから 引 用 目 的 以 外 での 使 用 はしない HTML レイアウトを 整 える 目 的 でblockquoteタグを 使 用 しない 参 考 : 文 章 を 引 用 したときのタグの 設 定 例 私 はその 人 を 常 に 先 生 と 呼 んでいた だからここでもただ 先 生 と 書 くだけで 本 名 は 打 ち 明 けない こ れは 世 間 を 憚 かる 遠 慮 というよりも その 方 が 私 にとって 自 然 だからである 私 はその 人 の 記 憶 を 呼 び 起 すごとに すぐ 先 生 といいたくなる ( 夏 目 漱 石 の こころ より 引 用 ) 参 照 元 であることを 示 す ( 例 : <cite>こころ</cite>) 引 用 であることを 示 す ( 例 : <blockquote> 私 はその 人 を~ </blockquote> ) CMS 操 作 書 (PDF 版 ) 該 当 なし 34

44 4.2 テキストに 関 する 共 通 事 項 テキストのサイズは 利 用 者 が 変 更 できるようにする 推 奨 該 当 JIS 項 目 : 等 級 : AA 優 先 度 : ( 対 応 済 み) ブラウザには テキストのサイズを 大 きくする 機 能 があります ( 図 1 参 照 ) 小 さく 読 みにくいと 感 じた 場 合 この 機 能 を 用 いてテキストのサイズを 拡 大 することができます 主 に 弱 視 の 利 用 者 や 高 齢 者 が 活 用 しています ページを 作 成 する 際 テキストのサイズ 指 定 方 法 を px や pt などの 絶 対 単 位 (ブラウザの 設 定 に 依 存 せず 普 遍 的 なサイズを 指 定 する 単 位 )にすると この 機 能 を 使 用 することができなくなります そのため テキストのサイズの 指 定 に 当 たり 留 意 する 必 要 があります 1 1ALTキーを 押 し メニューバーを 出 現 させる 2 表 示 文 字 のサイ ズ から 任 意 の 文 字 サ イズに 変 更 できる 2 図 1:テキスト( 文 字 )のサイズを 大 きくする 機 能 (Internet Explorer11の 場 合 ) 文 字 の 大 きさを 変 更 したい 部 分 を 選 択 し 下 向 きの 三 角 のボタン を 押 して 文 字 の 大 きさを 変 更 する テキストのサイズは 絶 対 単 位 で 指 定 せず 相 対 単 位 で 指 定 する HTML fontのsize 属 性 を 用 いてテキストのサイズを 指 定 する CMS 標 準 編 集 画 面 に 従 って 作 成 すれば 対 応 可 能 HTML CSSを 使 用 し% em キーワード(xx-small x-small small medium large x-large xx-large smaller larger)のいずれかを 用 いてテキストのサイズを 指 定 する CMS 操 作 書 (PDF 版 ) 40ページ(フォントサイズの 変 更 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 35

45 4.3 リンクの 設 定 に 関 する 共 通 事 項 リンク 先 を 推 測 できるようなテキストで 表 記 する 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 推 奨 利 用 者 はリンクを 選 択 する 前 に 設 定 されているリンクのテキストの 文 脈 から リンク 先 がどのようなページな のかを 推 測 し 自 らが 求 めている 情 報 か 否 かを 判 断 しています そのため 文 脈 からリンク 先 を 推 測 しにくいテキストでは 利 用 者 に 混 乱 を 与 える 可 能 性 があります また 音 声 読 み 上 げソフトの 中 には リンクのテキストだけを 読 み 上 げる 機 能 を 持 つものがあるため 音 声 読 み 上 げソフトの 利 用 者 にも 配 慮 が 必 要 です リンクのテキストからリンク 先 が 推 測 できるように 配 慮 する 補 足 適 切 な がないまま 詳 しくはこちら など 断 片 的 に 表 示 されているリンクも 避 けるべき 表 現 である 良 い 例 リンク 先 を 推 測 できるようなリンクの 場 合 広 報 紙 ほっかいどう の 最 新 号 を 作 成 しました 広 報 紙 ほっかいどう 2014 年 11 月 全 体 版 はこちら(PDF:526KB) 広 報 紙 ほっかいどう 2014 年 11 月 簡 易 版 はこちら(PDF:181KB) 音 声 読 み 上 げソフト (リンクのテキストだけを 読 み 上 げる 機 能 使 用 時 ) 広 報 紙 ほっかいどう 2014 年 11 月 全 体 版 はこちら(PDF:526KB) 広 報 紙 ほっかいどう 2014 年 11 月 簡 易 版 はこちら(PDF:181KB) リンク 先 を 推 測 することができ 利 用 者 が 安 心 してページを 開 くことができる なお リンク 先 がPDFなどのデータファイルの 場 合 は そのデータファイルの 形 式 と 容 量 を 表 記 する ( 関 連 項 目 として データファイルの 形 式 と 容 量 を 表 記 する (P46)も 参 照 のこと) 悪 い 例 リンク 先 を 推 測 できないリンクの 場 合 広 報 紙 ほっかいどう の 最 新 号 を 作 成 しました 全 体 版 はこちら 簡 易 版 はこちら 音 声 読 み 上 げソフト (リンクのテキストだけを 読 み 上 げる 機 能 使 用 時 ) こちら こちら 文 脈 からリンク 先 を 推 測 できず 利 用 者 に 混 乱 を 与 える 場 合 がある また リンクのテキストだけを 読 み 上 げる 機 能 を 持 つ 音 声 読 み 上 げソフトは こちら を 複 数 回 読 み 上 げるため リンク 先 を 推 測 することが 困 難 となる CMS 操 作 書 (PDF 版 ) 117ページ( 文 字 のリンク 設 置 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 36

46 4.3 リンクの 設 定 に 関 する 共 通 事 項 リンクの 文 字 色 及 び 背 景 色 を 設 定 しない 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 推 奨 ページを 作 成 する 際 に リンクの 文 字 色 及 び 背 景 色 が 設 定 されている 場 合 が 多 く 見 られます 北 海 道 公 式 ウェブサイトでは リンクにマウスカーソルを 合 わせたとき リンクの 文 字 色 が 白 色 となり 背 景 色 が 紺 色 となるようあらかじめCMS 上 で 設 定 されています この 色 は リンクである 文 字 列 を 認 識 しやすくするため の 仕 組 みとなっています こうした 仕 組 みを 理 解 せずに 文 字 色 や 背 景 色 を 変 更 することにより リンクである 文 字 列 が 読 みにくくなる 場 合 があるとともに リンクにマウスカーソルを 合 わせた 際 リンクの 文 字 色 とリンクの 背 景 色 が 同 化 し 文 字 列 がさ らに 読 みにくくなります 設 定 したリンクには 文 字 色 及 び 背 景 色 の 変 更 を 行 わない 既 にリンクの 背 景 色 が 指 定 されている 場 合 は 文 字 ごと 削 除 した 上 で 再 入 力 する HTML aタグを 使 用 している 文 字 列 には fontタグで 文 字 色 及 び 背 景 色 の 設 定 を 行 わない 良 い 例 リンクの 文 字 色 及 び 背 景 色 を 設 定 していない 場 合 マウスカーソルを 合 わせていない 時 例 外 : 背 景 色 が 濃 い 場 合 白 色 に 設 定 マウスカーソルを 合 わせた 時 リンクにマウスカーソルを 合 わせた 時 文 字 列 の 読 みやすさが 保 たれる また 利 用 者 にとって 文 字 列 がリンクであるこ とを 認 識 しやすい リンクの 文 字 色 を 設 定 していない 時 背 景 色 と 文 字 色 が 同 化 してしまうため リンクの 文 字 色 を 白 色 などに 設 定 することも 可 とする リンクの 文 字 色 を 設 定 していない 時 リンクの 文 字 色 を 設 定 した 時 悪 い 例 リンクの 文 字 色 が 設 定 された 場 合 マウスカーソルを 合 わせた 時 文 字 色 の 紫 色 と 背 景 色 の 紺 色 が 同 化 し 文 字 列 が 読 みにくくな る マウスカーソルを 合 わせていない 時 マウスカーソルを 合 わせた 時 リンクの 背 景 色 が 設 定 された 場 合 マウスカーソルを 合 わせた 時 文 字 色 の 白 色 と 背 景 色 の 黄 色 が 同 化 し 文 字 列 が 読 みにくくな る マウスカーソルを 合 わせていない 時 マウスカーソルを 合 わせた 時 CMS 操 作 書 (PDF 版 ) 168ページ( 文 字 に 下 線 文 字 色 変 更 ) WEB 版 にリンクする 場 合 はこちら >> 37

47 4.3 リンクの 設 定 に 関 する 共 通 事 項 リンク 画 像 にはリンク 先 がわかるよう 代 替 テキストを 設 定 する 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 推 奨 ボタンやリンクバナーなどのリンク 画 像 にも 通 常 の 画 像 と 同 様 に 代 替 テキストを 設 定 する 必 要 があります その 際 リンク 先 がどのようなページか 推 測 しやすい 代 替 テキストを 設 定 することで 音 声 読 み 上 げソフトの 利 用 者 に 対 しても 配 慮 を 行 います そうすることにより リンク 先 のURLのみが 読 み 上 げられたり リンク 先 がどのようなページか 推 測 できず 利 用 者 が 混 乱 することを 防 ぐことができます リンク 画 像 には リンク 先 がどのようなページか 推 測 しやすい 代 替 テキストを 設 定 する HTML imgタグのalt 属 性 に 文 を 記 述 する ( 例 :<img alt= 文 >) 以 下 の 画 像 には 北 海 道 公 式 ウェブサイトのトップページへのリンクが 設 定 されているものとする 良 い 例 リンク 先 を 推 測 しやすい 代 替 テキストが 設 定 されている 場 合 代 替 テキスト: 北 海 道 のトップページへ 音 声 読 み 上 げ 結 果 : 北 海 道 のトップページへ 音 声 読 み 上 げソフトの 利 用 者 にもリンク 先 が 想 像 しやすく 使 いやすい 悪 い 例 リンク 先 を 推 測 しやすい 代 替 テキストが 設 定 されていない 場 合 代 替 テキスト: 北 海 道 のロゴマーク 音 声 読 み 上 げ 結 果 : 北 海 道 のロゴマーク 音 声 読 み 上 げソフトの 利 用 者 はリンク 先 の 内 容 と 異 なるため 使 いにくい 代 替 テキストが 設 定 されていない 場 合 代 替 テキスト: ( 空 ) 音 声 読 み 上 げ 結 果 : リンク 先 のURLが 読 み 上 げられ 音 声 読 み 上 げソフトの 利 用 者 は 使 いにくい CMS 操 作 書 (PDF 版 ) 114ページ( 画 像 挿 入 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 120ページ( 画 像 のリンク 設 置 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 38

48 4.3 リンクの 設 定 に 関 する 共 通 事 項 隣 接 する 画 像 とテキストに 対 する 同 一 のリンクは 一 つにまとめる 該 当 JIS 項 目 : 等 級 : A 優 先 度 : 推 奨 リンクを 設 定 する 場 合 通 常 はテキスト 画 像 問 わず それぞれに 対 して 設 定 を 行 います しかし 画 像 とテキストが 隣 接 していて なおかつリンク 先 が 同 一 の 場 合 音 声 読 み 上 げソフトの 使 用 者 に 配 慮 し これらを 一 つにまとめる 必 要 があります これは 音 声 読 み 上 げソフトが 同 じリンクを 二 度 読 み 上 げることになるためです 隣 接 する 画 像 とテキストは 同 一 のリンクにまとめる その 際 画 像 の 代 替 テキストの 入 力 欄 には 半 角 スペースを 入 力 する( 空 白 ではない) HTML 画 像 とテキストの 外 側 を aタグを 用 いて 囲 む ( 例 :<a href= リンク 先 のURL ><img src= 画 像 のURL alt= 半 角 スペース >リンクであるテキスト</a>) 良 い 例 リンクが 一 つにまとまっている < 音 声 読 み 上 げソフト 利 用 者 の 場 合 > ホームへ 戻 る マウスを 乗 せると ホームへ 戻 る 音 声 読 み 上 げ 結 果 :ホームへもどる 見 た 目 と 実 際 のリンク 設 定 が 一 致 するため 違 和 感 を 覚 えずスムーズにページを 閲 覧 できる シンプルな 読 み 上 げ 結 果 で スムーズに リンクの 内 容 を 理 解 することができる 悪 い 例 リンクが 一 つにまとまっていない ホームへ 戻 る マウスを 乗 せると 見 た 目 と 違 い 2つのリンクが 存 在 することにより 利 用 者 が 混 乱 する ホームへ 戻 る ホームへ 戻 る < 音 声 読 み 上 げソフト 利 用 者 の 場 合 > 音 声 読 み 上 げ 結 果 : ホームへもどる ホームへもどる 同 じ 内 容 を 二 度 読 まれるため 利 用 者 が 混 乱 する CMS 操 作 書 (PDF 版 ) 42 50ページ(リンク 設 置 方 法 ) WEB 版 にリンクする 場 合 はこちら >> 39