第 6 アクセシビリティに 配 慮 したホームページづくり ここでは 県 ホームページにおいてアクセシビリティに 配 慮 したホームページづくりを 進 め るために 特 に 注 意 すべき 事 項 を 示 します 県 ホームページのアクセシビリティのレベルを 向 上 するには すべての 所 属 において ホー ムページ 作 りに 関 わるすべての 職 員 の 取 り 組 みが 不 可 欠 です ここに 掲 載 した 内 容 をよく 理 解 した 上 でホームページづくりを 行 ってください ウェブアクセシビリティとは ウェブアクセシビリティ とは 高 齢 者 や 障 害 者 など 心 身 の 機 能 に 制 約 のある 人 でも 年 齢 的 身 体 的 条 件 に 関 わらず ウェブで 提 供 されている 情 報 にアクセスし 利 用 できること を 意 味 します ウェブアクセシビリティは JIS 規 格 (JIS X 8341-3 高 齢 者 障 害 者 等 配 慮 設 計 指 針 - 情 報 通 信 における 機 器,ソフトウェア 及 びサービス - 第 3 部 :ウェブコンテンツ )が 作 られるなど 高 齢 者 や 障 害 者 の 利 用 に 応 じた 様 々な 規 定 が 設 けられています 長 野 県 ホームページの 状 況 県 ホームページのアクセシビリティに 関 する 評 価 は 決 して 高 くありません これは ホー ムページ 作 成 の 最 低 限 のルールが 守 られていないことによるものです 近 年 CMS(コンテンツ マネジメント システム)といったホームページ 管 理 掲 載 シ ステムが 普 及 しており こうしたシステムを 導 入 することにより 解 決 する 部 分 もあります しかし 最 終 的 には 作 成 する 職 員 一 人 ひとりがアクセシビリティに 関 する 意 識 を 高 めて 取 り 組 むことが 最 も 重 要 で みんなで 取 り 組 めばアクセシビリティのレベルは 大 きく 向 上 します これだけは 対 応 してほしい10 項 目 ホームページの 作 成 に 当 たって 気 をつける 点 は 第 5 ホームページ 作 成 ガイドライン で 示 していますが アクセシビリティ 上 で 特 に 気 をつけるべき10 項 目 をまとめました 1 画 像 には 必 ずテキストで 代 替 情 報 を 付 ける(alt 属 性 を 付 ける)こと 2 リンクする 画 像 全 てにテキストで 代 替 情 報 を 付 けリンク 先 を 明 確 にすること 3 外 国 語 専 門 用 語 読 みの 難 しい 言 葉 等 を 乱 用 せず 誰 にでもわかるように 配 慮 すること 4 色 によって 伝 えられる 情 報 は 色 がなくても 情 報 が 伝 わるようにすること 5 ページの 内 容 がわかるように 適 切 なタイトルを 付 けること 6 配 置 のための 表 組 みは 情 報 が 適 切 に 音 声 ブラウザで 読 み 上 げられるようにすること 7 文 字 の 設 定 は 障 害 者 や 高 齢 者 の 利 用 に 配 慮 した 形 式 にすること 8 単 語 の 文 字 の 間 にスペースや 改 行 を 入 れないこと 9 リンクの 設 定 は 音 声 ブラウザ 等 の 利 用 者 にもわかりやすいよう 配 慮 すること 10 情 報 は 基 本 的 に HTML で 提 供 し PDF 等 の 利 用 は 最 小 限 の 範 囲 とすること 24
1 画 像 には 必 ずテキストで 代 替 情 報 を 付 ける(alt 属 性 を 付 ける)こと 音 声 ブラウザやテキストブラウザの 利 用 者 は 代 替 テキストがない 場 合 画 像 で 示 されて いる 情 報 を 理 解 できない 画 像 の 種 類 代 替 テキストの 用 意 の 仕 方 の 例 情 報 としての 意 味 をもつ 写 真 イ 画 像 の 内 容 を 簡 潔 に 記 述 する ラスト 例 : 会 見 を 行 う 知 事 の 写 真 の 場 合 写 真 会 見 を 行 う 知 事 イメージや 雰 囲 気 を 表 していて 画 像 の 内 容 を 簡 潔 に 記 述 する 情 報 としては 意 味 を 持 たない 写 例 :ヨットが 浮 かびオレンジ 色 に 染 まる 海 のイラスト 真 イラスト イメージ ヨットが 浮 かびオレンジ 色 に 染 まる 海 テキストを 画 像 化 したもの(タイ 画 像 化 したテキストの 内 容 を 代 替 テキストとして 記 述 す トル 画 像 見 出 し 画 像 等 ) る 地 図 や 見 取 り 図 模 式 図 等 複 雑 な ALT 属 性 の 中 には ~の 図 図 1 など 簡 潔 な 内 容 を 記 情 報 を 表 した 画 像 グラフ 述 し 必 要 に 応 じその 概 要 をテキストで 説 明 する ( 本 文 図 のキャプションなど) 箇 条 書 きの 前 のポイント 画 像 情 報 として 意 味 のない 画 像 の 場 合 は alt 属 性 の 中 に 全 角 配 置 を 制 御 するための 透 明 な 画 スペースを 入 れる(alt=" ") 像 ( 設 定 しないとファイル 名 を 読 上 げてしまうため) alt 属 性 (オルト) Windows で 画 像 にマウスポインターが 乗 った 時 にでる 代 替 文 字 情 報 で 音 声 ブラウザはこ こに 書 かれている 文 字 で 画 像 の 情 報 を 得 ている alt = ゴルフ 場 利 用 税 非 課 税 のお 知 らせ (alt 指 定 がないと 音 声 ブラウザで 読 み 上 げ ないため 何 のページか 分 からなくなる) alt = (イメージ 画 像 の 場 合 は alt をつけなくても 何 の ページであるかは 分 かる 付 けるとすれば イメージ ゴルフのイラスト ) 25
チェックポイント 画 像 が 示 している 情 報 の 内 容 は 画 像 が 見 えない 場 合 でも 過 不 足 なく 理 解 できるか (ブ ラウザの 設 定 で 画 像 をオフにして 表 示 する 音 声 ブラウザ 等 で 聞 くなど) レイアウトの 調 整 のために 置 かれた 画 像 や 情 報 として 意 味 のない 画 像 等 に 余 分 な 代 替 テ キストを 指 定 していないか 2 リンクする 画 像 全 てにテキストで 代 替 情 報 を 付 けリンク 先 を 明 確 にすること リンク 画 像 の 場 合 音 声 ブラウザでは alt 属 性 が 無 い 時 はリンク 先 の URL アドレスを 読 み 上 げるので 音 声 ブラウザやテキストブラウザの 利 用 者 は リンク 画 像 に 代 替 情 報 がない と リンク 先 を 識 別 することができない ハイパーリンク 画 像 の alt 属 性 の 中 に 代 替 テキストを 指 定 する alt 属 性 の 内 容 は その 部 分 だけでリンク 先 の 内 容 がわかるように 記 述 する 同 じリンクが 繰 り 返 されることを 避 ける リンクしない 画 像 にバナーに 似 た 形 の 画 像 は 使 わない チェックポイント リンク 画 像 の 上 にカーソルを 置 いた 時 に リンク 先 を 適 切 に 示 すテキストが 表 示 されるか alt = 次 のページ と 設 定 していないと 音 声 ブラウザで 読 み 上 げられない (リンク 先 が 分 からない) 3 外 国 語 専 門 用 語 読 みの 難 しい 言 葉 等 を 乱 用 せず 誰 にでもわかるように 配 慮 すること ページ 中 に 外 国 語 専 門 用 語 読 みの 難 しい 言 葉 等 があると 掲 載 している 内 容 を 理 解 し てもらえない 場 合 がある 見 出 し 等 の 重 要 な 箇 所 では 外 国 語 を 用 いず 日 本 語 又 はカタカナで 表 記 する(Top トップ) 外 国 語 は 日 本 語 に 置 き 換 えられる 表 現 がある 場 合 は 日 本 語 で 表 記 する ページ 内 の 最 初 に 出 現 した 箇 所 等 に カッコ 書 きによる 読 み 仮 名 言 い 換 え 正 式 名 称 を 26
添 える また 専 門 用 語 については 解 説 等 を 添 える チェックポイント 掲 載 した 情 報 に 詳 しくない 人 でも 内 容 が 十 分 に 伝 わるか 4 色 によって 伝 えられる 情 報 は 色 がなくても 情 報 が 伝 わるようにすること 色 の 違 いで 表 現 や 指 示 を 行 うとわかりやすくなるが 色 の 違 いだけでは 音 声 ブラウザや モノクロブラウザを 使 う 人 や 色 の 区 別 のつかない 人 にはその 意 味 が 伝 わらない 強 調 したい 単 語 や 文 章 には 色 の 違 いだけでなく 太 字 にする グラフや 図 は 塗 りつぶしパターンの 違 いで 表 現 する また グラフでは 凡 例 だけでなく 引 込 み 線 を 用 いる 文 字 色 の 違 いと 一 緒 に 記 号 等 で 表 現 する チェックポイント モノクロで 見 たときに 正 確 に 情 報 を 把 握 できるか 色 の 違 いだけでは 判 断 ができない 人 もいる (お 薦 め)と 書 くなど 色 以 外 の 方 法 でも 表 現 する 27
5 ページの 内 容 がわかるように 適 切 なタイトルを 付 けること ページタイトルが 適 切 に 付 けられていない(タイトルが 付 いていない 内 容 と 異 なるタイ トルになっているなど) 場 合 は 音 声 ブラウザ 等 の 利 用 者 がページの 概 要 を 理 解 できなか ったり 目 的 のページかどうかを 判 断 できなかったりする 検 索 エンジンで 検 索 したときに 関 係 した 項 目 で 表 示 されない 上 位 に 表 示 されない 関 係 ない 項 目 で 表 示 される といったおそれがある お 気 に 入 り 等 に 登 録 した 時 に 正 しい 内 容 が 表 示 されない 何 のページか 分 からない ページの 内 容 が 分 かるタイトルをつける ページ 内 容 を 最 も 端 的 に 表 す 単 語 やフレーズを 含 める 長 すぎないように 簡 潔 な 表 現 にする ホームページ 内 で 同 一 のタイトルのページが 複 数 出 ないようにする チェックポイント ブラウザを 開 いた 時 に 内 容 を 示 すタイトルが 正 しく 表 示 されるか 6 配 置 のための 表 組 みは 情 報 が 適 切 に 音 声 ブラウザで 読 み 上 げられるようにす ること HTML の table 要 素 を 使 ったページレイアウトにする 場 合 視 覚 障 害 者 用 の 音 声 ブラウザ 等 での 読 み 上 げ 順 序 に 配 慮 した 設 計 にしないと 情 報 が 正 しく 伝 わらない 場 合 がある 配 置 のために 表 組 み(table 要 素 )を 用 いる 場 合 は 音 声 ブラウザ 等 での 読 み 上 げに 配 慮 した 配 置 とする 28
チェックポイント テーブルを 使 った 部 分 をコードで 見 た 時 に 想 定 どおりの 順 番 になっているか <table 要 素 を 使 ったページレイアウトの 読 み 上 げ 例 > HTML で 記 述 されている 順 番 に 読 み 上 げられる 表 の 配 置 から 見 ると 横 へ 順 に 読 み 上 げられる 7 文 字 の 設 定 は 障 害 者 や 高 齢 者 の 利 用 に 配 慮 した 形 式 にすること 対 応 内 容 文 字 の 色 を 指 定 する 場 合 には コントラスト 配 色 に 十 分 配 慮 する 文 字 サイズや 書 体 を 指 定 せず ブラウザで 指 定 されたサイズ フォントで 表 示 がされるよ うにする 使 用 する 文 字 は 全 角 の 漢 字 ひらがな カタカナ 英 数 字 と 半 角 英 数 とし 半 角 のかな 文 字 機 種 依 存 文 字 は 使 用 しない 年 月 日 の 表 記 は 年 月 日 と 表 記 する ( 200X/X/XX だと 音 声 ブラウザでは 別 の 読 み 方 をしてしまう) 文 字 の 色 と 背 景 色 の 組 み 合 わせによっては 色 の 識 別 がしにくい 人 は 文 字 が 読 み 取 りづら くなる 可 能 性 がある 文 字 サイズを 固 定 すると 利 用 者 はブラウザの 文 字 サイズ 変 更 機 能 を 利 用 して 拡 大 するこ が 利 用 できなくなる 機 種 依 存 文 字 はOSやブラウザの 種 類 によって 正 しく 表 示 されない 場 合 がある 制 作 時 に 複 数 のスタッフで 配 色 がわかりにくくないかを 確 認 する フォントは 固 定 しないこと やむを 得 ずサイズを 指 定 する 場 合 は 10~12ポイント 程 度 の 見 やすい 大 きさとする 読 みを 平 仮 名 カタカナ 等 で 記 述 する また 類 似 の 別 の 漢 字 や 算 用 数 字 等 を 代 用 する 漢 字 や 記 号 を 画 像 で 作 成 して 配 置 し 読 みを 代 替 テキスト(alt 属 性 等 )で 記 述 する 複 数 のアルファベット(cm 等 )や 文 字 の 組 み 合 わせでできた 文 字 ( 等 )は1 文 字 ずつ 書 き 下 す 金 額 を 表 す 場 合 \ ではなく 円 を 使 う ( \ が 音 声 ブラウザで 読 み 上 げられな いため) 29
8 単 語 の 文 字 の 間 に 空 白 (スペース)や 改 行 を 入 れないこと 表 示 の 体 裁 を 整 えるために 単 語 の 途 中 に 空 白 や 改 行 を 入 れると 音 声 ブラウザ 等 では 一 つ の 単 語 として 認 識 しないため うまく 読 み 上 げられなくなり 利 用 者 が 内 容 を 理 解 できな くなる < 音 声 ブラウザの 読 み 上 げ 方 > 知 事 会 見 ち こと かい み 所 在 地 ところ ざい ち 原 則 として 単 語 の 文 字 の 間 に 空 白 や 改 行 は 入 れないようにする 文 字 のレイアウトが 必 要 な 場 合 は スタイルシートで 調 整 するか 画 像 にして 挿 入 する 9 リンクの 設 定 は 音 声 ブラウザ 等 の 利 用 者 にもわかりやすいよう 配 慮 すること 音 声 ブラウザ 等 の 利 用 者 は 的 確 なリンク 表 現 が 行 われていないと どのようなページに リンクしているか 判 断 できない リンクテキストは 簡 潔 でわかりやすいものとしを リンク 先 の 内 容 を 判 断 しやすくする URLアドレスの 文 字 列 にリンクを 直 接 設 定 しない 指 示 代 名 詞 だけでリンク 先 を 指 定 しない( 例 :ここ こちら 等 ) クリック! など リンク 先 の 内 容 を 推 測 できない 表 現 を 用 いない リンク 以 外 の 場 所 では 下 線 を 使 わない (リンクできると 間 違 えてしまう) 適 度 なリンク 範 囲 を 確 保 できるように 文 字 列 全 体 にリンクを 設 定 する 隣 接 するリンクの 間 は 適 切 な 間 隔 を 設 ける テキストリンクが 横 に 並 ぶ 場 合 各 テキストリンクの 間 に 縦 線 や 斜 線 を 入 れる 30
10 情 報 は 基 本 的 に HTML で 提 供 し PDF 等 の 利 用 は 最 小 限 の 範 囲 とすること PDF は HTML 化 作 業 をすることなく 簡 単 に 作 成 できるほか 資 料 の 正 確 な 印 刷 イメージを 提 供 できるが 閲 覧 に 専 用 ソフトが 必 要 な 上 現 状 では 音 声 ブラウザ 等 で 正 しく 読 み 上 げ られない 場 合 がある MS-WORD MS-EXCEL は 利 用 者 が 対 応 ソフトを 導 入 していない 場 合 表 示 利 用 できない 場 合 がある 専 用 ソフトが 必 要 になる PDF MS-WORD MS-EXCEL などの 使 用 は 最 小 限 の 範 囲 とする PDF を 使 った 情 報 提 供 = 資 料 の 正 確 な 印 刷 イメージを 提 供 するもの 発 表 資 料 (プレスリリース) パンフレット 広 報 紙 チラシ 会 議 資 料 計 画 等 の 本 文 申 請 等 の 様 式 等 CSV を 使 った 情 報 提 供 = 統 計 情 報 等 表 形 式 で 提 供 するもの MS-WORD MS-EXCEL を 使 った 情 報 提 供 = 利 用 者 が 加 工 利 用 するもの 申 請 等 の 様 式 各 種 統 計 情 報 等 アクセシビリティに 配 慮 した PDF 形 式 で 制 作 し 公 開 (Acrobat バージョン 5.0 以 上 )する と 同 時 に 掲 載 の 際 には PDF ファイルの 情 報 内 容 を 説 明 するテキスト 等 を 提 供 する リンク 場 所 にはファイルの 形 式 サイズ 及 びページ 数 を 明 記 する 例 PDF 形 式 : KB/ ページ 資 料 等 でページ 数 が 多 くなる データ 量 が 多 くなる 場 合 は 分 割 して 提 供 する 計 画 等 の 本 文 を PDF で 提 供 する 場 合 は できるだけその 情 報 の 概 要 が HTML ページでわか るようにする プラグインの 最 新 バージョンをダウンロードできるページへのリンクを 提 供 し プラグイ ンを 持 っていない 利 用 者 が 入 手 しやすいようにする その 他 インターネットエクスプローラ 以 外 のブラウザ( )でも 正 しく 表 示 されるか 確 認 すること ( 異 なるブラウザでは 画 像 や 表 などが 想 定 どおりに 表 示 されない 場 合 がある ) Firefox Safari Opera Netscape など 31
(ここに 掲 載 する 内 容 は 以 下 の 関 係 サイトを 参 考 にまとめたものです ) アクセシビリティ ガイドライン ( 株 式 会 社 ユーディットホームページ) http://www.udit.jp/ud/web/guide/guide.html アクセシビリティを 学 ぶ ( 株 式 会 社 A.A.O.ホームページ) http://www.aao.ne.jp/accessibility/index.html みんなの 公 共 サイト 運 用 モデル ( 総 務 省 ホームページ) http://www.soumu.go.jp/joho_tsusin/w_access/index.html みんなのウェブ ( 独 立 行 政 法 人 情 報 通 信 研 究 機 構 (NICT)ホームページ) http://www2.nict.go.jp/v/v413/103/accessibility/index.html 32