2016-09-22（木）にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2016」でのスライドです。

1. 1

2. 2
JIS X 8341-3:2010 から 2016 への
変更点おさらい
Webアクセシビリティチェックの
ポイント
D2Dアクセシビリティ勉強会2016
2016年9月22日

3. 自己紹介
3
1

4. 4
澤田 望

5. 5
中年男性
パーマ
メガネ（老眼）
ガリガリ

6. 6
岡山で独立（2014）
キヤノン （〜2013）
WAIC （2011〜）
Webアクセシビリティ検証／
イラスト制作／
岡山情報ビジネス学院 非常勤講師
などなど
サイトデザイン監修／
Webアクセシビリティ対応
（ウェブアクセシビリティ基盤委員会）
WG2（実装）／WG4（翻訳）委員

7. JIS X 8341-3:2010から
2016への変更点おさらい
7
2

8. 8
大まかに言うと何が変わったの？

9. 9
1. WCAG 2.0とイコールに
2. WCAG 2.0訳語の見直し／変更
3. 部分適合（第三者によるコンテンツ、言語）
2010から2016への主な変更点

10. WCAG 2.0と
イコールに2
10
-1

11. 11
WCAG 2.0（W3C勧告）が、
そのまま国際規格であるISO/IEC規格に
（ISO/IEC 40500:2012）
WCAG 2.0とイコールに

12. 12
ISO/IEC 40500:2012の一致規格
とする方針でJIS X 8341-3を改訂
WCAG 2.0とイコールに

13. 13
結果的にWCAG 2.0とも同じ内容に
WCAG 2.0とイコールに
==

14. 14
ガイドラインの内容：7.X.X.X → X.X.X
構成の変更
格
上
げ

15. 15
用語集：3.X.X.X → 附属書A
構成の変更
格
下
げ

16. 16
ウェブアクセシビリティの確保・向上に関する要件：6.X → 附属書JA
構成の変更
格
下
げ

17. 17
試験方法：8.X → 附属書JB
構成の変更
格
下
げ

18. 18
附属書に格下げされたことによる
影響もあります。

19. 19
ウェブアクセシビリティの確保・向上に関する要件：6.X → 附属書JA
「要件」が「推奨事項」に
例：ウェブアクセシビリティ方針の策定も「推奨」に
附属書に格下げされたことによる影響

20. 20
試験方法：8.X → 附属書JB
「要件」が「推奨事項」に
例：ウェブページ一式（サイト全体）単位の試験も「推奨」に
※供給者適合宣言はウェブページ単位のみ
ただし「準拠」「一部準拠」などは今まで通り
WAIC作成の対応度表記ガイドラインに則れば可能
附属書に格下げされたことによる影響

21. 21
ウェブページ一式を代表するウェブページ
と
ランダムに選択したウェブページ
とを
併せて選択する場合
を新たに追加
附属書に格下げされたことによる影響（ではないが）

22. WCAG 2.0訳語
の見直し／変更
2
22
-2

23. 23
各達成基準の要求内容に
変更はありません！

24. 24
WCAG 2.0日本語訳
JIS X 8341-3:2016のガイドライン本文
ガイドラインの内容は今まで通り
＝

25. 25
原文（英語）に対する訳語が
（少しだけ）読み易くなりました。

26. 26
• WCAG 2.0の原文（英語）にできる限り忠実な日本語
• 意訳しすぎていたり、言葉を補いすぎていたりしていた
点を修正
• 原文（英語）の難解さもあえて尊重
翻訳見直しの基本方針

27. WCAG 2.0原文 2010年版 2016年版
Conformance Level アクセシビリティ達成等級 適合レベル
Level A 等級A レベルA
Techniques 実装方法 達成方法
Robust 頑健性 堅牢性
failures 不適合事例 失敗例
Audio Description 音声ガイド 音声解説
changes of context 状況の変化 コンテキストの変化
time-based media
時間の経過に伴って変化する
メディア
時間依存メディア
27
訳語変更の例

28. WCAG 2.0原文 2010年版 2016年版
image of text 画像化された文字 文字画像
No Keyboard Trap フォーカス移動 キーボードトラップなし
On Focus オンフォーカス フォーカス時
On Input
ユーザインタフェースコンポー
ネントによる状況の変化
入力時
Interruptions 中断 割り込み
presentation 表現 提示
if CJK
日本語,中国語及び韓国語の
場合
全角文字の場合
Focus Visible
視覚的に認識可能なフォーカ
ス
フォーカスの可視化
28
訳語変更の例

29. WCAG 2.0原文 2010年版 2016年版
pure decoration 装飾だけを目的にしている 純粋な装飾
Name, Role, Value
プログラムが解釈可能な識別
名，役割及び設定可能な値
名前（name），役割（role）及び
値（value）
(Prerecorded) 収録済みの〜 （収録済）
(Live) ライブの〜 （ライブ）
(No Exception) 例外のない〜 （例外なし）
Error Prevention (Legal,
Financial, Data)
法的義務,金銭的取引,データ
変更及び回答送信のエラー回
避に関する達成基準
エラー回避 (法的、金融、デー
タ)
Timing Adjustable 調整可能な制限時間 タイミング調整可能
No Timing 制限時間なし タイミング非依存
29
訳語変更の例

30. WCAG 2.0原文 2010年版 2016年版
operate 動作 挙動
Change on Request
利用者の要求による状況の変
化に関する達成基準
要求による変化
disorient まごつかせてしまう 混乱させる
right frequency range ある周波数 特定の頻度
programmatically determinable プログラムが解釈可能な プログラムによる解釈が可能な
text alternative 代替テキスト テキストによる代替
media alternative to text テキストの代替メディア メディアによるテキストの代替
ambiguous to users in general
一般的にみて利用者にとって
あいまい(曖昧)
ほとんどの利用者にとって曖昧
30
訳語変更の例

31. 31
文法的な修正
日本語の言い回しの変更
意味的な変更はナシ
訳語変更のその他

32. 部分適合
（第三者によるコンテンツ、言語）
2
32
-3

33. 33
部分適合って？

34. 34
ページ全体としては適合できないが、
特定の部分を除けば適合できる状態
部分適合とは

35. 35
一部に不適合なコンテンツを含んだページの例

36. 36
不適合なコンテンツを除いた部分で「部分適合」している例

37. 37
ここから先は大きく変更されたので
注意が必要！！

38. 38
1.第三者によるコンテンツ
2.言語
部分適合についての追加／変更点

39. 39
第三者によるコンテンツって？

40. 40
ページ制作者が制御できないコンテンツ
•メール／ブログ／利用者のコメント追加
•複数のコンテンツ提供者がいるポータル
•ニュースサイト／動的な広告 などなど
第三者によるコンテンツとは

41. 41
JIS X 8341-3:2010
ヤバい部分は試験対象から除外できた
イケてる部分のみで「適合できる」
第三者によるコンテンツについて取り扱いを変更

42. 42
制御できない広告を除いた部分で「部分適合」している例（2010年）

43. 43
制御できない広告は試験対象外にして、ページ全体で「適合」している例（2010年）

44. 44
JIS X 8341-3:2016
ヤバい部分も試験対象から除外できない
第三者によるコンテンツを含めて
「適合できない」
第三者によるコンテンツについて取り扱いを変更

45. 45
制御できない広告を除いた部分で「部分適合」している例（2016年）

46. 46
制御できない広告も試験対象になるため、ページ全体では「不適合」になる例（2016年）

47. 47
次は「言語」について。

48. 48
言語がどうしたの？

49. 49
「言語」という表現だけでは
非常にわかりにくいので。

50. 50
特定の言語における
アクセシビリティ・サポート
のこと
【アクセシビリティ・サポーテッド】
特定の利用シーンで、支援技術とユーザーエージェントで
その達成方法を使用できる状態になっていること
「言語」とは

51. 51
JIS X 8341-3:2016で新設
ページ上で使われている全言語の
アクセシビリティ・サポートが
不十分な場合は「適合できない」
「言語」とは

52. 52
例：英語と日本語が使用されているページ
ページ内の米英語では適合しているが、日本語では不適合になっているイメージ

53. 53
例：英語と日本語が使用されているページ
米英語部分は「部分適合」と言える

54. 54
例：英語と日本語が使用されているページ
日本語部分が不適合なため、ページ全体でも不適合

55. Webアクセシビリティ
チェックのポイント
55
3

56. 56
Webアクセシビリティ・チェック？

57. 57
誰が行うの？ 専門の業者？

58. 58
誰でもできる！

59. 59
Webアクセシビリティ・チェックの
松 竹 梅

60. Webアクセシビリティ・チェックの
松
JIS X 8341-3:2016 試験の実施
60

61. 61
JIS X 8341-3:2016のレベルAやAAに
準拠しているかどうか、
厳密にチェックする場合
附属書JB（参考）試験方法
JIS X 8341-3:2016 試験の実施

62. 62
附属書JB（参考）試験方法
決められた範囲のウェブページに対し、
決められた方法で試験を実施し、
決められた方法で試験結果を公表
JIS X 8341-3:2016 試験の実施

63. 63http://waic.jp/docs/jis2016/test-guidelines/201604/

64. 64
1.ウェブページ単位での試験
2.ウェブページ一式単位での試験
a)全てのウェブページを選択する場合
b)ランダムに選択する場合
c)ウェブページ一式を代表するウェブページを選択する場合
d)ウェブページ一式を代表するウェブページとランダムに選
択したウェブページとを併せて選択する場合
決められた範囲

65. 65
1.AC（Automated Check）
試験対象を機械的に発見し、機械的に判断
2.AF（Automated Find）
試験対象を機械的に発見し、人が判断
3.HC（Human Check）
試験対象を人が発見し、人が判断
決められた方法で試験

66. 66
1.実装チェックリスト
例：http://waic.jp/docs/jis2010/test-
guidelines/201211/icl-index.html
2016年版は現在作成中（WAIC）
2.達成基準チェックリスト
例：http://waic.jp/docs/jis2016/test-
guidelines/201604/gcl_example.html
決められた方法で公表

67. 67
お気軽に出来る感じじゃないかも。

68. Webアクセシビリティ・チェックの
梅
Easy Checks
- A First Review of Web Accessibility -
68

69. 69
https://www.w3.org/WAI/eval/preliminary

70. 70
1. ページタイトル
2. 画像の代替テキスト
3. 見出し
4. 色のコントラスト
5. 文字サイズの拡大
6. キーボード操作／フォーカスの可視化
7. フォーム・コントロール
8. エラーメッセージ
9. 音声／動画に対する代替コンテンツ
10. 文書構造
Easy Checks - A First Review of Web Accessibility

71. 71
ちょっと物足りないかも．．．

72. Webアクセシビリティ・チェックの
竹
松と梅のいいとこ取りチェック
72

73. 73
厳密に試験の実施や結果の公表は
しないけど、現状認識のために
調べておきたいときはある、はず？

74. 74
基本自由
任意の範囲のウェブページに対し、
任意の方法でチェックを実施し、
チェック結果は公表する必要なし
松と梅のいいとこ取りチェック

75. 75
松と梅のいいとこ取りチェック
1. ウェブページ単位でのチェック
（大規模なチェックは想定していない）
2. チェック方法はAC／AF／HC
（試験実施ガイドラインに則る）
3. 実装チェックリスト
（試験実施ガイドラインに則る）

76. 76
今日は竹で。

77. 77
http://bit.ly/2d1ktBu
実装チェックリスト

78. 78
今回の実装チェックリスト
1. レベルAとレベルAA用の2枚
2. 試験方法を既に指定済み
（ACを優先：変更してもOK）
3. 該当しないことが明らかな項目を
マスク済み
（黄色のセルのみ記入すればOK）
※達成方法のタイトルは2010年版のまま

79. 79
レベルＡＡ？ やってなくない？?

80. 80
D2Dで初の取組みです。（先に言え

81. 81
レベルAAのチェック内容
1.2.4 キャプション（ライブ）
1.2.5 音声解説（収録済）
1.4.3 コントラスト（最低限）
1.4.4 テキストのサイズ変更
1.4.5 文字画像
2.4.5 複数の手段
2.4.6 見出し及びラベル
2.4.7 フォーカスの可視化
3.1.2 一部分の言語
3.2.3 一貫したナビゲーション
3.2.4 一貫した識別性
3.3.3 エラー修正の提案
3.3.4 エラー回避（法的、金融、データ）

82. 82
1.2.4 キャプション (ライブ) :
同期したメディアに含まれているすべてのライブの音
声コンテンツに対してキャプションが提供されている
1.2.5 音声解説 (収録済) :
同期したメディアに含まれているすべての収録済の映
像コンテンツに対して、音声解説が提供されている
「メディアによるテキストの代替」の除外なし
レベルAAのポイント

83. 83
1.4.3 コントラスト (最低限) :
テキスト及び文字画像の視覚的提示に、少なくとも
4.5:1のコントラスト比がある。ただし、次の場合は除く
•大きな文字: 少なくとも 3:1 のコントラスト比
•付随的
•ロゴタイプ
コントラスト比の具体的な数値
レベルAAのポイント

84. 84
1.4.4 テキストのサイズ変更:
キャプション及び文字画像を除き、テキストは、コン
テンツ又は機能を損なうことなく、支援技術なしで
200％ までサイズ変更できる。
文字サイズ拡大の具体的な数値
レベルAAのポイント

85. 85
1.4.5 文字画像:
使用している技術で意図した視覚的提示が可能である
場合、文字画像ではなくテキストが情報伝達に用いら
れている。ただし、次に挙げる場合を除く
•カスタマイズ可能
•必要不可欠
まだ「なるべく」というレベル
レベルAAのポイント

86. 86
2.4.5 複数の手段:
ウェブページ一式の中で、あるウェブページを見つけ
る複数の手段が利用できる。ただし、ウェブページが
一連のプロセスの中の1ステップ又は結果である場合は
除く。
ナビゲーションにも代替手段が必要
レベルAAのポイント

87. 87
2.4.6 見出し及びラベル:
見出し及びラベルは、主題又は目的を説明している。
コンテンツに対する説明
※レベル Aではページタイトルで主題又は目的を説明
（2.4.2）→ページに対する説明
レベルAAのポイント

88. 88
2.4.7 フォーカスの可視化:
キーボード操作が可能なあらゆるユーザインタフェー
スには、フォーカスインジケータが見える操作モード
がある。
フォーカスインジケータを消さないで
レベルAAのポイント

89. 89
3.1.2 一部分の言語:
コンテンツの一節、又は語句それぞれの自然言語がど
の言語であるか、プログラムによる解釈が可能である。
ただし、固有名詞、技術用語、言語が不明な語句、及
びすぐ前後にあるテキストの言語の一部になっている
単語又は語句は除く。
コンテンツの言語指定
※レベル Aではページの言語指定（3.1.1）
レベルAAのポイント

90. 90
3.2.3 一貫したナビゲーション:
ウェブページ一式の中にある複数のウェブページ上で繰り返され
ているナビゲーションのメカニズムは、繰り返されるたびに 相対
的に同じ順序で出現する。ただし、利用者が変更した場合は除く。
3.2.4 一貫した識別性:
ウェブページ一式の中で同じ機能を有するコンポーネントは、
一貫して識別できる。
一貫性に対する要求
レベルAAのポイント

91. 91
3.3.3 エラー修正の提案:
入力エラーが自動的に検出され、修正方法を提案できる場合、そ
の提案が利用者に提示される。ただし、セキュリティ又はコンテ
ンツの目的を損なう場合は除く。
何がNGで、どうすればOKになるかを提示
レベルAAのポイント

92. 92
3.3.4 エラー回避 (法的、金融、データ):
利用者にとって法律行為もしくは金融取引が生じる、利用者が制
御可能なデータストレージシステム上のデータを変更もしくは削
除する、又は利用者が試験の解答を送信するウェブページでは、
次に挙げる事項のうち、少なくとも一つを満たしている:
取消／チェック／確認
重要な取り引きには確認画面が必要
レベルAAのポイント

93. 93
では、「間違いさがし」について
みるくさんからの説明です！

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