2016年8月9日 サイバーエージェント社内勉強会の資料です。 参考: https://havelog.ayumusato.com/develop/a11y/e720-a11y_informal_study.html

1. アクセシビリティガイドラインの
見方・使い方

2. アクセシビリティガイドライン
とは?

3. WCAG 2.0
3

4. JIS X 8341-3:2016
4

5. WCAG 2.0日本語訳
5

6. ガイドラインには何が書いてあるの?
原則
 4つの原則
ガイドライン
 原則を守るためのガイドライン
達成基準
 ガイドラインを満たすために守るべき基準
6

7. 4つの原則
原則 1: 知覚可能
 利用者に知覚可能な方法で提示できること
原則 2: 操作可能
原則 3: 理解可能
原則 4: 堅牢 (robust)
 現在及び将来のさまざまなUAとの互換性
7

8. ガイドラインの難しさ
8

9. 読んでみてどうでしたか、と聞くと
まれにある感想
 読んだら良くわかった (!)
 みんな読めばいいのにと思った (!?)
よくある感想
 なんだか難しい
 具体的にどうすればいいかわからない
9

10. なぜ難しいのか?
内容が一般化されている
 さまざまな技術に適用できる汎用的な書き方
 特定の技術 (HTML、CSS) に特化した書き方はしない
時代が変化しても問題ないような書き方
 W3C Recommendation や JIS 規格は
それほど頻繁には更新できない
10

11. 一般化の一例
「非テキストコンテンツには、
同等の目的を果たす代替テキストが
提供されている」
 たとえばimg要素にalt属性を指定する話
 しかしimg要素以外のオブジェクトや、
HTML以外の技術にも適用できる書き方にしている
11

12. そこで
関連文書!
難しさはどうしようもないのか?
12

13. 関連文書
WCAG 2.0には関連文書がある
 特定の技術に依存した情報や更新頻度の高い情報は
関連文書としてまとめられている
特に重要なものは以下の2つ
 Understanding WCAG 2.0
 Techniques for WCAG 2.0
13

14. WCAG 2.0 関連文書
14

15. Understanding WCAG 2.0
15

16. WCAG 2.0 解説書
16

17. Understandingはどんな文書?
達成基準の意図や目的などの解説
 何のための基準なのかがわかる
 解説は本体側にはほとんどないので、
こちらを読んで初めてわかることも多い
事例の紹介
関連する達成方法へのリンク
17

18. Techniques for WCAG 2.0
18

19. WCAG 2.0 実装方法集
19

20. Techniques はどんな文書?
各技術ごとに達成基準を満たす方法の具体例
 HTML、CSS、スクリプト、PDFなどに分かれている
 全ての技術に適用できる汎用的な手法もある
 特定技術用の方法があればそれを使うほうがよい
 それが使えない場合に汎用的な方法を使う
20

21. Techniquesの注意点
あくまで例であり、要求事項ではない
 全てを採用しなければならないわけではない
 ここにあるものが全てというわけでもない
コンテンツ側の実装ではない手法もある
 ズーム機能のあるブラウザを使う、など
 2016年版JISでは「実装方法」を「達成方法」とした
21

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

23. ウェブアクセシビリティ基盤委員会 (WAIC)
23

24. アクセシビリティ・サポーテッド（AS）情報
24

25. アクセシビリティ・サポーテッド情報とは?
達成方法のサポート状況をまとめたもの
 Techniquesに書かれている達成方法を、
ブラウザや支援技術が実際にサポートしているか?
 Techniquesに手法が挙げられていても、
支援技術側がまったく対応していなければ、
ユーザーが実際にアクセスすることはできない
25

26. 関連文書の使い方の例
26

27. HTMLのコンテンツで
達成基準 2.4.1 を満たすには
どうすればいいか?
を、調べたい
たとえば……
27

28. WCAG 2.0 の達成基準を確認
28

29. Understanding の解説を読む
29

30. 同一ページの下のほうで達成方法を確認
30

31. 採用できそうな達成方法を確認
G1: メインコンテンツエリアへ直接移動する
リンクを各ページの先頭に追加する
H69: コンテンツの各セクションの開始位置
に見出し要素を提供する
31

32. G1:メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する
32

33. H69: コンテンツの各セクションの開始位置に見出し要素を提供する
33

34. どちらを採用するのか?
対象環境でサポートされているものを採用
 アクセシビリティ・サポーテッド情報を確認して
「達成可能」となっているものはほぼ問題なし
特定技術用の方法があれば優先的に採用
 たとえばHTMLなら、一般的なものよりも
HTML専用の技術のほうが優れていることが多い
上に書かれているほうが比較的お勧め
34

35. ブロックスキップに関するAS情報
35

36. G1の情報が2つあるのは?
WAICのAS情報は、Techniquesの実装例
ごとにテスト結果を出している
G1には2つの例がある:
 常に表示されているスキップリンク
 フォーカスがあたると表示されるスキップリンク
36

37. AS情報G1-1: 要注意
37

38. AS情報G1-2: 要注意
38

39. AS情報H69: 達成可能
39

40. H69のテスト結果 (ビジュアルブラウザ)
40

41. H69のテスト結果 (スクリーンリーダー)
41

42. 参考:JISX8341-3:2010達成基準7.2.4.1を満たす条件に関する意見募集
42

43. まとめ
43

44. まとめ
WCAG 2.0 本体だけではわかりにくい
 これはそういうもの
解説などは関連文書にまとまっている
 関連文書を適宜参照するとGood
 見方を覚えればそんなに難しくないはず
WAICのAS情報も参考になるかも?
44

45. さあ、はじめよう!
45

46. デザイニングWebアクセシビリティ
46

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