目 次 兵 庫 県 社 会 福 祉 協 議 会 ウェブアクセシビリティ 対 応 ホームページ 更 新 ガイドライン... 1 目 次... 2 ガイドラインの 目 的... 3 適 用 範 囲... 3 根 拠 となる 規 格 またはガイドライン 類... 3 1. 文 章 の 作 成 時 の 注

兵 庫 県 社 会 福 祉 協 議 会 ウェブアクセシビリティ 対 応 ホームページ 更 新 ガイドライン 社 会 福 祉 法 人 兵 庫 県 社 会 福 祉 協 議 会 1

目 次 兵 庫 県 社 会 福 祉 協 議 会 ウェブアクセシビリティ 対 応 ホームページ 更 新 ガイドライン... 1 目 次... 2 ガイドラインの 目 的... 3 適 用 範 囲... 3 根 拠 となる 規 格 またはガイドライン 類... 3 1. 文 章 の 作 成 時 の 注 意... 4 文 章 作 成 時 に 気 を 付 ける 事... 4 2.リンクの 設 定 時 の 注 意... 5 リンクテキストを URL にしない... 5 3. 画 像 の 代 替 テキスト 記 入 時 の 注 意... 6 ケース1: 伝 えるべき 写 真 の 場 合... 6 ケース2: 文 字 が 画 像 化 されている 場 合... 7 ケース3: 飾 り イメージ デザインの 為 の 画 像 の 場 合... 8 4. 色 の 確 認 と 修 正 方 法 ( 文 字 と 画 像 )... 9 手 順 1 背 景 色 と 文 字 色 のコントラスト 比 を 計 測 する... 9 手 順 2 コントラスト 改 善 方 法... 11 その 他 の 画 像 の 改 善 例... 12 文 字 の 改 善 例... 12 5. 文 字 や 背 景 の 色 形 を 設 定 する 時 の 注 意... 12 文 字 の 色 形 (フォントや 大 きさ)を 設 定 する 時 は HTML の font タグを 使 用 しない... 13 背 景 の 色 を 設 定 する 時 は HTML の bgcolor タグを 使 用 しない... 13 6. 箇 条 書 きをする 時 の 注 意... 14 リストの 設 定 方 法... 14 7.Word 文 書 のアクセシビリティ 対 応 手 順... 15 WORD 文 書 のウェブアクセシビリティ 対 応... 15 WORD 文 書 を PDF に 変 換 する 場 合... 17 8.PDF 文 書 のアクセシビリティ 対 応 手 順... 18 文 字 がテキストデータとして 存 在 していない PDF の 場 合... 19 9.その 他 の 注 意... 20 アニメーション... 20 音... 20 動 画... 20 表... 20 2

ガイドラインの 目 的 ホームページを 利 用 するだれもが 心 身 の 機 能 や 利 用 する 環 境 に 関 係 なく ホームページで 提 供 されている 情 報 やサービスを 利 用 できること を ウェブアクセシビリティ といいます 兵 庫 県 社 会 福 祉 協 議 会 の 使 命 は 県 内 の 地 域 福 祉 をすすめる 力 を 結 集 し 私 たちがめざす 福 祉 社 会 づくり をすすめること です ホームページにおいても ウェブアクセシビリティへの 取 組 みは 必 要 不 可 欠 であると 考 え ています 本 ガイドラインを 作 成 運 用 することにより 兵 庫 県 社 会 福 祉 協 議 会 の 職 員 一 人 一 人 がガイドラインを 順 守 し 常 にウェブアクセシビリティに 配 慮 した 情 報 を 公 開 することを 目 指 します 適 用 範 囲 す 本 ガイドラインは 兵 庫 県 社 会 福 祉 協 議 会 のホームページにおいて 職 員 が 更 新 する 箇 所 を 対 象 としていま 根 拠 となる 規 格 またはガイドライン 類 本 ガイドラインは JIS X 8341-3:2010 高 齢 者 障 害 者 等 配 慮 設 計 指 針 - 情 報 通 信 における 機 器 ソフトウ ェア 及 びサービス- 第 3 部 :ウェブコンテンツに 基 づいて 作 成 しています また 平 成 23 年 3 月 に 総 務 省 が 発 表 した みんなの 公 共 サイト 運 用 モデル 改 定 版 (2010 年 度 ) 及 びウェブ アクセシビリティ 基 盤 委 員 会 も 参 照 しております みんなの 公 共 サイト 運 用 モデル 改 定 版 (2010 年 度 ) http://www.soumu.go.jp/main_sosiki/joho_tsusin/w_access/index_02.html ウェブアクセシビリティ 基 盤 委 員 会 http://waic.jp/ これらの 規 格 またはガイドライン 類 から 兵 庫 県 社 会 福 祉 協 議 会 ホームページの 更 新 作 業 に 必 要 な 項 目 を 選 択 し 独 自 の 配 慮 を 追 加 しています 3

1. 文 章 の 作 成 時 の 注 意 JIS X 8341-3:2010 :7.1.3.2 意 味 のある 順 序 に 関 する 達 成 基 準 等 級 A その 他 兵 庫 県 社 会 福 祉 協 議 会 が 考 えた 独 自 の 配 慮 文 章 を 作 成 する 際 に 注 意 すべきことです ウェブアクセシビリティに 配 慮 して 文 章 を 作 成 するメリット ウェブアクセシビリティに 配 慮 して 文 章 を 作 成 することで ユーザーに 正 しく 情 報 を 伝 えることができます 文 章 作 成 時 に 気 を 付 ける 事 開 催 日 :2013/4/1( 月 ) 時 間 :10:00-17:00 場 所 : 神 戸 市 このような 記 載 をしてしまった 場 合 スクリーンリーダーは 以 下 のように 読 み 上 げる 場 合 があります かいさいび コロン にぜろいちさんぶんのよんぶんのいち つき とき あいだ コロン いちぜろ コロン ぜろぜろ はいふん いちなな コロン ぜろぜろ ば ところ コロン かみ と し 開 催 日 :2013 年 4 月 1 日 月 曜 日 時 間 :10 時 ~17 時 場 所 : 神 戸 市 このような 改 善 すると 以 下 のように 読 みあげることになります かいさいび コロン にせんじゅうさんねん しがつ ついたち げつようび じかん コロン じゅうじ から じゅうしちじ ばしょ コロン こうべし 注 意 1: 単 語 の 間 にスペースを 入 れないでください 注 意 2: 日 時 や 時 間 は 半 角 数 字 を 用 いてください 注 意 3: 曜 日 は 省 略 せずに 書 いてください ( 補 足 ) 上 記 のスクリーンリーダーの 読 み 上 げ 方 は 各 ソフトやバージョンや 設 定 によって 異 なります 不 適 合 例 の 書 き 方 であっても すべてのソフトが 間 違 えて 読 み 上 げるわけではありません ただ 改 善 例 の 書 き 方 をすれば どのスクリーンリーダーでも 適 切 に 読 上 げることができます 4

2.リンクの 設 定 時 の 注 意 JIS X 8341-3:2010 :7.2.4.4 文 脈 におけるリンクの 目 的 に 関 する 達 成 基 準 等 級 A リンクはリンク 先 がどのようなファイルであるか 分 かるように 設 定 してください リンク 先 がどのようなファイルであるか 分 かるように 設 定 するメリット リンク 先 がどのようなファイルであるかが 事 前 に 分 かれば ユーザーは 不 要 なページ 移 動 をする 必 要 が なくなります リンクテキストを URL にしない サイトのご 紹 介 http://www.hyogo-wel.or.jp この 場 合 スクリーンリーダーは 以 下 のように 読 み 上 げ ユーザーにリンク 先 が 伝 わりません リンク エイチティーティーピー コロン スラッシュ スラッシュ ダブルダブルダブル ドット エイチワイ オージ ーオー ハイフン ダブルイーエル ドット オーアール ドット ジェイピー サイトのご 紹 介 兵 庫 県 社 会 福 祉 協 議 会 ひょうごの 福 祉 この 場 合 スクリーンリーダーは 以 下 のように 読 み 上 げ ユーザーにリンク 先 が 伝 わります リンク ひょうごけんしゃかいふくしきょうぎかい ひょうごのふくし リンクを 押 して 移 動 したページでも 以 下 のように 読 上 げられますので 理 解 がスムーズです ページタイトル ひょうごけんしゃかいふくしきょうぎかい ひょうごのふくし 5

3. 画 像 の 代 替 テキスト 記 入 時 の 注 意 JIS X 8341-3:2010 : 7.1.1.1 非 テキストコンテンツに 関 する 達 成 基 準 等 級 A 画 像 を 投 稿 する 際 の 代 替 テキストの 記 載 方 法 です ケースに 合 わせて 1~3の 対 応 方 法 で 投 稿 してください 代 替 テキストを 正 しく 使 用 するメリット 目 の 不 自 由 な 人 が 画 像 の alt 属 性 の 値 をスクリーンリーダーで 読 み 上 げたり 点 字 に 変 換 して 認 識 する ことができるようになります ケース1: 伝 えるべき 写 真 の 場 合 ( 対 応 方 法 ) 目 が 見 えなくても 画 像 の 内 容 がわかるような 説 明 を alt 属 性 値 に 記 入 する 文 章 と 重 複 しないよう 注 意 する 避 難 サポートひょうご 文 章 と alt 属 性 が 重 複 している 例 ( 文 章 と 代 替 テキストは 重 複 しないようにしてください) <img src="../images/topics/saigai_hinan.jpg" alt=" 避 難 サポートひょうご"> <img src="../images/topics/saigai_hinan.jpg" alt=" 避 難 サポートひょうご 会 議 の 風 景 写 真 "> 写 真 の 内 容 を 具 体 的 に 伝 える 記 述 であれば より 良 いです <img src="../images/topics/saigai_hinan.jpg" alt=" 専 門 職 8 名 が 着 席 し 意 見 交 換 を 行 っている 様 子 "> 6

ケース2: 文 字 が 画 像 化 されている 場 合 ( 対 応 方 法 )まったく 同 じ 文 字 を alt 属 性 値 に 記 入 する alt 属 性 値 に 画 像 内 の 文 章 がすべて 入 っていません <img src="../images/ban_books.png" alt=" 福 祉 図 書 DVD"> 文 字 が 画 像 化 されている 場 合 まったく 同 じ 文 字 を alt 属 性 値 に 記 入 してください <img src="../images/ban_books.png" alt=" 福 祉 図 書 DVD 書 籍 DVD の 領 布 販 売 "> alt 属 性 値 が 図 となっていて 図 の 内 容 が 伝 わりません <img src="../images/pub lic/index01.png" alt=" 図 "> 文 字 が 画 像 化 されている 場 合 まったく 同 じ 文 字 を alt 属 性 値 に 記 入 してください <img src="../images/public/index01.png" alt=" 認 め 合 い つながり 支 え 合 い 福 祉 のまちづくり 認 め 合 い 見 守 り つながり 交 流 居 場 所 支 え 合 い 生 活 支 援 活 動 "> つながり= 交 流 居 場 所 や つながり( 交 流 居 場 所 ) または つながり 交 流 居 場 所 のように 図 が 示 す 関 係 性 を 補 足 するのは 問 題 ありません 7

ケース3: 飾 り イメージ デザインの 為 の 画 像 の 場 合 ( 対 応 方 法 ) 代 替 テキストを 入 れない alt 属 性 値 が イラスト となっており 何 のイラストか 分 かりません <img src="../images/about/index_maincopy.png" alt="イラスト"> デザインの 為 のイメージ 画 像 の 場 合 alt 属 性 は 設 定 し alt 属 性 を 空 にしてください <img src="../images/about/index_maincopy.png" alt=""> もし alt 属 性 値 を 記 入 する 場 合 は 以 下 のように 写 真 やイラストの 内 容 を 具 体 的 に 記 載 すべきですが 記 載 してしまうとイラストを 配 置 した 趣 旨 とは 異 なってしまうと 思 われます <img src="../images/about/index_maincopy.png" alt="オレンジ 色 のセーターを 着 て 白 いズボン を 履 いた7:3 分 けの 男 性 が 車 いすに 乗 っているイラスト"> 写 真 やイラストが イメージを 補 足 する 目 的 である 場 合 は alt 属 性 値 を 空 にする 対 応 が 一 番 適 切 です 8

4. 色 の 確 認 と 修 正 方 法 ( 文 字 と 画 像 ) JIS X 8341-3:2010 : 7.1.4.3 最 低 限 のコントラストに 関 する 達 成 基 準 等 級 AA 色 を 使 用 する 際 の 注 意 です 色 を 使 用 する 際 には 必 ず 手 順 に 沿 ってコントラスト 比 を 計 測 してください 背 景 色 と 文 字 色 とのコントラストを 十 分 に 確 保 するメリット 背 景 色 と 文 字 色 とのコントラストを 十 分 に 確 保 することで 弱 視 や 色 覚 障 害 を 持 つ 利 用 者 が 文 字 を 認 識 し やすくなります 手 順 1 背 景 色 と 文 字 色 のコントラスト 比 を 計 測 する 1. カラー コントラスト アナライザー 2013J をダウンロード http://weba11y.jp/tools/cca/ 一 度 ダウンロードすれば 二 度 目 以 降 はダウンロードの 必 要 はありません ~( 略 )~ カラー コントラスト アナライザー2013J をダウンロー ド をクリック 9

2.ダウンロードした 圧 縮 ファイル CCA-2013j.zip をダブルクリック 3. 開 いたフォルダーの 中 の Colour_Contrast_Analyser.exe をダブルクリック 4.カラー コントラスト アナライザー 2013J が 立 ち 上 がります 5. 公 開 する 画 像 を 表 示 します(ブラウザや 画 像 加 工 ソフトなど どのようなソフトでも 問 題 ありません) 例 ) 今 回 はアクセスボタン 画 像 のコントラスト 比 を 計 測 します 10

5.カラーコントラストアナライザー 2013J で 文 字 色 と 背 景 色 を 採 取 し コントラスト 比 を 計 測 します 最 初 に スポイド 機 能 で 文 字 の 色 を 採 取 します 次 に スポイド 機 能 で 背 景 の 色 を 採 取 します 2つの 色 を 採 取 すると コントラスト 比 が 表 示 されます 結 果 はすべて 不 適 合 でした 今 回 は 画 像 で 計 測 しましたが テキストの 場 合 も 同 様 の 手 順 で 計 測 します 手 順 2 コントラスト 改 善 方 法 アクセスボタン 画 像 は 文 字 色 も 薄 く 背 景 色 も 薄 かったので コントラスト 比 の 数 値 が 低 くなっていました 背 景 色 を 濃 くすれば コントラスト 比 の 数 値 が 高 くなります 1. 背 景 全 体 を 濃 くするか 文 字 を 濃 い 色 で 縁 取 り 修 正 します または 11

2. 修 正 した 色 をもう 一 度 カラーコントラストアナライザー 2013J で 計 測 します 等 級 AA で 適 合 となりました 3. 等 級 AA で 適 合 となりましたので 公 開 できる 状 態 となりました 等 級 AAA は 不 適 合 となっていても 問 題 ありません( 総 務 省 みんなの 公 共 サイト 運 用 モデルも 等 級 AAA 対 応 までは 求 めていません) その 他 の 画 像 の 改 善 例 文 字 の 改 善 例 ウェブアクセシビリティとは~(コントラスト 不 足 ) ウェブアクセシビリティとは~(コントラスト 改 善 後 ) 12

5. 文 字 や 背 景 の 色 形 を 設 定 する 時 の 注 意 JIS X 8341-3:2010 : 達 成 基 準 :7.1.3.1 情 報 及 び 関 係 性 に 関 する 達 成 基 準 等 級 A 文 字 や 背 景 の 色 は 前 ページを 参 照 し コントラストに 注 意 してください 画 像 ではなく 文 字 や 背 景 に 色 を 設 定 する 時 は 以 下 の 使 用 してはいけない HTML のタグで 設 定 しないでくだ さい HTML のタグで 色 の 設 定 をしないメリット 色 盲 色 弱 のユーザーはブラウザやソフトの 機 能 で 読 みやすい 文 字 色 や 背 景 色 に 変 更 していることが あります HTML に 直 接 色 が 設 定 されていると ユーザーが 色 を 変 更 して 閲 覧 することができなくなります 色 の 設 定 は CSS で 行 ってください 文 字 の 色 形 (フォントや 大 きさ)を 設 定 する 時 は HTML の font タグを 使 用 しない <font color=" 色 の 指 定 "></font> <font face=" 字 の 種 類 "></font> <font size="サイズの 指 定 "></font> 等 これらは 以 下 のように 組 み 合 わせて 使 用 することもありますが それもしないでください <font color=" 色 の 指 定 " size="サイズの 指 定 "></font> 背 景 の 色 を 設 定 する 時 は HTML の bgcolor タグを 使 用 しない <table bgcolor=" 背 景 色 の 指 定 "> </table> <body bgcolor=" 背 景 色 の 指 定 "> </ body > 等 13

6. 箇 条 書 きをする 時 の 注 意 JIS X 8341-3:2010 : 達 成 基 準 :7.1.3.1 情 報 及 び 関 係 性 に 関 する 達 成 基 準 等 級 A 箇 条 書 きをする 時 は 箇 条 書 き 用 の HTML タグを 使 用 してください HTML で 箇 条 書 き 用 の HTML タグ(リスト 要 素 )を 使 用 するメリット リスト 要 素 を 使 用 すると スクリーンリーダーなどの 支 援 技 術 が リストであると 認 識 できます リストの 設 定 方 法 < 事 例 1:ul 要 素 箇 条 書 き> 春 夏 秋 冬 <p> 春 <br /> 夏 <br /> 秋 <br /> 冬 <br /> </p> <ul> <li> 春 </li> <li> 夏 </li> <li> 秋 </li> <li> 冬 </li> </ul> < 事 例 2:ol 要 素 番 号 つき 箇 条 書 き> 1. 春 2. 夏 3. 秋 4. 冬 <p> 1. 春 <br /> 2. 夏 <br /> 3. 秋 <br /> 4. 冬 <br /> </p> <ol> <li> 春 </li> <li> 夏 </li> <li> 秋 </li> <li> 冬 </li> </ol> < 事 例 3:dl 要 素 dt 要 素 dd 要 素 用 語 とその 定 義 > 春 夏 秋 冬 立 春 から 立 夏 立 夏 から 立 秋 立 秋 から 立 冬 立 冬 から 立 春 <p> 春 <br /> 立 春 から 立 夏 <br /> 夏 <br /> 立 夏 から 立 秋 <br /> 秋 <br /> 立 秋 から 立 冬 <br /> 冬 <br /> 立 冬 から 立 春 <dl> <dt> 春 </dt> <dd> 立 春 から 立 夏 </dd> <dt> 夏 </dt> <dd> 立 夏 から 立 秋 </dd> <dt> 秋 </dt> <dd> 立 秋 から 立 冬 </dd> <dt> 冬 </dt> <dd> 立 冬 から 立 春 </dd> </p> </dl> 14

7.Word 文 書 のアクセシビリティ 対 応 手 順 Word 文 書 と PDF 文 書 については 2012 年 5 月 15 日 にウェブアクセシビリティ 基 盤 委 員 会 のウェブサイトで 公 開 された 実 装 方 法 集 の 日 本 語 訳 を 元 に できる 限 りの 対 応 を 行 っていきます WORD 文 書 のウェブアクセシビリティ 対 応 1)Microsoft Word で 見 出 しスタイルを 適 切 に 使 用 する 2)Microsoft Word で 代 替 テキストを 設 定 する 1. 画 像 を 右 クリックし [ 図 の 書 式 設 定 ]を 選 択 する 2. [ 代 替 テキスト]タブを 選 択 する 3. 表 示 されるテキストボックスに 代 替 テキストを 入 力 し [OK]を 押 下 する 15

3)Microsoft Word でテーブルのマークアップにテーブルエレメントを 使 用 する 1. 表 のヘッダ 行 のコンテキストメニューから[ 表 のプロパティ]を 選 択 する 2. [ 行 ]タブを 選 択 する 3. 次 の 画 像 に 示 すように 各 ページにタイトル 行 を 表 示 する を 選 択 する 4)WORD 文 書 で 複 数 ページにわたる 場 合 には 一 貫 性 のあるページ 番 号 を 指 定 する ページ 番 号 を 設 定 することで 利 用 者 は 現 在 時 を 確 認 することができます 5)WORD 文 書 で 複 数 ページにわたる 場 合 には 必 要 に 応 じてヘッダやフッタを 使 用 し 様 式 を 統 一 させる ヘッダやフッタが 複 数 ページで 連 続 する 場 合 一 貫 性 のある 予 測 可 能 な 方 法 で 繰 り 返 される 情 報 を 提 供 すること により コンテンツの 利 用 と 理 解 を 容 易 にするために 役 に 立 ちます 以 下 を 必 要 に 応 じて 設 定 してください 以 下 の 情 報 文 書 のタイトル 文 書 内 の 現 在 の 章 および 節 ページ 1-2 または ページ 5/13 のような 現 在 位 置 情 報 のあるページ 番 号 作 成 者 および 日 付 情 報 16

6)Microsoft Word で 目 次 を 作 成 する(ページ 数 が 多 く セクションが 分 かれている 場 合 ) Microsoft Word で[ 参 考 資 料 ]の[ 目 次 ]メニューから[ 目 次 の 挿 入 ]を 選 択 し 目 次 を 作 成 する WORD 文 書 を PDF に 変 換 する 場 合 1. 名 前 を 付 けて 保 存 > PDF(*.pdf) を 選 択 2. [オプション]をクリック 3. 次 を 使 用 してブックマークを 作 成 の[ 見 出 し]を 選 択 4. [ドキュメントのプロパティ]を 選 択 5. [アクセシビリティ 用 のドキュメント 構 造 タグ]を 選 択 し 保 存 17

8.PDF 文 書 のアクセシビリティ 対 応 手 順 1)Adobe Acrobat Pro で 文 書 のタイトルを 指 定 する 1. Adobe Acrobat Pro で PDF 文 書 を 開 く 2. [ファイル]から[プロパティ]を 選 択 する 3. [ 概 要 ]タブを 選 択 して タイトル を 記 入 又 は 変 更 する 2)Adobe Acrobat Pro Lang エントリを 使 用 してデフォルト 言 語 を 設 定 する 1. Adobe Acrobat Pro で PDF 文 書 を 開 く 2. [ファイル]から[プロパティ]を 選 択 する 3. [ 詳 細 設 定 ]タブを 選 択 する 4. [ 読 込 みオプション]から 日 本 語 を 選 択 し OK ボタンをクリック 18

文 字 がテキストデータとして 存 在 していない PDF の 場 合 可 能 な 限 り HTML で 代 替 コンテンツを 用 意 する 文 字 がテキストとデータとして 存 在 していない PDF とは 以 下 のようなものがあります 画 像 を 貼 りつけた PDF アウトライン 化 されたデータを 変 換 した PDF 1) 文 字 のデータ 化 画 像 化 されたデータは OCR 等 でスキャンし 文 字 データ 化 してください アウトライン 化 されたデータの 場 合 は アウトライン 化 される 前 のデータを 入 手 するか 画 像 に 変 換 して OCR 等 でスキャンし テキストデータ 化 してください 2)HTML 化 データ 化 されたテキストは PDF 化 するよりも HTML 化 する 方 がより アクセシビリティが 確 保 できます 画 像 を 貼 りつけた PDF またはアウトライン 化 された PDF を 通 常 どおりダウンロードできるようにアップすると 共 に HTML 版 も 提 供 してください 19

9.その 他 の 注 意 アニメーション 自 動 的 に 5 秒 以 上 動 き 続 けないようにしてください 音 自 動 的 に 音 が 鳴 らないように 設 定 してください 動 画 字 幕 を 設 定 するか 書 き 起 こしテキストを 用 意 してください 表 表 を 使 う 場 合 は 結 合 をできるだけ 避 けてください データテーブルの 場 合 は Caption や summary を 設 定 してください 20