1. 第2回
D2D アクセシビリティ勉強会
JIS X 8341-3:2010 を
一人で読めるようになろう
2014年9月27日

2. 2
アウトライン
1.自己紹介／WAICのご紹介
2.今回の目標
3.JIS X8341-3:2010の概要
4.読み方／使い方
5.具体例で実践（グループ）
6.まとめ

3. 3
自己紹介

4. 4
自己紹介
SAWADA STANDARD DESIGN
澤田望
@SawadaStdDesign
WAIC WG2委員（2011年〜）
キヤノンサイトのデザイン監修／運用（〜2013年）
2014年、岡山で独立

5. 5
WAICとは？

6. 6
WAIC
Webウェブ
Accessibilityアクセシビリティ
Infrastructure基盤
Committee委員会

7. 7
WAIC
JIS X 8341-3:2010の理解普及を促進させ
日本のウェブアクセシビリティを前進させる
基盤造りを目指すボランティア団体

8. 8
WAIC
JISの原案を作った人たち
制作会社で実装してる人たち
ブラウザ／アプリを開発してる人たち
企業サイトを運用してる人たち
関連省庁の担当の人たち
利用する人たち（視覚障害者など）
など、いろんな立場の人たちが参加

9. 9
WAIC
実装する際に必要な情報
試験や評価を行う際に必要な情報
などを公開
↓
http://waic.jp/

10. 10
本題に入る前に 今回の目標

11. 11
目標
前回：
•アクセシビリティって身近なこと
•実例を交えて重要性の再認識
by みるくさん

12. 12
目標
↑
アクセシビリティの大切さは分かった。
でもJIS対応はやっぱり難しそう．．．
今回：ここの克服。
目標：誰かに聞かなくても、自分でJIS対応の方
法について調べられるようになる。

13. 13
JIS X8341-3:2010の
概要を理解しよう

14. 14
概要
JIS X 8341-3:2010 とは
「高齢者・障害者等配慮設計指針−情報通信における機器，
ソフトウェア及びサービス−第3部：ウェブコンテンツ」
ウェブアクセシビリティに関する、
日本工業規格化されたガイドライン（2010年版）

15. 15
概要
ざっと眺めてみよう。
【規格票（冊子）】
日本規格協会Web Store

16. 16
概要
ざっと眺めてみよう。
【PDFでの閲覧】
日本工業標準調査会JIS検索
※ 閲覧環境によっては動作が不安定な場合もあります。
閲覧できない場合は「JIS規格の閲覧等が上手く出来ない場合」を参照のこと。

17. 17
概要
ウェブコンテンツについてのガイドライン
WAICトップページから
> JIS X 8341-3:2010 関連文書
> JIS X 8341-3:2010 解説
> JIS X 8341-3:2010 の概要
> 箇条7 ウェブコンテンツに関する要件

18. 18
概要
ガイドラインの中身は> WCAG 2.0の日本語訳
実装方法は> WCAG 2.0 実装方法集

19. 19
概要
読みにくいですね。

20. 20
概要
JIS（とWAICのサイト）は読みにくい？
•階層が深い
•資料が分散
•文字ばかり
•日本語が難しい
•表現が難解

21. 21
概要
どうして？

22. 22
概要
階層が複雑／資料が分散
JIS X8341-3:2010 ＝WCAG 2.0 ＋JIS独自の要求事項
技術に依存しない記述
（規格票／ガイドライン：更新少ない）
（関連文書：更新多い）

23. 23
概要
文字ばかり
技術に依存しない記述
2004年版にあった具体例：全て削除

24. 24
概要
日本語が難しい／表現が難解
WCAG 2.0（技術非依存）の翻訳
原文に忠実な翻訳を目指すと、
聞き慣れた日本語表現から離れてしまう。
【例】
「時間の経過に伴って変化するメディア」

25. 25
概要
そういうモノだと思って
割り切りましょう。
顔文字：バンザイ

26. 26
概要
JIS X8341-3:2010の構成について

27. 27
概要
JIS X8341-3:2010の構成
WAICトップページから
> JIS X 8341-3:2010 関連文書
> JIS X 8341-3:2010 解説
> JIS X 8341-3:2010 の概要
> JIS X 8341-3:2010 の構成

28. 28
概要
JIS X8341-3:2010の構成
•箇条4ウェブコンテンツのアクセシビリティ達成等級
•箇条5一般的原則
•箇条6ウェブコンテンツの確保・向上に関する要件
•箇条7ウェブコンテンツに関する要件← 実装がらみはココ
•箇条8試験方法

29. 29
概要
箇条4 ウェブコンテンツのアクセシビリティ達成等級
WCAG 2.0のlevel と同一
等級A：最低限← まずはココ
等級AA：目標
等級AAA：たぶん無理

30. 30
概要
箇条5 一般的原則
•知覚可能− 情報の存在を知り、得られなきゃダメ
•操作可能− 操作ができなきゃダメ
•理解可能− 得た情報は理解できなきゃダメ
•頑健性-様々なユーザーエージェントが解釈できなきゃダメ

31. 31
概要
箇条6 ウェブコンテンツの確保・向上に関する要件
開発プロセス全体で実施しなければならないコト

32. 32
概要
箇条6 ウェブコンテンツの確保・向上に関する要件
ウェブアクセシビリティ方針の策定と公開
詳しくは、WAICサイト
> ウェブアクセシビリティ方針策定ガイドライン

33. 33
概要
箇条8 試験方法
詳しくは、WAICサイト
> 試験実施ガイドライン

34. 34
概要
いよいよ
箇条7 ウェブコンテンツに関する要件

35. 35
概要
箇条7 ウェブコンテンツに関する要件
JIS X 8341-3:2010 の箇条7 ＝WCAG 2.0
【例】
•JIS の7.1.1：代替テキストに関するガイドライン
•WCAG 2.0 の1.1：代替テキスト
すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉 などの利用者が必要とする形式に変換できるように、代替テキストを提供する。
（同じ内容）

36. 36
概要
ここから先は
WCAG 2.0 の話です。

37. 37
概要
WCAG 2.0および関連文書（JISを含む）の主な構成

38. 38
概要
原則（JISの箇条5 一般的原則と同じ）
•知覚可能− 情報の存在を知り、得られなきゃダメ
•操作可能− 操作ができなきゃダメ
•理解可能− 得た情報は理解できなきゃダメ
•頑健性-様々なユーザーエージェントが解釈できなきゃダメ

39. 39
概要
ガイドライン
コンテンツ制作者が達成基準を理解し、
より適した実装方法を用いることができるように、
全体像および全般的な目的を提供。
（検証不可能）

40. 40
概要
達成基準
WCAG 2.0 に適合するために要求される個別要件。
ウェブコンテンツ技術に依存しない形で、
検証可能な基準として記述。

41. 41
概要
解説書（Understanding）
理解と実装を助けるためにW3Cが公開している参考文書。
定期的に追加／更新される予定。
•達成基準の意図
•重要な用語
•達成基準の具体的なメリット
•達成基準を満たしている事例
•達成基準を満たすことのできる実装方法
•さらに対応が望まれる実装方法（参考）
•よくある不適合事例

42. 42
概要
実装方法集（Techniques）
WCAG 2.0の達成基準を満たすために用いることができる
具体的なコンテンツ制作方法集。
定期的に追加／更新される予定。
•適用（対象）
•解説
•事例
•参考リソース
•関連する実装方法
•検証

43. 43
概要
実装方法集のカテゴリー
•一般（G）
•HTML / XHTML（H）
•CSS（C）
•クライアントサイド・スクリプト（SCR）
•サーバサイド・スクリプト（SVR）
•SMIL（SMIL）
•プレーンテキスト（T）
•ARIA（ARIA）
•Flash（FLASH）
•Silverlight（SL）
•PDF（PDF）
•不適合事例（F）※一部英文のまま

44. 44
概要
アクセシビリティ・サポーテッド（AS）情報
アクセシビリティ・サポーテッド：
実際に利用者が利用可能であること。
WAICが日本のユーザエージェントで調査した結果、
及び各実装方法が達成基準を満たせるかどうかを
判断するための参考資料。
※支援技術は海外に比べて新しい技術や仕様への対応が遅れ気味。

45. 45
概要
アクセシビリティ・サポーテッド情報の概要
•実装方法／事例に対するテストファイル
•見解（達成可能／達成不可能／要注意）
•対象（テストする対象／事例の特長）
•注意点（結果×なユーザーエージェントなど）
•代替もしくは推奨する方法
•テスト結果の詳細
※全て◯の場合は掲載されないので注意。
※テストファイルは独自実装のチェックなどに利用可能。

46. 46
JIS X8341-3:2010の
読み方／使い方

47. 47
読み方／使い方
WCAG 2.0、解説書、実装方法集、
アクセシビリティ・サポーテッド情報
を実際に使ってみよう。

48. 48
読み方／使い方
よくある（？）シチュエーション
画像に対して代替テキストが必要なことは何とな
く知っているが、実際どんな実装方法の種類があ
るのか知りたい。
これから使おうとしている実装方法が、達成等
級A を達成できるかどうか知りたい。

49. 49
読み方／使い方
まずはこちら
画像に対して代替テキストが必要なことは何とな
く知っているが、実際どんな実装方法の種類があ
るのか知りたい。

50. 50
読み方／使い方
手順（かなり慎重派）
1.代替テキストについて書かれているガイドラインを探す。
2.ガイドラインに対する解説書を読む。
3.ガイドラインに含まれる達成基準を探す。
4.達成基準に対する解説書を読む。
5.達成基準を満たすことのできる実装方法を知る。
6.実装方法のアクセシビリティ・サポーテッド情報を見る。
7.想定される閲覧環境で問題がないか確認する。

51. 51
読み方／使い方
1. 代替テキストについて書かれているガイドラインを探す
WAICトップ
ウェブ・コンテンツ・アク セシビリティ・ガイドライ ン（WCAG）2.0

52. 52
読み方／使い方
1. 代替テキストについて書かれているガイドラインを探す
ウェブ・コンテンツ・アク セシビリティ・ガイドライ ン（WCAG）2.0

53. 53
読み方／使い方
2. ガイドラインに対する解説書を読む。
ウェブ・コンテンツ・アク セシビリティ・ガイドライ ン（WCAG）2.0
WCAG 2.0 解説書

54. 54
読み方／使い方
3. ガイドラインに含まれる達成基準を探す。
※この例の場合は達成基準が一つだけ

55. 55
読み方／使い方
4. 達成基準に対する解説書を読む。
ウェブ・コンテンツ・アク セシビリティ・ガイドライ ン（WCAG）2.0
WCAG 2.0 解説書

56. 56
読み方／使い方
5. 達成基準を満たすことのできる実装方法を知る。
WCAG 2.0 解説書

57. 57
読み方／使い方
6. 実装方法のアクセシビリティ・サポーテッド情報を見る。
WAICトップ
アクセシビリティ・サポーテッド （AS）情報

58. 58
読み方／使い方
6. 実装方法のアクセシビリティ・サポーテッド情報を見る。
アクセシビリティ・サポー テッド（AS）情報
※検証結果が全て◯の場合は
掲載されないので注意。
アクセシビリティ・サポーテッド （AS）情報：H37-1

59. 59
読み方／使い方
7. 想定される閲覧環境で問題がないか確認する。
アクセシビリティ・サポーテッド（AS）情報：H37-1
※Safari, Google Chromeでは画像を非表示にすると代替テキストが表示されないが、
スクリーンリーダーでは問題なく読めているため、実質上は問題なしという判断。

60. 60
読み方／使い方
次はこちら
これから使おうとしている実装方法が、達成等
級A を達成できるかどうか知りたい。

61. 61
読み方／使い方
使おうとしている実装方法：H2
隣り合った画像とテキストリンクを同じリンクの中に入れる
<ahref="https://www.youtube.com/〜">
動画を公開しました。
<imgsrc="img/icon.png"alt="YouTubeへ">
</a>

62. 62
読み方／使い方
手順（やはり慎重派）
1.実装方法集で該当する実装方法を探す。
2.自信がなかったら解説書で達成基準の意図を確認する。
3.実装方法を用いた事例を確認する。
4.実装方法のアクセシビリティ・サポーテッド情報を見る。
5.想定される閲覧環境で問題がないか確認する。

63. 63
読み方／使い方
1. 実装方法集で該当する実装方法を探す。
WAICトップ
WCAG 2.0 実装方法集
WCAG 2.0 実装方法集：H2

64. 64
読み方／使い方
2. 自信がなかったら解説書で達成基準の意図を確認する。
WCAG 2.0 実装方法集：H2
WCAG 2.0 解説書
使おうとしている実装方法H2で満たすこと
ができるのは、想定していた達成基準なのか

65. 65
読み方／使い方
3. 実装方法を用いた事例を確認する。
←
WCAG 2.0 実装方法集：H2
<ahref="https://www.youtube.com/〜">
動画を公開しました。
<imgsrc="img/icon.png"alt="YouTubeへ">
</a>
実装内容としては、H2-2 と同じ。
※AS情報は事例単位なので。

66. 66
読み方／使い方
4. 実装方法のアクセシビリティ・サポーテッド情報を見る。
WAICトップ
アクセシビリティ・サポーテッド （AS）情報

67. 67
読み方／使い方
4. 実装方法のアクセシビリティ・サポーテッド情報を見る。
アクセシビリティ・サポー テッド（AS）情報
※検証結果が全て◯の場合は
掲載されないので注意。
アクセシビリティ・サポーテッド （AS）情報：H2-2

68. 68
読み方／使い方
5. 想定される閲覧環境で問題がないか確認する。
アクセシビリティ・サポーテッド（AS）情報：H2-2
※Safari, Google Chromeでの画像を非表示にすると代替テキストが表示されない件に加え、
PC-Talker XPとNetReader、VoiceOverで問題が認められるため、「要注意」という判断。

69. 69
概要
唐突ですが．．．
第1回目の勉強会で、こんな質問をいただきました。

70. 70
概要
等級A 準拠ページを作るのに
満たすべき達成基準がパッと見て分かる一覧ないの？
その達成基準を満たせる実装方法の一覧はないの？

71. 71
概要
等級
A 準拠ページが満たすべき達成基準一覧
JIS 規格票箇条4の表1
もしくは、WAICサイト
> JIS X 8341-3:2010 試験実施ガイドライン
> JIS X 8341-3:2010 試験実施ガイドライン2012年11月版
> 3.3 達成基準チェックリストの例
> 達成基準チェックリストの例
※ パッと見ての一覧性は低いかもしれません。

72. 72
概要
達成基準を満たせる実装方法の一覧
JIS 規格票に実装方法は掲載なし
WAICサイト
> JIS X 8341-3:2010 試験実施ガイドライン
> JIS X 8341-3:2010 試験実施ガイドライン2012年11月版
> 3.2 実装チェックリストの例
> 実装チェックリストの例2012年11月版
または解説書の「達成基準を満たすことのできる実装方法」

73. 73
概要
【
注意
】
満たすべき達成基準一覧のうち、
使用している実装方法が含まれる
達成基準のみチェックすればOK。
【例】
動画も音声も使っていないページで、
「7.1.2 時間の経過に伴って変化するメディアに関する達成基準」
をチェックする必要はない。

74. 74
実践してみよう

75. 75
実践
何を？
特定の実装方法が達成基準を満たせるのかどうか、
みんなで調べて、みんなで考える。

76. 76
実践
グループでやってみよう
1.状況を理解する。
2.状況にあう実装方法を探す。
3.その実装方法が、達成等級A の達成基準を満たせるかどうか調べる。
4.満たせない／問題がある場合は、代替の手段を考える。

77. 77
実践
1. 状況を理解する。
【状況1 】
テーブルには要約を付けた方がいいと聞いたので、
追加することにした。

78. 78
実践
2.状況にあう実装方法を探す。
該当する実装方法は何？

79. 79
実践
2.状況にあう実装方法を探す。
【正解】
実装方法：H73（の事例１）
table要素のsummary属性を用いて、
データテーブルの概要を提供する。

80. 80
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
では、実装方法：H73（の事例1）が、
達成等級A の達成基準を満たせるかどうか調べてみよう。

81. 81
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
実装方法：H73が関連する達成基準は、
達成基準1.3.1（情報及び関係性）
※説明不足だったためページ追加しました。（2014年10月5日）

82. 82
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
アクセシビリティ・サポーテッド情報（H73-1）
•見解：要注意
•注意点：
PC-Talkerが未対応。単純なデータテーブルにはsummary は必要ないこともある。特に、レイアウトテーブルには
summary属性を使用しないこと。
•代替もしくは推奨する方法：
表の説明がスクリーンリーダーの利用者以外にも有益なもの であれば、表題を使用したり、単純に表の前にテキストを書 いて説明したほうが良い場合もある。

83. 83
実践
4. 満たせない／問題がある場合は、代替の手段を考える。
他に代替できる実装方法がないか、みんなで考えよう。

84. 84
実践
1. 状況を理解する。
【状況2 】
同じリンクラベルが複数あり、
それぞれリンク先が違うのは良くないと思い、
リストを使って説明を追加することにした。

85. 85
実践
2.状況にあう実装方法を探す。
該当する実装方法は何？

86. 86
実践
2.状況にあう実装方法を探す。
こんなイメージ
※テストファイルを見るとイメージしやすい。

87. 87
実践
2.状況にあう実装方法を探す。
【正解】
実装方法：H81（の事例1）
入れ子になったリスト項目にあるリンクテキストと
その親のリスト項目とを組み合わせて、
リンクの目的を特定する。

88. 88
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
では、実装方法：H81（の事例1）が、
達成等級A の達成基準を満たせるかどうか調べてみよう。

89. 89
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
実装方法：H81が関連する達成基準は、
達成基準2.4.4 （文脈におけるリンクの目的）
※説明不足だったためページ追加しました。（2014年10月5日）

90. 90
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
アクセシビリティ・サポーテッド情報（H81-1）
•見解：達成不可能
•代替もしくは推奨する方法：
できるかぎり、「リンクテキストだけ」でリンクの目的が 分かるようにするとよい。
•備考：
親のリスト項目を読み上げるキー操作を提供しているス クリーンリーダーがない。今後の支援技術の機能向上に期待 するが、現時点では利用者が親のリスト項目を文脈の一つと して利用することは困難である。

91. 91
実践
4. 満たせない／問題がある場合は、代替の手段を考える。
他に代替できる実装方法がないか、みんなで考えよう。

92. 92
まとめ

93. 93
まとめ
•JIS X 8341-3:2010 の箇条7 ＝WCAG 2.0
•達成基準だけで理解できないことは解説書を読もう。
•実装方法集に載っていても日本で使えるとは限らない。
•満たすべきは達成基準で、実装方法集は事例集に過ぎない。
•実装方法集にない方法でも達成基準を満たすことは可能。

94. 94
ありがとうございました。