ウェブアクセシビリティセミナー
「JIS X 8341-3:2010を活用したウェブアクセシビリティの普及を目指して」

JIS X 8341-3:2010の概要
2010年9月22日
渡辺昌洋
NTTサイバーソリューション研究所
Copyright 2010, Nippon Telegraph and Telephone Corporation

自己紹介
 渡辺昌洋 （わたなべ まさひろ）

 日本電信電話株式会社

サイバーソリューション
研究所 ヒューマンインタラクションプロジェクト

 2008年度

日本規格協会 情報技術標準化研
究センタ （INSTAC）改正原案策定WG委員
 ウェブアクセシビリティ基盤委員会（WAIC）委員
Copyright 2010, Nippon Telegraph and Telephone Corporation2

講演の前に 今日の講演では、JIS X 8341-3の概要をわかりやすくお話ししたいと思っています。多くの例を交えてお話しますので、誤解を生じる可能性があります。
 内容については、JIS X 8341-3:2010を必ずご確認ください。

Copyright 2010, Nippon Telegraph and Telephone Corporation

目次
 JIS X 8341-3とウェブアクセシビリティ JIS 改正の方針
 JISの特徴
 JISの関連文書

ウェブアクセシビリティ基盤委員会（WAIC）の活動
 JISに基づくウェブコンテンツ作成の流れ
 まとめ

Copyright 2010, Nippon Telegraph and Telephone Corporation

4

JIS X 8341-3とは
 高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ
 2008年度、日本規格協会

情報技術標準化
研究センタ (INSTAC) で改正原案を作成

 2010年8月20日公示

Copyright 2010, Nippon Telegraph and Telephone Corporation5ウェブのしくみ

主にテキストデータ

ウェブ

ブラウザ

サーバ

支援技術

ウェブ

ウェブ

制作者

利用者

Copyright 2010, Nippon Telegraph and Telephone Corporation

6テキストデータの七変化 テキストデータはいろいろな表現に姿を変えることができる
ウェブサーバウェブブラウザ
光の丘祭のお知らせ点字ディスプレイ
Copyright 2010, Nippon Telegraph and Telephone Corporation

音声ブラウザ7ウェブコンテンツの例

 今日はお祭りの日です。

Copyright 2010, Nippon Telegraph and Telephone Corporation

8

ウェブコンテンツの例
目立つようにしたい 今日はお祭りの日です。
 今日はゴミ出しの日です。

タグ付け 今日はお祭りの日です。
 明日はお祭りの日です。

Copyright 2010, Nippon Telegraph and Telephone Corporation

9

ウェブコンテンツの例（ソース） 今日は<赤>お祭り</赤>の日です。
 <赤>今日は</赤>お祭りの日です。
（表示） 今日はお祭りの日です。
 今日はお祭りの日です。

Copyright 2010, Nippon Telegraph and Telephone Corporation

10

ウェブコンテンツの例（表示） 今日はお祭りの日です。
 今日はお祭りの日です。
 文字は赤くなった。でも、音声や点字に変換したときに、赤い文字の意味は何だろう？
 そこで、見栄え（赤）をタグ付けするのではなく、意味的（セマンティック）なタグ付けをするべきである。
Copyright 2010, Nippon Telegraph and Telephone Corporation11

ウェブコンテンツの例（ソース） 今日は<強調>お祭り</強調>の日です。
 <強調>今日は</強調>お祭りの日です。
（表示） 今日はお祭りの日です。
 今日はお祭りの日です。

Copyright 2010, Nippon Telegraph and Telephone Corporation

ブラウザや支援技術が意味を解釈して表示してくれる12ウェブコンテンツの例（表示１：対応なし）
 今日はお祭りの日です。
 今日はお祭りの日です。
（表示２ ：赤字） 今日はお祭りの日です。
 今日はお祭りの日です。

Copyright 2010, Nippon Telegraph and Telephone Corporation

ただし、ブラウザや支援技術によっては対応していないこともある

13ウェブコンテンツの例（まとめ）
1. テキストデータが主
2. 意味的（セマンティック）にタグ付けする
3. ブラウザや支援技術が意味を解釈して表示してくれる
4. ただし、ブラウザや支援技術によっては対応していないこともある
Copyright 2010, Nippon Telegraph and Telephone Corporation

14

ウェブアクセシビリティとは
 JIS X 8341-1:2010の「アクセシビリティ」の定義

様々な能力をもつ最も幅広い層の人々に対する製品，サービス，環境又は施設（のインタラクティブシステム）のユーザビリティ
 ユーザビリティの定義

特定のコンテキストにおいて，特定のユーザによって，ある製品が，特定の目標を達成するために用いられる際の，効果・効率・ユーザの満足度の度合い（ISO9241-11 “Ergonomic requirements for office workwith visual display terminals. Part 11: Guidance onUsability”（JIS Z 8521））
Copyright 2010, Nippon Telegraph and Telephone Corporation15

JIS X 8341シリーズISO/IEC

基本ガイド

ガイド71
JIS Z 8071
JIS X 8341

セクタ指針

第５部

事務機器

第４部

電気通信機器

第３部

ウェブコンテンツ

第２部

Copyright 2010, Nippon Telegraph and Telephone Corporation

情報処理装置

個別規格

第1部：共通指針16JISとWCAG 1999年

W3C（World Wide Web Consortium）
がWCAG（Web Content AccessibilityGuidelines） 1.0を勧告
WCAG 1.0は英語圏の内容が主であった

 2004年

JIS X 8341-3公示
 2008年 WCAG 2.0勧告
WCAG 2.0は漢字文化圏で顕著なアクセシビリティ問題も含まれている 2010年

JIS X 8341-3改正

Copyright 2010, Nippon Telegraph and Telephone Corporation

17

JIS改正の方針
1.

WCAG 2.0を取り込む
WCAGは事実上の標準であるのに対し、JISは日本工業規格である。
書式も違うが、内容的に同じになるように作成した。
これにより、世界で共通の規格を使えるようになった。

JIS X 8341-1との整合性を重視
3. JIS X 8341:2004との連続性を重視
2.

Copyright 2010, Nippon Telegraph and Telephone Corporation

18

WCAG 2.0の特徴
 試験可能（testable）であること

具体的な達成基準を規定
 技術非依存であること

具体的な実装方法は記載していない
W3Cでは多くの技術情報を用意している 目指すレベルを設定できる

A、AA、AAAの3種類のレベルがあり、Aは最低限、AAAは対応できる場合もある
Copyright 2010, Nippon Telegraph and Telephone Corporation19

JISの特徴
 試験可能（testable）であること

具体的な達成基準を規定
 技術非依存であること

具体的な実装方法は記載していない
W3Cの技術情報が参考になるという記述がある
 ウェブコンテンツのアクセシビリティ達成等級

により、目指すレベルを設定できる
A、AA、AAAの3種類の達成等級があり、Aは最低限、AAAは対応できる場合もある
Copyright 2010, Nippon Telegraph and Telephone Corporation

20

WCAG技術情報の参照
 JISの内容には、WCAG 技術情報に関する記述がある（例） 6.2.1 要件の定義 b)使用するウェブコンテンツ技術及び実装方法 注記2 「…W3Cが公開するUnderstanding WCAG 2.0及びTechniques for WCAG2.0が参考になる。」
 WCAG技術情報の日本語訳、日本に合わせた技術情報が必要→ ウェブアクセシビリティ基盤委員会（WAIC）が整備を進めている
Copyright 2010, Nippon Telegraph and Telephone Corporation

21

情報通信アクセス協議会
ウェブアクセシビリティ基盤委員会（WAIC）


活動目的：JIS X 8341-3:2010の理解と普及を促進
JIS改正版を実装する際に必要な情報を作成・公開
JIS改正版に沿った試験や適合性評価を行う際に必要な情報を作成・公開
JIS改正版だけでは解決しない・わからないこと（ギャップ、グレーゾーン）を埋める（狭くする）ために、委員会の調査・議論を元に，ガイドラインや資料を作成・公開
中立性，公共性，権威がある組織として，JIS X 8341-3に基づいて日本のウェブアクセシビリティを前進させる基盤造り

委員構成
改正原案作成メンバー、関連企業、関連省庁、利用者

Copyright 2010, Nippon Telegraph and Telephone Corporation

JISおよびWCAGの関連文書
 ウェブアクセシビリティ基盤委員会（WAIC）のサイトにて公開中


http://www.ciaj.or.jp/access/web/index.html（１） JIS X 8341-3:2010関連文書（２） WCAG 2.0 関連翻訳文書

Copyright 2010, Nippon Telegraph and Telephone Corporation

23

（１）JIS X 8341-3:2010関連文書
 JIS X 8341-3:2010 解説 アクセシビリティ・サポーテッド（AS）情報 AS情報を作成する際に必要となるテストファイル
 JIS X 8341-3:2010 試験実施ガイドライン
 ウェブコンテンツのJIS X 8341-3:2010 対応
度表記ガイドライン

Copyright 2010, Nippon Telegraph and Telephone Corporation

24

（２）WCAG 2.0 関連翻訳文書
 ウェブ・コンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0
 WCAG 2.0 解説書（Understanding WCAG2.0日本語訳）
 WCAG 2.0 実装方法集（等級A、AA）（Techniques for WCAG 2.0日本語訳）
等級AAAの日本語訳も今後公開予定
Copyright 2010, Nippon Telegraph and Telephone Corporation

25

（２）WCAG 2.0 関連文書
主な技術情報原則

 WCAG 2.0
 Understanding

ガイドラインWCAG 2.0（WCAG 2.0解説書）

達成基準

 Techniques for

WCAG 2.0
達成基準を満たすことのできる実装方法及び参考にすべき実装方法
Copyright 2010, Nippon Telegraph and Telephone Corporation（WCAG 2.0実装方法集）
26

WCAG 2.0 関連文書の関係
 原則
 ガイドライン 達成基準 WCAG 2.0
規格本文 Understanding WCAG 2.0

どの実装方法を使うべきかな
どが解説されている


達成基準を満たす
ことのできる実装方
法及び参考にすべき実装方法

 Techniques for WCAG 2.0

実装方法の詳細が解説されている
Copyright 2010, Nippon Telegraph and Telephone Corporation27

Understanding WCAG 2.0について
 JIS X 8341-3を理解するために必要
 原文は、W3Cのサイトにて公開中

http://www.w3.org/TR/UNDERSTANDINGWCAG20/ 日本語版（WCAG 2.0解説書）はウェブアクセシ

ビリティ基盤委員会(WAIC)のサイトにて公開中
http://www.ciaj.or.jp/access/web/index.html

Copyright 2010, Nippon Telegraph and Telephone Corporation28

Understanding WCAG 2.0の内容
WCAG 2.0 解説書のイントロダクション
ガイドライン 1.1 [代替テキスト] を理解する
達成基準 1.1.1 [非テキストコンテンツ] を理解する…
WCAG 2.0 への適合を理解する

1.
2.
3.

4.

附録




附録 A 他の文書からの WCAG 2.0 の参照方法
附録 B. ウェブ技術の使用法のアクセシビリティ・サポートを文書化する
附録 C メタデータを理解する
附録 D リファレンス

Copyright 2010, Nippon Telegraph and Telephone Corporation29

1. WCAG 2.0 解説書のイントロダクション


イントロダクション
アクセシビリティの4つの原則を理解する
1.
2.
3.
4.



知覚可能
操作可能
理解可能
堅牢性

ガイダンスのレイヤー
1.
2.
3.

ガイドライン
達成基準
達成基準を満たすことのできる実装方法及び参考にす
べき実装方法Copyright 2010, Nippon Telegraph and Telephone Corporation30

2. ガイドラインを理解する① タイトル② ガイドライン③ 意図④ 参考にすべき実装方法

Copyright 2010, Nippon Telegraph and Telephone Corporation

31

3. 達成基準を理解する① タイトル② 達成基準③ 意図④ 具体的なメリット⑤ 事例⑥ 関連リソース⑦ 実装方法及び不適合事例⑦-1 達成基準を満たすことのできる実装方法⑦-2 さらに対応が望まれる実装方法（参考）⑦-3 よくある不適合事例⑧ 重要な用語
Copyright 2010, Nippon Telegraph and Telephone Corporation

32

4. WCAG 2.0 への適合を理解する

適合とは何を意味するのか
適合要件を理解する適合要件1： 適合レベル
適合要件2： ページ全体
適合要件3： 一連のプロセス








「適合宣言」を理解する「適合レベル」を理解する「アクセシビリティ・サポート」を理解する「プログラムが解釈」を理解する「適合している代替バージョン」を理解する「ウェブページ」を理解する「代替テキスト」を理解する

Copyright 2010, Nippon Telegraph and Telephone Corporation33

WCAG 2.0 ガイダンスのレイヤー
原則
ガイドライン
達成基準
達成基準を満たすことのできる実装方法及び参考にすべき実装方法
Copyright 2010, Nippon Telegraph and Telephone Corporation34

WCAG 2.0 ガイダンスのレイヤー
WCAG 2.0
原則1
ガイドライン1.2

ガイドライン1.1

達成基準1.1.1

達成基準1.2.1

達成基準…

Understanding WCAG 2.0
実装方法G158
Techniques for WCAG 2.0
Copyright 2010, Nippon Telegraph and Telephone Corporation

実装方法G15935

（１）JIS X 8341-3:2010関連文書
 WCAGではなく、JISの技術情報

JIS X 8341-3:2010 解説
アクセシビリティ・サポーテッド（AS）情報
AS情報を作成する際に必要となるテストファイル
JIS X 8341-3:2010 試験実施ガイドライン
ウェブコンテンツのJIS X 8341-3:2010 対応度表記ガイドライン

Copyright 2010, Nippon Telegraph and Telephone Corporation36

JISに基づくウェブコンテンツ作成の流れ（箇条6～8）WCAG 解説書
WCAG実装方法集
テストファイル
①
目標とする
②
③
達成等級
（達成基準）
を決定する

依存する
ウェブコンテンツ技術を決定する

使用できる実装方法を確認し、使用する実装方法を決定する

JIS X 8341-3④ ウェブコンテンツを実装する

具体的な試験方法⑤ 達成基準を満たしているか実装チェックリスト
ひな型（適合性評価）試験を行う⑥

Copyright 2010, Nippon Telegraph and Telephone Corporation

アクセシビリティ
サポーテッド情報

試験実施
ガイドライン
対応度表記

試験結果を表示する

ガイドライン
37

JISに基づくウェブコンテンツ作成の流れ① 目標とする達成等級（達成基準）を決定する
達成等級を決めると対応する達成基準が決まる
JIS X 8341-3の箇条4に一覧表がある
その前に、JIS解説書、WCAG解説書は必読

6.2設計 a)適用する達成基準
制作するコンテンツに適用する達成基準を、目標とするアクセシビリティ達成等級に含まれる達成基準から選択しなければならない
Copyright 2010, Nippon Telegraph and Telephone Corporation38

JISに基づくウェブコンテンツ作成の流れ② 依存するウェブコンテンツ技術を決定する
達成基準を満たすために必要な実装方法を
WCAG 2.0解説書で調べる

6.2設計 b)使用するウェブコンテンツ技術及び実装方法
ウェブコンテンツに使用する技術、及び各達成基準に適合するための実装方法を明確にしなければならない
Copyright 2010, Nippon Telegraph and Telephone Corporation

39JISに基づくウェブコンテンツ作成の流れ③ 使用できる実装方法を確認し、使用する実装方法を決定する
用いるウェブコンテンツ技術がアクセシビリティ・サポーテッド（AS）な使用方法であるか確認する
 WAICで公開しているAS情報が参考になる

WCAG実装方法集から、詳しい実装方法を調べる
6.2設計 b)使用するウェブコンテンツ技術及び実装方法
使用するウェブコンテンツ技術及び実装方法が実際に利用者が利用可能であることを確認しなければならない
Copyright 2010, Nippon Telegraph and Telephone Corporation40

ウェブコンテンツの例（表示１：対応なし）
 今日はお祭りの日です。
 今日はお祭りの日です。
（表示２ ：赤字） 今日はお祭りの日です。
 今日はお祭りの日です。

Copyright 2010, Nippon Telegraph and Telephone Corporation

ただし、ブラウザや支援技術によっては対応していないこともある

対応していない作り方をしても利用できない
41

アクセシビリティ・サポーテッド情報とは アクセシビリティをサポートしているウェブコンテンツ技術をリスト化した文書
 「附属書Aこの規格を満たすウェブコンテンツ技術及びその実装方法の選び方」を参照

Copyright 2010, Nippon Telegraph and Telephone Corporation

42

JISに基づくウェブコンテンツ作成の流れ④ ウェブコンテンツを実装する
WCAG実装方法集に従って、ウェブコンテンツを実装する

6.3制作・開発
箇条7の対応する達成基準を満たすように、ウェブコンテンツを制作・開発しなければならない
Copyright 2010, Nippon Telegraph and Telephone Corporation

43

JISに基づくウェブコンテンツ作成の流れ⑤ 達成基準を満たしているか（適合性評価）試
験を行う
試験実施ガイドラインを参照し、試験を行う

6.4検証
対応する達成等級の達成基準が満たされているか確認しなければならない
8 試験方法Copyright 2010, Nippon Telegraph and Telephone Corporation

44

JISに基づくウェブコンテンツ作成の流れ⑥ 試験結果を表示する
表示=公開ではない
 調達では、納品時に試験結果を添付すること
 ウェブでは公開すること試験実施ガイドラインの実装チェックリスト等を参考にし、試験結果を表示する

8.3 試験結果の表示
Copyright 2010, Nippon Telegraph and Telephone Corporation45対応度表記ガイドライン
 ウェブコンテンツのJIS X 8341-3:2010 対応度表記

ガイドライン JIS X8341への対応度合いを表記する場合に用いるガイドライン
 JIS X 8341-3:2010に適合
 JIS X 8341-3:2010に準拠
 JIS X 8341-3:2010に配慮

Copyright 2010, Nippon Telegraph and Telephone Corporation

まとめ JIS X 8341-3は、ウェブアクセシビリティの品質を計る「ものさし」です。
 ウェブアクセシビリティの普及のために、JISX 8341-3をご活用ください。

Copyright 2010, Nippon Telegraph and Telephone Corporation47