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. 試験実施の準備
 ① アクセシビリティ達成等級（A / AA / AAA）の設定
 ② 達成基準チェックリストの作成
 ③ 実装方法チェックリストの作成• 依存する技術（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. 達成基準試験例 解説
 ① 等級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/ 26Copyright 2010 FUJITSU LIMITED2-3. よく見られる不適合実装例 解説
 ② 情報を伝える画像が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. よく見られる不適合実装例 解説
 ③ 画像上のテキストと代替テキストが不一致 箇所：• A. ヘッダー部のメニュー「いざというときのために」• B. 右メニューの「行事・イベント」

 チェック方法：• Web Accessibility Toolbarでalt属性値を表示 Î 代替テキストがA. 「災害や天災に合った時のいざというときのために 」、B. 「イベント」

 達成基準：• 等級A 「7.1.1.1 非テキストコンテンツ」

 該当する実装方法：• G94: 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する、簡潔な代替テキストを提供する

10/ 26

Copyright 2010 FUJITSU LIMITED2-3. よく見られる不適合実装例 解説
 ④ 同じリンク先のリンク画像とリンクテキストが別々のa要素を用いて、かつ隣接している 箇所：• 右メニューのアイコン画像とテキストの組み合わせ

 チェック方法：• Web Accessibility Toolbarでリンク一覧を表示 Î 同じリンク先のリンク画像とリンクテキストが別々のa要素を用いて、かつ隣接している

 達成基準：• 等級A 「7.1.1.1 非テキストコンテンツ」

 該当する実装方法：• H2: 隣り合った画像とテキストリンクを同じリンクの中に入れる

11/ 26

Copyright 2010 FUJITSU LIMITED2-3. よく見られる不適合実装例 解説
 ⑤ 見た目は見出しであるが、h要素が用いられていない 箇所：• 中央メインコンテンツの「新着情報」「トピックス」「今月のベストショット」

 チェック方法：• Web Accessibility Toolbarでh要素の付与状況を表示 Î h要素がない

 達成基準：• 等級A 「7.1.3.1 情報及び関係性」

 該当する実装方法：• H42: h1要素～h6要素を用いて、見出しを特定する

12/ 26

Copyright 2010 FUJITSU LIMITED2-3. よく見られる不適合実装例 解説
 ⑥ 見た目はリストであるが、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. よく見られる不適合実装例 解説 ⑦ レイアウト目的のテーブルに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. よく見られる不適合実装例 解説
 ⑧ 見た目上強調している文字に、強調を意味する要素がマークアップされていない 箇所：• 中央メインコンテンツの「インフルエンザの対処について」

 チェック方法：• ソースをチェック Î span要素を用いて太字にしている 達成基準：• 等級A 「7.1.3.1 情報及び関係性」

 該当する実装方法：• H49: セマンティックなマークアップを用いて、強調又は特別なテキストをマークアップする

15/ 26

Copyright 2010 FUJITSU LIMITED2-3. よく見られる不適合実装例 解説
 ⑨ 検索ボックスを特定するテキストのラベル、title属性がない
 箇所：• ヘッダー部の検索ボックス

 チェック方法：• 目視 Î テキストのラベルがない• ソースをチェック Î input要素にtitle属性が使われていない

 達成基準：• 等級A 「7.1.3.1 情報及び関係性」

 該当する実装方法：• H44: label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける• H65: label要素を用いることができないとき、title属性を用いてフォーム・コントロー
ルを特定する16/ 26

Copyright 2010 FUJITSU LIMITED2-3. よく見られる不適合実装例 解説
 ⑩ リンクテキストに下線がなく、色での区別もコントラスト不足
 箇所：• 左メニューの「インフルエンザにならないために手洗い・うがいの方法をきちんとしっておこう！」

 チェック方法：• 目視 Î 下線がない• カラー・コントラスト・アナライザー Î 他のテキストとのコントラスト比が3:1以上ない 達成基準：• 等級A 「7.1.4.1 色の使用」

 該当する実装方法：• G183: リンク又はコントロールを色だけで識別している箇所の視覚的な手がかりを補足するために、周囲にあるテキストとのコントラスト比を3:1以上にする

17/ 26

Copyright 2010 FUJITSU LIMITED2-3. よく見られる不適合実装例 解説
 ⑪ 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. よく見られる不適合実装例 解説
 ⑫ 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）
①③-A

③-B

①, ⑤⑥④②
22/ 26

Copyright 2010 FUJITSU LIMITED

不適合箇所一覧 （2）
⑨⑫⑧⑦
⑪⑪⑩

23/ 26

Copyright 2010 FUJITSU LIMITEDメモ用にお使いください

24/ 26

Copyright 2010 FUJITSU LIMITEDメモ用にお使いください

25/ 26

Copyright 2010 FUJITSU LIMITED26/ 26

Copyright 2010 FUJITSU LIMITED