ウェブアクセシビリティガイドライン

兵 庫 県 小 野 市 ウェブアクセシビリティガイドライン 第 1 版 平 成 24 年 12 月 情 報 管 理 課

目 次 1 ガイドライン 策 定 の 目 的... 1 2 ガイドラインの 適 用 範 囲... 1 3 ウェブアクセシビリティの 必 要 性... 1 4 根 拠 となる 規 格... 1 5 配 慮 の 対 象 となる 利 用 者... 2 6 達 成 等 級 と 達 成 基 準... 2 7 目 標 とする 等 級... 2 8 ガイドラインの 見 直 し... 2 9 達 成 基 準... 3 9.1 情 報 を 見 やすくするために... 3 9.1.1 スタイルシートを 適 切 に 使 用 する... 3 9.1.2 文 字 色 と 背 景 色 の 組 み 合 わせ コントラストに 配 慮 する... 3 9.1.3 文 字 サイズは 利 用 者 が 変 更 できるようにする... 3 9.2 情 報 を 探 しやすくするために... 4 9.2.1 文 書 の 見 出 しを 適 切 に 分 ける... 4 9.2.2 箇 条 書 きは HTML で 表 現 する... 4 9.2.3 適 切 なページタイトルをつける... 4 9.2.4 複 数 の 探 索 手 段 を 用 意 する... 4 9.2.5 共 通 ナビゲーションの 仕 組 みを 用 いる... 4 9.3 ホームページ 内 を 快 適 に 移 動 できるように... 5 9.3.2 リンク 箇 所 は 識 別 と 選 択 のしやすさに 配 慮 する... 5 9.3.3 ファイルにリンクを 設 定 する 場 合 は わかりやすさに 配 慮 する... 5 9.3.4 市 サイト 内 のリンクと 外 部 サイトへのリンクを 区 別 する... 5 9.3.5 リンクは 原 則 として 新 規 ウィンドウを 開 く 設 定 にしない... 6 9.4 情 報 の 内 容 を 理 解 できるようにする... 7 9.4.1 データを 表 すための 表 はわかりやすい 構 成 にする... 7 9.4.2 レイアウト 目 的 での 表 の 使 用 は 最 小 限 とする... 7 9.4.3 ページの 自 動 更 新 や 自 動 的 な 移 動 は 行 わない... 7 9.4.4 フレームは 使 用 しない... 7 9.5 情 報 を 支 障 なく 理 解 できるようにするために... 8 9.5.1 画 像 に 適 切 な 代 替 テキストを 用 意 する... 8 9.5.2 PDF は 可 能 な 限 り 使 用 せず 使 用 する 場 合 は 提 供 方 法 に 配 慮 する... 8 9.5.3 単 語 の 間 にスペースや 改 行 を 挿 入 しない... 8 9.5.4 形 状 または 位 置 のみに 依 存 した 情 報 提 供 はしない... 8 9.5.5 色 のみに 依 存 した 情 報 提 供 はしない... 9

9.5.6 言 語 コードと 文 字 コードを 指 定 する... 9 9.6 入 力 や 操 作 を 支 障 なく 行 えるようにするために... 10 9.6.1 入 力 フォームはわかりやすく 作 成 する... 10 9.6.2 キーボードだけですべての 操 作 が 行 えるようにする... 10 9.6.3 閲 覧 や 操 作 入 力 に 制 限 時 間 を 設 定 しない... 10 9.6.4 フォームの 入 力 内 容 を 確 認 し 取 消 や 修 正 が 可 能 な 仕 組 みを 用 意 する... 10 9.7 危 害 や 苦 痛 を 与 えないために... 11 9.7.1 表 示 内 容 の 移 動 や 変 化 について 注 意 する... 11 9.7.2 画 面 の 激 しい 点 滅 は 行 わない... 11 10 参 考 文 献... 12

1 ガイドライン 策 定 の 目 的 小 野 市 ウェブアクセシビリティガイドライン( 以 下 本 ガイドライン という )は 日 本 工 業 規 格 JIS X 8341-3:2010 をふまえ 高 齢 者 や 障 害 者 といったホームページの 利 用 になんらかの 制 約 がある 方 をはじめ ホー ムページを 利 用 する 誰 もが 提 供 される 情 報 や 機 能 を 支 障 なく 利 用 できるこ とを 目 的 とし ホームページ 作 成 の 際 に 配 慮 すべき 項 目 をまとめたものです 2 ガイドラインの 適 用 範 囲 本 ガイドラインは 小 野 市 サイト(www.city.ono.hyogo.jp)( 以 下 市 サ イト という )の CMS(コンテンツマネジメントシステム) 管 理 下 で 作 成 運 用 するページを 対 象 とします 3 ウェブアクセシビリティの 必 要 性 ホームページを 利 用 するすべての 人 が 心 身 の 機 能 や 利 用 する 環 境 に 関 係 なく ホームページで 提 供 されている 情 報 やサービスを 利 用 できることをウ ェブアクセシビリティといいます ホームページの 作 成 方 法 が 原 因 で 高 齢 者 や 障 害 者 などが 情 報 やサービスを 適 切 に 利 用 できないという 問 題 が 生 じな いように 利 用 者 誰 もが 等 しく 情 報 へアクセスできることに 配 慮 しながらペ ージを 作 成 し サイトを 運 用 する 考 え 方 です 4 根 拠 となる 規 格 ホームページで 利 用 される 技 術 の 標 準 化 を 進 める 団 体 である W3C が 勧 告 した WCAG2.0 を 含 む 形 で ウェブアクセシビリティに 関 する 国 内 の 標 準 規 格 である JIS X 8341-3:2010 高 齢 者 障 害 者 等 配 慮 設 計 指 針 情 報 通 信 に おける 機 器 ソフトウェア 及 びサービス 第 3 部 :ウェブコンテンツ が 平 成 22 年 8 月 に 改 正 公 示 されました 地 方 公 共 団 体 ウェブサイトは JIS X 8341-3:2010 に 対 応 することが 求 め られています 1

5 配 慮 の 対 象 となる 利 用 者 本 ガイドラインは 市 サイトを 訪 れるすべての 利 用 者 を 配 慮 の 対 象 として います その 中 で 特 に 利 用 する 際 に 問 題 が 生 じることの 多 い 次 の 利 用 者 に でき る 限 りの 配 慮 を 行 います (1) 視 覚 障 害 者 全 盲 ( 目 が 見 えない 音 声 読 み 上 げソフトの 利 用 者 など) 弱 視 ( 極 めて 見 えにくい) 色 覚 障 害 ( 色 の 違 いが 分 かりづらい) (2) 聴 覚 障 害 者 ( 耳 が 聞 こえない 聞 こえにくい) (3) 肢 体 不 自 由 者 ( 手 の 動 作 が 不 自 由 でマウスやキーボードを 操 作 する ことが 難 しい) 6 達 成 等 級 と 達 成 基 準 ウェブコンテンツに 関 する 要 件 への 適 合 の 程 度 を ウェブコンテンツのア クセシビリティ 達 成 等 級 ( 以 下 達 成 等 級 という )と 呼 びます 達 成 等 級 には 等 級 A 等 級 AA 及 び 等 級 AAA があります 本 ガイドラインでは 達 成 等 級 において 満 たすべき 達 成 基 準 を 定 め ペー ジの 作 成 において 対 応 すべき 個 別 的 な 要 件 を 規 定 します 7 目 標 とする 等 級 市 サイトは 本 ガイドライン 作 成 以 前 からアクセシビリティへの 対 応 に 取 り 組 んでおり 既 に 達 成 等 級 AA に 準 拠 している 箇 所 もあります 今 後 はさ らに 取 組 みをすすめ 平 成 25 年 3 月 までに 本 ガイドラインの 達 成 基 準 に 掲 げる JIS X 8341-3:2010 の 達 成 等 級 AA に 準 拠 することを 目 標 とします 注 : 本 ガイドラインにおける JIS X 8341-3:2010 に 準 拠 する という 表 記 は 情 報 通 信 アクセス 協 議 会 ウェブアクセシビリティ 基 盤 委 員 会 ウェブコ ンテンツの JIS X 8341-3:2010 対 応 度 表 記 ガイドライン 第 1 版 2010 年 8 月 20 日 で 定 められた 表 記 によります (URL http://waic.jp/docs/jis2010-compliance-guidelines/index.html) 8 ガイドラインの 見 直 し 利 用 者 の 閲 覧 環 境 の 変 化 ホームページ 制 作 技 術 の 変 化 に 対 応 するために 本 ガイドラインを 随 時 見 直 すこととします 2

9 達 成 基 準 9.1 情 報 を 見 やすくするために 9.1.1 スタイルシートを 適 切 に 使 用 する 関 連 JIS 項 目 7.1.3.1(A), 7.1.4.4(AA), 7.1.4.5(AA) (1) レイアウトや 文 字 の 大 きさ 色 などは 原 則 としてスタイルシ ートで 設 定 する (2) スタイルシートに 対 応 していないブラウザで 表 示 した 場 合 でも 情 報 が 伝 わるようにする (3) テキストを 画 像 化 する 場 合 は スタイルシートで 同 程 度 の 装 飾 表 現 が 実 現 できないか 十 分 に 検 討 する 9.1.2 文 字 色 と 背 景 色 の 組 み 合 わせ コントラストに 配 慮 する 関 連 JIS 項 目 7.1.4.3(AA) (1) ページ 内 のテキストと 背 景 色 のコントラスト( 明 度 )に 十 分 に 配 慮 する (2) 画 像 にテキストが 含 まれる 場 合 画 像 とテキストのコントラス ト( 明 度 )に 十 分 に 配 慮 する 9.1.3 文 字 サイズは 利 用 者 が 変 更 できるようにする 関 連 JIS 項 目 7.1.4.4(AA), 7.1.4.5(AA) (1) 市 サイトの 拡 大 縮 小 ボタンで 文 字 サイズが 変 更 できることを 確 認 する (2) 文 字 サイズを 200%まで 拡 大 できる 機 能 を 提 供 するとともに 文 字 サイズを 変 更 した 場 合 に 情 報 が 読 み 取 れないほど 表 示 が 崩 れることがないように 作 成 する 3

9.2 情 報 を 探 しやすくするために 9.2.1 文 書 の 見 出 しを 適 切 に 分 ける 関 連 JIS 項 目 7.1.3.1(A), 7.2.4.6(AA) (1) ページ 作 成 にあたって 文 書 の 構 造 を 意 識 し ページ 内 に 配 置 する 情 報 それぞれに 対 して HTML の 構 造 化 要 素 を 適 切 に 指 定 する 9.2.2 箇 条 書 きは HTML で 表 現 する 関 連 JIS 項 目 7.1.3.1(A), 7.2.4.6(AA) (1) 箇 条 書 きは HTML のタグを 使 い 記 号 付 きリスト 書 式 付 きリスト で 表 現 する (2) 箇 条 書 きを などのテキストで 表 現 しない 9.2.3 適 切 なページタイトルをつける 関 連 JIS 項 目 7.2.4.2(A) (1) ページ 内 容 が 容 易 に 理 解 できるタイトルをつける (2) 平 成 年 度 や ~について などの 表 記 はしない (3) 複 数 のページに 同 じタイトルは 使 用 しない 9.2.4 複 数 の 探 索 手 段 を 用 意 する 関 連 JIS 項 目 7.2.4.5(AA) (1) ホームページの 情 報 探 索 手 段 としてキーワード 検 索 機 能 を 各 ペ ージで 提 供 する (2) ホームページの 情 報 探 索 手 段 としてサイトマップを 用 意 し 各 ページへリンクさせる (3) その 他 関 連 するページへのリンクなどを 利 用 者 の 閲 覧 行 動 心 理 に 添 って 作 成 する 9.2.5 共 通 ナビゲーションの 仕 組 みを 用 いる 関 連 JIS 項 目 7.3.2.3(AA), 7.3.2.4(AA) (1) 各 ページのヘッダーとフッターを 統 一 する (2) 各 ページにウェブサイトの 主 要 なメニューを 配 置 する 4

9.3 ホームページ 内 を 快 適 に 移 動 できるように 9.3.1 リンクの 表 現 はリンク 先 を 容 易 に 理 解 できる 内 容 にする 関 連 JIS 項 目 7.1.1.1(A), 7.2.4.4(A) (1) リンクテキストは その 部 分 だけを 読 んでリンク 先 が 容 易 に 理 解 できる 内 容 にする (2) 原 則 として こちら などの 表 現 は 使 用 しない (3) 異 なる 複 数 の URL へのリンクに 同 一 のテキストを 使 用 しない 9.3.2 リンク 箇 所 は 識 別 と 選 択 のしやすさに 配 慮 する 関 連 JIS 項 目 7.2.4.4(A) (1) リンクテキストと リンクしていないテキストを 識 別 しやすく する (2) リンク 画 像 は 小 さくしすぎないように 設 定 し クリックできる 画 像 であることを 認 識 しやすい 見 栄 えにする (3) リンクテキストやリンク 画 像 は 適 切 な 間 隔 を 空 けて 配 置 する (4) リンクテキストやリンク 画 像 は リンク 部 分 にマウスカーソル を 合 せた 時 や キーボード 操 作 によってリンクにフォーカス( 選 択 可 能 領 域 )を 合 せた 時 に 色 が 変 わるなどの 変 化 をつけるこ とにより リンクされた 箇 所 であることが 容 易 に 理 解 できるよ うにする 9.3.3 ファイルにリンクを 設 定 する 場 合 は わかりやすさに 配 慮 する 関 連 JIS 項 目 7.2.4.4(A) (1) PDF など HTML 以 外 のファイルへリンクを 設 定 する 場 合 は リンクテキストにファイルの 形 式 とサイズを 表 記 する 9.3.4 市 サイト 内 のリンクと 外 部 サイトへのリンクを 区 別 する 関 連 JIS 項 目 7.2.4.4(A) (1) 外 部 サイト(www.city.ono.hyogo.jp 以 外 のドメイン)へのリン クを 設 定 する 場 合 は 利 用 者 が 容 易 に 理 解 できるようにリンク テキストの 横 に 外 部 リンクであることを 表 記 する 5

9.3.5 リンクは 原 則 として 新 規 ウィンドウを 開 く 設 定 にしない 関 連 JIS 項 目 7.3.2.1(A), 7.3.2.2(A) (1) リンクは 同 一 のウィンドウ 内 で 移 動 するように 設 定 する (2) 新 規 ウィンドウを 開 く 場 合 は リンクテキストやアイコンなど を 使 用 して 新 しいウィンドウが 開 くことを 表 記 する 6

9.4 情 報 の 内 容 を 理 解 できるようにする 9.4.1 データを 表 すための 表 はわかりやすい 構 成 にする 関 連 JIS 項 目 7.1.3.1(A) (1) 表 は 単 純 な 構 成 とする (2) 表 は 読 み 上 げ 順 を 考 慮 し 内 容 が 把 握 しやすい 構 成 とする 9.4.2 レイアウト 目 的 での 表 の 使 用 は 最 小 限 とする 関 連 JIS 項 目 7.1.3.2(A), 7.2.4.3(A) (1) レイアウト 目 的 での 表 は 可 能 な 限 り 使 用 しない (2) レイアウト 目 的 で 表 を 作 成 する 場 合 読 み 上 げ 順 を 考 慮 し 意 味 が 通 じるように 構 成 する 9.4.3 ページの 自 動 更 新 や 自 動 的 な 移 動 は 行 わない 関 連 JIS 項 目 7.2.2.2(A), 7.3.2.1(A), 7.3.2.2(A) (1) ページ 内 容 の 自 動 更 新 や 自 動 的 な 移 動 は 行 わない (2) ホームページの URL を 変 更 する 場 合 は 新 しい URL を 案 内 し たページを 用 意 する 一 定 時 間 で 自 動 的 に 移 動 する 仕 組 みにし ない 9.4.4 フレームは 使 用 しない 関 連 JIS 項 目 7.2.4.1(A), 7.2.4.2(A), 7.4.1.2(A) (1) フレームは 原 則 として 使 用 しない 7

9.5 情 報 を 支 障 なく 理 解 できるようにするために 9.5.1 画 像 に 適 切 な 代 替 テキストを 用 意 する 関 連 JIS 項 目 7.1.1.1(A) (1) 画 像 を 使 用 する 場 合 代 替 テキストに 画 像 で 表 現 している 内 容 を 簡 潔 に 表 す 説 明 を 入 れる (2) 地 図 やグラフなど 複 雑 な 内 容 を 示 している 画 像 の 場 合 は 画 像 近 くに 内 容 を 説 明 する 文 章 や 表 を 用 意 する (3) 飾 り 目 的 の 画 像 は 読 み 上 げられないように 代 替 テキストを 空 白 にする 9.5.2 PDF は 可 能 な 限 り 使 用 せず 使 用 する 場 合 は 提 供 方 法 に 配 慮 す る 関 連 JIS 項 目 7.1.1.1(A) (1) 情 報 提 供 はテキストで 行 うことを 基 本 とする PDF 形 式 での 情 報 提 供 は 次 の 場 合 とする (ア) 申 請 書 の 様 式 やパンフレット ポスターなど 利 用 者 にレ イアウトどおりに 印 刷 し 使 用 してもらう 必 要 があるとき (イ) 報 告 書 など 多 数 のページで 構 成 される 情 報 を 一 つ 又 は 複 数 のファイルにまとめて 収 録 し 提 供 する 必 要 があるとき (2) PDF 形 式 で 情 報 を 提 供 する 場 合 は 次 の 内 容 に 配 慮 する (ア) PDF を 利 用 できない 場 合 でも 内 容 を 把 握 できるよう PDF で 提 供 している 情 報 の 内 容 をテキストで 掲 載 する (イ) PDF のファイル 容 量 は 可 能 な 限 り 軽 量 化 を 図 ること 9.5.3 単 語 の 間 にスペースや 改 行 を 挿 入 しない 関 連 JIS 項 目 7.1.3.2(A) (1) 体 裁 のために 単 語 内 の 文 字 と 文 字 の 間 に 全 角 スペースや 半 角 スペースを 入 れない (2) 単 語 内 の 文 字 と 文 字 の 間 に 改 行 を 入 れない 9.5.4 形 状 または 位 置 のみに 依 存 した 情 報 提 供 はしない 関 連 JIS 項 目 7.1.3.3(A) (1) 形 状 に 対 して 意 味 を 与 えるのではなく 代 替 テキストを 指 定 し 形 状 を 認 識 できない 環 境 でも 情 報 を 得 られるようにする (2) 位 置 の 違 いで 情 報 の 違 いを 表 したり 操 作 を 指 示 したりしない 8

9.5.5 色 のみに 依 存 した 情 報 提 供 はしない 関 連 JIS 項 目 7.1.4.1(A) (1) 情 報 の 意 味 や 位 置 づけの 違 いは 色 の 違 いで 表 現 するだけでは なく テキストでも 違 いがわかるようにする 9.5.6 言 語 コードと 文 字 コードを 指 定 する 関 連 JIS 項 目 7.3.1.1(A)7.3.1.2(AA) (1) html 要 素 の lang 属 性 または xml:lang 属 性 に 使 用 してい る 言 語 を 記 述 する (2) ページ 内 に 別 の 言 語 を 表 記 する 場 合 には lang 属 性 を 用 いて 言 語 を 記 述 する 9

9.6 入 力 や 操 作 を 支 障 なく 行 えるようにするために 9.6.1 入 力 フォームはわかりやすく 作 成 する 関 連 JIS 項 目 7.1.1.1(A), 7.2.4.6(AA), 7.3.3.2(A),7.4.1.2 (A) (1) 入 力 フォームを 用 いたページを 作 成 する 際 には 次 の 内 容 に 配 慮 する (ア) 適 切 な 項 目 名 (ラベル)をつける (イ) HTML のタグによる 記 述 で 項 目 名 と 入 力 欄 との 対 応 関 係 を 指 定 する (ウ) 入 力 項 目 に 制 約 事 項 ( 全 角 半 角 ハイフンの 有 無 など) を 設 ける 場 合 はテキストで 説 明 をする 9.6.2 キーボードだけですべての 操 作 が 行 えるようにする 関 連 JIS 項 目 7.2.1.1(A), 7.2.1.2(A), 7.2.4.1(A), 7.2.4.3 (A), 7.2.4.7(AA), 7.3.2.1(A), 7.3.2.2(A) (1) 全 ての 操 作 をキーボードで 行 えるようにする (2) キーボードの TAB キーを 使 ってホームページ 内 のリンクやフ ォームの 選 択 候 補 (フォーカス)を 移 動 する 場 合 に 情 報 の 意 味 のつながりや 関 係 性 に 即 した 順 序 で 移 動 するように リンク やフォームを 配 置 する (3) メインコンテンツへ 直 接 移 動 するリンクを 各 ページの 先 頭 に 追 加 する 9.6.3 閲 覧 や 操 作 入 力 に 制 限 時 間 を 設 定 しない 関 連 JIS 項 目 7.2.2.1(A) (1) ホームページの 閲 覧 や 操 作 入 力 に 制 限 時 間 を 設 定 しない 9.6.4 フォームの 入 力 内 容 を 確 認 し 取 消 や 修 正 が 可 能 な 仕 組 みを 用 意 する 関 連 JIS 項 目 7.2.4.6(AA), 7.3.3.1(A), 7.3.3.2(A), 7.3.3.3 (AA), 7.3.3.4(AA) (1) 入 力 内 容 の 修 正 を 求 める 場 合 には 修 正 が 必 要 な 箇 所 とその 修 正 方 法 をすぐにわかるようにする 10

9.7 危 害 や 苦 痛 を 与 えないために 9.7.1 表 示 内 容 の 移 動 や 変 化 について 注 意 する 関 連 JIS 項 目 7.2.2.2(A) (1) 原 則 としてテキスト あるいは 画 像 を 移 動 させない (2) テキスト 内 容 が 変 化 する 画 像 を 作 成 する 必 要 がある 場 合 は 5 秒 経 過 したら 静 止 させる 9.7.2 画 面 の 激 しい 点 滅 は 行 わない 関 連 JIS 項 目 7.2.3.1(A) (1) 画 面 全 体 を 点 滅 させない (2) 画 面 の 一 部 を 激 しく 点 滅 させない (3) 1 秒 間 に 3 回 より 多 く 点 滅 させない (4) 点 滅 をさせる 必 要 がある 場 合 は 5 秒 経 過 したら 静 止 させる 11

10 参 考 文 献 (1) 日 本 工 業 標 準 調 査 会 / http://www.jisc.go.jp/index.html (2) みんなの 公 共 サイト 運 用 モデル / 総 務 省 http://www.soumu.go.jp/main_sosiki/joho_tsusin/w_access/index_02. html (3) World Wide Web Consortium(W3C)/ http://www.w3.org/ (4) ウェブアクセシビリティ 基 盤 委 員 会 (WAIC) / http://waic.jp/ (5) ウェブ コンテンツ アクセシビリティ ガイドライン(WCAG)2.0 日 本 語 訳 / 翻 訳 ウェブアクセシビリティ 基 盤 委 員 会 http://waic.jp/docs/wcag20/overview.html (6) ウェブコンテンツの JIS X 8341-3:2010 対 応 度 表 記 ガイドライン 第 1 版 2010 年 8 月 20 日 http://waic.jp/docs/jis2010-compliance-guidelines/ (7) Web アクセシビリティ 完 全 ガイド/ アライドブレインズ: 日 経 BP 社 (8) 環 境 省 ウェブサイト 作 成 ガイドライン/ 環 境 省 http://www.env.go.jp/other/gyosei-johoka/web_gl/index.html. 12

ウェブアクセシビリティガイドライン( 第 1 版 ) 平 成 24 年 12 月 総 務 部 情 報 管 理 課 675-1380 兵 庫 県 小 野 市 王 子 町 806-1 TEL:0794-63-1000( 内 線 740) FAX:0794-63-0198