JIS X 8341-3:2010に 基 づいた ウェブの 試 験 方 法 2010 年 9 月 22 日 富 士 通 デザイン 株 式 会 社 近 藤 真 太 郎 ウェブアクセシビリティ 基 盤 委 員 会 WG3 委 員 Copyright 2010 FUJITSU LIMITED
1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に 基 づいた 試 験 の 特 徴 1-2. 試 験 の 基 本 的 な 流 れ 1-3. 規 格 本 文 と 関 連 文 書 1-4. ウェブアクセシビリティ 基 盤 委 員 会 (WAIC) 1/ 26 Copyright 2010 FUJITSU LIMITED
1-1. JIS X 8341-3:2010に 基 づいた 試 験 の 特 徴 ページ 選 定 試 験 方 法 結 果 表 示 の 要 件 数 値 基 準 が 明 確 に アクセシビリティを 客 観 的 に 判 断 できる 共 通 のルール 基 準 でアクセシビリティの 品 質 を 証 明 できる ウェブコンテンツ 調 達 時 の 検 収 条 件 を 明 確 にできる 2004 年 版 と 比 較 してコストがかかる 2/ 26 Copyright 2010 FUJITSU LIMITED
1-2. 試 験 の 基 本 的 な 流 れ 1. 試 験 実 施 の 準 備 1 アクセシビリティ 達 成 等 級 (A / AA / AAA)の 設 定 2 達 成 基 準 チェックリストの 作 成 3 実 装 方 法 チェックリストの 作 成 依 存 する 技 術 (HTML, CSS, JavaScript, Flashなど)の 特 定 WCAG 2.0 解 説 書 WCAG 2.0 実 装 方 法 集 から 実 装 方 法 を 選 択 アクセシビリティ サポーテッド 情 報 の 参 照 2. 試 験 対 象 の 特 定 A. ウェブページ 単 位 B. ウェブページ 一 式 単 位 3. 試 験 実 施 WCAG 2.0 解 説 書 WCAG 2.0 実 装 方 法 集 に 基 づいた 試 験 4. 試 験 結 果 の 表 示 3/ 26 Copyright 2010 FUJITSU LIMITED
1-3. 規 格 本 文 と 関 連 文 書 JIS X 8341-3:2010 内 容 : 4つの 原 則 ガイドライン 達 成 基 準 技 術 非 依 存 特 定 技 術 での 実 装 方 法 の 記 述 なし WCAG 2.0 解 説 書 内 容 : 意 図 ユーザーのメリット 事 例 実 装 方 法 の 一 覧 用 語 説 明 用 途 : 達 成 基 準 の 理 解 WCAG 2.0 実 装 方 法 集 内 容 : 技 術 別 の 実 装 方 法 HTML, CSS, 不 適 合 事 例 用 途 : 達 成 基 準 を 満 たす 実 装 方 法 と チェックポイ ント 判 定 基 準 を 確 認 ウェブアクセシビリティ 基 盤 委 員 会 (WAIC)で 整 備 公 開 4/ 26 Copyright 2010 FUJITSU LIMITED
1-4. ウェブアクセシビリティ 基 盤 委 員 会 (WAIC) ウェブサイト 作 成 と 試 験 のベースライン 構 築 を 目 指 す 組 織 概 要 改 正 原 案 作 成 メンバー 企 業 省 庁 利 用 者 が 参 加 2010 年 版 JISの 実 装 試 験 を 行 う 際 に 必 要 な 情 報 を 整 備 公 開 公 開 している 文 書 JIS X 8341-3:2010 関 連 文 書 JISの 実 装 試 験 に 必 要 な 情 報 WCAG 2.0 関 連 翻 訳 文 書 WCAG 2.0 及 び 関 連 文 書 の 翻 訳 http://www.ciaj.or.jp/access/web/ 5/ 26 Copyright 2010 FUJITSU LIMITED
2. サンプルページを 用 いた 試 験 例 2-1. 概 要 2-2. 達 成 基 準 試 験 例 解 説 2-3. よく 見 られる 不 適 合 実 装 例 解 説 6/ 26 Copyright 2010 FUJITSU LIMITED
2-1. 概 要 1. 規 格 本 文 及 び 関 連 文 書 に 基 づいた 試 験 の 例 アクセシビリティ 達 成 等 級 A 2004 年 版 JISと 異 なる 基 準 よく 使 われる 実 装 に 対 する 試 験 2. アクセシビリティ サポーテッドの 考 慮 は 省 略 3. 用 いるツール A. 富 士 通 WebInspector 5.1 http://jp.fujitsu.com/about/design/ud/assistance/webinspector/ B. Web Accessibility Toolbar XP 用 :http://www.infoaxia.com/tools/wat/index.html Vista 用 ( 英 語 ):http://www.paciellogroup.com/resources/wat-ie-about.html C. カラー コントラスト アナライザー http://www.infoaxia.com/tools/cca/index.html 7/ 26 Copyright 2010 FUJITSU LIMITED
2-2. 達 成 基 準 試 験 例 解 説 1 等 級 A 達 成 基 準 7.2.4.1 ブロックスキップ を 試 験 1. 下 記 のどちらかを 実 装 していれば 適 合 していることとする G1: メインコンテンツへ 直 接 移 動 するリンクを 各 ページの 先 頭 に 追 加 する H69: コンテンツの 各 セクションの 開 始 位 置 に 見 出 し 要 素 を 提 供 する 2. G1: メインコンテンツへ 直 接 移 動 するリンクを 各 ページの 先 頭 に 追 加 する チェック 方 法 : Web Accessibility ToolbarでCSSをオフ ページの 先 頭 にスキップリンク 新 着 情 報 へ ジャンプします が 存 在 するが ブラウザ 上 で 常 に 明 示 されず キーボードフォーカスが 当 たったときも 明 示 されない 3. H69: コンテンツの 各 セクションの 開 始 位 置 に 見 出 し 要 素 を 提 供 する チェック 方 法 Web Accessibility Toolbarでh 要 素 の 付 与 状 況 を 表 示 一 部 セクションにh 要 素 がない 4. G1, H69の 両 方 とも 正 しく 実 装 されていないため 7.2.4.1 ブロックスキッ プ は 不 適 合 8/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 2 情 報 を 伝 える 画 像 がCSSで 指 定 されている 箇 所 : フッター 部 のCopyright 表 示 チェック 方 法 : Web Accessibility ToolbarでCSSをオフ Copyrightの 画 像 が 表 示 されない 達 成 基 準 : 等 級 A 7.1.1.1 非 テキストコンテンツ 該 当 する 実 装 方 法 : F3: 達 成 基 準 1.1.1の 不 適 合 事 例 CSSを 用 いて 重 要 な 情 報 を 伝 える 画 像 を 表 示 させている 9/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 3 画 像 上 のテキストと 代 替 テキストが 不 一 致 箇 所 : A. ヘッダー 部 のメニュー いざというときのために B. 右 メニューの 行 事 イベント チェック 方 法 : Web Accessibility Toolbarでalt 属 性 値 を 表 示 代 替 テキストがA. 災 害 や 天 災 に 合 った 時 のいざというときのために B. イベント 達 成 基 準 : 等 級 A 7.1.1.1 非 テキストコンテンツ 該 当 する 実 装 方 法 : G94: 非 テキストコンテンツに 対 して それと 同 じ 目 的 を 果 たし 同 じ 情 報 を 提 供 する 簡 潔 な 代 替 テキストを 提 供 する 10/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 4 同 じリンク 先 のリンク 画 像 とリンクテキストが 別 々のa 要 素 を 用 い て かつ 隣 接 している 箇 所 : 右 メニューのアイコン 画 像 とテキストの 組 み 合 わせ チェック 方 法 : Web Accessibility Toolbarでリンク 一 覧 を 表 示 同 じリンク 先 のリンク 画 像 とリン クテキストが 別 々のa 要 素 を 用 いて かつ 隣 接 している 達 成 基 準 : 等 級 A 7.1.1.1 非 テキストコンテンツ 該 当 する 実 装 方 法 : H2: 隣 り 合 った 画 像 とテキストリンクを 同 じリンクの 中 に 入 れる 11/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 5 見 た 目 は 見 出 しであるが h 要 素 が 用 いられていない 箇 所 : 中 央 メインコンテンツの 新 着 情 報 トピックス 今 月 のベストショット チェック 方 法 : Web Accessibility Toolbarでh 要 素 の 付 与 状 況 を 表 示 h 要 素 がない 達 成 基 準 : 等 級 A 7.1.3.1 情 報 及 び 関 係 性 該 当 する 実 装 方 法 : H42: h1 要 素 ~h6 要 素 を 用 いて 見 出 しを 特 定 する 12/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 6 見 た 目 はリストであるが ul 要 素 li 要 素 を 用 いていない 箇 所 : 左 メニューの 快 適 生 活 をおくるために 以 下 のリスト チェック 方 法 : Web Accessibility Toolbarでul 要 素 li 要 素 の 付 与 状 況 を 表 示 ul 要 素 li 要 素 がな い 達 成 基 準 : 等 級 A 7.1.3.1 情 報 及 び 関 係 性 該 当 する 実 装 方 法 : H48: リストに ol 要 素 ul 要 素 dl 要 素 を 用 いる 13/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 7 レイアウト 目 的 のテーブルにth 要 素 caption 要 素 summary 属 性 がある 箇 所 : 中 央 メインコンテンツの 日 付 とお 知 らせリンク チェック 方 法 : Web Accessibility Toolbarでtable 要 素 の 状 況 を 表 示 th 要 素 caption 要 素 summary 属 性 がある 達 成 基 準 : 等 級 A 7.1.3.1 情 報 及 び 関 係 性 該 当 する 実 装 方 法 : F46: 達 成 基 準 1.3.1の 不 適 合 事 例 レイアウトテーブルで th 要 素 caption 要 素 又 は 空 ではないsummary 属 性 を 用 いている 14/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 8 見 た 目 上 強 調 している 文 字 に 強 調 を 意 味 する 要 素 がマーク アップされていない 箇 所 : 中 央 メインコンテンツの インフルエンザの 対 処 について チェック 方 法 : ソースをチェック span 要 素 を 用 いて 太 字 にしている 達 成 基 準 : 等 級 A 7.1.3.1 情 報 及 び 関 係 性 該 当 する 実 装 方 法 : H49: セマンティックなマークアップを 用 いて 強 調 又 は 特 別 なテキストをマークアップ する 15/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 9 検 索 ボックスを 特 定 するテキストのラベル title 属 性 がない 箇 所 : ヘッダー 部 の 検 索 ボックス チェック 方 法 : 目 視 テキストのラベルがない ソースをチェック input 要 素 にtitle 属 性 が 使 われていない 達 成 基 準 : 等 級 A 7.1.3.1 情 報 及 び 関 係 性 該 当 する 実 装 方 法 : H44: label 要 素 を 用 いて テキストのラベルとフォーム コントロールを 関 連 付 ける H65: label 要 素 を 用 いることができないとき title 属 性 を 用 いてフォーム コントロー ルを 特 定 する 16/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 10 リンクテキストに 下 線 がなく 色 での 区 別 もコントラスト 不 足 箇 所 : 左 メニューの インフルエンザにならないために 手 洗 い うがいの 方 法 をきちんとしっ ておこう! チェック 方 法 : 目 視 下 線 がない カラー コントラスト アナライザー 他 のテキストとのコントラスト 比 が3:1 以 上 ない 達 成 基 準 : 等 級 A 7.1.4.1 色 の 使 用 該 当 する 実 装 方 法 : G183: リンク 又 はコントロールを 色 だけで 識 別 している 箇 所 の 視 覚 的 な 手 がかりを 補 足 するために 周 囲 にあるテキストとのコントラスト 比 を3:1 以 上 にする 17/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 11 RSSが 何 のRSSか 特 定 できない 箇 所 : 中 央 メインコンテンツのRSSと 直 前 の 見 出 し チェック 方 法 : 目 視 テキストリンクが RSS のみ Web Accessibility Toolbarでalt 属 性 値 を 表 示 RSSマークの 代 替 テキストが RSS のみ Web Accessibility Toolbarでh 要 素 の 付 与 状 況 を 表 示 RSSの 直 前 の 見 出 しにh 要 素 がない 達 成 基 準 : 等 級 A 7.2.4.4 文 脈 におけるリンクの 目 的 該 当 する 実 装 方 法 : H80: リンクテキストとその 直 前 にある 見 出 し 要 素 とを 組 み 合 わせて リンクの 目 的 を 特 定 する 18/ 26 Copyright 2010 FUJITSU LIMITED
2-3. よく 見 られる 不 適 合 実 装 例 解 説 12 Flashを 停 止 できない 箇 所 : 中 央 メインコンテンツのFlash チェック 方 法 : 目 視 Flashの 内 容 が 定 期 的 に 変 更 されるが 一 時 停 止 停 止 又 は 非 表 示 するメ カニズムが 存 在 しない 達 成 基 準 : 等 級 A 7.2.2.2 一 時 停 止 停 止 又 は 非 表 示 該 当 する 実 装 方 法 G4: コンテンツを 一 時 停 止 させて 一 時 停 止 させたところから 再 開 できるようにする 19/ 26 Copyright 2010 FUJITSU LIMITED
3. まとめ 20/ 26 Copyright 2010 FUJITSU LIMITED
3. まとめ ページ 選 定 試 験 方 法 結 果 表 示 の 要 件 数 値 基 準 が 明 確 に 規 格 本 文 と 関 連 文 書 に 基 づいた 試 験 が 必 要 必 須 要 件 が 明 確 になり 2004 年 版 JISや 従 来 の 実 装 方 法 と 異 なる 評 価 ツールが 行 う 自 動 化 試 験 では 不 十 分 試 験 実 施 者 が 目 で 見 て 判 断 する 必 要 がある 21/ 26 Copyright 2010 FUJITSU LIMITED
不 適 合 箇 所 一 覧 (1) 1 3-A 3-B 1, 5 6 4 2 22/ 26 Copyright 2010 FUJITSU LIMITED
不 適 合 箇 所 一 覧 (2) 9 12 7 8 11 11 10 23/ 26 Copyright 2010 FUJITSU LIMITED
メモ 用 にお 使 いください 24/ 26 Copyright 2010 FUJITSU LIMITED
メモ 用 にお 使 いください 25/ 26 Copyright 2010 FUJITSU LIMITED
26/ 26 Copyright 2010 FUJITSU LIMITED